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

ウェブデザイナーに便利なデザインリソースやツールをまとめた最新版の記事をThe Next Webから。きっとあなたの知らない、日本ではまだメジャーじゃない注目リソースやツールがあるはず? — SEO Japan

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. FirefoxFont 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 255Colllorも試してみよう。

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 CanelisJamie Brittainを含め、このリストに入れるツールを提案してくれた読者のみなさんに感謝する。次のリストのためにあなたのお気に入りもシェアして欲しい!

画像クレジット:Thinkstock


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

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

投稿者:

SEO Japan

002年開設、アイオイクスによる日本初のSEOポータル。SEOに関する最新情報記事を多数配信。SEOサービスはもちろん、高機能LPOツール&コンサルティング、次世代SEOに欠かせないインフォグラフィックを活用したコンテンツマーケティング等も提供。 SEOブログながら、ウェブマーケ全般。アドテク、ソーシャル、スタートアップ、インフォグラフィック等。