鈴木推奨GoogleChrome拡張機能「ColorZilla」「CSS Peaper」

こんばんは！鈴木です。すっかり春ですね！
3月にあった「辛口」デザイン添削会にスマホのデザインリングで参加したのですが、
音声が途切れ途切れになっていることに気づきました。
お聞き苦しかったと思います。大変申し訳ありませんでした。

今回は私が普段使用しているGoogleChrome拡張機能を2つご紹介します。

GoogleChrome拡張機能とは？
Chromeブラウザにあとから機能を追加・強化できる小さなアドオンプログラムのことです。
ブラウザに新しい機能を追加することによって利便性を向上させることができます。
スマホでいう「アプリの追加」に近いイメージで、必要な機能だけ後付けできます。

拡張機能のインストール方法

① Chromeウェブストアを開く
② 「拡張機能一覧から」か「名称を検索」で入れたい機能を探す
③ 機能の個別ページから「Chromeに追加」ボタンをクリック

これで自分のGoogleアカウントの中に機能が入ります。

▼
▼
▼

インストールした後はChromeブラウザの右上に表示されます。
拡張機能一覧からピンマークを押すことによってアドレスバーの右側に常時出すことができます。

オススメ拡張機能①「ColorZilla」

定番ツールですが、Webページ上の色（カラーコード）を取得できる拡張機能です。
主に参考として探した既存サイトの色の調査やTTM時の色の抽出に便利です。
その他、画像内の色取得や微妙なトーン差の統一もできるので、視覚的に大体同じ色ではなく、正確な色として確認できます。

メニューはこんな感じです。使用頻度が高いのが「ブラウザーの外のカラーを選択する」です。
下図のように抽出したい部分が大きくなるのでとてもわかりやすいです。
カラーピッカーパネルで近似色の選択、選択した色の履歴で複数の色をまとめて確認することができるのでデザインする時にそこから確認しています。

わざわざデータとして保存し、PhotoShopに挿入してから色を抽出するという手間が省けるので頻回に使用しています。

オススメ拡張機能②「CSS Peaper」

色を取得する部分では同じになる機能も一部ありますが、
ColorZillaが「色取得ツール」ならCSS Peeperは「デザイン構造解析ツール」となります。
解析できるのは、色のほか、フォント、フォントサイズ、余白、コンテナや要素の大きさななども確認することができます。

大体こんなもんだろう、と制作時、感覚的な部分で行う私にとって詰めの部分で数値を検証ではなく視覚的に見つけられるのでとても勉強になります。

いかがでしたか？拡張機能は他にもたくさんあって私も全ての機能を知らないのでもしかしたらもっと便利な機能があるかもしれません！
皆さんも使用してみてこれいいなというものがあれば是非お教えください！