4/27(Sat)

今日の生放送

Webデザイナー Google Chrome 拡張機能

Webで仕事をする方に愛用されているブラウザ、Google Chrome。このGoogle Chromeは、拡張機能(アドオン)を追加することでより便利に、そして自分好みにカスタマイズすることができます。この拡張機能を上手く使いこなせば、作業スピードを大幅にUPすることができます。これからWebデザイナーを目指す人はもちろん、Google Chromeを使っている人におすすめしたい拡張機能を集めました。

 

〈目次〉


■拡張機能の追加方法

■拡張機能の紹介

 1)Keyconfig ショートカットキーで自在に操作できる!

 2)Gestures for Google Chrome マウスジェスチャーで操作できるように!

 3)Clearly ワンクリックでページを見やすく!

 4)Awesome Screenshot キャプチャーツールならこれ!

 5)URL Shortener  短縮URLを簡単に作れる!

 6)Adblock Plus いらない広告をカット!

 7)One Tab 増えすぎたタブをスッキリさせよう!

 8)Better History 履歴の閲覧画面をパワーアップ!

 

■拡張機能の追加方法


 

①ダウンロードしたい拡張機能のURLをクリックする

②「+無料」という青いボタンをクリックする

Webデザイナー Google Chrome 拡張機能

③追加をクリック

Webデザイナー Google Chrome 拡張機能

これだけです。

 

ダウンロードした拡張機能を確認・整理するには

①Google Chromeの右上にある三本線をクリック

②その他のツール

③拡張機能をクリック

拡張機能のページからできます。

 

■拡張機能の紹介


 

1)ショートカットキーで自在に操作できる!


Chromeウェブストア - Keyconfig

まずはGoogle Chrome上での全般の操作スピードを上げてくれるこの「Keyconfig」という拡張機能。ショートカットキーで自由自在にGoogle Chromeを操作したい方にオススメです。ショートカットキーとその操作を自分好みに設定することで、キーボードに手を置いたままあらゆることを行うことができるようになります。 

Webデザイナー Google Chrome 拡張機能

このように細かく設定することができます。

これでまずは操作スピードの底上げを図っていきましょう。

 

2)マウスジェスチャーで操作できるように!


Chromeウェブストア- Gestures for Google Chrome

こちらもGoogle Chrome上での全般の操作スピードを上げてくれる拡張機能です。戻る時は『←』をクリック、閉じる時は『×』をクリック、そんなごく当たり前な操作を「Gestures for Google Chrome」を入れることで、マウスジェスチャーで簡単に行えるようになります。


Webデザイナー Google Chrome 拡張機能

マウスのジェスチャー操作とそれに対する反応は、このように自由に設定することができます。

操作に慣れるとかなり時間を節約できるようになるはずです。

 

3)ワンクリックでページを見やすく!


Chromeウェブストア- Clearly

こちらは、ワンクリックでブログポストや記事をきれいに読みやすくしてくれる拡張機能です。この「Clearly」はWebページを読む上で不要なものを一掃し、複数ページにわたる記事を 1 ページにつなげて閲覧できるように表示してくれます。

例えば、スクーの授業ページで試してみましょう。こちらが、

Webデザイナー Google Chrome 拡張機能

このようになります。

Webデザイナー Google Chrome 拡張機能

不要な情報をカットして、Evernoteなどにそのまま転送することができます。文字情報だけをクリップしたい時に便利ですね!

 

4)キャプチャーツールの決定版 ! 


Chromeウェブストア- Awesome Screenshot

数多くあるキャプチャーツールの中でも特におすすめなのがこちらです。ページの全体や一部をキャプチャーし、各種の図形や文字で注釈をつけることができます。例えば、ウェブサイトの一部を切り取って、コメントや図形で注釈をつけて誰かに共有したりブログにアップすることができるようになります。ページの一部だけでなく、全体をキャプチャーできる機能が、他にはないオススメポイントです。

こんな風に、Webページを切り取って自由に注釈をつけることができます。


Webデザイナー Google Chrome 拡張機能
 

赤字が注釈です。

ローカルに保存してある画像にも同じように編集できるのも便利です。

 

5)短縮URLを簡単に作れる!


Chromeウェブストア- URL Shortener

URLをコピペした時、ものすごく長いURLになってしまうことがあると思います。そんなURLをクライアントにそのまま伝えるのは、少しスマートさに欠けますよね。そうならないために、URLは短縮URLにしてあげましょう。この「URL Shortener」という拡張機能を使えば、ボタン1つで短縮されたURLを取得できます。すっきりしたURLで、気持ちよくクライアントに共有できるようにしておきましょう。 

 

6)いらない広告をカット!


Chromeウェブストア-  Adblock Plus

文字通り、web上の広告をブロックすることができる拡張機能です。例えば、以下のような広告をブロックしてくれます。
・ バナー
・ YouTube ビデオ広告
・ Facebook 広告
・ ポップアップ
この「Adblock Plus 」を導入することで、広告を非表示にするだけではなく、広告のダウンロードもしなくなるためサイト表示が速くなり、広告に邪魔されない快適なウェブ環境を手に入れることができるはずです。

 

7)増えすぎたタブをスッキリさせよう!


Chromeウェブストア- One Tab

作業をしていて気が付くとタブだらけ……なんてことありませんか?そしてページを閉じてしまってから「もう一回!」となり、履歴からそのページを見つける、なんてことを毎回繰り返している……。そんなあなたにおすすめの拡張機能が、この「One Tab」です。


Webデザイナー Google Chrome 拡張機能

このように、ワンクリックで複数のタブを一つに見やすくまとめておくことができます。

開きすぎたタブをスッキリさせると、気分よく作業できること間違いなしです!

 

8)履歴の閲覧画面をパワーアップ! 


Chromeウェブストア-  Better History

こちらは簡単に言うと、従来の履歴閲覧画面を見やすくしてくれる便利な拡張機能です。検索機能、フィルター機能、優れたインターフェイスを従来の履歴閲覧画面に付け加えたようなデザインになっています。


Webデザイナー Google Chrome 拡張機能

このように日ごと、曜日ごと、時間ごとに履歴を確認したり、検索をかけることができます。

「一週間前に見ていたあのサイトって何だっけ?」という時や、「いつか見かけたあのオシャレなウェブページをまた探したい!」というようなシーンで大活躍すること間違いなし。履歴を一つずつクリックしていくなんて面倒な作業を、サクッと片付けられるようにしておきましょう。

 

おわりに


以上、Google Chromeを使う方へ作業効率をUPさせるための拡張機能を8つ紹介しました。これらを活用していくことで、事務作業に時間を掛けることなく、デザインや大事な作業に時間を割けるようになっていくはずです。

また、他にも便利な拡張機能はたくさんあります。WEBデザイナー学部では現役で活躍するウェブデザイナーの先生がおすすめするツールや小技が掲載されたメルマガを配信しております。そちらでも便利なGoogle Chromeの拡張機能が紹介されています。Webデザインに興味のある方はぜひチェックしてみてくださいね。

「イシジマ先生のQ&Aとオススメツール」

 


WEBデザイナー学部では毎週Webデザインについての分かりやすい授業をお届けしております♪

初心者でWebデザインを学びたい方、自分のWebデザインの技術を磨きたい方は是非チェックしてみてください。

学部登録(無料)すると、自分のカリキュラムの進捗が一目で分かるようになり、先生がイチオシするツール紹介などの役立つコラムつきメールが受け取れるようになります!



スクー教務課:田代

今日の生放送

  • このエントリーをはてなブックマークに追加

デザイン学部の記事一覧