Web制作を効率化する5つの機能ツールを一挙紹介

　画像変換や特殊文字の処理、SEOの確認。Web制作の現場では、地味だけど手間のかかる作業がたくさんあります。
　そんな『ちょっとした手間』を解消するために、5つの基本機能をミコトホドで公開しました。

セレクタ？プロパティ？～基本の言葉を知りたいなら～ mikotohodo.com 基本用語集 (Glossary)
知ろう、初めの専門用語

① HTML特殊文字変換ツール

　HTMLの中に含まれる & < > ” ‘ これらの記号をボタン1つ押すだけで特殊文字に変換します。
　記事の中でコードを見せる際にHTMLが実行されてしまう環境の場合は、HTML特殊文字変換ツールが役立ちます。

　変換パターンを３つに分けております。

コピー機能も備わっているので、変換した後にコピーをしてそのままコードを持ち帰ることができます。

　画像をWebPに変換することで軽量化させ、Webサイトの表示速度を上げる事ができます。
　高い圧縮率にも拘らず画質を維持したまま、ファイルサイズをJPEGより25〜34%軽量化できます。

　Googleの検索評価指標である「ページの読み込み速度」が改善されるため、SEO（検索エンジン最適化）に有利に働きます。
　従来のJPGやPNGを選択してボタンをクリックするだけで、画質を保ったまま一瞬で軽量化できます。

　目視では気づきにくい全角スペースなどの不要な文字を、このツールが瞬時に洗い出し、ワンクリックで最適な状態へ修正します。
　CSSを追加した際にデザインが反映しないなどの、パッと見では分からない場合にこのツールを使って全角が紛れていないか確認しましょう。

　ブラウザの標準機能を活用したカラーピッカーです。
　中央の円をクリックするとカラーパレットが出現します。色を選択すると、その色の十六進数とRGB形式の正確なコードが瞬時に表示されます。
　また、色を決めた順に履歴が５つ表示されます。

　SEOスニペットプレビューツールを使って検索結果のシミュレーションができます。

　SEOタイトルやメタディスクリプション、せっかく考えて設定しても「検索結果で文字が切れてしまっていた…」なんてことはありませんか？このツールは、入力したテキストが実際の検索結果（スニペット）でどのように表示されるかを、公開前にブラウザ上でリアルに再現します。

　「スマホで見たら大事なところが切れてた！」というミスをゼロに。公開ボタンを押す前の「最終検品」に欠かせないステップです。

　今回ご紹介した5つのツールは、それぞれが特定の作業をスムーズに進めるために開発した特化型のツールです。

　一発ですべては解決しませんが、画像変換が必要な時、テキストのミスを防ぎたい時、検索結果の見え方を確認したい時。それぞれのシーンで、皆さんの作業を確実にサポートします。

　ちょっとした手間を解消するこれらの専用ツールを、ぜひ皆さんの制作フローの「パーツ」として取り入れてみてください。

　これからも、現場のニーズに合わせた単機能ツールの追加・改善を続けていく予定です。