AI技術を活用したWEBデザイン：ChatGPTとMidjourneyの活用例

1. はじめに

こんにちは。ATOM事業部フロントエンドテックリード兼デザイナーの河原です。

本記事ではWEBデザインにAI技術を活用する方法を実例をまじえて紹介します。 今回はChatGPTとMidjourneyを使います。

ChatGPT

OpenAIが開発した大規模な自然言語処理AIで、文章生成や文章の理解など、様々なタスクに対応しています。

Midjourney

AIを活用した画像生成ツールで、キーワードを入力することで独自の画像を生成します。アート性の高い画像を生成することができます。

2. 実例: シンプルなエラーページの作成

2.1. 作成する画面について

ATOMのエラーページを題材にします。現在のデザインはこんな感じです。

くじらがチャームポイントのとてもシンプルなデザインとなってます。今回はこちらの別バージョンを作成してみたいと思います。

2.2. ChatGPTでコンテンツ設計とデザイン方針

最初にChatGPTにコンテンツ設計を行います。コンテンツ設計ではページの目的に合わせて表示する要素を決めます。

次のような感じでChatGPTにお願いします。モデルはGPT-4を使用。

BtoB向けのWebサービスの404エラーなどを表示するエラーページのコンテンツ設計をしてください。画面に表示する要素を列挙してください。表示する要素は少なめにして、簡潔な表現でお願いします。ユーザがネクストアクションに困らないようにしてください。

次のように返答してくれました。

1. ページタイトル: エラー - [サービス名]
2. ロゴ: [サービス名のロゴ]
3. エラーコードと短いメッセージ
4. エラーに対する簡潔な説明文
5. ネクストアクションボタン（ホームページへ戻る、お問い合わせフォーム、ヘルプセンター）
6. コピーライト表示: © [現在の年] [会社名]. All rights reserved.

続いて実際に表示するテキストやメッセージを作成します。

先ほどのやりとりの続きで。

それぞれについて実際に画面に表示するテキストを検討してください。
1. ページタイトル: エラー - [サービス名]
2. ロゴ: [サービス名のロゴ]（ロゴ画像を表示）
3. エラーコードと短いメッセージ: ※エラーコードごとにメッセージを列挙してくれましたが長いので割愛
4. エラーに対する簡潔な説明文: ※同上
5. ネクストアクションボタン:
   - [ホームに戻る]（ホームページへのリンク）
   - [お問い合わせ]（お問い合わせフォームへのリンク）
   - [ヘルプセンター]（ヘルプセンターページへのリンク）
6. コピーライト表示: © [現在の年] [会社名]. All rights reserved.

最後にデザインの方針を作成します。

この画面のデザインの方針を検討してください。
デザイン方針:

1. シンプルでクリーンなデザイン:
   - エラーページはシンプルで分かりやすいデザインが求められます。不必要な装飾は避け、最小限の要素で構成しましょう。

3. エラーコードとメッセージの強調:
   - エラーコードと短いメッセージは、ユーザーにすぐに目に入るように、大きめのフォントサイズや太字で表示します。

5. ネクストアクションの視認性向上:
   - ユーザーが次のアクションを迷わずに取れるよう、ボタンやリンクは目立つデザインにしましょう。適切なサイズ、色、余白を使用して、ユーザーが直感的に操作できるようにします。

7. 全体のバランスと一貫性:
   - ページ全体のレイアウトは、中央寄せでバランスよく配置し、要素間の余白も適切に設定して、見やすいデザインに仕上げます。また、他のページとのデザイン一貫性も意識しましょう。

（一部のみ抜粋）

2.3 Midjourneyでデザイン案を作成

次に、MidjourneyでWEBサイトのイメージ画像（デザイン案）を作成します。

Midjourneyの具体的な使い方は公式のガイドを参照ください。

Midjourneyの利用はDiscord上で行います。メッセージボックスに/imagineと入力するとプロンプトが入力できます。

手始めに次のプロンプトを試してみます。

minimalistic error page for website, ux/ui, ux, ui, white background, very large black title, three line large message, blue whale swimming --ar 3:2 --v 4 --q 2

プロンプトについて説明すると長くなる（かつ自信がない）ので、こちらも公式のガイドなどを参照ください。概要だけ説明すると。

  • 前半（blue whale swimmingまで）でイメージを伝えています。カンマ区切りで左側がより優先されます。website, ux/ui, ux, uiなどはWebサイトを生成する際によく使われます。
  • 後半はパラメータです。
    • --ar 画面のアスペクト比を指定します。一般的なWEBサイトっぽい横幅にしています。
    • --v Midjourneyのバージョンを指定します。執筆時点ではv5が最新ですが、v5はまだ使いこなせてないのでv4を使っています（v5ではカンマ区切りではなく文章の方が良いとのこと）。
    • --qは品質設定です（2が最高)。

上記のプロンプトにより次のように4つの画像が生成されました。

  • 左上が画像1、右上が画像2、左下が画像3、右下が画像4です。
  • 「U1ボタン」を押すと画像1の高解像度画像がダウンロードできます。
  • 「V1ボタン」を押すと、画像1と似た画像を新たに4つ生成してくれます。
  • 青い「Redoボタン」を押すと再度同じプロンプトで新たに4つ生成してくれます。

プロンプトを変更して色々な画像を生成してみます。同じプロンプトでもまったく異なる画像が生成されるので何度か試してみます。

3d render

3DCGにする際によく使われる言葉を追加してみます。

minimalistic error page for website, ux/ui, ux, ui, cute blue whale swimming, white background, 3d render --ar 3:2 --v 4 --q 2

botanical illustration

図鑑のイラストっぽい画像になる言葉

minimalistic error page for website, ux/ui, ux, ui, blue whale swimming, white background, botanical illustration --ar 3:2 --v 4 --q 2

anime

アニメっぽい画像になる言葉

minimalistic error page for website, ux/ui, ux, ui, cute blue whale swimming, white background, anime --ar 3:2 --v 4 --q 2

画像を元に生成

Midjourneyではテキストだけでなく画像もプロンプトに指定することができます。 やり方はとても簡単で、オンラインでアクセスできる画像のURLを指定するだけです。 ローカルにあるファイルを使いたい場合はDiscord上にアップロードすると良いでしょう（画像自体も公開されるので注意ください）。

今回大まかなレイアウトは既存の画面に合わせたいのですが、レイアウトをプロンプトで伝えるのはとても難しいです。 そこで既存の画面のキャプチャを元に生成してもらいます。

https://xxx.png minimalistic error page for website, alert mark icon, dark title, ux/ui, ux, ui, white background, blue whale swimming --ar 3:2 --v 4 --q 2

画像1(左上)が良さそうなので「V1」をクリックして画像1の別バージョンを作成してもらいます。2回ほどこの操作を繰り返して、最終的に下記のデザインを採用することにしました。

Midjourneyでは細かい制御が難しいので、複雑なサイトの場合だと全体を理想通りの形で出力するのはとても難しいです。 その場合は様々なバリエーションを出力して、インスピレーションを得るぐらいの使い方がおすすめです。

2.4. Midjourneyでデザイン素材を作成

デザイン案が決まったら、実際のWEBページで表示する背景画像やイラストをMidjourneyで生成します。

今回はシンプルなページということもあり、2.3で生成した画像がそのまま使えそうなのでそちらを使いこのステップはスキップします。

2.3で選定した画像の高解像度版をダウンロードします。 ただ、デザインの素材として使うには解像度がまだ足りないので、別のAIサービスを使ってさらに高解像度にします。 高解像度化できるサービスもいくつかありますが、今回はwaifu2xを利用させて頂きました。

2.5. デザインを完成させる

最後に、普段利用しているデザインツールを使ってデザインを完成させます。 ChatGPTが提示したコンテンツ設計やデザイン方針、Midjourneyで生成した画像をもとに作成します。

完成品がこちらです。デザインツールはCanvaを使いました。

3. まとめ

Midjourneyについてはまだまだ使いこなせてないですが、それでも作業時間の短縮やデザインの選択肢の拡大など新しい可能性を感じることができました。

今後、AI技術のさらなる発展によりデザイン業界におけるAIの活用範囲は広がり続け、デザイナーとAIの協働が一層重要になると思います。 デザイナーはAIの能力と限界を理解し、適切なタスクに活用することで、創造性や独自性を高めつつ低コストにデザインが作成できるようになります。 AI技術の進化とデザイナーのスキルアップが共創することで、さらなる高みを目指せると感じました。