ChatGPTは、その優秀さからデザインの領域にも応用できると言われています。
しかし回答が文字ベースであるChatGPTは、一体どのようにしてデザインに活用できるのでしょうか？
この記事では、
- Webページのデザイン案作成
- イラストのデザイン案作成
について、ChatGPTと一緒に取り組んだ例をご紹介します！また、他のAIデザインツールについてもご紹介します。
※2024年5月13日に、ChatGPTの新しいLLM「GPT-4o(オムニ)」が登場しました！以下の記事で詳しい概要や使い方について解説していますので、合わせてチェックしてみてください。
ChatGPTとデザイン①：Webページのデザイン作成
ChatGPTは、質問の仕方を工夫すれば、視覚的な分野でも役に立つ回答をしてくれます。
今回は、ハンドメイド作品販売サイトののテンプレートを用意してもらうことにしました。
ChatGPTに構成のデザインを考えてもらう
ChatGPTを使ったデザイン作成では、Webページの構成部分から提案してもらうことができます。
プロンプトは次のように入力しました。
ハンドメイド作品を販売するサイトを作ろうと思っています。トップページの画面レイアウト案をワイヤーフレーム形式で表示してもらえますか。
この時、「トップページ」「ワイヤーフレーム形式で」と付け加えて指示をしました。こうすることで、本来は文字ベースでの回答しかしてくれないChatGPTから、より視覚的な回答を得ることができます。
トップページの基本的な構成が提案されました。
ワイヤーフレームという条件なしではWebページの構成要素を文字で羅列するような回答が得られますが、今回はより視覚的に分かりやすい回答を得ることができました。
HTMLのテンプレートを書いてもらう
上で提案された構成を基に、HTMLのテンプレートを作成してもらいます。
プロンプトは以下のように入力しました。
上のレイアウト案に合わせてHTML形式でサイトのテンプレートを作成してください。
指示通り、上記のワイヤーフレームに沿った形のテンプレートを、HTML形式で得ることができました。
このテンプレートを実際に出力すると次のようになりました。
HTMLのみのためシンプルではありますが、基盤のテンプレートとして使うことができそうなWebページの土台を提案してもらうことができました。
この土台にCSSなどで装飾し、実際にWebサイトを作るといった活用の仕方ができそうです！
こういったWebデザインの基礎的な部分を考える上で、ChatGPTは役立ちます。
【2023年12月追記】課金していればGPT-4でデザインを可視化できる！
2023年10月にはChatGPT Plusユーザー(課金ユーザー)向けに、GPT-4で使える画像生成機能がリリースされました。
このGPT-4には「DALLE-3」という高性能画像生成AIが搭載されており、提案されたデザイン案をその場で画像化してもらうことができます！
プロンプトは、
そのデザイン案を画像で可視化してください。
などと送信すればOKです！
今回は上で紹介した「ハンドメイド作品販売サイト」のデザイン案を画像化してもらいました。
画像にしてもらうことにより、具体的なインスピレーションを得ることができますね！
ChatGPTとデザイン②：イラスト作成
ChatGPTはその自然言語処理能力から、入力された条件の言い換えや、アイデアの具体化に適しています。
そのため、ChatGPT言語化してもらったアイデア案を画像生成AIに送信することで、ほぼ1からAIにイラストをデザインしてもらうことが可能です。
ChatGPTにデザイン案を出してもらう：イラスト
今回は、「猫好きを惹きつけるデザイン案」を出してもらいました。
プロンプトは以下の通りです。
あなたはプロのイラストレーターで、猫好きを惹きつけるアイキャッチ画像を作ろうと思っています。テーマは「癒し、可愛らしさ」です。どのようなイラストが良いか、デザイン案を考えてください。
他にも様々なプロンプトを考えましたが、「プロのイラストレーター」になりきってもらうことで、より具体的な回答を得ることができました。
4つのデザイン案を作成してくれました。
ChatGPTを使ったデザイン作成では、抽象的なテーマをより具体化させる、イメージを言語化してもらうといった使い方ができます。
AIイラストくんを使って出力してみた
先ほど出してもらったデザイン案を、「AIイラストくん」を使って、実際に視覚化してみました！
AIイラストくんについては以下の記事で詳しくご紹介しています。
1番のイラスト案、「猫のぬいぐるみと一緒に寝転んでいる猫」をそのまま入力しました。
ぬいぐるみは微妙な形になってしまいましたが、それ以外は大体指示通りの、可愛らしい猫のイラストが完成しました！
【2023年12月追記】GPT-4を使ってデザインしたイラストを出力してみた
こちらも、ChatGPT Plusに課金済みで、GPT-4を使える状態であれば、ChatGPT上で直接デザインの出力が可能です。
こちらでも1番のイラスト案をそのまま入力し、画像生成してもらいました。
猫のぬいぐるみと一緒に寝転んでいる猫のイラストを生成してください。背景は柔らかい色合いで、猫がベッドやクッションの上に寝そべっている様子を描きます。猫の周りには、可愛らしい猫のぬいぐるみが置かれています。ふわふわとした質感やほほえむ猫の表情が、癒しの雰囲気を醸し出します。
生成された画像はこちらになります。
ChatGPTだけでデザイン案の作成から出力ができてしまいました。クオリティも高いですね！
こちらの記事ではさらに詳しくChatGPTの画像生成について解説しているので、気になった方はチェックしてみてください。
ChatGPTとデザイン③：GPT-4を活用したデザイン案
上でもご紹介しましたが、ChatGPT Plusのユーザー(課金ユーザー)は、ChatGPT上で、DALL-E3を使った画像生成が可能です。
これにより、プラグインなしで直接ChatGPTにデザイン作成をしてもらえます。
GPT-4を活用したデザイン例~ロゴ・ピクトグラムのデザイン~
GPT-4を使えば、出力まですぐに出来るので、ChatGPTにほぼ丸投げ状態でデザインを作成してもらうことが可能です。
今回は「噴水にお金を入れないよう注意するピクトグラム」という実用性のありそうなデザインを考えてもらいました。
ChatGPTに考えてもらったデザインを出力させた結果がこちらです。
そのまま印刷して使えそうなものが作成されました！
また、ChatGPTを使った画像・デザイン作成では、本来画像生成AIの苦手とするテキストも入れることが可能です。
テキスト入り画像の作り方についてはこちらの記事で解説しているので、参考にしてみてください。
ChatGPTとデザイン④：他のAIデザインツールをご紹介！
ここまではChatGPTを使ったデザインについてご紹介してきましたが、他にもAIを活用しデザインを手助けしてくれるツールが存在します。
ツール⑴：ロゴのデザイン「Brandmark」
こちらは、ブランドの「ロゴマーク」を作ってくれるAIです。
ブランド名とキーワードを入力し、希望のカラースタイルを入力するだけでたくさんの選択肢が提案されます。
英語にのみ対応していますが、アカウント登録なしでも無料ですぐに使うことができるので、気になった方はぜひ試してみてください。
公式サイトはこちら：Brandmark
こちらは毛糸のハンドメイド作品ブランドをイメージして作成されたロゴです！
たくさんの選択肢が提案されるため気に入ったものが見つかるはずです。
ツール⑵：ポスターやパンフレットのデザインに「Microsoft Designer」
「Microsoft Designer」は、Microsoftが提供するAIを活用したデザインツールです。
こちらも作成したいデザインのキーワードを入れることで、簡単にイメージ画像ができてしまいます。そしてそのイメージ画像にテキストを入力することも可能です。
公式サイトはこちら：Microsoft Designer
こちらは公式の紹介映像になります。
動画内でも触れられているように、イベントのポスター・パンフレット作りなどにピッタリです。
こちらは、実際に「ad of ramen(ラーメンの広告)」という超簡単なキーワードでデザイン作成してもらった例になります。
数単語だけでこのようなデザイン作成ができるのは驚きですね！
こちらもMicrosoftアカウントを持っていれば無料で使えるので、ぜひ試してみてください。
まとめ
ChatGPTをデザインに利用する方法、いかがでしたでしょうか？
この記事をまとめると、
ChatGPTはデザインにおいて、
・Webページの構成を考える
・Webページのテンプレートを作る
・イラストのデザイン案を考えたり、イメージを具体化する
という分野に生かすことができる！
でした。
皆さんもぜひ、何かをデザインをするときには、ChatGPTを活用してみてください！
- ChatGPTで〇〇を効率化したい
- スライドを作るならどのAIツールがおすすめ？
- おすすめのGPTsが知りたい
同じ悩みを解決した人がいるかもしれません。ぜひ質問してみてください！
