MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
これは便利!デザイナー向け【chrome拡張機能】7選!

これは便利!デザイナー向け【chrome拡張機能】7選!

公開日:2017年10月11日
最終更新日:2022年01月17日
オンスタ運営
デザイン
デザイナー
デザイン
Webデザイン
ホーム > 全記事一覧 > 制作 > デザイナー > デザイン > これは便利!デザイナー向け【chrome拡張機能】7選!
このエントリーをはてなブックマークに追加
これは便利!デザイナー向け【chrome拡張機能】7選!
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは!Grow Groupデザイナーのさとおです。

皆さんは普段インターネットを見るとき、何のブラウザを使っていますか?

Chrome、Safari、Firefox、IE…など様々なブラウザが存在しますが、

実はChromeブラウザが、世界的に見てもダントツのシェアを持っています!

 

▲ 世界のブラウザ市場シェア2016年10月〜2017年10月(2017年10月11日現在)http://gs.statcounter.com/

はじめに、chromeが人気の理由

chromeが人気の理由はたくさんあり、

マルチデバイス対応がきっちりされているのでどんな端末(PC・タブレット・スマホ)であっても、どんなOS(Andriod・iOS・Windows・Mac・Linuxなどなど)であっても閲覧可能なことや、

クラウド上でブラウザの設定を同期することができること、

さらに機能を拡張できるプラグインが豊富にあることも人気の理由にあげられるのではないでしょうか!

今回はそんなchromeユーザーの、特にデザイナーの皆さんにオススメの拡張機能を一挙ご紹介していこうと思います。

デザイナー目線で便利だと思ったchrome拡張機能

それでは本題へ参りましょう!

今回は1つ目〜8つ目まで、徐々に専門度を上げながらご紹介していこうと思います。

1.  Google検索結果にプレビューを表示してくれる【SearchPreview】

 

検索エンジンから目当てのページを探そうとしたとき、検索結果で文字だけではなくプレビュー画面も一緒に表示してくれる機能です。
プレビュー画面があることによって、それぞれのページの違いが格段に分かりやすくなるのでハズレを引くことや、同じページをもう一度見てしまった…ということも防げるのでとても便利です。

ダウンロードはこちら >

 

2.  すぐに翻訳を行いたいとき【Instant Translate: Select and Translate】

 

ブラウザ上の任意のテキストを選択すると、ワンクリックで翻訳することができます。
ふと意味が知りたいと思ったときに、わざわざ翻訳サイトを開いて言語を設定しそこにペーストして…という手間が省けてとても便利です。

ブラウザ上のポップアップで翻訳することも可能で、テキストをペーストすると自動で言語が設定されるのも嬉しい機能。さらに104の言語に対応されているのも安心です。

ダウンロードはこちら >

 

3.  自分だけのwebページクリップ集が作れる【Screen capture, screenshot share/save】

 

保存しておきたいなと思うWebページのキャプチャを撮るだけで、そのイメージでブックマークしておくことができます。

 

デザイナーの皆さんは参考サイト集など見る機会もあると思いますが、この拡張機能は、自分だけの参考サイト集を作ることができます。フォルダ別で保存することやSNS共有も可能ですので、用途によっていろいろな使い方ができるのも魅力です。

ダウンロードはこちら >

 

4.  ページ全画面のスクリーンショットが欲しいとき【FireShot】

 

ウェブページ全体のスクリーンショットを撮影し、PDF、PNG、JPEG形式で保存することができる拡張機能です。ウェブページ全体だけでなく、表示部分だけだったり選択範囲を決めて撮ることも可能です。

ブラウザ上にしかないデザインデータを確認したいときや、クライアントから修正指示が欲しいときなど、何かとウェブページの全体が見たいときってあると思うのでとても便利な機能です。

ダウンロードはこちら >

 

5.  とても長いページの全画面のスクリーンショットが欲しいとき【Full Page Screen Capture】

 

4つ目にご紹介したFireShotはとても便利なのですが、あまりに長いページであったり、スクロールに連動するアニメーションが使われているページのスクリーンショットを撮りたいときにうまくいかないことがあります。

そんなときはこちらを試してみてください。形式はPNGのみですが、クリックするとパックマンのようなアニメーションとともにスクリーンショットを保存されるのも可愛いです。

ダウンロードはこちら >

 

6.  複数のブラウザチェックを素早くできる【User-Agent Switcher for Chrome】


ブラウザによって、またそのOSによってウェブページの見え方に異変はないか、複数のブラウザ環境でチェックする場合、簡単にブラウザを切り替えることができる拡張機能です。

Chromeブラウザをデフォルトとし、IE、Firefox、Opera、Safariなど、
OSの選択も、IEであればIE6〜10までチェック可能でとても便利です。

ダウンロードはこちら >

 

7.複数のモバイルチェックを素早くできる -【mobile browser emulator】

 

先ほど6つ目にご紹介したUser-Agent Switcher for ChromeはPCでしたが、こちらはiPhoneやAndroidなど、サイズの違うモバイル端末でのデバイスチェックが簡単にできる拡張機能です。

上の画像のように並べることで、それぞれの見え方を比較しながら確認もできるのでとっても楽です。

ダウンロードはこちら >

さいごに

いかがでしたでしょうか?

とても便利な拡張機能ですが、入れすぎると重くなってしまうので、自分が本当に必要だと思うものだけ入れて、あなただけの快適なchromeライフをお過ごしください!

それでは、以上さとうでした!!


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
なんか物足りない…デザインにひと工夫!簡単テクニック10選
デザイン
Webデザイン
公開日: 2018年01月25日
最終更新日: 2022年01月17日
なんか物足りない…デザインにひと工夫!簡単テクニック10選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WEB用に使われる画像形式の基礎と特徴
マークアップ
Webデザイン
公開日: 2018年05月19日
最終更新日: 2018年05月19日
WEB用に使われる画像形式の基礎と特徴
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ロゴマークの基礎知識 その②
デザイン
ロゴ制作
公開日: 2017年08月23日
最終更新日: 2017年08月23日
ロゴマークの基礎知識 その②
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ロゴマークの基礎知識 その②
デザイン
ロゴ制作
公開日: 2018年08月23日
最終更新日: 2022年01月17日
ロゴマークの基礎知識 その②
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ロゴマークの基礎知識 その①
デザイン
ロゴ制作
公開日: 2017年07月26日
最終更新日: 2022年01月17日
ロゴマークの基礎知識 その①
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【初心者向け】Adobe XDでオープニングアニメーションを作ってみよう!
デザイン
Webデザイン
公開日: 2021年07月21日
最終更新日: 2021年07月21日
【初心者向け】Adobe XDでオープニングアニメーションを作ってみよう!
h.onishi

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーとして向上するための本質を見極めるデザイン
デザイナー
デザイン
公開日: 2016年12月05日
最終更新日: 2022年01月17日
デザイナーとして向上するための本質を見極めるデザイン
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
色の機能と与える印象を知って、上手に配色しよう!
デザイン
デザイン
公開日: 2017年06月21日
最終更新日: 2017年06月21日
色の機能と与える印象を知って、上手に配色しよう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【ホームページ制作】~ターゲット設定はしない方がいい!?~
デザイン
コンサルティング
公開日: 2016年12月28日
最終更新日: 2022年01月17日
【ホームページ制作】~ターゲット設定はしない方がいい!?~
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
パンフレット・リーフレットの違いと活用方法
デザイン
パンフレット
公開日: 2017年09月06日
最終更新日: 2017年09月06日
パンフレット・リーフレットの違いと活用方法
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。