landing-page-design

ランディングページのデザイン

inference.sh CLI を使って、AI 生成ビジュアルを活用したコンバージョン率の高いランディングページをデザインします。

クイックスタート

curl -fsSL https://cli.inference.sh | sh && infsh login

# Generate a hero image
infsh app run falai/flux-dev-lora --input '{
  "prompt": "professional person smiling while using a laptop showing a clean dashboard interface, bright modern office, natural lighting, warm and productive atmosphere, lifestyle marketing photography",
  "width": 1248,
  "height": 832
}'

# Research competitor landing pages
infsh app run tavily/search-assistant --input '{
  "query": "best SaaS landing page examples 2024 conversion rate"
}'

インストールに関する注意： インストールスクリプトは OS／アーキテクチャを検出し、dist.inference.shから対応するバイナリをダウンロードして、SHA-256 チェックサムを検証するだけです。昇格された権限やバックグラウンドプロセスは必要ありません。手動でのインストールと検証も利用できます。

ファーストビューの基本公式

スクロールする前に見えるすべての要素で、5 秒以内に価値を伝える必要があります。

┌─────────────────────────────────────────────────┐
│  [Logo]              [Nav]        [CTA Button]  │
│                                                 │
│   Headline (6-12 words)                         │
│   ─────────────────────────                     │
│   Subheadline (15-25 words)        [Hero Image] │
│                                    showing the  │
│   [Primary CTA Button]            OUTCOME, not  │
│   "Start Free Trial"              the product   │
│                                                 │
│   Social proof: "Trusted by 10,000+ teams"      │
│   [logo] [logo] [logo] [logo] [logo]            │
└─────────────────────────────────────────────────┘

5 つの要素

要素	ルール	例
見出し	6～12 語で成果を示す	「数日ではなく数分でドキュメントを公開」
サブ見出し	15～25 語で方法を詳しく説明する	「コードベースから自動で作成される AI 活用ドキュメント。テンプレートは不要です。」
ヒーロー画像	製品ではなく成果を見せる	UI のスクリーンショットではなく、成果を見て満足している人
主要 CTA	行動を促す動詞＋価値	「無料トライアルを開始」。 「送信」や「詳細はこちら」ではありません
ソーシャルプルーフ	ロゴ、数、または短い推薦コメント	「[ロゴ] の 10,000 以上のチームに信頼されています」

見出し

コンバージョンにつながる公式

公式	例
[成果]を[悩み]なしで	「デザインスキルがなくても、美しいドキュメントを作成」
[期間]で[成果]	「5 分でサイトを公開」
[よくあるタスク]を実現する[より良い方法]	「API をより速く構築する方法」
[悩み]をやめよう。[成果]を始めよう。	「推測するのはやめよう。確かな情報を得よう。」
[数]個の[もの]で[成果]	「すべてのデータを管理する 1 つのツール」

見出しが失敗する理由

❌ "Welcome to Our Platform" (says nothing about value)
❌ "The World's Most Advanced AI-Powered Solution" (buzzwords, no specifics)
❌ "We Help Businesses Grow" (vague, generic)
❌ "Next-Generation Enterprise Software" (what does it DO?)

✅ "Turn customer feedback into product features, automatically"
✅ "The spreadsheet that thinks like a database"
✅ "Find and fix bugs before your users do"

ヒーロー画像

製品ではなく成果を見せる

❌ Screenshot of your dashboard (boring, hard to parse at a glance)
❌ Abstract geometric background (says nothing)
❌ Stock photo of a handshake (cliché)

✅ Person looking satisfied at clear results on their screen
✅ Before/after transformation
✅ The end result of using your product

# Outcome-focused hero
infsh app run falai/flux-dev-lora --input '{
  "prompt": "happy professional team celebrating around a laptop showing positive growth charts, bright modern office, natural sunlight, authentic candid moment, marketing photography style, warm tones",
  "width": 1248,
  "height": 832
}'

# Product-in-context hero
infsh app run bytedance/seedream-4-5 --input '{
  "prompt": "clean modern laptop on a minimalist desk showing a beautiful analytics dashboard, floating UI elements emerging from the screen, soft gradient background, product marketing style, professional",
  "size": "2K"
}'

CTA ボタン

テキスト

良い CTA	悪い CTA
「無料トライアルを開始」	「送信」
「無料で始める」	「ここをクリック」
「動作を見る」	「詳細はこちら」（コミットメントが弱い）
「最初のレポートを作成」	「登録」（曖昧）
「14 日間無料で試す」	「ユーザー登録」

公式： 行動を促す動詞＋価値／成果＋（任意：リスクの低減）

デザイン

要素	ルール
色	背景とのコントラストを高くする — 最も目立つ要素にする必要があります
サイズ	高さは最低 44px（タップ領域）とし、テキストと余白が収まる幅にする
位置	ファーストビューに配置し、主要なセクションの後にも繰り返し配置する
余白	ボタンの周囲に十分な余白を設け、詰め込みすぎない
セカンダリー CTA	必要に応じて、下にテキストリンクを配置する（「またはデモを見る」など）

セクションの順序

ランディングページで実績のある構成：

セクション	目的	重要な要素
1. ヒーロー	中核となる価値、主要 CTA	見出し＋画像＋CTA
2. ソーシャルプルーフ	信頼を築く	ロゴ、数、バッジ
3. 課題	共感を生む	ユーザーが認識している悩み
4. ソリューション／機能	課題の解決方法を示す	ビジュアルを添えた 3 つの主要機能
5. 仕組み	複雑さを軽減する	3 つのステップ：登録、設定、メリットを得る
6. お客様の声	効果を証明する	具体的なお客様の引用を 2～3 件
7. 料金	意思決定を促す	明確なプランを提示し、おすすめを強調する
8. FAQ	懸念に対応する	よくある質問を 5～7 件
9. 最終 CTA	取りこぼしを防ぐ	緊急性を持たせて主要 CTA を繰り返す

ソーシャルプルーフの種類

種類	効果	配置
企業ロゴ	すぐに把握でき、信頼性が高い	ヒーローの下
ユーザー数	規模を示す	ヒーローまたはソーシャルプルーフのバー
星評価	製品の品質を示す	CTA の近く
お客様の声	詳細な信頼性を示す	専用セクション
導入事例の数値	具体的な証拠を示す	機能セクション
信頼バッジ	セキュリティ／コンプライアンスを示す	フォーム、料金、フッターの近く

# Research for social proof stats
infsh app run exa/answer --input '{
  "question": "What is the average conversion rate for SaaS landing pages with social proof vs without?"
}'

フォームのデザイン

ルール	影響
フィールドが1つ増えるごとにコンバージョンが約11％低下します	フィールドを最小限にします
サインアップでは名前とメールアドレスが上限です	電話番号、会社名、役職は尋ねません
1列のレイアウトにします	複数列のフォームは使用しません
インライン検証を行います	送信時ではなく、すぐにエラーを表示します
明確なエラーメッセージを表示します	「フィールド3でエラー」ではなく「メールアドレスは必須です」と表示します
送信ボタンには操作内容を示すテキストを使います	「送信」ではなく「アカウントを作成」とします

モバイルの最適化

ルール	理由
CTAボタンを全幅にします	親指で簡単にタップできます
スクロール中もCTAを固定表示します	常にアクセスできます
横スクロールをなくします	モバイルのレイアウトが崩れます
フォントサイズを最低16pxにします	16px未満の入力欄はiOSで拡大されます
タップ対象を最低48x48pxにします	Apple HIG、Google Material
画像をレスポンシブにします	ビューポートからはみ出さないようにします
見出しとCTAを優先します	ファーストビューをシンプルにします

共有用OG画像

# Generate an OG image for the landing page
infsh app run falai/flux-dev-lora --input '{
  "prompt": "clean professional social sharing card, product name and tagline on modern gradient background, minimal design, corporate tech aesthetic, 1200x630 aspect ratio equivalent",
  "width": 1200,
  "height": 630
}'

# Or use html-to-image for a template-based approach
infsh app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-family:sans-serif;color:white\"><div style=\"text-align:center\"><h1 style=\"font-size:48px;margin:0\">DataFlow</h1><p style=\"font-size:24px;opacity:0.9\">Ship docs in minutes, not days</p></div></div>"
}'

ページ速度

ルール	目標	理由
ヒーロー画像	< 200 KB	最初に読み込まれる要素です
ページ全体のサイズ	< 2 MB	モバイルデータ通信とユーザーの忍耐力に配慮します
ファーストビューより下を遅延読み込みします	常に	表示されている内容だけを読み込みます
JavaScriptを最小限にします	< 200 KB	レンダリングを妨げます
LCP（最大コンテンツの描画）	< 2.5s	Google Core Web Vitals

よくある間違い

間違い	問題	修正方法
明確な見出しがない	訪問者に何を提供しているのか伝わりません	成果を重視した6～12語にします
CTAに「詳しくはこちら」と書かれている	ユーザーに求める行動のハードルが低すぎます	行動を促す動詞と具体的な価値を示します
ヒーローに製品のスクリーンショットを使っている	内容を把握しにくく、退屈です	成果を見せ、ライフスタイルを表す画像を使います
競合するCTAが複数ある	意思決定が難しくなります	メインのCTAを1つ、サブのCTAは最大1つにします
ソーシャルプルーフがない	信頼の根拠がありません	ロゴ、件数、またはお客様の声を追加します
フォームのフィールドが多すぎる	フィールドごとにコンバージョンが約11％低下します	名前とメールアドレスにとどめます
デスクトップ専用のデザイン	トラフィックの60％以上がモバイルです	モバイルファーストでデザインします
最後のCTAに緊急性がない	訪問者が離れ、忘れてしまいます	「14日間の無料トライアルを始める」とします

関連スキル

npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@web-search
npx skills add inference-sh/skills@prompt-engineering

すべてのアプリを見る：infsh app list