画像ベースLP作成
使い方ガイド

このガイドの対象

画像を縦に積むタイプのLPを、ブラウザだけでたたき台まで作る方向けです。

• 自分で案件を回したい制作者
• デザイナーにたたき台まで作ってもらい、実装や公開は別担当へ渡したい人
• 営業がデザイナーへ依頼するときの共通手順として使いたい人

全体の流れ

各ツールの出力ZIPを、次のツールへ渡していきます。

1. 透過画像 分割・トリミング … デザインをパーツ化
2. LPたたき台作成 … HTML/CSSとリンク設定
3. LP背景・セクション編集（任意）… 背景と余白配分
4. LP PC/SP結合 … PC版とスマホ版を1つに

事前準備

デザインソフト側で、背景色や背景画像を外した状態の画像を書き出します。余白の意味（ただの空きか、背景内の余白か）は後から調整できます。

• PC版とスマホ版は、それぞれ別デザインとして書き出します
• 画像が大きい場合は先に画像圧縮・変換でリサイズ
• 透過が必要な場合は PNG / WebP で書き出します

同じ流れを試す用のサンプルもあります。

• サンプルデザイン（透過画像ZIP） … 分割ツールに入れるPC版／スマホ版の画像です
• 完成見本ZIP … 解凍して index.html を開くと、結合後の見え方を確認できます

1. 透過画像 分割・トリミング

背景を外したデザイン画像をドロップし、「分割・トリミングする」を実行します。近い文字や下線は「要素ごとに分割（推奨）」でまとまりやすくなります。

• タイトルと下線が分かれすぎる場合は、結合機能でまとめます
• 同じ元画像の結合では「元パーツを出力から外す」を使うと、LP側で1ブロックになります
• 最後にZIP保存すると、manifest.json（位置情報）も同梱されます

2. LPたたき台作成

分割ZIPを読み込み、縦積みLPのたたき台を作ります。PC版とスマホ版は「作成する版」で切り替えて、それぞれZIPを書き出します。

• PC版 … 狭い画面向けの自動レスポンシブが有効
• スマホ版 … デザイン比率を維持（スマホデザインを素直に再現）
• 画像上をドラッグしてリンク範囲（ホットスポット）を追加できます
• 別タブ／同タブ、OGPなどのSEO設定もここで行えます

3. LP背景・セクション編集（任意）

たたき台ZIPを読み込み、連続するブロックをまとめて背景を付けます。背景の幅はウィンドウいっぱい／コンテンツ幅を選べ、中の画像は自動レスポンシブのままです。単色・背景画像・グラデーション、上下padding、既存余白の配分ができます。

グラデーションはCSSジェネレーターで作成し、「値だけコピー」で貼り付けます。透過グラデも不透明度スライダーで作れます。

• 既存余白は「背景外100%／半分ずつ／背景内100%」で配分できます
• 空き量は変えず、背景が塗られる範囲だけを調整します
• 出力ZIPはそのままPC/SP結合へ渡せます

4. LP PC/SP結合

PC版ZIPとスマホ版ZIPを選び、切り替え幅で1つのLPにまとめます。スマホ版ZIPを読み込むと、そのデザイン幅がブレークポイントへ自動反映されます。

• SEO・OGPはPC版の設定を引き継ぎます
• 背景設定も各版ごとに引き継がれます
• 2倍書き出しの画像でも、ブレークポイントはCSSピクセル幅で指定します

誰がどこまでやるか

ツール単体より、「役割分担の型」として使うのが効果的です。

つまずきやすい点

• リンクが出ない … javascript: など危険な形式は除外されます。相対パス（例: contact.html）、https://、/、#、mailto:、tel: は使えます
• グラデが表示されない … CSSジェネレーターでは「値だけコピー」を使う（background: 付きでも貼り付け時に自動除去されます）
• 分割しすぎ … 「要素ごとに分割」や結合機能を使う
• 余白の意味が不明 … 背景編集の「既存余白の配分」で背景内／外を調整
• 画像が重い … 分割前に画像圧縮・変換でリサイズ