スマホLPのデザインをAI画像生成で作った全手順【ChatGPT×Photoshop×Canva】

※本記事にはアフィリエイトリンク(PR)が含まれます。

個人事業主として、スマホ向けLP(縦長のランディングページ)の制作を請け負っています。以前は「素材写真を探す・用意する」作業が制作時間の大きな割合を占めていましたが、今はベースの画像をAIで生成する方式に切り替えました。

この記事では、実際の案件と同じ流れで「AI画像生成でスマホLPを1本作る手順」を、使っているツール・プロンプトのコツ・つまずいたポイントまで含めて公開します。「AIで画像を作ってみたい」「デザインの仕事に活かしたい」という方の参考になればうれしいです。

完成形のイメージ

スマホLPは、縦長の画面を上から下へ読み進めてもらう1枚もののページです。私は次のようなセクション構成で作ることが多いです。

  • ファーストビュー(キャッチコピー+メイン画像)
  • 悩みへの共感
  • サービス紹介
  • 実績・お客様の声
  • 申し込みボタン(CTA)

セクションごとに縦長の画像を用意して、上から積み上げていくイメージです。この「セクション画像」をAIで生成します。

使っているツールは3つ

役割分担がはっきり決まっています。

ツール役割
ChatGPT(画像生成)セクションのベース画像を生成する
Photoshop色味の統一・不自然な部分の修正・画像の拡張
Canva文字乗せ・ボタン配置・全体レイアウト

ポイントは「AIに全部やらせない」ことです。AIが作るのはベース画像まで。文字とレイアウトは人間が仕上げます。この分担にしてから、仕上がりが安定するようになりました。

制作手順5ステップ

ステップ1:構成をテキストで固める

いきなり画像を作り始めず、まずセクション構成と「各セクションで伝えたいこと」を箇条書きにします。ここが決まっていないと、画像を何枚生成してもまとまりません。逆にここさえ固まれば、あとは流れ作業に近くなります。

ステップ2:ChatGPTでベース画像を生成する

セクションごとに縦長(9:16)の画像を生成します。プロンプトのコツは3つあります。

  • 縦長の比率を毎回指定する(「9:16の縦長で」)
  • 「文字は入れない」と明記する。AIが生成する文字は崩れやすいので、画像内の文字はあきらめて後の工程で載せます
  • トーン指定を毎回同じ文言で入れる(「明るい自然光、淡いブルートーン、余白多め」など)。これでLP全体に統一感が出ます

ステップ3:Photoshopで補正する

生成した画像をそのまま使えることは少なく、だいたい手を入れます。よくやるのは次の3つです。

  • 色味の統一(LP全体で彩度・明るさを揃える)
  • 不自然な箇所の修正
  • 縦の長さが足りないときに生成塗りつぶしで自然に延長する

ステップ4:Canvaで文字とパーツを載せる

キャッチコピー・説明文・ボタンなどをCanvaで載せます。フォントは2種類まで、文字は画像の面積の3分の1以内に抑えると、スマホでも読みやすくなります。

ステップ5:書き出してサーバーに公開する

完成した画像を書き出し、レンタルサーバー(私はエックスサーバーを使っています)にアップして公開します。

つまずいたポイントと対策

実際にやってみてつまずいたところと、今の対策です。

  • AI画像の文字が崩れる → 画像内に文字を入れるのはあきらめて、「文字なし」で生成して後乗せに徹する
  • セクションごとにトーンがバラバラになる → プロンプトの「トーン指定文」を固定して毎回使い回す
  • 人物の顔が不自然になる → 顔のアップは避けて、後ろ姿・手元・引きの構図にする

作業時間の面でも変化がありました。以前は素材写真を探すだけで5時間ほどかかっていたのが、今はAIで生成してしまうので10分ほどで済むようになりました。

ツール選びについて

「3つ全部そろえないとダメですか?」と聞かれることがありますが、そんなことはありません。

  • ChatGPTは無料プランでも画像生成を試せます(回数制限あり)
  • Canvaも無料プランで文字乗せまで十分できます
  • Photoshopは有料ですが、仕事として納品するなら補正力の差が出る部分です。私自身は使用歴4年半で、Adobeの月額コンプリートプランで契約しています

まずは無料の範囲で1枚作ってみて、「これを仕事にしたい」と思ったタイミングでPhotoshopを足す、という順番がおすすめです。

まとめ

AI画像生成でスマホLPを作る手順をまとめます。

  1. 構成をテキストで固める
  2. ChatGPTでベース画像を生成する(縦長・文字なし・トーン統一)
  3. Photoshopで補正する
  4. Canvaで文字とパーツを載せる
  5. 書き出して公開する

AIが素材を作ってくれるようになったことで、「デザインを学び始めた人が実際に形にする」までのハードルは確実に下がりました。まずはLPの1セクションぶん、縦長画像1枚から試してみてください。

コメント

タイトルとURLをコピーしました