【完全ガイド】未経験から1日で作るLP制作｜架空カフェのLPをAIで公開するまで（手順・プロンプト付き）

このガイドのゴール

読み終えると、架空カフェ「陽だまり珈琲」のLPが1枚、Vercelで公開できている状態になります。題材を1つに固定して、最初から最後まで一緒に作ります。所要時間の目安：半日〜1日。コードは書けなくてOKです。情報は2026年6月時点のものです。

必要なもの（すべて無料枠でOK）：ChatGPT／Figma／v0（Vercel）／Vercelアカウント。

このページは目次から好きな所へ飛べます。途中で止めても、そこまでで価値が残るように作っています。

STEP 0｜準備（アカウント）

下記に登録します（数分・無料）。

ChatGPT：構成とコピーの作成。
Figma：ワイヤーフレーム（設計図）。
v0（Vercel）：見た目をAIで生成。
Vercel：公開（デプロイ）。

STEP 1｜コンセプト＆構成をAIで

まず「誰に・何を・どうなってほしいか」。今回は近所のお客さんの"来店・予約"を増やすのがゴール。印象は「温かい・ほっとする」。これをそのままAIに渡します。

コピペするプロンプト：

あなたはカフェのLP制作ディレクターです。『陽だまり珈琲』という地域の小さなカフェの、来店と予約を増やす1枚LPの構成を、ファーストビューからCTAまでセクション順に提案して。各セクションに見出し案を1つと、入れるべき要素を箇条書きで。トーンは温かくほっとする雰囲気。

返ってくる構成（例）：

ファーストビュー：「日常に、ひと息の陽だまりを。」＋店内写真＋［席を予約する］
こだわり：自家焙煎・小さな店・落ち着く空間
メニュー抜粋：写真＋価格（3点）
お客様の声：2〜3件
アクセス：地図・営業時間
再CTA：［席を予約する］→ フッター

この構成を、次のワイヤーにそのまま落とします。

STEP 2｜ワイヤーフレーム（Figma）

ページ上部の操作デモのとおり、Figmaで「設計図」を作ります。色は使わず（グレースケール）、配置と文章だけに集中します。

Fキー → 「Desktop」フレームを置く。
Tでテキスト → STEP1の本物の見出しを入れる（ダミー文章は使わない）。例：「日常に、ひと息の陽だまりを。」
右パネルでフォントをNoto Sans JPに。
グレーの四角で写真枠・［席を予約する］ボタンを配置。
上から：ヒーロー→こだわり→メニュー→お客様の声→アクセス→再CTA→フッターの順に並べる。

鉄則：参考を横に置く＝“盗む”。気に入ったカフェLPを開き、レイアウト・余白・フォントの雰囲気を真似ます（そのまま使うのは禁止、あくまで参考）。

STEP 3｜見た目を作る（v0）

ワイヤーが固まったら、v0に文章で指示して見た目を生成します。

コピペするプロンプト：

カフェ『陽だまり珈琲』の縦長LPを作って。温かみのあるアイボリー基調、フォントはNoto Sans JP。ファーストビューに見出し「日常に、ひと息の陽だまりを。」と［席を予約する］ボタン。セクションはこだわり / メニュー3点（写真＋価格）/ お客様の声 / アクセス（地図枠）/ 再CTA / フッター。スマホ対応で。

生成されたら、文言と写真を差し替え、色をブランドに寄せます。デザインの具体ルール：

フォントは2種類まで（見出し＋本文）。
色はメイン1色＋無彩色（白/グレー/黒）。CTAだけ目立つ差し色に。
余白は広めに。文字サイズは見出しと本文で段差を付ける。

STEP 4｜スマホ対応

2026年の常識はスマホ優先。ブラウザの開発者ツール（F12）で幅を375pxにして確認します。

ファーストビューが1画面に収まるか。
ボタンが指で押しやすい大きさか。
文字が小さすぎ／改行が変じゃないか。

崩れていたら、v0に「スマホ表示でFVが切れる。1画面に収まるよう調整して」と追指示します。

STEP 5｜公開（Vercel）

v0からそのままデプロイできます。

v0の［Deploy］を押す（またはGitHubに書き出し→Vercelで「Import」）。
Vercelが数十秒でビルド → 公開URLが発行される。
独自ドメインは後から接続可（Vercelの Settings → Domains）。

これで「陽だまり珈琲」のLPがネットに公開されました。

STEP 6｜完成チェックリスト

□ 表示崩れがない（PC/スマホ）
□ すべてのボタン・リンクが動く
□ スマホでFVが1画面に収まる
□ 表示が遅くない（重い画像は圧縮）
□ ページのタイトル・説明（SEO基本）を設定
□ 問い合わせ/予約の導線が分かる

つまずき対処

v0のクレジットが切れる：セクションごとに分けて生成する。
日本語フォントが反映されない：プロンプトで「Noto Sans JP」を明示。
デプロイでエラー：エラーログをコピーして、Claude Code/ChatGPTに貼り「直して」。

よくある質問（FAQ）

コードが書けないけど大丈夫？

はい。v0が実装を担います。あなたは構成・文章・チェックに集中します。

本当に1日でできる？

初回は調べながらで1日想定。2枚目以降はテンプレ化で速くなります。

情報はいつのもの？

2026年6月時点です。各ツールのUI・無料枠は変わるので最新を確認してください。

まとめ：次の一歩

1枚作れたら、それが作例になります。次は受注：相場・案件の取り方・月額保守は受注ガイドに、受注〜納品〜保守のテンプレ一式は実践パッケージと LP/HP制作プランにまとめています。作った作例は作例ギャラリーのように見せると受注につながります。情報は2026年6月時点のものです。