LP Boardの「画像＋HTML」ハイブリッド構成
LP Boardの基本は高品質な画像セクションですが、一部のセクションは自動的に本物のHTML（テキストとして選択・コピーできる形式）で生成されます。
| 種類 | 生成方法 | 特徴 |
|---|---|---|
| 画像セクション（基本） | AIが1枚の画像として描画 | デザイン自由度が最高。ビジュアル訴求に強い |
| HTMLセクション | AIがHTML/CSSコードを生成 | 文字がテキストとして存在 → 検索エンジンに読まれる・文字がくっきり・修正が正確 |
どのセクションがHTMLになる？
FAQ（よくある質問） のような「文字の正確さが命」のセクションは、自動的にHTMLで生成されます。Q&Aの長文を画像にすると文字の信頼性が落ちるためです。それ以外のセクション（ファーストビュー・実績・オファーなど）は、ビジュアルの強さを優先して画像で生成されます。
💡 使い分けは自動なので、普段は意識する必要はありません。「FAQを追加して」と言えば勝手にHTML形式になります。
セクションごとに「画像 ⇄ コード」を選べる
「Genspark や Claude のような、コードで作るモダンなWebデザインが好き」という方向けに、各セクションを**コード（HTML+CSS）**で仕上げることもできます。
- 画像: gpt-image-2 による高品質ビジュアル（標準・強み）
- コード: HTML+CSSのフルレスポンシブ。文字編集がかんたん・PCでも映える
切り替え方は2通り：
- チャットで指示: 「料金セクションはコードにして」「FVは画像に戻して」と言うだけ
- 編集画面のトグル: 各セクションの上に表示される「🖼️ 画像 / ⌨️ コード」ボタンで切り替え（押すとその方式で作り直します）
💡 セクション単位で混在できます。例：ファーストビューや事例は画像で映えさせ、料金・FAQ・特徴はコードで。これは提案であり、いつでも自由に変更できます。
タップで動くUI（アコーディオン・タブ・カルーセル）
コードセクションでは、タップで動くUIも作れます。チャットで言うだけでOKです。
| 言い方の例 | できるもの |
|---|---|
| 「よくある質問を**開閉式（アコーディオン）**にして」 | 質問をタップすると答えが開閉するFAQ |
| 「料金表をタブで切り替えられるようにして」 | プランをタブで切り替える料金表 |
| 「お客様の声をカルーセルにして」 | カードをドットや横スワイプで切り替える表示 |
- 指示すると、そのセクションは自動的にコード（HTML）表示に切り替わって作り直されます（画像ではなくなるため、見た目の質感が少し変わります）
- 一度指定すれば、作り直しても開閉式・タブ・カルーセルのまま維持されます
- 「やっぱり画像に戻して」と言えばいつでも元の画像方式に戻せます
💡 横スワイプLPの中では、カルーセルはページ送りと操作がぶつからないようドットタップ切り替え式になります（縦スクロールLPでは横スワイプ式）。
ファーストビューを複数枚のカルーセルにする
ファーストビュー（1枚目）は、2〜3枚の画像が自動で切り替わるカルーセルにできます。
- 編集画面でファーストビューのサムネイルにマウスを乗せる（スマホは下のバー）
- 「カルーセル」ボタンを押す
- 過去の生成やデザイン比較で作った案から2〜3枚選んで保存（切替間隔は3/4/6秒から選択）
- 切り替えはフェード式なので、スワイプ操作とぶつかりません
- 新しく画像を作る必要はありません（過去に生成した案の再利用なので追加コストなし）
- ZIP保存にも全画像が含まれ、オフラインでも動きます
- 1枚だけに戻したいときは、同じ画面で「カルーセルを解除」
レンダリング方式（スワイプLP / フルレスポンシブ）
「⚙️ 設定 → レンダリング方式」で、LP全体の土台を選べます。
| 方式 | 特徴 |
|---|---|
| スワイプLP（標準） | 画像中心・モバイル最適のスワイプ式 |
| レスポンシブ | コード/画像ハイブリッド。PCでもフル幅で映える今っぽいWebデザイン |
💡 コードで作ったセクションを PC でもフル幅で見せたい場合は「レスポンシブ」を選びます。
PC全画面表示（PC用の横長画像を自動生成）
スワイプLP（画像中心）のまま、パソコンでは横長の全画面レイアウトで見せることもできます。スタンダードプラン以上の機能です。
- LPの「⚙️ 設定 → 🖥️ PC全画面表示（横長画像）」を開く
- 「PC版を生成」を押す（1セクションあたり1分ほど）
- 生成が終わると、パソコンで開いたときだけサイドバーが消え、各セクションが16:9の横長画像で全画面表示されます
- 横長版は、完成済みの縦版そのものをAIが参照して同じデザイン・同じ文言のまま横長に組み直したものです（別物のデザインにはなりません）
- スマートフォンでの表示は一切変わりません（従来どおり縦のスワイプLP）
- 動画・コード・手動編集レイヤーのあるセクションは対象外で、PCでも従来表示のままです
- 縦版をあとから編集した場合、そのセクションのPC版は公開（更新の反映）のタイミングで自動的に作り直されます。すぐ直したい場合は設定の「PC版を生成」を再度押してください
- 仕上がりは編集画面のプレビュー切替（🖥️ PC）で確認できます（設定の「🖥️ PC表示で確認する」からも開けます）
- 横長版の仕上がりだけが気に入らないときは、設定の「🔁 作り直す」でAIに描き直させることができます（AIが毎回新しく描くため、そのつど生成コストと数分の時間がかかります）
💡 「レスポンシブ」方式との違い: レスポンシブはコードでPC対応するのに対し、PC全画面表示は画像のままPC対応します。画像LPの質感を保ったままPCでも迫力を出したい場合はこちらを使ってください（レスポンシブLPでは本機能は使いません）。
SEOへの配慮も自動
画像LPは本来、検索エンジンにテキストが読まれにくい弱点がありますが、LP Boardは見出し（H1/H2）を設定内容から自動でHTML出力します。さらに公開の手順で紹介するSEO設定（タイトル・説明文・FAQ構造化データ）を加えれば、画像LPでも検索流入を狙えます。
表示モード: スワイプ ⇄ 縦スクロール
公開LPの動き方は2種類から選べます。
| モード | スマホでの動き | 向いているケース |
|---|---|---|
| スワイプ（初期設定） | 横にスワイプして1画面ずつ読む | 紙芝居のようにテンポよく読ませたい。SNS広告との相性◎ |
| スクロール | 普通のWebページのように縦（下）にスクロール | 一般的なLPの操作感にしたい。じっくり読ませる商材 |
💡 スマホの標準は横スワイプですが、いつでも設定から縦スクロールに切り替えられます。公開後の切り替えも可能です。
切り替え手順
- LPの「⚙️ 設定」を開く
- 「表示モード」セクションで「スワイプ」または「スクロール」を選択
- 保存すると公開LP・プレビューの両方に反映されます
💡 PCで表示した場合は、どちらのモードでも見やすい縦スクロール＋サイドバー付きレイアウトになります（サイドバーの使い方参照）。「PC全画面表示」を有効にしたLPは、サイドバーの代わりに横長画像の全画面レイアウトになります。
ZIPでダウンロード（納品・他サーバー設置）
完成したLPをHTML＋画像ファイル一式のZIPとしてダウンロードできます。
こんな時に使います
- 制作物としてクライアントにファイル納品したい
- クライアントの自社サーバーやレンタルサーバーに設置したい
- LP Boardの公開URLではなく、完全に独立したファイルとして渡したい
手順
- LP編集画面の右上「…」メニューを開く
- 「ZIP保存」をクリック
- ダウンロードされたZIPを展開すると、
index.htmlと画像一式が入っています - そのままサーバーにアップロードすれば動作します（特別な設定は不要です）
⚠️ ZIP出力は有料プラン（スタンダード）または買い切り購入（1本¥8,000）の機能です。さらに※一度でも公開したLPが対象です（未公開のLPはダウンロードできません）。詳しくは料金プランと制限へ。
💡 ZIP納品したLPには、LP Boardの計測機能（LINE計測など）は付きません。計測まで使う場合はLP Boardの公開URL（または独自ドメイン接続）でホスティングしてください。