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
コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
マークアップ
Webデザイン
公開日: 2018年03月02日
最終更新日: 2018年03月02日
コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
オンスタ運営

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
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
マークアップ
デザイン
公開日: 2018年03月30日
最終更新日: 2022年01月17日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営

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年02月15日
最終更新日: 2018年02月15日
展示会・イベントの装飾を作成したい企業の方必見!装飾の種類とオススメな制作会社をご紹介!
オンスタ運営

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
デザイナーが成長するには(デザイナーがキャリアアップするための道のり-其の2)
デザイナー
デザイン
公開日: 2017年01月16日
最終更新日: 2022年01月17日
デザイナーが成長するには(デザイナーがキャリアアップするための道のり-其の2)
オンスタ運営

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
仮説の考え方と使い方
デザイン
公開日: 2021年04月05日
最終更新日: 2021年04月05日
仮説の考え方と使い方
オンスタ運営

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
【 Illustrator CC 】でWebデザインをする時に気をつけたいルール8選
デザイン
Webデザイン
公開日: 2016年12月27日
最終更新日: 2016年12月27日
【 Illustrator CC 】でWebデザインをする時に気をつけたいルール8選
オンスタ運営

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年03月30日
最終更新日: 2018年03月30日
デザイナーに資格は必要なの・・・!?【デザイナーが取れる資格まとめ】
オンスタ運営

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
デザイナーが知っておくべきデザイン業界用語集【DTP】
デザイン
公開日: 2018年12月27日
最終更新日: 2022年01月17日
デザイナーが知っておくべきデザイン業界用語集【DTP】
オンスタ運営

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デザイン
公開日: 2019年01月25日
最終更新日: 2022年01月17日
なんか物足りない…デザインにひと工夫!簡単テクニック10選
オンスタ運営
全記事一覧

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

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

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

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