Webデザインにおいて、使用するツールはあなたの結果に重要な役割を果たす。もちろん、紙に鉛筆で描くことのような、基本を忘れないことが大事だが、時には新しいアプリやリソースを見つけることが、あなたのクリエイティブなジュースをもっと流れるようにするのに役立つかもしれない。
今回は、デザイナーとデベロッパーのための20個の便利なツールをリソースリストとしてまとめた記事を紹介する。あなたのお気に入りを（または、もし私たちがあなたのお気に入りを見逃していたら）コメント欄で教えて欲しい！
1. Niice
Niiceは基本的に、人気デザインサイトのBehance、Dribbble、Designspirationから結果を引っ張ってくるデザイン検索エンジンとして機能する。もしあなたがインスピレーションを必要としているなら、ここに来てがっかりすることはないだろう。例：白黒の筆記体デザインを検索してみよう。
2. Pixel Dropr
Pixel Droprは、UI Paradeが作ったPhotoshopのプラグインで、デザイナーは、アイコン、イラスト、写真、ボタン、その他の要素を作って、PSDファイルにドラッグ＆ドロップすることができる。詳しい説明はここを読もう。
もしあなたがHacker Newsの読者なら、すでにDesigner Newsの仕組みは知っているはずだ。それはデベロッパーとスタートアップシーンに焦点を合わせたサービスのようなものだが、デザインやデザインのプロセスを簡単にする新しいツールに関する議論を重視する。
Firefoxは、DevToolに最近“Font Inspector”と呼ばれる新しいタイポグラフィ中心のツールを追加した。 現在は、このブラウザのNightly Build内で利用できる。詳しくはこちら。
5. Cloud Comp
Cloud Compは、Cloud Appを使用した軽いツールで、デザイナーはアプリやウェブサイトのモックアップをクライアントと共有することができる。詳しいことはここを読もう。
6. Sidebar.io
Sidebarは、5つの“最高のデザインリンクを、毎日”提供するサイトだ。
7. BLOKK
BLOKKは、簡単なモックアップやワイヤーフレームで使用するためのダッシュでできたフォント（漫画新聞で見つけるようなもの）だ。最高のツールだ。詳しい内容はここを読もう。
このWebアプリは、その名の通りシンプルだ。あなたのブラウザウィンドウの現在のサイズを教えてくれ、あなたがそれをリサイズするとそれに従って調節する。例えば、もしあなたがMedia Queriesを使用しているなら、このツールは便利だ。
9. 直感的なカラー選択ツール
私たちのお気に入りのカラー選択ツールの1つ。読み込み時に、ウィンドウ全体が1つの色でいっぱいになる。色合いを調整するにはマウスを左右に動かし、明るさを調整するにはマウスを上下に動かし、スクロールして彩度を変える。0 to 255とColllorも試してみよう。
10. Timehub
Timehubは、プログラマーにGitHubリポジトリから請求書を作らせるサービスだ。そう、今、デベロッパーは、GitHubから離れることなくプロジェクトに費やした時間を追跡することができるのだ。詳しい情報はここを読もう。
タイポグラフィは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+]
2002年設立から、20年以上に渡りSEOサービスを展開。支援会社は延べ2,000社を超える。SEO/CRO（コンバージョン最適化）を強みとするWebコンサルティング会社。日本初のSEO情報サイトであるSEO Japanを通じて、日本におけるSEOの普及に大きく貢献。
SEO最新情報やセミナー開催のお知らせなど、お役立ち情報を無料でお届けします。
