以下に14のツールがあります。7つはWebデザイナー向け、7つはWeb開発者向けで、Webサイトをコンセプトから現実へと成長させるのに役立ちます。
Webデザイナー向け
1. Adobe Creative Cloud
もちろん、PhotoshopとIllustratorはWebデザイナーにとって重要なツールです。 Creative Cloudを使用すると、これらの両方に加えて、Typekit、InDesign、Kulerなどの他のツールにアクセスできます。 Creative Cloudのすべてのツールは相互に非常によく相互作用するため、どのデザイナーでも利用できるはずです。
2. UIフェイス
レイアウトに適した写真を見つけるのは時間がかかるため、UI FacesはTwitter経由でアバターを収集し、デザインで使用できるようにします。
3. 0〜255
私はこのツールをほぼ毎日使用しています。 0to255を使用すると、選択した色の種類を簡単に見つけることができます。 選択、アクティブ状態、ハイライトに最適なツールです。
4. Googleフォント
WEBのタイポグラフィは、Arial、Courier、Georgiaの時代から大きく進歩しました。 Google Fontsは、レイアウト段階でダウンロードできる無料の既製フォントの巨大なライブラリです。
5.サミュエル・L・イプサム
映画「 Serpent Flight 」のファンのために、「Samuel L. Ipsum」（Samuel L. Ipsum）を紹介します。 これはLorem Ipsum引用ジェネレーターです。 選択できるオプションは3つあります：ジャクソン映画の冒La的な言葉からの引用、ジャクソン映画からの純粋な引用、および通常のol 'lorem ipsumです。
6.レスポンシブスケッチパッド
レスポンシブスケッチパッドUIテンプレートは、事前計画段階にいるときの良い仲間です。 ドットグリッドを使用すると、簡単に行を維持したり、ブラウザーやモバイルデバイスでサイトをレンダリングしたりできます。
7.コンゴウインコ
このツールはまだリリースされていませんが、すでにかなり興味深いオファーのようです。 Macawは画像エディターと同じ柔軟性を約束しますが、セマンティックHTMLと簡潔なCSSを綴ります。
Web開発者向け
1. Coda 2
これは、オールインワンのコードエディター、FTPクライアント、組み込みのMySQLエディターのために私のお気に入りです。 Coda 2には、プログラミングヘルプライブラリと視覚的なCSSエディターも含まれています。
2. CSSプリプロセッサ
開発対象に応じて、ガイドが役立ちます。 SASSを使用するにはRubyが必要です（Macに組み込まれています）。基本レベルでは、別のプリプロセッサであるLESSと同じです。 どちらも優れたツールであり、ネストされたルール、ミックス、変数、ロジックなどの時間節約機能を提供します。
3.フロントエンドフレームワーク
繰り返しになりますが、考慮すべき素晴らしい提案が2つあります。 Twitter BootstrapとZurb's Foundationを組み合わせることで、最新のWEBのプロトタイピングと開発をより迅速かつ簡単に行うことができます。 どちらのパッケージも、デフォルトのスタイル要素とリッチWEBを実装するJavaScriptを備えた適応型グリッドシステムです。
4. Browserstack
これは、セット全体からお気に入りです。 Browserstackを使用すると、完成したデザインを、任意のブラウザーおよび考えられる構成でテストできます。 プロジェクトでIE7とIE8をサポートする必要がある場合、これは便利なツールです。
5. Pingdom
DNSを展開し、Pingdomの問題を起動します。 一般的なパフォーマンスインジケータと共に、サイトにさまざまなリソースをロードするのにかかる時間を確認できます。
6. Chrome開発者ツール
Chrome Developer Toolkitに含まれているツールのいずれかを使用する場合、それをWebインスペクターと呼びます。 インスペクターと一緒に、問題をすばやく診断し、マークアップを変更できます。 コンソールを効果的に使用して、ログを記録し、JavaScriptとやり取りすることもできます。
7. MAMP Pro
サイトをローカルで簡単に調整します。 MAMP Proを使用すると、Apache、MySQL、およびPHP開発環境を簡単にインストールして管理できます。 クライアント用に多数のサイトで作業している場合、そのようなサーバーが必要です。