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

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

2018.12.13

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

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

【後編】現役Webコーダーが気を付けているコーディングのコツと基本

2018.08.31

【後編】現役Webコーダーが気を付けているコーディングのコツと基本

■”HTML”を記述する際に頭に入れておきたいことコーディングする際にHTMLで気をつけておきたいことは主に3つあります。1. HTMLのバージョンに合った文法を書くこと。2. 内部SEOを意識して、”...

【前編】現役Webコーダーが気を付けているコーディングのコツと基本

2018.08.17

【前編】現役Webコーダーが気を付けているコーディングのコツと基本

■下準備として必須なコーディング環境はどうしている?Webコーダーがコーディングの際に使用している環境は主に2つあります。1. Adobe Dreamweaver2. Webサイトのローカル環境構築のためのMAMP(Mac)やXAMPP(W...

【あるある話】Webディレクターの必須スキルはコミュ力!クライアントと制作スタッフとの上手な付き合い方

2018.07.27

【あるある話】Webディレクターの必須スキルはコミュ力!クライアントと制作スタッフとの上手な付き合い方

〈Case1〉システムのクセがすごい「制作スタッフといちばん揉めるのが、他社が作ったシステムの改修業務。 “他人がつくったサイトなんて直したくない”っていうプライドというか、そういう気持ち? を持っているコーダー...

【現役Webディレクターの本音シリーズ】Webライターで生きていくためのSNS活用術

2018.05.11

【現役Webディレクターの本音シリーズ】Webライターで生きていくためのSNS活用術

■SNSをセルフブランディングに使おう筆者に「Webライターになりたい」と相談に来る人には、まず「SNSは何を使っていますか?もし利用したことがないなら、アカウントをとってください」と言っています。SNSには、様々なものがありますが、...

新米ディレクター必見!オウンドメディアを「優秀な営業マン」にするためのPDCAサイクル

2017.09.28

新米ディレクター必見!オウンドメディアを「優秀な営業マン」にするためのPDCAサイクル

■徹底したPDCAサイクル「いいWebサイトとはどういうことなのか?」私は、Webサイトというのは「優秀な営業マン」であるべきだと思っています。つまり、お客様を見つけて、会社に利益をもたらしてくれるWebサイトが「いいWebサイト」な...