HTML出力＋画像でLPを作る — ハイブリッド構成とZIP納品

LP Boardの「画像＋HTML」ハイブリッド構成

LP Boardの基本は高品質な画像セクションですが、セクションごとに本物のHTML（テキストとして選択・コピーできる形式）で作ることもできます。

どのセクションがHTMLになる？

標準では、すべてのセクションが画像で作られます。 FAQ（よくある質問） や料金表のような「文字の正確さが命」のセクションは、チャットで「FAQはコードにして」のように伝えるとHTMLで作れます（構成を決める段階でも、画像ができたあとでも伝えられます）。Q&Aの長文を画像にすると文字の信頼性が落ちるため、文字が多いセクションほどHTMLが向いています。

💡 あとからFAQなど文字が主役のセクションを追加するときは、AIがHTMLを選ぶことがあります。どちらで作られても、下の方法でいつでも切り替えられます。

セクションごとに「画像 ⇄ コード」を選べる

「Genspark や Claude のような、コードで作るモダンなWebデザインが好き」という方向けに、各セクションを**コード（HTML+CSS）**で仕上げることもできます。

• 画像: gpt-image-2 による高品質ビジュアル（標準・強み）
• コード: HTML+CSSのフルレスポンシブ。文字編集がかんたん・PCでも映える

切り替え方は2通り：

1. チャットで指示: 「料金セクションはコードにして」「FVは画像に戻して」と言うだけ
2. 編集画面のトグル: 各セクションの上に表示される「🖼️ 画像 / ⌨️ コード」ボタンで切り替え（押すとその方式で作り直します）

💡 セクション単位で混在できます。例：ファーストビューや事例は画像で映えさせ、料金・FAQ・特徴はコードで。これは提案であり、いつでも自由に変更できます。

タップで動くUI（アコーディオン・タブ・カルーセル）

コードセクションでは、タップで動くUIも作れます。チャットで言うだけでOKです。

• 指示すると、そのセクションは自動的にコード（HTML）表示に切り替わって作り直されます（画像ではなくなるため、見た目の質感が少し変わります）
• 一度指定すれば、作り直しても開閉式・タブ・カルーセルのまま維持されます
• 「やっぱり画像に戻して」と言えばいつでも元の画像方式に戻せます

💡 横スワイプLPの中では、カルーセルはページ送りと操作がぶつからないようドットタップ切り替え式になります（縦スクロールLPでは横スワイプ式）。

ファーストビューを複数枚のカルーセルにする

ファーストビュー（1枚目）は、2〜3枚の画像が自動で切り替わるカルーセルにできます。

1. 編集画面でファーストビューのサムネイルにマウスを乗せる（スマホは下のバー）
2. 「カルーセル」ボタンを押す
3. 過去の生成やデザイン比較で作った案から2〜3枚選んで保存（切替間隔は3/4/6秒から選択）

• 切り替えはフェード式なので、スワイプ操作とぶつかりません
• 新しく画像を作る必要はありません（過去に生成した案の再利用なので追加コストなし）
• ZIP保存にも全画像が含まれ、オフラインでも動きます
• 1枚だけに戻したいときは、同じ画面で「カルーセルを解除」

レンダリング方式（スワイプLP / フルレスポンシブ）

「⚙️ 設定 → 見せ方 → ページの送り方」で、LP全体の土台を選べます。

💡 コードで作ったセクションを PC でもフル幅で見せたい場合は「上から下へ、スクロールして見せる」を選びます。画像のセクションも幅いっぱいにしたい場合は、下の「PC全画面表示」を併用します。

PC全画面表示（PC用の横長画像を自動生成）

画像で作ったLPを、パソコンでは横長の全画面レイアウトで見せることもできます。スタンダードプラン以上の機能で、追加料金はかかりません。

1. LPの「⚙️ 設定 → 見せ方 → パソコンで全画面表示する」を開く
2. 「PCで横長表示を有効にする」にチェックを入れる
3. 「PC版を生成」を押す（1セクションあたり1分ほど。ページを閉じても生成は続きます）
4. 生成が終わると、パソコン（とタブレット）で開いたときだけ、各セクションが横長の画像で全画面表示されます

• 横長版は、完成済みの縦版そのものをAIが参照して同じデザイン・同じ文言のまま横長に組み直したものです（別物のデザインにはなりません）
• スマートフォンでの表示は一切変わりません（従来どおり縦のスワイプLP）
• 動画・コード・手動編集レイヤーのあるセクションと、写真を複数並べたセクションは対象外で、PCでも従来表示のままです
• 縦版をあとから編集した場合、そのセクションのPC版は公開（更新の反映）のタイミングで自動的に作り直されます（作り直しが終わるまでは、PCでも縦長の画像で表示されます）。すぐ直したい場合は設定の「PC版を生成」を再度押してください
• 仕上がりは編集画面のプレビュー切替（🖥️ PC）で確認できます（設定の「🖥️ PC表示で確認する」からも開けます）
• 横長版の仕上がりだけが気に入らないときは、設定の「🔁 作り直す」でAIに描き直させることができます（AIが毎回新しく描くため、そのつど数分の時間がかかります。追加料金はかかりません）

💡 「レスポンシブ」方式との違い: レスポンシブはコードでPC対応するのに対し、PC全画面表示は画像のままPC対応します。画像LPの質感を保ったままPCでも迫力を出したい場合はこちらを使ってください（「上から下へ、スクロールして見せる」のLPでも併用でき、画像で作ったセクションも幅いっぱいに表示されます）。

SEOへの配慮も自動

画像LPは本来、検索エンジンにテキストが読まれにくい弱点がありますが、LP Boardは見出し（H1/H2）を設定内容から自動でHTML出力し、公開すると構造化データ（ページ・事業者・サービス・FAQ）も自動で入れます。公開の手順で紹介するSEO設定（タイトル・説明文）と会社情報を整えるほど、検索エンジンやAIにLPの中身が正確に伝わります。

表示モード: スワイプ ⇄ 縦スクロール

公開LPの動き方は2種類から選べます。

💡 めくり方は、最初の対話で画像を作る前に聞かれます。 縦スクロールを選ぶと、写真の無いセクションを画面と同じ形で作るので、下に空白ができず文字が大きく表示されます。

💡 あとから設定で切り替えることもできます（公開後も可能）。ただし写真の無い画像セクションは、作ったときのめくり方に合わせた形のままです。見え方を合わせるには、編集画面のチャットで「全部作り直して」と送って作り直してください（作り直さなくても表示は崩れません）。

切り替え手順

1. LPの「⚙️ 設定」を開く
2. 「見せ方」の「ページのめくり方」で「👆 スワイプ（横送り）」または「📜 縦スクロール」を押す
3. 押すとすぐ保存され、公開LP・プレビューの両方に反映されます

💡 パソコンで開いた編集画面では、プレビュー上部の「↔ 横スワイプ」「↕ 縦スクロール」でも切り替えられます（公開LPのめくり方も変わります）。

💡 PCで表示した場合は、どちらのモードでも見やすい縦スクロール＋サイドバー付きレイアウトになります（サイドバーの使い方参照）。「PC全画面表示」を有効にしたLPは、サイドバーの代わりに横長画像の全画面レイアウトになります。

ZIPでダウンロード（納品・他サーバー設置）

完成したLPをHTML＋画像ファイル一式のZIPとしてダウンロードできます。

こんな時に使います

• 制作物としてクライアントにファイル納品したい
• クライアントの自社サーバーやレンタルサーバーに設置したい
• LP Boardの公開URLではなく、完全に独立したファイルとして渡したい

手順

1. パソコンはプレビュー上部のツールバー、スマホは「プレビュー」タブの「…」メニューを開く
2. 「ZIP保存」をクリック
3. ダウンロードされたZIPを展開すると、index.htmlと画像一式が入っています
4. そのままサーバーにアップロードすれば動作します（特別な設定は不要です）

⚠️ ZIP出力はスタンダードプランの機能です（以前に買い切りで購入したLPも出力できます）。さらに**※一度でも公開したLPが対象**です（未公開のLPはダウンロードできません）。詳しくは料金プランと制限へ。

💡 ZIP納品したLPには、LP Boardの計測機能（LINE計測など）は付きません（ご自身で設定したMetaピクセルなどの計測タグは入ります）。計測まで使う場合はLP Boardの公開URL（または独自ドメイン接続）でホスティングしてください。