ランディングページ ビルダー フレームワーク

使い方

• 上部で CSS フレームワーク (Tailwind CSS / Bootstrap 5) を選択
• 左のブロックパレットからブロックをクリックで追加
• 「ページ構成」エリアで上下移動・削除可能
• リアルタイムプレビューで PC / タブレット / モバイル の見え方を確認
• 「全コピー」ボタンで完成したHTMLコードを取得
• 「プリセット」ボタンで定番構成を一発で組み立て可能

用意されているブロック (25種類)

ヘッダー・ファーストビュー

• ナビゲーション: ロゴ + メニュー (sticky対応)
• ヒーロー (テキスト): メイン見出し + CTAボタン
• ヒーロー (ビジュアル): 背景画像付きの大型ヒーロー
• フルワイド画像バナー: 画面横一杯の画像帯

信頼性・実績

• ロゴ一覧: 導入企業ロゴ
• メディア掲載実績: TV・新聞・雑誌掲載ロゴ
• 巨大数字インパクト: 実績数字を主役にした派手な訴求
• 実績数字: 数字で実績アピール (4項目)

日本LP特化セクション

• こんなお悩みありませんか: 黄色背景・チェックリスト・マーカー強調
• 3ステップで簡単: 大きな番号バッジ・ご利用の流れ
• 他社比較表: ◎○△× で違いを明確化
• 期間限定キャンペーン: 赤グラデの派手な特典バナー

サービス紹介

• 特徴 (3列): サービスの3つの強み
• 画像+テキスト (画像左/右): 機能紹介の定番
• 中央配置の大画像: 物語的訴求
• 画像ギャラリー (3列): 事例・ポートフォリオ
• 2列画像 (Before/After): 対比表示

信頼形成・クロージング

• お客様の声: 導入事例の感想 (3名)
• 料金プラン: 3プラン比較 (人気バッジ付き)
• チームメンバー: 顔写真+役職 (4名)
• FAQ: よくあるご質問 (アコーディオン)
• CTA: 行動喚起バナー (グラデーション)
• お問合せフォーム: お名前・メール・内容
• フッター: 4列リンク + コピーライト

画像の差し替えについて

生成されたHTMLには、プレースホルダー画像 (デモ用のダミー画像) が含まれています。本番運用の際は以下を参考に置き換えてください。

• picsum.photos: https://picsum.photos/seed/xxx/600/400 形式。商用利用可・ランダムな実写画像 (Lorem Picsum)
• placehold.co: https://placehold.co/180x60/e5e7eb/9ca3af?text=BRAND+1 形式。ロゴプレースホルダー用
• i.pravatar.cc: https://i.pravatar.cc/200?img=11 形式。アバター画像
• 本番では、自社の画像 (/images/hero.jpg 等) に置き換えてください
• 画像のサイズ・形式・alt属性は SEO/アクセシビリティの観点から重要です

このツールの活用シーン

• 制作会社のキックオフ: 提案時のLPサンプルを5分で用意
• スタートアップMVP: 暫定LPを即座に立ち上げ
• マーケターの叩き台: A/Bテスト用の構成案を複数バリエーション作成
• 学習・教育: LP構造の理解 (Bootstrap と Tailwind の構文比較)

使用後の編集について

生成されたHTMLはそのままブラウザで開けば動作します。文言・色・画像URLを編集して、実際のサービスに合わせてカスタマイズしてください。Tailwind版は CDN 読込で開発できますが、本番では PostCSS ビルドを推奨します。Bootstrap版は CDN そのままで本番運用可能です。