複数方向を並べて比較する方法：一言のプロンプト修正を繰り返すより、3案を先に並べるべき理由
AIに一度に一つのUIだけを生成させるのは、デザイナーに一枚のスケッチしか出させないようなものです。別のレイアウト構造や書体の組み合わせの方がずっと合うかもしれないのに判断できず、気に入らなければ「もっと大胆に」と繰り返すしかありません。Oil UIの中心的なワークフローの一つは、完全な業務ページを書く前に、実際のコンテンツを使って3～4つの明確に異なるデザイン方向を同じHTML比較ページに並べ、同じ画面で最も合う一案を選べるようにすることです。
重要なポイント
- 比較がなければ、見た目の判断はできません。3つの異なる方向を1440pxまたは390pxのビューポートに並べると、長所と短所がすぐに見えます。
- 本当の方向の違いは「ボタンの色を変える」ことではありません。構図の重心、文字サイズのリズム、背景の明度、主インタラクションの見せ方を同時に変えます。
- 採用する方向を決めたら、その方向だけを深く磨きます。Aの見出し、Bのカード、Cの配色を継ぎ接ぎにして、一貫性のない画面にしないようにします。
- ギャラリーには「同じタスクブリーフ、異なるデザイン方向」の完全な作品集が複数あります。Orvoの9方向、Atelier Voldersの3方向、Fonderie Mercierの3方向などです。
npx skills add oil-oil/oil-uiオープンソース版にも複数スタイルの比較Webページ生成機能が含まれ、デスクトップとモバイルのビューポートを切り替えられます。
「一度に一案」では局所的な行き詰まりに陥りやすい理由
通常の会話では、モデルが最初に出す案は最も無難で平均的なものになりがちです。その案に対して「文字をもっと大きく」「背景を暗く」と続けても、モデルは元の平凡な骨格に修正を重ねるだけで、変更するほど乱れていくことがあります。
先に複数方向の比較ページを生成すれば、複雑な状態の実装に力を注ぐ前の数分で、レイアウトの可能性を広げられます。各方向には実際のプロダクト名、実際の価格、実際の操作コントロールを入れ、Lorem Ipsumのダミーテキストで誤魔化さないことが重要です。
| プロダクトと共通ブリーフ | 方向A | 方向B | 方向C / その他の方向 |
|---|---|---|---|
| Orvo（AI対話型サイト構築ツール、月額$0 / $24.99 / $34.99、専門家の伴走） | Launch Garden (orvo-garden)：明るいライムグリーンのキャンバスとモジュールが育つ表現 | Tandem (orvo-tandem)：温かい紙の背景と専門家とのペアリングを描く編集的な語り | Coastal Workshop (orvo-coast)、Open Creative Studio (orvo-studio)、The Launch Line (orvo-launch)、ほか4つを含む全9方向 |
| Atelier Volders（ゲントの2人の木工房、三脚のオークスツール一脚のみを24脚単位のバッチで制作） | Grain & Tenon (volders-grain)：3年間の自然乾燥と木目、接合部を中心に展開 | River Timber (volders-hearth)：Korenleiの川沿いの工房の温かさと住宅でのスケールを強調 | The Wedged Oak (volders-wedge)：接着剤を使わない楔接合と工程の断面図に焦点 |
| Fonderie Mercier（家族経営の青銅鋳鐘工房、月1回の鋳造で18口の鐘） | Bronze, with a Voice (mercier-voice)：音のスペクトルと倍音の試聴を中心に構成 | Eighteen Bells (mercier-pour)：鋳造スケジュール、溶解温度、銘文のカスタマイズを強調 | The Tuning Sheet (mercier-bell)：手書きの調律ノートのような抑制の効いた技術図表スタイル |
3つの方向が本当に異なると言える条件
モデルが手を抜くと、「3案」といっても同じ3カラムレイアウトを青、緑、紫に変えただけになることがあります。Oil UIでは、各方向を次の4つの軸で明確に引き離します。Oil UI Proでは、方向の重複度を定量的にチェックする機能もあります。
- ファーストビューの構図と視覚的な入口を変える
- 方向1は非常に大きなタイポグラフィとコンパクトな計算ツールで始め、方向2は作業キャンバスをファーストビューいっぱいに広げ、方向3は左に文章、右にプロダクトを置く雑誌式の分割レイアウトにする、といった違いです。
- 書体の印象と字重の対比を変える
- 一つの方向では人文系のセリフ体で工房や編集的な質感を伝え、別の方向では幾何学的なサンセリフと等幅数字を組み合わせて精密なツールの性質を強調できます。
- キャンバスの明度と色の抑え方を変える
- カテゴリーに合う範囲で、温かい紙の淡色、冷涼でコントラストの高い白、落ち着いた暗色のワークスペースを比較し、実際のコンテンツがどの背景で最も読みやすいかを確かめます。
- 選択後は要素を寄せ集めない
- 比較ページは一つを選ぶためのものです。方向2を選んだら、その後のすべてのページ、ダイアログ、状態を方向2の秩序に厳密に沿わせ、方向1の装飾を持ち込まないようにします。
複数方向の並列比較を開始するプロンプトテンプレート
新しい公式サイト、アプリのデザイン、重要ページのリニューアルのいずれでも、次の一文でエージェントに先に比較ページを作らせられます。
Oil UIを使って、[プロダクト名と種類]のデザイン方向を探索してください。
- 実際の業務コンテンツ：[中心となる見出し、3つの主要機能、実際の価格または中心となる操作項目を記入]
- 対象ビューポート：[1440×900 デスクトップ / 390×844 モバイル]
最終的な全コードはまだ書かず、全く異なる3つのデザイン方向を含む比較ページを先に生成してください。3方向はファーストビューの構図、書体の組み合わせ、色調と明度が明確に異なるようにし、すべてに上記の実際の業務コンテンツを使ってください。私が一つの方向を選んでから、完全な状態の実装へ進んでください。オープンソース版とProのどちらでもそのまま使えます。
実際に動くギャラリー作品とプロンプト
1440pxまたは390pxのライブデモを開き、モデルとプロンプトが最終的なUIにどう表れたかを確認できます。
Atelier Volders · 木目とほぞ
手作り家具工房のウェブサイト
ベルギー、ゲントの Korenlei 14 にある2人の木工工房 Atelier Volders のウェブサイト（1440×900を基準とし、幅390までレスポンシブ対応）。英語のインターフェースとする。工房が作るのは De Drievoet だけ。3年間自然乾燥させた木材から手作業で旋盤加工と楔留めをした三本脚の無垢オークスツールで、1ロット24脚を月に1回だけ生産する。 高さは3種類（32 cmの低い囲炉裏用スツール €240、45 cmのダイニング・デスク用スツール €270、トネリコのフットリング付き62 cmのカウンタースツール €310）、仕上げも3種類（石けん洗いの無垢オーク、燻蒸したダークオーク、煮沸亜麻仁油と蜜蝋）。訪問者は高さと仕上げをリアルタイムに切り替え、6週間の制作工程、裏面の焼き印によるロット刻印、土曜日の開放時間を見て、現在のロットからスツールを予約できる。製品写真は提供しない。
作品とプロンプトを見る →
Atelier Volders · 川辺の木材
手作り家具工房のウェブサイト
ベルギー、ゲントの Korenlei 14 にある2人の木工工房 Atelier Volders のウェブサイト（1440×900を基準とし、幅390までレスポンシブ対応）。英語のインターフェースとする。工房が作るのは De Drievoet だけ。3年間自然乾燥させた木材から手作業で旋盤加工と楔留めをした三本脚の無垢オークスツールで、1ロット24脚を月に1回だけ生産する。 高さは3種類（32 cmの低い囲炉裏用スツール €240、45 cmのダイニング・デスク用スツール €270、トネリコのフットリング付き62 cmのカウンタースツール €310）、仕上げも3種類（石けん洗いの無垢オーク、燻蒸したダークオーク、煮沸亜麻仁油と蜜蝋）。訪問者は高さと仕上げをリアルタイムに切り替え、6週間の制作工程、裏面の焼き印によるロット刻印、土曜日の開放時間を見て、現在のロットからスツールを予約できる。製品写真は提供しない。
作品とプロンプトを見る →
Atelier Volders · 楔留めのオーク
手作り家具工房のウェブサイト
ベルギー、ゲントの Korenlei 14 にある2人の木工工房 Atelier Volders のウェブサイト（1440×900を基準とし、幅390までレスポンシブ対応）。英語のインターフェースとする。工房が作るのは De Drievoet だけ。3年間自然乾燥させた木材から手作業で旋盤加工と楔留めをした三本脚の無垢オークスツールで、1ロット24脚を月に1回だけ生産する。 高さは3種類（32 cmの低い囲炉裏用スツール €240、45 cmのダイニング・デスク用スツール €270、トネリコのフットリング付き62 cmのカウンタースツール €310）、仕上げも3種類（石けん洗いの無垢オーク、燻蒸したダークオーク、煮沸亜麻仁油と蜜蝋）。訪問者は高さと仕上げをリアルタイムに切り替え、6週間の制作工程、裏面の焼き印によるロット刻印、土曜日の開放時間を見て、現在のロットからスツールを予約できる。製品写真は提供しない。
作品とプロンプトを見る →
Fonderie Mercier · 声を持つブロンズ
家族経営ブロンズ鋳鐘工房のウェブサイト
リヨンのソーヌ川沿い Quai Saint-Vincent 28 にある、三代続く家族経営の鋳鐘工房 Fonderie Mercier のウェブサイト（1440×900を基準とし、幅390までレスポンシブ対応）。英語のインターフェースとする。川砂を固めた鋳型と、銅78%・錫22%の鐘銅を使い、象徴的な一品 Le Bourdon de Table だけを鋳造する。旋盤で正確な音高に調律し、月に1回、18口の鐘からなる固定ロットを鋳造する。 サイズと音高は3種類（Ø 72 mmの卓上鐘 A4 440Hz €180、Ø 96 mmの中庭の鐘 F#4 370Hz €240、鍛鉄ブラケット付きØ 124 mmの壁掛け鐘 D4 293.7Hz €340）、パティーナも3種類（旋盤仕上げの無垢ブロンズ、スモークドブロンズ、緑青）。訪問者は各音高を聴き、サイズとパティーナを切り替え、5段階の鋳造工程、冷間刻印によるクラウン記録、金曜日の開放時間を見て、翌月の鋳造の予約票を用意できる。製品写真は提供しない。
作品とプロンプトを見る →Oil UI Pro：方向の重複チェックと多視点のブラインドレビュー
Oil UI Proには、色違いだけの同構造案を防ぐ「複数方向の重複チェック」と、サブエージェントによる多視点レビューが追加されています。構造が最も安定し、長く見ても劣化しない方向を選んで詳細を詰めるのに役立ちます。
npx github:oil-oil/oil-cli install oil-ui-proよくある質問
オープンソース版にも比較ページ機能はありますか？
はい。Oil UIオープンソース版にも、複数スタイルの比較Webページ機能（デスクトップとモバイル対応）が含まれています。npx skills add oil-oil/oil-ui でインストールし、エージェントに複数のデザイン方向を提案させれば使えます。
一度に比較する方向はいくつが適していますか？
3～4つが適しています。3つ未満では二者択一になりやすく、4つを超えると一案ごとの磨き込みに使える力が分散します。まず3方向の骨格をしっかり作り、1つを選んでからインタラクション状態と細部のレビューに集中してください。
方向Aの配色が気に入り、方向Bのレイアウトの方が好きな場合、組み合わせられますか？
完全な色彩システムを入れ替えることはできますが、細かいコンポーネントを継ぎ接ぎにしないでください。「方向Bのレイアウトと文字サイズの階層だけを土台にし、カラーパレットを方向Aの温かい紙色系に置き換えて」とエージェントに伝え、全ページを撮り直してコントラストが調和しているかを確認します。
ギャラリーで同じプロダクトの異なる方向をすばやく探すには？
Orvo（9方向）、Atelier Volders（3方向）、Fonderie Mercier（3方向）、Vesper（2方向）、Sonar（2方向）、Archon（2方向）、Tempo（2方向）を検索または選択してください。ブラウザーのタブを並べて開き、比較しながら学ぶのに適しています。タスクブリーフが収録されている作品では、プロンプトもあわせて確認できます。