活用シーン

Fudgeは、キュレーションされたショーケースではなく、実際の事例を素早く見つけたいデザイナーに最適です。

対象ユーザー

• ✓
  UI/UXデザイナー：インスピレーションや検証のために、実際のデザインパターンに素早くアクセスしたい方。
• ✓
  プロダクトデザイナー：競合とのベンチマークや、一般的なUIソリューションを見つけたい方。
• ✓
  フロントエンド開発者：デザイン仕様に合わせたビジュアルリファレンスや、レイアウトのトレンドを理解したい方。
• ✓
  デザイン学生：プロフェッショナルなサイトがタイポグラフィ、色、レイアウトをどう扱っているかを探求したい方。
• ✓
  デザインシステム管理者：他のチームが特定のコンポーネントをどう実装しているかをリサーチしたい方。

Fudgeの使い方

1. サイトにアクセス：https://design.withfudge.com/ にアクセスします。インターフェースはシンプルで検索に特化しています。
2. クエリを入力：探しているものを自然言語で入力します。例：「セリフフォントのミニマルなブログレイアウト」や「ホバーエフェクト付きのECプロダクトグリッド」。
3. 結果をブラウズ：Fudgeはプロダクションサイトからのスクリーンショットをグリッド表示します。各カードには該当セクションとサイトのURLが表示されます。
4. 要素でフィルタリング：内蔵フィルターを使って、タイポグラフィ、カラーパレット、UIパターン、ページ全体で絞り込みます。特定のデザイン判断に焦点を当てるのに役立ちます。
5. クリックして詳細を確認：結果を選択すると、フルスクリーンショットが表示され、ページ内でのデザイン要素のコンテキストを確認できます。
6. 繰り返し：クエリやフィルターを調整して、より具体的な例に掘り下げます。例：「データテーブル付きのダークモードダッシュボード」。

Fudgeはデザインのためのビジュアル検索エンジンとして機能します。サイトをブックマークしたり、個人コレクションを管理する必要はありません。ツールがインデックス化されたライブラリから関連する事例を表示します。スピードと関連性に重点を置いており、アイデアからビジュアルリファレンスまでを、手動ブラウジングの何時間もかけずに数秒で得られます。

ありきたりなインスピレーションボードをスクロールするのに飽きて、実際のプロダクトがデザイン問題をどう解決しているかを直接知りたいなら、Fudgeはそのための直接的な手段を提供します。