YU-Create-Lab for Web Creator Webクリエイター・Webデザイナー向けの優クリ-Lab

2018.11.08

ググるだけじゃない!Chromeの「便利な拡張機能」〈前編:Webデザイナー編〉

ググるだけじゃない!Chromeの「便利な拡張機能」〈前編:Webデザイナー編〉

インターネットをする時、ブラウザは何を使っていますか?一昔前までは、Microsoftが出しているエクスプローラー(通称IE)を利用している人が多かったのではないでしょうか。しかし、今ではシェア率が変わりGoogleが提供している「Chrome」の方が上位になっています。Chromeには「拡張機能」があり、実はWeb系の仕事に役立つ機能も含まれています。前編の今回は、Webデザインをするのに便利な機能をご紹介します。

Chromeの拡張機能とは?

そもそも、Chromeを多くの人が使うようになったのはこの拡張機能、つまりブラウザ上で使える様々な便利機能があるからといっても過言ではありません。しかもこれには、一般的に使う以外にも、WebデザイナーやWebディレクターに役に立つ機能がたくさんあります。

ただ、この拡張機能は数が多く、実際にどれを使うと良いのか迷うという方も多いかと思います。今回はWebデザインの中でも効率よく使えるものをピックアップしました。
 

拡張機能を利用しよう

Chromeの拡張機能とは、Googleが提供しているブラウザのカスタマイズのようなもので、アプリなどをパソコンにインストールをする必要もなく簡単に利用することができます。

「Chromeウェブストア」を開き、検索窓で入れたい拡張機能を検索。「Chromeに追加」を押し、確認画面で再度「追加」をクリックするだけで、Chromeのツールバーにアイコンとして表示され使えます。






 

デザインを参考にするときに役立つ「Page Ruler」


まずはじめに紹介するのは「Page Ruler」です。

文字通り定規の役割をしてくれるもので、Webページ内にあるバナーや画像などの高さと幅を測ることができる拡張機能です。
他社サイトを参考にして打ち合わせをした時や、サイトのレイアウトや比率を考える時などに役立ちます。また、参考サイトのバナーサイズ、画像の大きさなどをすぐに知ることができるので、いろいろなサイズのバナーを作らなければならない時も時間短縮につながります。
 

気に入ったRGBやHEX値を取得してパレットに保存「Colorzilla」


こちらはWebサイトに表示されている色のカラーコードを取得できる機能です。

サイトなどで使いたい色を見つけた場合、通常は自分でカラーコードを調整したり調べたりして作ることになりますが、微妙に色合いが違ってしまうことがあります。しかしこちらの機能を使うとそれもなく、使いたい色にカーソルを合わせればその色のカラーコードが表示されるという便利な機能です。

さらに「Colorzilla」では取得した色を使ってグラデーションを作ったり、作ったものをCSSのコードにすることもできます。
いろいろなサイトを見ていて「この色いいな」と思うものがあれば簡単に「Colorzilla」へ保存できるので迷わずやっておきましょう。サイト作成の際にカラーイメージを考えるのにも役立ちます。
 

配色が気になる場合は「Palette Creator」


続いてこちらもカラーにまつわる便利機能「Palette for Chrome」です。こちらは、Webサイト上の画像から配色パターンを取得してくれる拡張機能です。

サイトデザインではクライアントのイメージはもちろん、そのサイトの見やすさ、見る人に与えるイメージを考えながら配色を施す必要があります。イメージに近い写真を見つけた時や好きな写真などの全体的な配色を知るために役立つ拡張機能です。
 

レスポンシブデザインに必須「Responsive Web Design Tester」


最後に紹介するのは「レスポンシブデザイン」をする時に非常に役に立つ「Responsive Web Design Tester」です。

こちらはデザイナーだけではなく、サイトを確認するWebディレクターもよく使う機能で、Webブラウザに写っているサイトを簡単にレスポンシブデザインに変えることができます。
これを使えば、サイトのレイアウトや様々なデバイスで異なる画面サイズに合わせて確認できるので、ブラウザ画面のサイトイメージとの違いや構成を考えるなど、レスポンシブデザインの際には「必須」のツールです。ぜひ機能として入れておきましょう。
 

まとめ

いかがでしたでしょうか。
今回ご紹介した機能は本当にごく一部のもので、それ以外にもChromeにはいろいろな拡張機能があります。時間がある時に探しカスタマイズするのもよいでしょう。自分専用にカスタマイズされたものを使うのはちょっとした特別感もあり、仕事が楽しくなるかもしれません。

前編では、Webデザイナー向けにご紹介しましたが、後編ではWebディレクターが使うと便利な機能を紹介していきたいと思います。

Recommend この記事を読んだ人はこんな記事も読んでいます

【資格】フリーランスWebクリエイターが資格取得するメリット~後編~

2019.09.13

【資格】フリーランスWebクリエイターが資格取得するメリット~後編~

■前編はこちら【資格】フリーランスのWebクリエイターが資格取得するメリット~前編~■資格取得前にキャリアアップの形成計画フリーランスが「資格取得」を最大限に有効活用する上で、まずやらなければならないことがキャリアアップやフリーランス...

【資格】フリーランスWebクリエイターが資格取得するメリット~前編~

2019.09.09

【資格】フリーランスWebクリエイターが資格取得するメリット~前編~

■後編はこちら【資格】フリーランスWebクリエイターが資格取得するメリット~後編~■フリーランスと「資格」の関係「会社」という枠から離れたフリーランス活動で大切なことのひとつに 「現状に満足しない」ことが挙げられます。「資格取得」と何の...

【Adobe XD活用】Webディレクターに使ってほしい分かりやすいイメージ共有法 ~前編~

2019.08.30

【Adobe XD活用】Webディレクターに使ってほしい分かりやすいイメージ共有法 ~前編~

■Webディレクターの仕事効率アップ!! 覚えて損はない『Adobe XD』現在、Webディレクターをやっている方でもし「Adobe XD」を知らないなら、是非、この機会に覚えておくとよいでしょう。Adobe XDを使いこなせるだけで、作り...

【業務効率化】Webディレクター必見のGoogle検索新機能!

2019.08.15

【業務効率化】Webディレクター必見のGoogle検索新機能!

■Googleの新機能「アクティビティカード」とは?「アクティビティカード」とは、ユーザーが検索した過去のトピックスに再度アクセスしやすいように、一連の検索履歴をまとめて参照できる機能です。例えば、「旅行・ハワイ・シュノーケリング」と...

【ケアレスミス防止】「モデリング&TOTE」でミスを減らす方法!

2019.08.01

【ケアレスミス防止】「モデリング&TOTE」でミスを減らす方法!

■ミスを繰り返すのは、実は…単なる自己暗示だった!?「あのWebデザイナー、センスがあっていつもいいデザインを上げてくれるんだけど、なぜか細かいミスが多いんだよね。性格が大雑把?なのかな…」このセリフにドキ...

【トラブル回避】「返信が苦痛…!?」連絡ツール利用時のトラブルとその解決法

2019.07.05

【トラブル回避】「返信が苦痛…!?」連絡ツール利用時のトラブルとその解決法

■電話に出たら最後…。緊急事案かどうかは後から判断すべし!!会社員の場合、業務時間外なら仕事の連絡が入ってきても対応する義務はありません。反面、「してはいけない」という禁止もなく、勤務時間外に電話やメッセージに対応する程...