ウェブデザイナーに便利なデザインリソースやツールをまとめた最新版の記事をThe Next Webから。きっとあなたの知らない、日本ではまだメジャーじゃない注目リソースやツールがあるはず？ — SEO Japan
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
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も
チェックしよう。
信じられないかもしれないが、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+]
ウェブデザイナーのための便利すぎるツール3つ
