ぬるま湯デザイン塾 – 公式ブログ

みなさんこんにちは！
東京から平原です＾＾
サイト制作や日々の検索に欠かせないのが
Google Chromeですよね。

そんなGoogle Chromeには拡張機能、
機能を追加・強化できるプログラムがあり、
ブラウザの使い勝手を自分好みにカスタマイズすることができます。
(追加方法は一番最後に！)

この拡張機能。

実績のある人ほど使っています

特にサイト制作はブラウザで作るので相性バッチリ。

実際にEBCでは、講師陣が実務で使っている情報を
「講師ブログ」という形で共有しているのですが、
今回、Chrome拡張機能を扱った回から
実際にEBC講師陣も使っている
拡張機能を紹介していきます。

今回はサイト制作で便利なもの。
ここにフォーカスして レッツゴー！

 

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

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

メニューはこんな感じです。
使用頻度が高いのが「ブラウザーの外のカラーを選択する」です。

下図のように抽出したい部分が大きくなるのでとてもわかりやすいです。
カラーピッカーパネルで近似色の選択、選択した色の履歴で複数の色をまとめて確認することができるので
デザインする時にそこから確認しています。

  

 

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

色を取得する部分では同じになる機能も一部ありますが、
ColorZillaが「色取得ツール」ならCSS Peeperは「デザイン構造解析ツール」となります。

解析できるのは、色のほか、フォント、フォントサイズ、余白、コンテナや要素の大きさななども確認することができます。

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

 

オススメ拡張機能③ モバイル電話シミュレーター

Webサイトの見え方を複数のデバイスごとに確認できるシンプルな拡張機能です。
複数のデバイスの仮想環境をすぐに用意してくれます。

iPhoneをはじめ、GalaxyのAndroidスマホ、タブレットなどの各モデルのサイズも確認することが出来ます。
まずは、レスポンシブの確認したいページを表示します。
ツールバーからモバイルシミュレーターを起動すると、すぐに表示されます。
あとは、一覧からデバイスを選択するだけ。

「PRO」は有料ですが、それ以外は無料で利用できます。
無料版でも結構利用できるので、無料版でも十分です。

 

動画撮影もできる

モバイルシュミレーターでは動画撮影もできるので、
インスタなどに投稿する際にも便利だと思います。

一覧から一番下にある動画を選択するだけです。
マイクはPROでしか使えませんが、動きは録画できます。

 

検証ツールも使いますが、ご紹介した「モバイル電話シミュレーター」も色んなデバイスで見れるのでおすすめです。

 

オススメ拡張機能④「Image downloader – Imageye」

表示しているページ内全ての画像を一括で、抽出してダウンロードが可能なChrome拡張機能です。
例えばSNSやWebサイトを閲覧中、「これあとで使いたい」と思った画像が複数あったときに、
一括で画像をダウンロードできるので便利です。

画像をダウンロードしたいページを開き、アイコンをクリックするだけで ページ内の全ての画像を抽出して一覧表示していきます。
ファイル形式や解像度、ファイルサイズなどが表示されていて分かりやすくなっています。

画像をダウンロードするときは、ダウンロードしたい画像を個別に選択、
もしくは「Select all」で全ての画像を選択が可能です。

選択をするとダウンロードボタンが表示されますので、
クリックするとダウンロードが可能です。 Deselect allで選択を解除できます。

便利ツールですが、著作権には注意しましょう。

 

平原おすすめツール「Metaピクセルヘルパー」

最後におまけで、平原おすすめツールです。
Meta広告を運用したり、設定する方におすすめのツールです。
 Meta広告の運用に必要なMetaピクセルが設定できているかどうか。視覚的に表示してくれます。

正しく設定されていないと、正しく効果を測定できないので、確実な作業を支援してくれるツールです。  

 

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

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

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

▼ ▼ ▼

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

 

他にもまだまだたくさんの拡張機能があります。

制作を効率化してくれるもの、
さらにハイクオリティにしてくれるもの、
確認作業を楽にしてくれるもの。

色々ありますが、
ぜひ自分でたくさん調べて、使えそうなものを取り入れてみてくださいね！
今日は一旦この辺で！！

ちゃお！