設計ツール索引
用途別に分類した設計ツールナビゲーション：各項目は外部リンク + 一行説明で、素早く選定できます。以下 12 の頻出カテゴリには各 2〜3 件の定番ツールを掲載し、references/ 内の完全リストへリンクしています。残り 24 のカテゴリは文末の「その他のカテゴリ」を参照し、必要に応じて対応する reference ファイルを開いてください。エントリは Awesome-Design-Tools に基づいています。
アニメーションツール
インターフェース／プロダクトに動きとインタラクティブアニメーションを追加するツール（マイクロインタラクション、画面遷移、モーション）。
- Lottie — After Effects のアニメーションを JSON でエクスポートし、モバイルと Web でネイティブにレンダリング。
- GSAP — スクリプトベースで高性能な HTML5 アニメーションを全主要ブラウザで実現するツール群。
- After Effects — Adobe のモーショングラフィックス、VFX、コンポジットアプリ。
→ 完全リスト（Haiku、Flare、Kite、Keyshape など）は
references/prototyping-and-animation.mdを参照
配色
カラースキームやパレットを生成・選択するツール。
- Coolors — 超高速カラースキームジェネレーター。
- Adobe Color — カラーホイールでスキームを作成したり、コミュニティの組み合わせを閲覧。
- Color Hunt — 厳選されたトレンドのカラーパレットが数千点。
→ 完全リスト（Khroma、Paletton、Sip、Pigment など）は
references/color.mdを参照
グラデーション
CSS／背景用のグラデーションを生成するツール。
- UI Gradients — 美しいカラーグラデーションの厳選コレクション。
- CSS Gradient — 無料の CSS グラデーションジェネレーター。
- Web Gradients — 背景として使える 180 の無料リニアグラデーション。
→ 完全リスト（Grabient、CoolHue、Gradienta など）は
references/color.mdを参照
プロトタイピング
インタラクティブな高忠実度プロトタイプを作成するツール。
- Framer — 視覚的にリアルなインタラクティブプロトタイプをデザイン。
- InVision — プロトタイピング、コラボレーション、ワークフロープラットフォーム。
- ProtoPie — 高忠実度インタラクションとセンサー対応プロトタイプを数分で作成。
→ 完全リスト（Marvel、Origami、Principle、Axure、UXPin など）は
references/prototyping-and-animation.mdを参照
デザインハンドオフ
開発者へデザイン仕様、スペック、書き出しデータ、コードスニペットを引き渡すツール。
- Zeplin — 正確な仕様、アセット、コードスニペットとともにデザインとスタイルガイドを引き渡し。
- Avocode — デザインツールなしでデザインを開き、レイヤーをクリックしてコードを取得。
- InVision Inspect — デザインを開発向けに準備。
→ 完全リスト（Sympli、Sketch Measure、Flawless App、Specctr など）は
references/handoff-and-code.mdを参照
Design to Code
デザインファイルを実行可能なコードや Web サイトに変換するツール。
- Webflow — ブラウザ上でレスポンシブサイトを構築し、ホストまたはコードをエクスポート。
- Anima — Sketch プラグイン／Web アプリで Sketch デザインを HTML に変換。
- Supernova Studio — Sketch デザインを Android、iOS、React Native コードに変換。
→ 完全リスト（PaintCode、Pinegrow、Tilda、Draftbit など）は
references/handoff-and-code.mdを参照
アイコン
アイコンライブラリとアイコン作成ツール。
- Feather Icons — シンプルさ、一貫性、可読性を重視した 24×24 グリッドのアイコン。
- Font Awesome — Web で最も人気のあるオープンソースアイコンセットとツールキット。
- Material Design Icons — オープンソースコミュニティによる無料の Material Design アイコン。
→ 完全リスト（Flaticon、Icons8、Simple Icons、SVGRepo など）は
references/graphic-assets.mdを参照
フォント
フォントリソース、管理、ペアリング。
- Google Fonts — 優れたタイポグラフィで Web をより美しく、開かれたものに。
- Adobe Fonts — Adobe による何千もの美しいフォント。
- FontPair — Google Fonts のペアリングを支援。
→ 完全リスト（DaFont、FontBase、Font Squirrel、RightFont など）は
references/graphic-assets.mdを参照
イラスト
イラスト素材ライブラリと生成ツール。
- unDraw — 美しい SVG 画像のコレクション。
- Blush — 世界中のアーティストによるイラストを作成、ミックス、カスタマイズ。
- Humaaans — 人物イラストを自由に組み合わせられる無料ライブラリ。
→ 完全リスト（ManyPixels、Open Doodles、Blobmaker、IRA Design など）は
references/graphic-assets.mdを参照
モックアップ
プロダクト／デバイスのモックアップ表示ツール。
- Smartmockups — 数クリックでプロダクトモックアップを作成。
- Artboard Studio — プロダクトモックアップに特化したオンライングラフィックデザインアプリ。
- Rotato — アプリデザイン向けアニメーション 3D モックアップ。
→ 完全リスト（Device Shots、Mockup World、Mockuuups、Threed など）は
references/mockup.mdを参照
UI デザイン
インターフェース／ビジュアルデザインツール。
- Figma — リアルタイムコラボレーション対応のブラウザベースデザイン＆プロトタイピング。
- Sketch — Mac 向けデザインツールキット。
- Adobe XD — Web、モバイル、音声向け UX のデザイン、プロトタイピング、共有。
→ 完全リスト（Photoshop、Illustrator、Affinity、Inkscape、Photopea など）は
references/ui-and-wireframe.mdを参照
ワイヤーフレーム
低忠実度ワイヤーフレームと構造スケッチ。
- Balsamiq Cloud — コラボレーション対応の簡単 UI スケッチツール。
- Wireframe.cc — シンプルで邪魔にならないワイヤーフレームツール。
- Whimsical Wireframes — リッチな要素ライブラリで即座にワイヤーフレームを作成。
→ 完全リスト（Pidoco、Gliffy、Layoutit、BLOKK など）は
references/ui-and-wireframe.mdを参照
その他のカテゴリ（必要に応じて references を読み込み）
以下のカテゴリはトップセレクションには含まれていませんが、該当するニーズが生じた際に対応する reference ファイルを直接開いてください。各ファイルの先頭はカテゴリ別に整理されています。
- アクセシビリティツール（WCAG チェック、コントラスト、色覚シミュレーション）→
references/accessibility.md - ユーザーリサーチ / 情報アーキテクチャ / ユーザーフロー / 体験分析（インタビュー募集、カードソーティング、サイトマップ、ユーザーフロー図、ヒートマップ、イベント分析）→
references/user-research-and-ia.md - コラボレーション / デザインフィードバック / デザインバージョン管理（チームコラボレーション、コメントレビュー、デザインファイルの Git）→
references/collaboration-feedback-vcs.md - デザインシステム / 開発ツール / ビジュアルデバッグ / ノーコード（コンポーネントライブラリドキュメント、開発者向けブラウザ、Web インスペクション、ノーコード構築）→
references/design-systems-and-dev.md - メディア素材（無料写真／動画／効果音／スクリーンショットツール）→
references/media-assets.md - クリエイション / インスピレーション / 学習（インスピレーションサイト、デザインコース、ロゴ、SNS デザイン、手書きスケッチ、ピクセルアート）→
references/creation-and-inspiration.md - 3D モデリング / 拡張現実 →
references/3d-and-ar.md
より包括的なデザイン関連の Awesome 総合ディレクトリは https://github.com/sindresorhus/awesome を参照