API 未接続
02 / CANVAS縦長LPキャンバス
構成 画像 0/0 生成前に概算を表示
STYLE LIBRARY

業種 × 世界観で選ぶテイスト

デザインの型カタログ(6世界観)を種に、英語のデザイン指示プロンプトまで持った本物の資産です。

ASSET & CHARACTER

自分の素材と、同じ人物を使い続ける。

商品写真・ロゴを登録すると、セクションごとに「この素材を使う」を選べます。

素材画像スロット

商品写真や店舗写真を最大8枚。クリックまたはドロップ。

キャラクターシート(最大3人)

登録すると生成に反映。セクションの「編集・素材」で①②③から出す人を選べます。

CONSISTENCY
EXPORT & PUBLISH

作ったLPを、貼れる形にする。

HTML1枚に書き出して、Vercel・ロリポップ・UTAGEなどにそのまま置けます。

公開情報

検索エンジンに載せないnoindex(リンクを知ってる人だけ)

仕上げ(書き出しHTMLに反映)

ヒーロー演出と見出しアニメはスマホプレビューにも映ります。オープニング・タップ演出は書き出したHTMLで確認してね。

スマホの画面幅では見えません。PCの広い画面でLPの左右に敷かれる背景です。

書き出し

画像はファイルの中に埋め込むので、これ1枚で完結します。

🛡 公開前あんしんチェック

収入保証・誇大表現・煽り・薬機法の危険ラインを確認して、やさしい言い換え案を出します。

📣 告知文セット

このLPを届けるための下書きを作ります:Threads投稿3本・公式LINE配信文・プロフィール導線文。投稿は自動ではしません。

📘 公開のしかた(無料・Cloudflare)

上の「HTML 1枚に書き出す」で保存したファイルを、公開ガイド(5ステップ)のとおりに Cloudflare Pages へドラッグ&ドロップするだけ。無料で、お店・商品のLPにも使えます。
※商用でなければ、下の「Vercelに公開」もそのまま使えます(注意書きを読んでから)。

🚀 Vercelに公開(個人・非商用のみ)

⚠️ Vercelの無料プラン(Hobby)は、規約で「個人・非商用のみ」です。お店・商品・サービスのLPなど商用で使う場合は、Vercelに公開せず、公開ガイド(Cloudflare・無料で商用OK)の手順で公開してください。ここから公開した内容についての規約上の責任は負えません(ご自身の判断でお使いください)。 → 公開ガイド

保存・引っ越し

作業内容はこのブラウザに自動保存されています。別PCへはファイルで移動できます。

「テンプレとして書き出す」は画像を含めない配布用(構成・文言・テイスト・設定だけ)。特典配布や販売に使えます。

セクションを作って画像を生成すると、ここにスマホ表示プレビューが出ます。

キーはこの端末のセッション中だけ保持し、サーバーに送りません。生成時にOpenAIへ直接送信されます。

🔒 どちらもlocalStorageには保存しません(タブを閉じると消えます)。共有PCでは作業後にブラウザを閉じてください。

見本画像つきのテイスト一覧を、閲覧専用の公開ページにします。プロンプトの中身は含まれないので、資産は守られたまま「見せる棚」だけ公開できます。

※次回からは前回の入力値を覚えています(このPC・このブラウザのみ)

わからない質問は空欄でもOK。答えはこのブラウザに自動保存されます。

構成・文言の雛形・テイスト・仕上げ設定がセットになっています。選んだあと()の中を自分の商品に差し替えて生成してね。

文字はドラッグで動かせます。クリックで選択。位置と大きさは画面幅に合わせて自動で伸び縮みします。

① OpenAI APIキーを用意する(最初の1回だけ)

  1. platform.openai.com にログイン(ChatGPTと同じアカウントでOK)
  2. 右上 Settings → Billing で $5〜 チャージ(ChatGPT Plusとは別のお財布です)
  3. Settings → General → Verify Organization で本人確認(画像生成に必須・数分)
  4. 左メニュー API keys → Create new secret key → 「sk-」で始まるキーをコピー

② このツールにつなぐ

  1. 右上「⚙ BYOK設定」にキーを貼る → 接続テスト で✅を確認 → 接続する
  2. キーはこのPCのタブが開いている間だけ保持。どこにも送信・保存されません

③ 作る流れ

  1. 「つくる」でアイデア・相手・ゴールを入力 →「セクションに自動分割」
  2. テイストを選ぶ(テイストタブ/スクショから作成もOK)
  3. セクションごとに「生成する」→ 候補から好きな1枚を選ぶ
  4. 再生成すると前の候補も棚に残るので、テイストを変えて比較できます
  5. 「書き出し・公開」からHTML1枚 or 縦連結PNGでダウンロード

④ 日本語がにじむ・ダサい・古くさいとき

  1. 画像モデルが「gpt-image-2」(最新・日本語文字にも強い)になっているか確認。古いモデルだと「昔のAI画像」っぽくなります
  2. 人物が不気味なとき → 「画風」を「写実的」に、品質を「高品質」に上げて再生成
  3. 右パネル「文字の扱い」が「文字は後から重ねる」だと、見出しはHTML文字なので絶対ににじみません
  4. 新しいモデルが出たら、モデル欄に名前を直接入力すればすぐ使えます

⑤ 料金の目安(1枚・概算)

標準 約6円 / 下書き 約1円 / 高品質 約25円(gpt-image-2縦長)。実際の請求はOpenAIのUsageで確認できます。

⑥ Vercelに公開する

  1. トークンの発行場所はここ → vercel.com/account/tokens
    手動でたどるなら:右上の自分のアイコン(チーム名じゃない方)→ Account Settings → 左メニューの Tokens
    ⚠ チーム(〜s-projects)の設定ページにはありません。個人アカウント設定の側です
  2. Create Token → 名前は何でもOK・ScopeはFull Account → できたトークンを「⚙ BYOK設定」のVercelトークン欄に貼って接続
  3. 「書き出し・公開」タブでプロジェクト名(=URL)を決めて「🚀 Vercelに公開する」
  4. 同じプロジェクト名でもう一度押すと上書き更新。LPごとに名前を変えれば何本でも公開できます

⑦ QRコードをLPに貼りたいとき

HTML部品セクションを追加 →「QRコード」を選ぶ → 読み込ませたいURLを入れるだけ。QRは常に白背景×黒(どのテイストでも確実に読み取れます)。LINE登録・予約ページ・地図アプリなどへの導線に使えます。

⑧ 診断クイズ(はい/いいえ)を入れたいとき

HTML部品セクションを追加 →「診断クイズ」を選ぶ → 質問5つと、はいの数(0〜1/2〜3/4〜5個)ごとの結果文を入れる。※プレビュー欄ではボタンが反応しません。「書き出し・公開」した本物のページで動きます。

⑨ PCで見たときのまわりの背景を変えたいとき

「書き出し・公開」タブの「仕上げ」にある「PCで見たときのまわりの背景」から選べます。テイスト色のまま/色を指定/1枚目の画像をぼかして敷く、の3種類。スマホ幅では見えません。

⑩ APIキーを登録したくないとき(特典GPTsで画像だけ作る)

OpenAIのAPIキー登録が面倒・課金したくない場合は、この方法でも画像を用意できます。

  1. 特典「LP原稿ポン出しGPT」を開く(要ChatGPT。リンクは購入時の納品ガイドに記載)
  2. GPTsに「このセクションの画像を作って」と頼む → サイズ(縦長/正方形/横長)と枚数を伝えると、その場で画像を生成してくれます
  3. 気に入った画像を保存する
  4. このツールのセクションにある「画像を入れる」から保存した画像をアップロードする

参考にしたいLPやデザインのスクショを貼ると、AIが配色・書体・雰囲気を読み取ってテイスト化します。
(Ctrl+V貼り付け/クリックで選択。API接続が必要です)

ここに Ctrl+V で貼り付け、またはクリックして画像を選択

写真がそのままはっきり敷かれます(ぼかしたいときは「1枚目の画像をぼかして敷く」を使ってね)。

写真の構図・お店や商品の特徴はそのままに、選んだスタイルのイラストに変換します。店舗写真・商品写真・教材の表紙などに。できあがりは素材に追加して、そのままセクションや文字載せに使えます。

元の写真
スタイル