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ディレクターの本音シリーズ:最終回】稼げるWebライターになるには?有名になるのが先か、ライターをしながら有名になる方が得か

2018.06.01

【現役Webディレクターの本音シリーズ:最終回】稼げるWebライターになるには?有名になるのが先か、ライターをしながら有名になる方が得か

■なぜ「Webライターの単価は安い」と言われるのか例えばWebライター募集のクラウドソーシングマッチングサイトを覗くと、文字単価計算で「5000字以上」「一文字0,1円~」なんていう募集もザラです。また、実際に多くのWebメディアに寄...

【扶養内で働く】インタビュー編No.2~扶養内で働いている女性デザイナーたちに聞きました

2016.10.12

【扶養内で働く】インタビュー編No.2~扶養内で働いている女性デザイナーたちに聞きました

■今の働き方を選んだ理由―扶養内で働いている理由はなんでしょう?Bさん:夫は正社員なので、子育てや家事のほとんどを私が担当しています。また、子どもがまだ5歳で手がかかるので、両立するのに無理のない範囲で働こうと思い、仕事は週3回だけ働...

Webクリエイターインタビュー 第4回:座談会~雇用形態でどう違う?~

2016.09.29

Webクリエイターインタビュー 第4回:座談会~雇用形態でどう違う?~

【参加者】Aさん 35歳 男性 エンジニア・プロジェクトマネージャー 大学卒業後、IT関連会社に就職。3年後に転職し現在に至る。正社員。Bさん 30歳 女性 Webプロデューサー 大学卒業後、IT関連会社に就職。2年後に退職し、派遣社...

Webクリエイターインタビュー 第3回:フリーランスディレクターはママさん

2016.09.15

Webクリエイターインタビュー 第3回:フリーランスディレクターはママさん

――1日のお仕事のスケジュールを教えてください。打ち合わせなどで外出する日もありますが、それは全体の10%ほど。作業のほとんどを在宅で行っています。上の娘2人は幼稚園とその延長保育、一番下の娘は家で見ながら、打ち合わせの時だけ母や一時...

Webクリエイターインタビュー 第2回:なぜ派遣という働き方を選んだのか?

2016.09.08

Webクリエイターインタビュー 第2回:なぜ派遣という働き方を選んだのか?

――学生時代からクリエイターを目指していらっしゃったんですか?もともとは、編集者志望でした。大学卒業後に求人雑誌を作っている出版社に就職して、2年ほど求人広告の製作に携わりました。その間に出版全体を見ることができて、広告制作のデザイン...

【扶養内で働く】インタビュー編~扶養内で働いている女性デザイナーたちに聞きました

2016.09.06

【扶養内で働く】インタビュー編~扶養内で働いている女性デザイナーたちに聞きました

■今の働き方を選んだ理由―どのようにして今の働き方になりましたか?Aさん:もとはSEでした。昼も夜もないような生活で、結婚を機に退社してしまいました。夫の転勤にともない、どこに引っ越しても仕事ができて、より自分の関心のあるデザインを仕...