Webデザイン

最終更新日: 2023.02.04

WEBデザイナーやWEB開発者が押さえておきたい「25」のChrome拡張サービス

WEBデザイナーやWEB開発者が押さえておきたい「25」のChrome拡張サービス
海外デザインブログ speckyboy Design Magazineで公開されたChrome Extensions Web Designers Developersより許可をもらい、日本語抄訳しています。

 

ChromeのDev Toolsでもデザインや開発をする上で必要な機能は十分揃いますが、無料の拡張サービスを使えば、ブラウザの機能をさらに拡張することができます。必要に応じて最適な拡張サービスを使えば、仕事の生産性が大きく伸びるでしょう。

 

これから紹介する25のChrome拡張サービスは以下のように分類されます。

フロントエンド拡張サービス、ライブエディター拡張サービス、確認とパフォーマンスの拡張サービス、測定拡張サービス、カラーツール、タイププレーグラウンドやフォントテスター、便利な拡張サービスです。

 

三木 五月

監修者

Twitter:@satsuki_miki
神奈川県の湘南でデジタルマーケティングの会社を経営しています。湘南をシリコンバレーのようにしたく、社員一丸で突っ走っています! 座右の銘は「好きこそものの上手なれ」。成熟した文化、自然豊かな湘南で一緒に働いてくれる仲間を絶賛募集中です。フルリモートOKです。詳しくは採用ページをご覧ください。

QUERYY(クエリー)編集部

執筆者

株式会社ニュートラルワークス

QUERYY(クエリー)編集部

QUERYY(クエリー)は、株式会社ニュートラルワークスが運営するデジタルマーケティング情報メディアです。

フロントエンド拡張サービス

 

SnappySnippet

snappysnippet

SnappySnippetはDev Toolsの拡張サービスで、CSSやHTMLを選択したDOMのサブツリーから抽出し、コードをCodePenやjsFiddleやJS Binに送ります。

 

MagiCSS

magicss

MagiCSSはライブのCSSエディターの拡張サービスで、エディターが組み込まれており、CSSを美しくシンプルにしてくれます。GitHub Gistも作成できます。

 

CSS Dig

cssdig

CSS Digはほとんどのサイトでスタイルシートやスタイルブロックを見つけてグループ化し、コード分析やリファクターを計画する簡単な方法を提案します。

 

CSSViewer

cssviewer

CSSViewerのようなシンプルなタスクを行うツールや拡張サービスは他にもたくさんあります。CSSViewerより上手く行える場合もありますが、他のどのChrome拡張サービスも、サービスの全てが揃っているわけではありません。CSSViewerなら使い方は簡単で、ツールバーのアイコンをクリックして、使いたいエレメントを探すだけです。

 

CSS-Shack

css_shack

CSS-Shackは、(画像編集アプリで行うのと同じように)レイヤーのスタイルを作成するための拡張サービスで、シングルのCSSファイルにエキスポートしてくれます。

 

CSS3 Generator

css3_generator

CSS33 Generatorは名前の通り、CSSに必要なコードを作成します。

 

CSS Shapes Editor

css_shapes_editor

CSS Shapes EditorはChromeのDev Toolsの拡張サービスで、CSS Shapesの資産価値をライブで編集するために使います。

 

フリーランスのWEBデザイナーとしてのブランド性を構築する「6つ」のステップ フリーランスのWEBデザイナーとしてのブランド性を構築する「6つ」のステップ

 

ライブエディター拡張サービス

 

WordPress Style Editor

wordpress_style_editor

WordPress Style EditorではWordPressのスタイルシートを精査し、テーマに沿ってCSSに直接編集を行うことができます。

 

PageEdit

PageEditを使うと、ChromeをWYSIWYG HTMLに変換してどのようなWEBページも編集できるようになります。

 

確認とパフォーマンスの拡張サービス

 

Perfmap

perfmap

Perfmapは、Resource Timing APIを使ってブラウザにロードされたリソースのタイミングを計ることで、サイトのフロントエンドのヒートマップを作成します。

 

Validity

Validity

ValidityはどのようなWEBページでも確認できる拡張サービスです。これを使えば、ツールチップにエラーの数が表示され、コンソールタブで詳細が見られます。

 

WEB Developer Checklist

web_developer_checklist

WEB Developer Checklistは、どんなWEBページでも一般的な使用で生じるエラーやバグをチェックできます。

 

Bootlint This Page

bootlint_this_page

Bootlint This Pageを使うとChromeにBootlint This Pageボタンが表示され、一般的なエラーのページやサイトのBootstrapを確認できます。エラーはJavaScript Consoleウィンドウに表示されます。

 

Check My Links

check_my_links

Check My Linksを使うと、WEBページ上の有効なページを緑で、無効なリンクを赤で表示してくれるので、無効なリンクに簡単にさよならできます。

 

【Webサイトの種類8選】これから始める方へ目的からポイントを解説 【Webサイトの種類8選】これから始める方へ目的からポイントを解説

 

測定拡張サービス

 

Page Ruler

page_ruler

Page Rulerを使うと、どんなWEBページでもルーラーが表示され、幅と高さと位置を確認できます。

 

Dimensions

dimensions

Dimensionsはシンプルですが便利なツールです。画面の幅と高さを測定してくれます。

 

カラーツール

 

ColorZilla

colorzilla

ColorzillaはもともとFirefoxのために開発されましたが、Chromeでもアイドロッパーやカラーピッカー、パレットビューア,グラディエントジェネレータ等のカラーツールを追加できます。

 

Color Tab

color_tab

Color TabはColor Huntによって作成され、新しいタブを開く度に美しく新しいカラースキームを提供してインスパイアさせてくれます。

 

タイププレーグラウンドやフォントテスター

 

Fontface Ninja

Fontface NinjaはどのWEBサイトのどのフォントも特定でき、サイズや行間も教えてくれます。フォントを試すこともできます。

 

Font Playground

font_playground

Font Playgroundでは、数千種類のGoogle FontをどのWEBページ上でもプレビューできます。

 

TypeWonder

typewonder

Type Wonderで、どのWEBサイトでもWEBフォントを試すことができます。サイトURLを入力してすぐにフォントが見られます。

 

便利な拡張サービス

 

Responsive Web Design Tester

responsive_web_design_tester

Responsive Web Design Testerを使うと、作成したレスポンシブなWEBサイトが一般的なモバイルデバイスから見られるか、素早く簡単に確認できます。

 

45to75

45to75

45to75を使えば、どのようなデバイスのサイズでも、文章が読みやすい45~75文字の間におさまっているか確認し、行の長さを最適化できます。

 

PerfectPixel

PerfectPixel

PerfectPixelは、半透明の画像を開発したHTMLの上に重ね、ピクセルごとの比較ができる拡張サービスです。

 

ZenHub

zenhub

ZenHubはGitHubのためのプロジェクトマネジメント拡張サービスです。ドラッグ&ドロップのタスクボードやTodoリストのような時間を節約する機能があり、GitHubの生産性を高めます。

 

Instant Wireframe

instant_wireframe

美しいワイヤーフレームが嫌いな人はいません。Instant Wireframeなら、どのWEBページにもワイヤーフレームを付けることができます。ローカルでも使用できます。

 

ワイヤーフレームとは?作り方、おすすめツールも紹介 ワイヤーフレームとは?作り方、おすすめツールも紹介 Webサイト制作やリニューアル時に必ず必要なのがワイヤーフレームです。一度も作成したことがない人には難しく感じますが、なぜ必要なのか、どんな内容が必要なのかがわかれば初心者でもチャレンジ可能です。ワイヤーフレームを基本的なことから紹介します。

 

Minimalist Markdown Editor

minimalist_markdown_editor

Minimalist Markdown EditorはChromeの拡張サービスで、タイプしたMarkdownのシンタックスをプレビューできます。また、MarkdownをHTMLに簡単に変換できます。

 

fb-flo

Fb-floはFacebookによって開発されたChromeの拡張サービスで、起動中のアプリをリロードせずに編集できます。JSやCSSや画像などの静的なリソースをライブで編集できます。

 

Web Developer

今、Web Developerを使っていない人は、ぜひ使用することをお勧めします! 現在ChromeとFirefoxの両方で最もポピュラーな開発拡張サービスです。どのWEBデザイナーやWEB開発者にも必要な便利なツールのアレイをブラウザに追加し、その中には使ってみて初めて必要だと知るようなツールもあるでしょう。

 

MySQL Admin

mysql_admin

MySQL Adminは強力なChromeの拡張サービスで、MySQLのデータベースをマネジメントするのを簡略化します。

 

以上!

Chromeをもっと活用したい場合は、Dev Tools Tipsを見ることをお勧めします。Dev Tools Tipsには主なChrome Developer Toolsのヒントやコツがまとめてあります。最新のデザインやdevニュースに追いつきたいデザイナーや開発者は、MuzliやPanda等のChrome拡張サービスを試してみましょう!

 

皆さまの参考になれば幸いです!

監修者紹介

三木 五月

三木 五月

代表取締役社長

Twitter:@satsuki_miki
神奈川県の湘南でデジタルマーケティングの会社を経営しています。湘南をシリコンバレーのようにしたく、社員一丸で突っ走っています! 座右の銘は「好きこそものの上手なれ」。成熟した文化、自然豊かな湘南で一緒に働いてくれる仲間を絶賛募集中です。フルリモートOKです。詳しくは採用ページをご覧ください。