デザインができないから、LPは無理？
自分が作った物や、やっていることを紹介するページが欲しい。でもデザインはできないし、どこから手を付ければいいのかもわからない。LPと聞いて、そこで止まっている人は多いと思います。
LPは、ランディングページの略です。見た人に何か1つのことをしてもらうための、縦に長い1枚のページのことで、申し込み、問い合わせ、登録、と、してほしいことはページによって違います。
先に言っておくと、LPは誰でも作れます。
コードも、デザインの知識も要りません。要るのは、参考になる画像1枚と、そのページで何をしたいかだけです。
このコースの流れ
- STEP 1 参考になる画像を用意する
- STEP 2 AIと壁打ちして、設計書を立てる
- STEP 3 設計書と画像を渡して、再現してもらう
- STEP 4 できた物を、口で直して仕上げる
使うのは Claude Code か Codex です。ページのファイルを作って保存する作業なので、チャットだけのAIではなく、AIエージェント入門編で作った作業フォルダをそのまま使います。
いちばん大事なのは、見本の画像
用意するのは、「こんな感じのLPにしたい」という大まかなデザインの画像です。全体の色、並び、雰囲気がわかれば十分で、細かい文字まで読めなくても大丈夫です。手に入れ方は2つあって、基本は画像生成で自分の案を作るほうです。
| やり方 | 中身 |
|---|---|
| 画像生成で作る | ChatGPTなどで、作りたいLPのデザイン案を、縦に長い1枚の画像で作ってもらう |
| 検索で探す | Googleの画像検索で「LP デザイン」などと調べて、いいと思うページの画像を保存する。人のページなので、借りるのは並びと余白の考え方だけ |
自分で作った案なら、写真もロゴも人の物が混ざらないので、そのまま再現してもらえます。頼み方は、こんな形で大丈夫です。
LPのデザイン案を、縦に長い1枚の画像で作ってください。 作る前に、何のページか・好みの雰囲気・色の3つを、1つずつ私に質問してください。雰囲気と色は、私が迷ったら候補を3つずつ出して選ばせてください。 上から、ファーストビュー、こんな人へ、特徴、使うまでの流れ、よくある質問、最後の申し込みボタン、の順で並べてください。画像の中の文字は読めなくても構いません。
補足 貼って送ると、3つを聞かれます。何のページかは「自分で作った道具の紹介」「教室の生徒募集」くらいの一言で足ります。並びを変えたい時は、答えるついでに伝えてください。
あれば、素材の画像も
自分の写真、作った物の画面、ロゴなど、ページに実際に載せたい画像があれば一緒に用意します。無くても作れます。無い所は、仮の画像や図形で埋めてもらえるので。
- 作業フォルダの中に、lp という名前のフォルダを作る
- 見本の画像を入れて、ファイル名を design にする（.png や .jpg は打たずに、前の部分だけを変える。打つと design.png.png になることがある）
- 素材の画像があれば、同じフォルダに入れる
見本にしたLPの文章や写真も、そのまま使えばいいと思っている。
人のページを見本にした時に借りるのは、並びや余白の取り方といった見た目の組み方だけです。色の組み合わせは自分で選び、見本は雰囲気の参考までにします。文章と写真とロゴは、自分の物に差し替えます。人のページの中身をそのまま載せたら、それはもう自分のLPではないので。