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

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

2019.07.05

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

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

【ARアプリ5選】「拡張現実」をスマホで気軽に体験!遂にここまで来た欧米のARアプリ

2019.06.21

【ARアプリ5選】「拡張現実」をスマホで気軽に体験!遂にここまで来た欧米のARアプリ

■あらゆるインテリアのシミュレーションができる「The Houzz」家具はもちろん、電気スタンドなどや小物・壁紙などの内装アイテムを組み合わせ、インテリアやレイアウトを変更してバーチャル上でルームデザインがお試しできるアプリ「The Ho...

【WordPress】意外と見落としがちな4つのセキュリティ対策~上級編~

2019.05.10

【WordPress】意外と見落としがちな4つのセキュリティ対策~上級編~

■〈Check1〉「wp-config.php」へのアクセスは制御する 「wp-config.php」はWordPressのシステムファイルの1つで非常に重要なファイルになります。セキュリティーレベルも非常に高いファイルの一つでもあり、...

2019.04.26

【WordPress】 意外と見落としがちな4つのセキュリティ対策~初級編~

■〈Check1〉WordPress本体の「バージョン」は常に最新状態か?WordPressのセキュリティに関する中でも、一番最初に見た方がよいのがWordPress本体そのものの「バージョン」です。WordPressには脆弱性の対策...

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

2019.04.15

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

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

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

2019.03.25

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

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