ChromeのDev Toolsでもデザインや開発をする上で必要な機能は十分揃いますが、無料の拡張サービスを使えば、ブラウザの機能をさらに拡張することができます。必要に応じて最適な拡張サービスを使えば、仕事の生産性が大きく伸びるでしょう。
これから紹介する25のChrome拡張サービスは以下のように分類されます。
フロントエンド拡張サービス、ライブエディター拡張サービス、確認とパフォーマンスの拡張サービス、測定拡張サービス、カラーツール、タイププレーグラウンドやフォントテスター、便利な拡張サービスです。
監修者
Twitter:@satsuki_miki
神奈川県の湘南でデジタルマーケティングの会社を経営しています。湘南をシリコンバレーのようにしたく、社員一丸で突っ走っています! 座右の銘は「好きこそものの上手なれ」。成熟した文化、自然豊かな湘南で一緒に働いてくれる仲間を絶賛募集中です。フルリモートOKです。詳しくは採用ページをご覧ください。
執筆者
株式会社ニュートラルワークス
QUERYY(クエリー)編集部
QUERYY(クエリー)は、株式会社ニュートラルワークスが運営するデジタルマーケティング情報メディアです。
目次
SnappySnippetはDev Toolsの拡張サービスで、CSSやHTMLを選択したDOMのサブツリーから抽出し、コードをCodePenやjsFiddleやJS Binに送ります。
MagiCSSはライブのCSSエディターの拡張サービスで、エディターが組み込まれており、CSSを美しくシンプルにしてくれます。GitHub Gistも作成できます。
CSS Digはほとんどのサイトでスタイルシートやスタイルブロックを見つけてグループ化し、コード分析やリファクターを計画する簡単な方法を提案します。
CSSViewerのようなシンプルなタスクを行うツールや拡張サービスは他にもたくさんあります。CSSViewerより上手く行える場合もありますが、他のどのChrome拡張サービスも、サービスの全てが揃っているわけではありません。CSSViewerなら使い方は簡単で、ツールバーのアイコンをクリックして、使いたいエレメントを探すだけです。
CSS-Shackは、(画像編集アプリで行うのと同じように)レイヤーのスタイルを作成するための拡張サービスで、シングルのCSSファイルにエキスポートしてくれます。
CSS33 Generatorは名前の通り、CSSに必要なコードを作成します。
CSS Shapes EditorはChromeのDev Toolsの拡張サービスで、CSS Shapesの資産価値をライブで編集するために使います。
フリーランスのWEBデザイナーとしてのブランド性を構築する「6つ」のステップ
WordPress Style EditorではWordPressのスタイルシートを精査し、テーマに沿ってCSSに直接編集を行うことができます。
PageEditを使うと、ChromeをWYSIWYG HTMLに変換してどのようなWEBページも編集できるようになります。
Perfmapは、Resource Timing APIを使ってブラウザにロードされたリソースのタイミングを計ることで、サイトのフロントエンドのヒートマップを作成します。
ValidityはどのようなWEBページでも確認できる拡張サービスです。これを使えば、ツールチップにエラーの数が表示され、コンソールタブで詳細が見られます。
WEB Developer Checklistは、どんなWEBページでも一般的な使用で生じるエラーやバグをチェックできます。
Bootlint This Pageを使うとChromeにBootlint This Pageボタンが表示され、一般的なエラーのページやサイトのBootstrapを確認できます。エラーはJavaScript Consoleウィンドウに表示されます。
Check My Linksを使うと、WEBページ上の有効なページを緑で、無効なリンクを赤で表示してくれるので、無効なリンクに簡単にさよならできます。
【Webサイトの種類8選】これから始める方へ目的からポイントを解説
Page Rulerを使うと、どんなWEBページでもルーラーが表示され、幅と高さと位置を確認できます。
Dimensionsはシンプルですが便利なツールです。画面の幅と高さを測定してくれます。
ColorzillaはもともとFirefoxのために開発されましたが、Chromeでもアイドロッパーやカラーピッカー、パレットビューア,グラディエントジェネレータ等のカラーツールを追加できます。
Color TabはColor Huntによって作成され、新しいタブを開く度に美しく新しいカラースキームを提供してインスパイアさせてくれます。
Fontface NinjaはどのWEBサイトのどのフォントも特定でき、サイズや行間も教えてくれます。フォントを試すこともできます。
Font Playgroundでは、数千種類のGoogle FontをどのWEBページ上でもプレビューできます。
Type Wonderで、どのWEBサイトでもWEBフォントを試すことができます。サイトURLを入力してすぐにフォントが見られます。
Responsive Web Design Testerを使うと、作成したレスポンシブなWEBサイトが一般的なモバイルデバイスから見られるか、素早く簡単に確認できます。
45to75を使えば、どのようなデバイスのサイズでも、文章が読みやすい45~75文字の間におさまっているか確認し、行の長さを最適化できます。
PerfectPixelは、半透明の画像を開発したHTMLの上に重ね、ピクセルごとの比較ができる拡張サービスです。
ZenHubはGitHubのためのプロジェクトマネジメント拡張サービスです。ドラッグ&ドロップのタスクボードやTodoリストのような時間を節約する機能があり、GitHubの生産性を高めます。
美しいワイヤーフレームが嫌いな人はいません。Instant Wireframeなら、どのWEBページにもワイヤーフレームを付けることができます。ローカルでも使用できます。
ワイヤーフレームとは?作り方、おすすめツールも紹介 Webサイト制作やリニューアル時に必ず必要なのがワイヤーフレームです。一度も作成したことがない人には難しく感じますが、なぜ必要なのか、どんな内容が必要なのかがわかれば初心者でもチャレンジ可能です。ワイヤーフレームを基本的なことから紹介します。
Minimalist Markdown EditorはChromeの拡張サービスで、タイプしたMarkdownのシンタックスをプレビューできます。また、MarkdownをHTMLに簡単に変換できます。
Fb-floはFacebookによって開発されたChromeの拡張サービスで、起動中のアプリをリロードせずに編集できます。JSやCSSや画像などの静的なリソースをライブで編集できます。
今、Web Developerを使っていない人は、ぜひ使用することをお勧めします! 現在ChromeとFirefoxの両方で最もポピュラーな開発拡張サービスです。どのWEBデザイナーやWEB開発者にも必要な便利なツールのアレイをブラウザに追加し、その中には使ってみて初めて必要だと知るようなツールもあるでしょう。
MySQL Adminは強力なChromeの拡張サービスで、MySQLのデータベースをマネジメントするのを簡略化します。
Chromeをもっと活用したい場合は、Dev Tools Tipsを見ることをお勧めします。Dev Tools Tipsには主なChrome Developer Toolsのヒントやコツがまとめてあります。最新のデザインやdevニュースに追いつきたいデザイナーや開発者は、MuzliやPanda等のChrome拡張サービスを試してみましょう!
皆さまの参考になれば幸いです!