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 この記事を読んだ人はこんな記事も読んでいます

【WordPress】初心者コーダーも身に着けたい!セキュリティ対策時の「WordPress」プラグイン

2019.04.15

【WordPress】初心者コーダーも身に着けたい!セキュリティ対策時の「WordPress」プラグイン

■おすすめ「プラグイン1」国産プラグインで安心して使える「SiteGuard WP Plugin」 WordPressのセキュリティ対策プラグインとしては定番の「SiteGuard WP Plugin」。日本のセキュリティ会社「JP-Secur...

【スプレッドシート】制作現場で起こる共有トラブル!ありがちなパターンと解消法をマスターしよう

2019.03.25

【スプレッドシート】制作現場で起こる共有トラブル!ありがちなパターンと解消法をマスターしよう

■「スプレッドシート」とは? エクセルと同じ感覚で使うと起こるトラブルスプレッドシートとは、Googleが無料で提供している表計算ソフトです。スプレッドシートにおいて最大のメリットは、クラウド上で複数の人と共有できること。同時作業がで...

Webディレクターが「Webマーケティング知識を知るべき理由」と「その方法のポイント」とは?

2019.03.15

Webディレクターが「Webマーケティング知識を知るべき理由」と「その方法のポイント」とは?

■Webマーケティングは何を意味しているかWebマーケティングを簡単に言うと、Webでモノが売れる流れを作る活動のことです。あるいは、ユーザーにアクション(購買)を起こさせる仕組み作りとも言えます。具体的な例としては、SEO、リスティ...

【Webディレクター必見!!】低予算、要求だけはハイクラス…。 そんな「モンスタークライアント」を制し、仕事を回す術

2019.02.22

【Webディレクター必見!!】低予算、要求だけはハイクラス…。 そんな「モンスタークライアント」を制し、仕事を回す術

■「コスト意識」のないクライアントとは付き合わないまず、確認すべきこととしてクライアント窓口である担当者のコスト意識。何に幾らかかるかまったく理解せず、「予算はこれで、やってほしいことはこれ」と、予算と内容を別立てで提案してくるクライ...

【SEO】フリーランスのWebライターで生きていくために知っておきたい「SEO知識」

2019.01.29

【SEO】フリーランスのWebライターで生きていくために知っておきたい「SEO知識」

■SEOの原理とは?SEOとは皆さんもご存知の通り、Search Engine Optimization(サーチ・エンジン・オプティマイゼーション)の頭文字を取ったもので、日本語では「検索エンジン最適化」と表現されます。「Yahoo!」や...

ググるだけじゃない!Chromeの「便利な拡張機能」〈後編:Webディレクター編〉

2018.12.13

ググるだけじゃない!Chromeの「便利な拡張機能」〈後編:Webディレクター編〉

1.参考サイトやパーツ取りキャプチャにも便利な「FireShot」まず、はじめに紹介するのは「FireShot」。クライアントの要件に似た参考サイトを探したい時にとても便利です。しかもWebサイトのキャプチャを簡単に取れる機能も持って...