コラム

こんにちは。ホネ吉です。花粉症に悩まされる季節になり、喉と鼻がつらい日々を過ごしています。
今日はWEB開発者におすすめしたい機能をご紹介します。

PerfectPixel

ブラウザに画像を重ね、移動・透過させたりできるCrome拡張機能です。
制作したWFやカンプをブラウザに重ねることでコーディングの際の要素抜けや大きさ調整などが容易になります。

Page Ruler

ウェブページ上で「ものさし」が使えるようになります。。
要素のサイズを測ることができ、上記のPerfectPixelと併用することで
カンプデータ通りのコーディングができるようになります。

Clear Cache

キャッシュを1クリックで削除できる拡張機能です。
ブログや自社のホームページの更新時、CSSが反映されない時などに1クリックでキャッシュを削除できるので
デザイナーの方以外にもおすすめの拡張機能です。

HTML5 Outliner

HTML5文書のアウトラインを簡単に確認できる拡張機能です。
コーディング中に階層構造を確認し、正確な階層構造にすることでサイトのアウトラインを正確にクローラーに伝えることができます。

HTMLエラーチェッカー

HTMLの文法ミスをチェックできる機能です。
シンプルで使いやすく、文法ミスがどこのどのタグで起こっているのかを伝えてくれます。

Full Page Screen Capture

1クリックでウェブページ全体をキャプチャできるChrome拡張機能です。
保存時のファイル形式はPNG画像で、WEBページ全体のスクリーンショットをとるだけなら非常に使いやすい機能です。

The QR Code Extension

見ているサイトのURLを1クリックでQRコード化できます。
レスポンシブデザインのコーディング中に実際にスマホでチェックしたいときにコードを読み取るだけでURLを取得できるので大変便利。

META SEO Inspector

ブラウザに表示されるページを見ただけでは確認できないタイトルやディスクリプションなどを一目で確認できるようになります。
ディスクリプションの文字数など修正したほうがいい箇所を赤字のエラーメッセージで表示してくれるのでSEO対策をする際におすすめのツールです。

Blisk

こちらは拡張機能ではなくパソコン表示/モバイル表示を同時にチェックできるブラウザです。
少し前のバージョンアップで有料化され、無料版では30分しか利用できなくなりましたが、
パソコン・モバイルのスクロールも同期しており、表示画面を切り替えたりする必要がないため
WEB開発者に大変おすすめのブラウザです。

まとめ

WEBデザイナーにおすすめの機能を紹介させていただきました。
Chrome拡張機能は便利なものが多くたくさん追加してしまいがちですがあまりに多くの拡張機能を入れるとGoogle Chromeが重くなってしまうので注意が必要です。