AIでプロダクトサイトとSaaSランディングページをデザイン：ファーストビュー、複数方向の比較、レスポンシブレビュー
AIにプロダクトサイトやSaaSランディングページを書かせると、どのプロダクトも同じ顔になりがちです。上にピル型ラベル、中央にグラデーションのキャッチコピー、その下にアイコン付きの機能カード3枚という構成です。記憶に残るサイトにするには、プロダクト独自の違いをファーストビューで見える画像や操作に変え、一案を選ぶ前に大きく異なる複数のビジュアル方向を並べて比較することが大切です。
重要なポイント
- ファーストビューでは3秒以内に、何のプロダクトか、どんな具体的な問題を解決するか、訪問者が次にどこをクリックするか（またはその場で何を試せるか）を伝えます。
- 同じプロダクトブリーフから全く異なる印象が生まれます。ギャラリーにあるサイト構築ツールOrvoの9種類のランディングページでは、編集的な雰囲気から開かれたスタジオまで幅広い方向を見られます。
- 実際のプロダクト写真がない場合は、安っぽいストックフォトで埋めないようにします。「Atelier Volders」や「Fonderie Mercier」のように、パラメーター切り替え、音のスペクトル、制作工程のタイムラインで質感を作ります。
- デスクトップでは1440×900でストーリーのリズムを設計し、390pxのモバイルビューポートでも長い見出しの折り返し、テーブルの横スクロール、主ボタンの位置を必ず確認します。
npx skills add oil-oil/oil-uiギャラリーの /ja/inspiration/web-design/ コレクションでは、40以上の実際に動くWebサイトとランディングページを見られます。
既定で生成されるAIランディングページがどれも似てしまう理由
モデルに「私のAIツールのランディングページを作って」とだけ伝えると、レイアウトの支えになる具体的な材料が何もありません。そのため、無難な定型に戻ります。濃紺や紫黒の背景、光るピル型バッジ、「速い / スマート / 安全」という中身のない3列カード、下部に並ぶ架空の顧客ロゴです。
ギャラリーの実例と比べると、見劣りしないサイトはいずれも「中心的な違い」をページの本体にしています。書体ファウンドリー「Fieldwork Type」では、ファーストビュー自体が文字を入力し、字重と字幅を動かし、ライセンス料金を即時計算できるテスターです。青銅鋳鐘工房「Fonderie Mercier」では、直径の異なる鐘をファーストビューで打ち鳴らし、倍音の減衰を聞きながらスペクトルを見られます。AIサイト構築ツール「Orvo」は、「公開経験のある専門家が最後まで伴走する」「トークン課金ではなく定額制」という2つの違いをストーリーの中心に置いています。
| ページセクション | 既定のAIテンプレート | Oil UIの進め方（ギャラリー事例付き） |
|---|---|---|
| ファーストビュー（Hero） | ピル型の小見出し＋抽象的なスローガン＋2つのボタン＋中身のない装飾画像 | 一文でプロダクトを説明し、実際の作業画面または直接操作できる試用コントロールを置く |
| 機能紹介 | 同じ幅の角丸カード3枚に、汎用的な線のアイコンと形容詞を添える | 実際の利用手順で展開する（対話によるサイト構築、6週間の木工工程、鋳鐘の調音表など） |
| 価格と予約 | チェックマークだらけの長い機能比較表で、違いが分かりにくい | 実際のプラン（$0 / $24.99 / $34.99の月払い・年払い切り替えなど）や、その月のバッチ残数を明記する |
| 実写写真がない場合 | 関係の薄い無料ストックフォトや不自然なAIイラストを使う | 整えたタイポグラフィ、ベクターの断面図、パラメーター切り替え、素材のカラースウォッチで信頼感を作る |
同じブリーフから生まれる複数の可能性：Orvoと手仕事の工房シリーズ
ギャラリーには、同じタスクブリーフから作った複数方向の完成品を意図的に残しています。AIサイト構築ツールOrvoでは、すべてのバージョンが同じ事実を共有しています。対話でWebサイトとアプリを生成し、専門家が最後まで案内すること、定額制（Starter $0 / Pro $24.99 / Unlimited $34.99、年払いで20%割引）であること、100以上のテンプレートを提供することです。
それでも「Orvo · Launch Garden」は生命力のある明るいグリーンのキャンバスとモジュールが育つストーリーを使い、「Orvo · Tandem」は専門家とクリエイターが並んで磨き上げる編集的な表現を強調しています。「Orvo · Coastal Workshop」と「Orvo · Open Creative Studio」も全く異なる空間のリズムです。自分のプロジェクトでOil UIを使うときも、比較ページでブランドに最も合う一案を選んでから詳細を詰められます。
よい公式サイトにつながるプロンプトの構造
サイトのプロンプトでは、「プロダクトがどう動くか」「同類との違いは何か」「価格はどう計算するか」「どんな素材がないか」を伝えることに力を入れ、「高級感のある」といった曖昧な言葉は減らしてください。
Oil UIを使って、[プロダクト名]の公式ランディングページをデザインして実装してください（デスクトップの主ビューポートは1440×900、幅390pxのモバイルまでレスポンシブ対応）。
- プロダクトの内容：[ユーザーが何を使って、どんなことを完了するのかを1～2文で説明]
- 同類との2つの実際の違い：[例：1) 従量課金ではなく月額定額、2) 独自のリアルタイムツールまたは人的サービスを内蔵]
- 必須コンテンツと実際の数字：
1. ファーストビュー：位置づけを明確に伝え、操作できる[中心機能のプレビューまたは計算ツール]を配置する。
2. 機能の説明：[3つの具体的な利用場面またはテンプレートカテゴリー]を紹介する。
3. 価格セクション：[実際のプラン名と価格を記載し、月払い／年払いの切り替えで金額を即時更新する]。
4. 最後に行動を促す。
- 素材の制約：[実写写真の有無を明記。ない場合は、レイアウト、タイポグラフィ、自作グラフィックでビジュアルの重心を作る]。
最初に、違いが明確な3つのデザイン方向を並べて比較できるように提案してください。SaaS、開発者ツール、ハードウェアプロダクト、独立系ブランドの公式サイトに使えます。
実際に動くギャラリー作品とプロンプト
1440pxまたは390pxのライブデモを開き、モデルとプロンプトが最終的なUIにどう表れたかを確認できます。
Fieldwork Type
独立系タイプファウンドリー
独立系タイプファウンドリーのWebサイト（1440×900を基準とし、幅390までレスポンシブ対応）。ファーストビューではフラッグシップ書体を主役にし、訪問者が任意のテキストを入力して、サイズ、ウェイト、字幅を調整できるようにする。その後には、ファミリーのウェイト表、文字セット、使用例と、用途（デスクトップ、Web、アプリ）別に選んでカートに追加できるライセンスを配置する。 タイプテスターとライセンス選択がこの作品の中核。入力に応じて組見本が変わり、オプションを選ぶたびにライセンス価格が更新されるようにする。ファーストビュー、テスターパネルを展開した状態、ライセンス選択をデザインする。
作品とプロンプトを見る →
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段階の鋳造工程、冷間刻印によるクラウン記録、金曜日の開放時間を見て、翌月の鋳造の予約票を用意できる。製品写真は提供しない。
作品とプロンプトを見る →
Routewise
AI APIプラットフォームウェブサイト
OpenRouter に似たAIモデルAPI集約プラットフォームのウェブサイト（1440×900を基準とし、幅390ピクセルまでレスポンシブ対応）。中国語のインターフェースとし、中国の開発者を対象とする。1つのAPIキーで数十のプロバイダーが提供する数百のモデルにアクセスし、請求を一元化し、自動フェイルオーバーと、価格またはレイテンシーによるルーティングを提供する。プロバイダー名とモデル名は架空だが、もっともらしいものにする。 創造性を最優先する。暗いグラデーションとコードブロックを使った、ありがちなAIウェブサイトにしてはいけない。中核はルーティングの可視化。リクエストがコードから送出されてプロバイダーへルーティングされ、そのプロバイダーが失敗すると自動的にバックアップへ切り替わり、価格とレイテンシーが即座に見えるようにする。モデルマーケットプレイスでは、プロバイダー、コンテキスト長、価格による絞り込みと比較に対応する。 ファーストビュー、モデルマーケットプレイスでの絞り込みと比較、1つのリクエストのルーティングとフェイルオーバー過程の3状態をデザインする。
作品とプロンプトを見る →Oil UI Proでサイトのモーション、カードコンテナ、モバイル対応を磨き込む
精密なSVGの光の軌跡、ドットパターン、流れるグラデーション背景、空間的な展開を備えた19種類のカードプロトタイプが必要な場合や、ファーストビューと価格表を200%に拡大して文字間隔と余白をブラインドレビューする場合は、Oil UI Proへのアップグレードを検討できます。
npx github:oil-oil/oil-cli install oil-ui-proよくある質問
プロダクトの実写写真や見栄えのよいスクリーンショットがない場合、サイトが寂しくなるのを防ぐには？
プロダクト固有のパラメーターやツールとしての性質を、ページで操作できる主体にします。ギャラリーの「Atelier Volders」（三脚スツールの高さとオイル仕上げの切り替え）や「Fonderie Mercier」（異なる青銅の鐘の倍音曲線をオンラインで試聴）は、外部写真を使わなくても十分な存在感があります。
公式サイトの背景は暗色と明色のどちらにすべきですか？
プロダクトのカテゴリーと閲覧場面によります。開発者向けの低レベルカーネル（Archon）、天文時計（Chronos）、夜間に使うハードウェアには暗色が合います。説明を長く読み、価格や規約を確認するSaaS、スタジオ、ECサイトの多くは、温かみのある明色や紙のような背景の方が読みやすくなります。
公式サイトのモバイル表示はどう確認すればよいですか？
デスクトップ画面を縮めただけの見た目で判断しないようにします。ブラウザーまたは作品ビューアーを390×844に切り替え、大見出しに不自然な孤立した文字が出ないか、ファーストビューの試用コントロールを指で操作できるか、3列の価格表が狭い画面でも読みやすいかを重点的に確認します。
ギャラリーのWeb事例は、ブラウザーでモバイル表示に切り替えられますか？
はい。ギャラリーのWeb作品（/ja/works/foundry/ や /ja/works/orvo-garden/ など）を開くと、下部のツールバーでデスクトップとモバイルのビューポートをワンクリックで切り替えられ、ページ内のコントロールも直接操作できます。