ランディングページ ビルダー フレームワーク
Tailwind CSS / Bootstrap 5 に対応したブロック組み合わせ式のLPビルダーです。Hero / Features / Stats / Testimonials / Pricing / FAQ / CTA / Footer 等の 10ブロック を選んで並べ替え、リアルタイムプレビューで確認しながら、完成したHTMLを即コピーできます。LP の叩き台・モック・MVP用に最適です。
ブロック追加 (クリックで追加)
ナビゲーション
ロゴ+メニュー (Header)
+
ヒーロー
メイン見出し+CTA
+
特徴 (3列)
サービスの3つの強み
+
実績数字
数字で実績アピール
+
お客様の声
導入事例の感想
+
料金プラン
3プラン比較
+
FAQ
よくあるご質問
+
CTA
行動喚起バナー
+
お問合せフォーム
お問合せ入力欄
+
フッター
コピーライト+リンク
+
📋 ページ構成 (上から順に表示)
⬅ 左のブロックをクリックして追加してください
または上部の「プリセット」ボタンから一発で組み立てできます
または上部の「プリセット」ボタンから一発で組み立てできます
📺 リアルタイムプレビュー
💻 生成されたHTMLコード
index.html
(ブロックを追加するとここにHTMLコードが表示されます)
使い方
- 上部で CSS フレームワーク (Tailwind CSS / Bootstrap 5) を選択
- 左のブロックパレットからブロックをクリックで追加
- 「ページ構成」エリアで上下移動・削除可能
- リアルタイムプレビューで PC / タブレット / モバイル の見え方を確認
- 「全コピー」ボタンで完成したHTMLコードを取得
- 「プリセット」ボタンで定番構成を一発で組み立て可能
用意されているブロック (10種類)
- ナビゲーション: ロゴ + メニュー (sticky対応)
- ヒーロー: メイン見出し + CTAボタン (ファーストビュー)
- 特徴 (3列): サービスの3つの強み
- 実績数字: 数字で実績アピール (4項目)
- お客様の声: 導入事例の感想 (3名)
- 料金プラン: 3プラン比較 (スターター / プロ / エンタープライズ)
- FAQ: よくあるご質問 (アコーディオン)
- CTA: 行動喚起バナー (グラデーション)
- お問合せフォーム: お名前・メール・内容
- フッター: 4列リンク + コピーライト
このツールの活用シーン
- 制作会社のキックオフ: 提案時のLPサンプルを5分で用意
- スタートアップMVP: 暫定LPを即座に立ち上げ
- マーケターの叩き台: A/Bテスト用の構成案を複数バリエーション作成
- 学習・教育: LP構造の理解 (Bootstrap と Tailwind の構文比較)
使用後の編集について
生成されたHTMLはそのままブラウザで開けば動作します。文言・色・画像URLを編集して、実際のサービスに合わせてカスタマイズしてください。Tailwind版は CDN 読込で開発できますが、本番では PostCSS ビルドを推奨します。Bootstrap版は CDN そのままで本番運用可能です。