ウェブデザイナーのための便利すぎるツール＆リソース20選【最新版】

無料で資料をダウンロード

SEOサービスのご案内
専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。

無料ダウンロードする　＞＞

Webデザインにおいて、使用するツールはあなたの結果に重要な役割を果たす。もちろん、紙に鉛筆で描くことのような、基本を忘れないことが大事だが、時には新しいアプリやリソースを見つけることが、あなたのクリエイティブなジュースをもっと流れるようにするのに役立つかもしれない。

今回は、デザイナーとデベロッパーのための20個の便利なツールをリソースリストとしてまとめた記事を紹介する。あなたのお気に入りを（または、もし私たちがあなたのお気に入りを見逃していたら）コメント欄で教えて欲しい！

1. Niice

Niiceは基本的に、人気デザインサイトのBehance、Dribbble、Designspirationから結果を引っ張ってくるデザイン検索エンジンとして機能する。もしあなたがインスピレーションを必要としているなら、ここに来てがっかりすることはないだろう。例：白黒の筆記体デザインを検索してみよう。

2. Pixel Dropr

Pixel Droprは、UI Paradeが作ったPhotoshopのプラグインで、デザイナーは、アイコン、イラスト、写真、ボタン、その他の要素を作って、PSDファイルにドラッグ＆ドロップすることができる。詳しい説明はここを読もう。

3. Designer News

もしあなたがHacker Newsの読者なら、すでにDesigner Newsの仕組みは知っているはずだ。それはデベロッパーとスタートアップシーンに焦点を合わせたサービスのようなものだが、デザインやデザインのプロセスを簡単にする新しいツールに関する議論を重視する。

4. FirefoxのFont Inspector

Firefoxは、DevToolに最近“Font Inspector”と呼ばれる新しいタイポグラフィ中心のツールを追加した。 現在は、このブラウザのNightly Build内で利用できる。詳しくはこちら。

5. Cloud Comp

Cloud Compは、Cloud Appを使用した軽いツールで、デザイナーはアプリやウェブサイトのモックアップをクライアントと共有することができる。詳しいことはここを読もう。

6. Sidebar.io

Sidebarは、5つの“最高のデザインリンクを、毎日”提供するサイトだ。

7. BLOKK

BLOKKは、簡単なモックアップやワイヤーフレームで使用するためのダッシュでできたフォント（漫画新聞で見つけるようなもの）だ。最高のツールだ。詳しい内容はここを読もう。

8. What’s My Browser Size?

このWebアプリは、その名の通りシンプルだ。あなたのブラウザウィンドウの現在のサイズを教えてくれ、あなたがそれをリサイズするとそれに従って調節する。例えば、もしあなたがMedia Queriesを使用しているなら、このツールは便利だ。

9. 直感的なカラー選択ツール

私たちのお気に入りのカラー選択ツールの1つ。読み込み時に、ウィンドウ全体が1つの色でいっぱいになる。色合いを調整するにはマウスを左右に動かし、明るさを調整するにはマウスを上下に動かし、スクロールして彩度を変える。0 to 255とColllorも試してみよう。

10. Timehub

Timehubは、プログラマーにGitHubリポジトリから請求書を作らせるサービスだ。そう、今、デベロッパーは、GitHubから離れることなくプロジェクトに費やした時間を追跡することができるのだ。詳しい情報はここを読もう。

11. Helvetica vs Arial

タイポグラフィはWebデザインにおいて重要な役割を果たすが、多くのデザイナーは、HelveticaとArialのような似ている書体の違いを理解するように訓練されていない。このリソースは、あなたがそのスキルをテストして、この2つの有名な字体を区別することに上手くなるのを手助けするだろう。

12. HEXからRGBへの変換ツール

先に紹介した“What’s My Browser Size?”というツールと同じように、これは、HEXからRGBにカラーコードを変換するだけのミニマルなサイトだ。もちろん、あなたは他のたくさんのアプリケーションやサービスを使って同じことをすることができるが、これはとても美しくシンプルな選択肢だ。Colorrrsも試してみよう。

13. PlaceIt

PlaceItは、シンプルなドラッグ＆ドロップツールで、あなたに現実の製品のスクリーンショットを一瞬で作らせてくれる。

14. Heyoffline.js

このJavaScriptプラグインは、ネットワークがダウンした時にユーザーが何も失わないように警告する。ローカルにフォーム入力内容を保存するプラグイン、Garic.jsもチェックしよう。

15. UXテストのためのKeynote/PowerPoint

信じられないかもしれないが、KeynoteはGoogle Venturesのデザインチームに選択されているツールだ。私たちの詳細な調査より：

デザインパートナーのJohn Zeratsky、UXリサーチパートナーのMichael Margolis、Knappと私は、ユーザーテストのためにモックアップを作ることに没頭していた。私たちは、（驚いたことに）機能的なモックアップを作るのに非常に便利なツールであることが証明されているKeynoteを使うように指示された。

16. Alfred Workflows

Alfredユーザーなら、このCSSカラー変換ワークフローをチェックしよう。

17. PLTTS

PLTTS（パレッツと発音する）は、あなたが取り組んでいるプロジェクト用の完璧なカラーパレットを簡単に見つける。

18. Chardin.js

Chardin.jsは、あなたのWebアプリにシンプルなオーバーレイスタイルの説明を提供するjQueryプラグインだ。ここに行って、動作しているところを見てみよう。

19. Mincss

Mincssは、使っていないセレクターを見つけて削除することによって、CSSからいらないものを片付ける。

20. CSSCSS

CSSCSSは、CSSファイルを解析して、どのルールセットが重複しているかを見せることによって、Mincssと同じような働きをする。

John CanelisとJamie Brittainを含め、このリストに入れるツールを提案してくれた読者のみなさんに感謝する。次のリストのためにあなたのお気に入りもシェアして欲しい！

画像クレジット：Thinkstock

この記事は、The Next Webに掲載された「20 Incredibly useful tools and resources for Web designers」を翻訳した内容です。

久々のまとめ記事でしたが、さて便利そうなツールやリソースはあったでしょうか？ — SEO Japan [G+]