Internet Explorer: ウェブデザイナーのための便利すぎるツール&リソース20選

2013年4月25日木曜日

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



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



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

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


1. Niice

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



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


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


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


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


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

7. BLOKK

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


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


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

10. Timehub

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


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


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

13. PlaceIt

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


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


信じられないかもしれないが、KeynoteはGoogle Venturesのデザインチームに選択されているツールだ。私たちの詳 細な調査より:
デザインパートナーのJohn Zeratsky、 UXリサーチパートナーのMichael Margolis、Knappと私は、ユーザーテストのためにモックアップを作ることに没頭していた。私たちは、(驚いたことに)機能的なモック アップを作るのに非常に便利なツールであることが証明されているKeynoteを使うように指示された。


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

17. PLTTS

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


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+]
 

ウェブデザイナーのための便利すぎるツール3つ

0 件のコメント :

コメントを投稿