landing-page-design

belt CLI スキルをインストール： npx skills add belt-sh/cli

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

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

クイックスタート

inference.sh CLI（belt）が必要です。インストール手順

belt login

# Generate a hero image
belt 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
belt app run tavily/search-assistant --input '{
  "query": "best SaaS landing page examples 2024 conversion rate"
}'

ファーストビューの公式

スクロールする前に見える範囲で、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をより速く構築する方法」
[苦痛]をやめて、[成果]を始めよう。	「推測するのはやめて、把握しよう。」
[成果]を実現する[数][もの]	「すべてのデータを管理する、ひとつのツール」

見出しがうまくいかない理由

❌ "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
belt 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
belt 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
belt 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にします	iOSでは16px未満の入力欄をズームします
タップ領域は最低48x48pxにします	Apple HIG、Google Material
画像をレスポンシブにします	ビューポートからはみ出さないようにします
見出しと CTA を優先します	ファーストビューをシンプルにします

共有用 OG 画像

# Generate an OG image for the landing page
belt 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
belt 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

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