Inc.制作実績WORKSサービスSERVICE会社情報COMPANYブログBLOGお知らせNEWS採用情報RECRUITお問い合わせCONTACT2019.8.19WEBデザインライフハック知っていると便利なChrome拡張機能6選〜初級編〜いわんこんにちは!Webをメインにグラフィックもちょっとやってるデザイナーのいわんです。Webデザイン制作するときに少しでも楽したいな〜と思うこと、ありませんか?今回は、普段少しでも楽をする効率を図るために使用しているChrome拡張機能をご紹介させていただきます。Chrome用の拡張機能が大量に公開されていますが、手始めにどれから使っていいかわからない...という方向けに、Chrome用拡張機能の初級編として、基本的なものに絞ってみましたので、ぜひ最後までご覧くださいね。デザイナーさんにおすすめ!Chrome拡張機能スクリーンショット「FireShot」Webサイトを閲覧しているとき、気になったサイトを「スクショ取りたいけど、ページ全体を1回で済ませたい!」ということがありませんか?そんなときは、この「FireShot」がオススメです!!このツールは、ページ全体をキャプチャ表示部分をキャプチャ選択範囲をキャプチャの3通りの中からスクショの撮り方を選ぶことができます。拡張子もjpg、png、pdfの中から選ぶことができるので、PCの機能やブラウザのデベロッパーツールを起動してスクショを撮るより楽に作業ができます。検索ソート機能「あと1年」(最新1年以内検索)Webサイトを検索しているとき、古い更新日のサイトばかりが結果として表示されるときはありませんか?検索結果画面に表示された【ツール】の中にある「期間指定なし」というところから、改めて更新期間を指定することで時間を細かく設定することができますが、この機能はタブやウィンドウを新しくするとリセットされてしまい、また設定し直さなければなりません。そんなときは、この「あと1年」がオススメ。この機能をアクティブにしている限り、ずっと自動で最新1年以内に公開・更新されたWebサイトを検索してくれます。Resizer」がオススメです!!このツールは、指定したウィンドウサイズに変更してくれるのはもちろん、プリセットからサイズを指定したり、Viewportの調整など、機能がたっぷり!特にデザインをチェックするときは大活躍しています。表示しているWebサイトのURLをQR化してくれる拡張機能は様々ありますが、色々試して落ち着いたのがこの「QRCode」です!QR化するのが早く、シンプルにQRのみ表示してくれるので、とにかくわかりやすい。Ninja」Webサイトを見ているとき、気になったフォントがあったりしませんか?最近はWebフォントを適用しているサイトも多く、気になったこのフォントを使ってデザインしてみたい!ということもあるかと思います。Ninja」がオススメです!このツールは、表示しているWebサイトで使用されているフォントの種類を表示し、使用されている太さはもちろん、さらにその入手先まで教えてくれる。デベロッパーツールを開いて調べなくても良い、優しい設計のツールです。デザインカスタムツール「VisBug」こちらはデザイナーだけではなく、ディレクターやエンジニアにもおすすめのツールです。「VisBug」はブラウザに表示されたページのデザインやコンテンツを検証・編集することが可能です。デベロッパーツールでもある程度のことは可能ですが、このツールはもっと直感的にふれることができます。動画で動きが見たい場合は、ストアページのスライド2つ目にある動画の23:00あたりにあるので、そちらをご覧ください。英語なのでよくわからない、日本語の解説求む!って場合は、私も普段からお世話になっている「coliss」さんに詳しく載っているので、そちらをご覧ください。デザイナーにもChrome拡張機能を!以上6つのツールをご紹介させていただきました。次回は、デザインをするときに使用しているツール系サイトか、PhotoshopやIllustrator、XDの文字設定のCSS変換のお話をできればと思います。inc.株式会社Y’s03-5362-5993会社概要プライバシーポリシーTWEET!SHARE!。