Chromeには様々な拡張機能がありますが、なかでもWeb制作に役立つツールは沢山存在しています。

今回は、Webデザイナーとフロントエンジニアの作業効率をグッとあげてくれる拡張機能を紹介します。作業時間の短縮や、時間の有効活用に、ぜひ役立てください。

1. Muzli

デザインキュレーションアドオン。インタラクティブなデザインについての最新情報をお届けします。

Muzli
Muzli

2. Responsive Web Design Tester

レスポンシブWebデザインが、スマートフォンやタブレットに対応するか、簡単にテストすることができます。

Responsive Web Design Tester
Responsive Web Design Tester

3. Window Resizer

ブラウザの画面サイズを簡単に変更することができ、制作したWebサイトの確認ができます。

Window Resizer
Window Resizer

4. Page Ruler

定番中の定番ツールです。ページ内の画像やコンテンツ等のサイズをドラッグ&ドロップの簡単操作で測ることができます。

Page Ruler
Page Ruler

5. Dimensions

Webサイト内のスクリーンの長さを測ることができ、ページ内の各要素の距離などを計測することができます。

Dimensions
Dimensions

6. ColorZilla

インターフェイスのカラー情報を取得することができる拡張機能。ピックアップした色の編集もできます。

ColorZilla
ColorZilla

7. WhatFont

使用されているフォントが何というフォントか、特定することができます。購入のアシストもしてくれるので便利です。

WhatFont
WhatFont

8. TypeWonder

指定したフォントでWebサイトを表示させることができます。制作したWebサイトに、どのフォントがマッチするかを確かめられます。

TypeWonder
TypeWonder

9. CSS — Shack

CSSを使ったレイヤーを簡単に制作することができるツールです。作りおわったら、CSSファイルとしてエクスポートできます。

CSS — Shack
CSS — Shack

10. PerfectPixel by WellDoneCode

制作した画像をブラウザ上で半透過に表示し、Webサイト上でピクセルサイズがあうかを確認することができます。

PerfectPixel
PerfectPixel by WellDoneCode

11. Lightshot

スクリーンショットをそのまま編集して、サーバーにアップロードすることができます。

Lightshot
Lightshot (screenshot tool)

12. UX Check

Webサイトのヒューリスティック評価を簡単に行うことができます。

UX Check
UX Check

13. Code Cola

表示中のWebサイトのCSSスタイルを、視覚的に操作可能なインターフェースで編集することができます。

Code Cola
Code Cola

14. Corporate Ipsum

ダミーテキストを生成できるツールです。日本語なら、Lorem ipsumも便利です。

Corporate Ipsum
Corporate Ipsum

15. Pendule

ユーザー目線で使いやすいページになっているかどうか、altや色などさまざまな情報が確認できるツールです。作業を圧倒的に早くします。

Pendule
Pendule

役に立ちそうな機能はありましたか?
気に入ったツールがあれば、今日にも追加してみましょう。

(翻訳:Akiko Ogita)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ