45 · デザイン事例Webサイト・ランディングページのUIデザイン事例とプロンプト（Claude Code / Codex）
Claude Code、Codex、Oil UI Skillで制作した公式サイト、商品ランディングページ、ECサイトを紹介します。実際に動くページを開き、プロンプトと使用モデルを確認しながら、コンテンツ構成、ブランド表現、レスポンシブデザインを参考にできます。
106 · デザイン事例
形式とタスクから探すUIデザインのインスピレーション
Oil UIギャラリーの実際に動く事例を、UIの形式や具体的なデザインタスクから探せます。元のデモを開いて手法を比較し、作品の背後にあるプロンプトも確認できます。
UIの形式から探す
45 · デザイン事例
33 · デザイン事例モバイルアプリのUIデザイン事例と複数画面プロンプト（Claude Code / Codex）
Claude Code、Codex、Oil UI Skillで制作したモバイルアプリのUIを紹介します。学習、移動、健康、日常ツールまで、390×844の複数画面デモとプロンプトを開き、ナビゲーション、情報階層、状態に応じたフィードバックを確認できます。
18 · デザイン事例デスクトップアプリ・管理画面・ワークスペースのUIデザイン事例（Claude Code / Codex）
Codex、Claude Code、Oil UI Skillで制作したデスクトップアプリ、監視コンソール、エディター、ワークスペースを紹介します。1440×900の実際に動くデモとタスクプロンプトから、複雑な情報、リスト、キャンバス、多ペインレイアウトの整理方法を学べます。
10 · デザイン事例インタラクティブなUIコンポーネント・モジュールの事例とプロンプト（Claude Code / Codex）
Claude Code、Codex、Oil UI Skillで制作したインタラクティブなコンポーネントとUIモジュールを紹介します。チェックアウト、アップロード、可視化、コントロールパネルのデモを操作し、状態の変化、操作へのフィードバック、細部の設計を確認できます。
デザインタスクから探す
5 · デザイン事例プロダクトコンフィギュレーターのデザイン：キーボード、シューズ、カスタムブレスレットの事例
メカニカルキーボード、ハンドメイドブレスレット、ランニングシューズ、家具の実際に動くコンフィギュレーターを紹介します。選択肢、ライブプレビュー、価格や注文内容の要約がどう連携するかを操作で確かめ、元のタスクプロンプトも確認できます。
5 · デザイン事例フォーム・複数ステップフローのデザイン：チェックアウト、登録、予約の事例
チェックアウト、オンボーディング、スペース予約、ファイルアップロードの完全なフローを紹介します。整然と並んだ入力欄だけでなく、項目のグループ化、ステップの遷移、入力検証、エラーからの復帰まで参考にできます。
7 · デザイン事例インタラクティブ学習UIのデザイン：数学、科学、チェス、プログラミングの事例
円の面積の導出、回路の組み立て、分子構造、チェスの戦術など、知識を操作可能なステップに変えた学習事例を紹介します。デモ、練習、具体的なフィードバックがどうつながるかを比較できます。
5 · デザイン事例金融・会計UIのデザイン：銀行、経費精算、請求ワークスペース
デジタルバンキング、個人家計簿、レシート照合、サブスクリプション収益、API請求の事例を比較します。金額の階層、取引の根拠、例外への対応、エクスポートフローが、それぞれの金融タスクでどう設計されているかを確認できます。
7 · デザイン事例メディアツールUIのデザイン：動画レビュー、編集、音楽再生
動画レビュー、タイムライン編集、ストーリーボード、テレビ向けストリーミング、ポッドキャスト、音楽プレーヤーの事例を紹介します。映像や画像、再生コントロール、コメントやキューが限られたスペースをどう共有するかを比較できます。
4 · デザイン事例健康・フィットネスアプリのデザイン：生理周期、睡眠、トレーニング記録
生理周期の記録、睡眠とリラクゼーション、ランニング後の回復、水泳トレーニングのUIを紹介します。敏感な健康データ、予測、頻繁な記録を扱う画面で、情報階層と表現のトーンをどう整えるかを確認できます。