NEUTRAL WORKS

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

BLOG

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

2016.07.08

ウェブデザイン

AUTHOR / 三木 五月

chrome
海外デザインブログ speckyboy Design Magazineで公開されたChrome Extensions Web Designers Developersより許可をもらい、日本語抄訳しています。

 

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

 

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

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

 

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

 

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の資産価値をライブで編集するために使います。

 

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

 

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ページ上の有効なページを緑で、無効なリンクを赤で表示してくれるので、無効なリンクに簡単にさよならできます。

 

測定拡張サービス

 

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ページにもワイヤーフレームを付けることができます。ローカルでも使用できます。

 

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拡張サービスを試してみましょう!

 

 

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

三木 五月

AUTHOR : 三木 五月

代表取締役社長

この人の記事を読む

RECOMMEND

RELATED

contactCONTACTCHANGE YOUR LIFE BY OUR DESIGN!

NEUTRAL WORKSfacebook
page top