未経験からWebデザイナーを目指している方は、コーディングの勉強も含めて模写コーディングにチャレンジする方も多いかと思います。
模写するサイトで使われている配色やフォントなどを知りたい時がありますよね。
そんな時にGoogle Chromeの拡張機能を使うことで調べることができます。
僕もWebデザインを勉強していた時によく使用していた拡張機能があるので紹介していきます。
おすすめのGoogle Chrome拡張機能
- ColorPick Eyedropper
- WhatFont
- GoFullPage
- Page Ruler Redux
- Image Downloader
調べると他にも似たようなものが出てくるんですけど、とりあえずこれだけインストールしておけば大丈夫です。
Google Chrome拡張機能は、Chromeウェブストアで検索すると色々と出てきます。
ColorPick Eyedropper
この拡張機能はサイトで使われている色を調べることができます。
Chromeの検証ツールでcssを見てカラーコードを確認することもできますが、さくっと調べたい時に役立ちます。
カーソルを合わせると簡単にカラーコードを調べることができます。
WhatFont
この拡張機能はフォントの種類やフォントの太さ・サイズ・カラーコードを調べることができます
Webデザインのギャラリーサイトなんかを眺めている時に気になるフォントがあればすぐに調べることができるので便利です。
気になるテキストをクリックすると詳細を見ることができます。
GoFullPage
この拡張機能はサイトの全体のスクリーンショットをすることできます。
ポートフォリオの作品掲載ページで架空サイトの全体イメージなどをキャプチャするのに役立ちます。
気になるサイトがあれば、キャプチャしてデザインの勉強として収集するのも楽しいかもしれないですね。
こんな感じで上から下まで1ページまるごとの画像を保存することができます。
Page Ruler Redux
この拡張機能は要素などのコンテンツ幅を調べることができます。
コンテンツ間の幅も調べることができます。
Image Downloader
この拡張機能はサイトで使われている画像を一括でダウンロードすることができます。
模写コーディングをしている時に画像を再現するのに役立ちます。
チェックをつけた画像を一括でダウンロードすることができます。
まとめ
Google Chromeの拡張機能には便利なものが沢山あります。
他にも調べると色々な使い方が出来るものもあるので、自分なりにカスタマイズしておくとWeb制作が捗ると思います。
今回は未経験Webデザイナーに役立つGoogle Chrome拡張機能を紹介しました。
コメント