belt CLIスキルをインストール: npx skills add belt-sh/cli
ランディングページデザイン
inference.sh CLIを介してAI生成ビジュアルを使用し、コンバージョン率の高いランディングページをデザインします。
クイックスタート
inference.sh CLI（belt）が必要です。インストール手順
belt login
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
}'
belt app run tavily/search-assistant --input '{
"query": "best SaaS landing page examples 2024 conversion rate"
}'
ファーストビューの公式
スクロールする前に表示されるすべての要素は、5秒以内に価値を伝えなければなりません。
┌─────────────────────────────────────────────────┐
│ [ロゴ] [ナビ] [CTAボタン] │
│ │
│ ヘッドライン（6〜12語） │
│ ───────────────────────── │
│ サブヘッドライン（15〜25語） [ヒーロー画像] │
│ 製品では │
│ [プライマリCTAボタン] なく、 │
│ "無料トライアルを開始" 結果を示す │
│ │
│ ソーシャルプルーフ：「10,000以上のチームに信頼されています」│
│ [ロゴ] [ロゴ] [ロゴ] [ロゴ] [ロゴ] │
└─────────────────────────────────────────────────┘
5つの要素
| 要素 | ルール | 例 |
|---|
| ヘッドライン | 6〜12語、成果を述べる | 「ドキュメントを数分で、数日ではない」 |
| サブヘッドライン | 15〜25語、方法を説明する | 「コードベースから自動でドキュメントを作成するAI搭載。テンプレートは不要。」 |
| ヒーロー画像 | 製品ではなく、結果を示す | UIのスクリーンショットではなく、結果に満足している人の様子 |
| プライマリCTA | アクション動詞＋価値 | 「Submit」や「Learn More」ではなく「無料トライアルを開始」 |
| ソーシャルプルーフ | ロゴ、数、マイクロ testimonial | 「[ロゴ]で10,000以上のチームに信頼されています」 |
ヘッドライン
コンバージョンするフォーミュラ
| フォーミュラ | 例 |
|---|
| [成果] without [ペイン] | 「デザインスキルがなくても美しいドキュメントを」 |
| [時間枠]で[成果] | 「5分でサイトを公開」 |
| [一般的なタスク]のための[より良い方法] | 「より速いAPI構築方法」 |
| [ペイン]をやめる。[成果]を始める。 | 「推測するのはやめよう。知ることを始めよう。」 |
| [数字]の[もの]で[成果] | 「すべてのデータを管理するひとつのツール」 |
ヘッドラインが失敗する要因
❌ 「私たちのプラットフォームへようこそ」（価値について何も言っていない）
❌ 「世界で最も先進的なAI搭載ソリューション」（専門用語で具体性がない）
❌ 「私たちはビジネスの成長を支援します」（曖昧で一般的）
❌ 「次世代エンタープライズソフトウェア」（何をするのか？）
✅ 「カスタマーフィードバックを自動的に製品機能に変える」
✅ 「データベースのように考えるスプレッドシート」
✅ 「ユーザーが気づく前にバグを見つけて修正」
ヒーロー画像
製品ではなく結果を示す
❌ ダッシュボードのスクリーンショット（退屈、一目で解釈しにくい）
❌ 抽象的な幾何学模様の背景（何も伝えない）
❌ 握手のストックフォト（月並み）
✅ 画面にはっきりとした結果に満足している人の様子
✅ Before/Afterの変革
✅ 製品を使用した最終結果
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
}'
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の近く |
| お客様の声 | 詳細な信頼性 | 専用セクション |
| ケーススタディの統計 | 具体的な証明 | 機能セクション |
| 信頼バッジ | セキュリティ/コンプライアンス | フォーム、価格、フッターの近く |
belt app run exa/answer --input '{
"question": "What is the average conversion rate for SaaS landing pages with social proof vs without?"
}'
フォームデザイン
| ルール | 影響 |
|---|
| フィールドが増えるごとにコンバージョンは約11%低下 | フィールドを最小限に |
| 名前＋メール＝サインアップの最大値 | 電話番号、会社名、役職は聞かない |
| シングルカラムレイアウト | マルチカラムフォームは使わない |
| インライン検証 | 送信時ではなく、すぐにエラーを表示 |
| 明確なエラーメッセージ | 「フィールド3にエラー」ではなく「メールアドレスは必須です」 |
| 送信ボタンのテキスト＝アクション | 「送信」ではなく「アカウント作成」 |
モバイル最適化
| ルール | 理由 |
|---|
| CTAボタンは全幅 | 親指でタップしやすい |
| スクロール時にCTAを固定 | 常にアクセス可能 |
| 横スクロール禁止 | モバイルレイアウトが崩れる |
| フォント最小16px | iOSは16px未満の入力欄を拡大表示する |
| タップターゲット最小48x48px | Apple HIG、Google Material |
| 画像はレスポンシブ | ビューポートからはみ出さない |
| ヘッドライン＋CTAを優先 | ファーストビューを簡素化 |
シェア用OG画像
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
}'
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（Largest Contentful Paint） | < 2.5s | Google Core Web Vitals |
よくある間違い
| 間違い | 問題 | 修正 |
|---|
| 明確なヘッドラインがない | 訪問者はあなたが何をするかわからない | 6〜12語、成果に焦点を当てる |
| CTAが「もっと詳しく」 | 低コミットメント | アクション動詞＋具体的な価値 |
| ヒーローが製品のスクリーンショット | 解釈しにくく退屈 | 結果を示し、ライフスタイルイメージを使用 |
| 競合する複数のCTA | 決断麻痺 | プライマリCTA1つ、セカンダリ最大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