AIでWebデザインを生成する方法！無料で試せるプロンプトと生成例を紹介

この記事では、ChatGPTの画像生成機能（GPT-Image-2）を使って、Webデザイン案を生成する方法を紹介します。

ファーストビュー（最初に画面で見える部分）のパターン出し、方向性の選定、後続セクションの生成、1枚のWebデザイン画像にまとめる流れで進めます。

1. ファーストビューのデザインのテイスト確認のためのパターン出し

今回は、PC向けWebサイトのファーストビューとして、ロゴ・ナビゲーション・キャッチコピー・CTAボタン・メインビジュアルを入れるように指定しました。

最初から細かく決めすぎず、「5パターンは大きく変える」と指定しておくと、AI側がかなり幅広い方向性を出してくれます。

パーソナルジム「BIREI BODY」のWebサイトのファーストビューを5パターン生成
・各パターンは独立した別画像
・PC向けWebサイトのファーストビューとして作成
・ロゴ、ナビゲーション、キャッチコピー、CTAボタン、メインビジュアルを入れる
・5パターンは、コンセプト・配色・レイアウト・写真の雰囲気を大きく変える
・AI側でそれぞれのパターンはまったく異なる方向性を提案する
・文字は日本語で自然に入れる

以下が生成されたファーストビューのデザイン5パターンです。

5パターン出してみると、同じ「パーソナルジム」でもかなり印象が変わります。

高級感のある黒ベース、清潔感のある白ベース、女性向けのやわらかい雰囲気、スポーティーで力強いデザインなど、最初の段階で方向性を比較できるのが便利です。最初に複数案を見ながら「今回はこっちの方向でいこう」と決められるのがいいですね。

2. 生成されたデザインのコンセプトを整理してもらう

画像を生成したあと、そのまま自分だけで判断してもいいのですが、ChatGPTに「それぞれどんなコンセプトなのか」を整理してもらうと選びやすくなります。以下のように、ChatGPTに続けて質問します。

5パターン生成してくれたけど、それぞれどんなコンセプトとデザインテイスト？

人間が見た目だけで選ぶより、「この案は高級感重視」「この案は初心者向け」「この案は女性向け」など、言語化してもらうと判断しやすいです。

このように、生成したデザインをもとにコンセプトを整理してもらうと、後続セクションにも展開しやすくなります。

Webデザインでは、ファーストビューだけが良くても、下のセクションと雰囲気がバラバラだと違和感が出ます。先にデザインの軸を言語化しておくと、後で追加セクションを作るときにもブレにくくなります。

3. 採用したデザインをもとに、さらに別パターンを生成

最初の5パターンから気に入った案を選び、その方向性をベースにして、さらに5パターン生成しました。以下がプロンプトです。

この5のパターンを採用。このパターンで、さらに5パターンを生成。
それぞれのパターンは、テキスト・レイアウト・写真を大きく変える。

キャッチコピーや写真が異なるパターンを出してくれました。Webサイトのファーストビューは、写真の選び方・キャッチコピーの内容・CTAボタンの位置で印象が大きく変わります。一気にファーストビューの複数案を見れるのがいいですね。

ここでは一番左上の画像をファーストビューとして採用しました。

4. 後続の各セクションの構成を考える

ファーストビューが決まったら、次は下に続くセクションを考えます。

今回はパーソナルジムのWebサイトなので、サービス内容・料金・お客様の声・アクセス・無料診断などが必要になります。

自分でセクションを考えてもいいですが、ChatGPTに「このファーストビューに続くセクションを考えて」と依頼すると、LPやコーポレートサイトらしい流れを提案してくれます。

ファーストビューは添付画像で確定。後続セクションのコンテンツを考えます。各セクションの見出しを考えて。

ChatGPTにコンテンツを考えてもらって、今回は以下のセクションを採用しました。

• あなた専用の最短ルートを設計
• 変化を実感したお客様の声
• 料金プラン
• よくある質問
• 店舗情報・アクセス
• まずは、あなたの身体を無料診断

最初に「このジムは自分に合いそう」と感じてもらい、その後にサービス内容・実績・料金・不安解消・アクセス・申し込みへつなげる構成になっています。

5. ファーストビューに合わせて各セクションを生成

次に、確定したファーストビューのデザインテイストに合わせて、後続セクションの画像をまとめて生成します。
ここで大切なのは、ファーストビューの配色・余白感・写真の雰囲気・文字の見せ方を引き継ぐことです。
ただし、写真まで同じようなものになると単調なので、「写真などを掲載する場合はファーストビューとは全く異なる写真にする」と指定しました。

2. あなた専用の最短ルートを設計
7. 変化を実感したお客様の声
9. 料金プラン
10. よくある質問
11. 店舗情報・アクセス
12. まずは、あなたの身体を無料診断

こちらの見出しとセクションを採用。
添付のファーストビュー画像のデザインテイストに合わせて、連続した各セクションの画像を同時に生成してください。
写真などを掲載する場合はファーストビューとは全く異なる写真にする。

各セクションの画像が生成されました。全体的にファーストビューの雰囲気を引き継いでくれています。

このように、最初に確定したファーストビューを参照させながら後続セクションを作ると、1つのWebサイトとして統一感が出やすいです。LPやサービスサイトのデザイン案を作るときは、この流れが良いと思います。

6. 必要に応じて各セクションの修正

最初のセクションの写真がファーストビューとかなり似ていました。

同じようなトレーニング写真が続くと、サイト全体が単調に見えてしまいます。そこで、該当部分だけ「iPadのボディ分析画面」に変更するように依頼しました。

この写真はファーストビューと内容がほぼ同じ。iPad（ボディ分析の画面）に変更。

写真が差し替わりました。

部分修正をするときは、「どこが気になるのか」「何に変更したいのか」を短く具体的に伝えるのがポイントです。

今回のように「写真が似ているので、iPadのボディ分析画面に変更」と伝えると、AI側も修正内容を理解しやすくなります。

ただし、画像生成の修正は毎回完璧に反映されるわけではありません。文字や写真の細部が崩れることもあるので、必要に応じて何度も調整する前提で進めるといいです。

7. ファーストビューを含めて全セクション画像を縦に結合

最後に、Webサイトの一番下に入れるフッター画像も生成しました。

フッターの画像も生成。

ファーストビューからフッターまでそろったら、各セクション画像を上から順番に並べます。

今回は、画像結合ツールを使って、全セクションを縦に結合しました。オモシロAIラボで作ったツールなのでぜひ使ってみてください。
→ 画像結合ツール

これで、Webサイト全体のデザインカンプ画像が完成しました。

実際のWebサイトとして公開する場合は、この画像をそのまま使うのではなく、HTML/CSSやWordPressなどで実装する必要があります。

ただ、デザインの方向性を確認したり、クライアントに初期イメージを共有したりする用途なら、かなり便利です。

AIでWebデザインを作るときのコツ

まずはファーストビューだけ作る

Webサイト全体を一気に作ろうとすると、情報量が多くなりすぎて崩れやすいです。

最初はファーストビューだけを生成してデザインの方向性を決めるのがおすすめです。

ファーストビューが決まると、配色・写真の雰囲気・余白感・文字の見せ方が決まり、後続セクションも作りやすくなります。

最初は大きく違うパターンを出す

最初から細かい修正をするより、まずは大きく違うファーストビューのデザイン案を複数出すほうが選びやすいです。

「高級感」「親しみやすい」「スポーティー」「女性向け」「ミニマル」など、方向性を変えて出してもらうと、比較しやすくなります。

気に入った案が見つかったら、その案をベースにして、さらにバリエーションを作ると効率的です。

写真の内容が被らないようにする

Webサイトでは、同じような写真が続くと単調に見えます。

ファーストビューでトレーニング写真を使ったなら、後続セクションではカウンセリング風景、分析画面、施設写真、お客様の声のカードなど、別の見せ方を入れると自然です。

プロンプトにも「ファーストビューとは異なる写真にする」と入れておくと、ある程度コントロールしやすくなります。

文字はあとから修正する前提で考える

AI画像生成では、文字が崩れたり、画像がかすれたり、不自然になったりすることがあります。

特に料金、住所、電話番号、営業時間、FAQの回答などは、公開前に必ず確認したほうがいいです。

注意点

画像のままでは本物のWebサイトにならない

AIで生成したWebデザイン画像は、あくまで「デザイン案」や「デザインカンプ」に近いものです。

そのまま画像を貼るだけでも見た目は再現できますが、レスポンシブ対応、SEO、リンク、フォーム、アニメーション、読み込み速度などを考えると、実際にはHTML/CSSやWordPressで実装する必要があります。

特に企業サイトやサービスサイトとして使う場合は、画像生成で方向性を作り、その後にコーディングで仕上げる流れが現実的です。

文字が潰れている場合がある

AI画像生成では、細かい文字が潰れていたり、存在しない文字になっていたりする場合があります。

キャッチコピーのような大きい文字は比較的きれいに出ることもありますが、料金表・FAQ・住所・電話番号などの小さい文字は注意が必要です。

公開用に使う場合は、Canva、Photoshop、Illustratorなどで文字を打ち直すか、Web実装時にHTMLテキストとして入れるのがおすすめです。

料金・住所・FAQなどの内容は必ず確認する

AIが生成した料金プランやFAQは、見た目としては自然でも、内容が正しいとは限りません。

今回のような架空サイトなら問題ありませんが、実在する店舗やサービスで使う場合は、料金、営業時間、所在地、キャンペーン内容などを必ず確認してください。

特に「無料診断」「キャンペーン価格」「返金保証」などの表現は、実際のサービス内容とズレるとトラブルにつながる可能性があります。

地図やQRコードは本物に差し替える

アクセスのセクションに地図風の画像やQRコード風の要素が生成されることがありますが、AIが生成した地図やQRコードは基本的に正確ではありません。

店舗サイトで使う場合は、Googleマップの埋め込み、正しい住所情報、実際に読み取れるQRコードに差し替えるのが安心です。

見た目の雰囲気だけAIで作り、実用部分は本物の情報に置き換えるイメージですね。

まとめ

今回は、ChatGPTの画像生成機能を使って、Webデザインを生成する流れを紹介しました。

ファーストビューのパターン出しから始めて、気に入った方向性を深掘りし、後続セクションを追加していくと、かなり自然なWebサイトのデザイン案を作れます。

もちろん、生成された画像をそのまま公開サイトとして使うのではなく、最終的にはHTML/CSSやWordPressで実装する必要があります。

それでも、デザインの方向性を考えたり、複数案を比較したり、提案前のイメージを作ったりする用途ではかなり便利です！

Webデザインの初期案を素早く作りたい方は、ぜひ今回のプロンプトを参考に試してみてください。