見出し画像

デザイナーがChatGPTに指示されながらECサイトデザインをしてみる実験 | Design Journal vol.25

これはなに?

昨年末にOpenAIがリリースしたチャット型AIの「ChatGPT」と一緒にデザインしていくプロセスで、実際にどんなことができるか?を実験してみたnoteです。


前提と注意点 🚨

まずこのnoteの趣旨は「これらが実用的にデザイン制作に使える!」といったものではありません
どちらかというと遊びに近く、実験的に行ったもので、結論から言うと現時点では実用的に使える要素はまだ少ないかなと思います。

また、前提として私はまだまだAIやChatGPTについて詳しいわけでは全くなく、これからちゃんと勉強してみようと思ってるぐらいのレベル、という前提で読んでいただけると幸いです。
(AIについて本を読んだり座学的な勉強から入るより「とにかく何かしら触ったりつくったりしてみる」方が楽しめると思い、せっかくなのでその実験の過程をまとめてみました。)

「こういうこともできるよ」「このやり方の方が良い」等あればぜひ教えて下さい🤝


0. 何をつくるかを考える

まずは何をつくるかですが、まったく新しいコンセプトのサービスやニッチな内容では検証しづらいと思ったので、「ECサイトのデザイン」から始めてみることにしました。商材は自分の好きな「ワイン」として、

ワインショップのECサイトデザイン🍷

と、超ざっくりした要件のみで進めてみることにしました。

以下、サイトデザインにおいて必要になりそうなものをランダムにChatGPTに聞いていきました(実際のデザインフローとは異なります)。


1. 画面遷移図をつくって

👩‍💻:ワインECサイトで、商品を購入するまでの画面遷移図をテーブル形式で表示して

現時点では図の生成はできませんが、「テーブル形式で」と付け加えるとこのような表を生成してくれるようです。


2. ワイヤーフレーム書いて

商品一覧画面

👩‍💻:商品一覧の画面レイアウトをワイヤーフレーム形式で表示し

図が書けない中、工夫しながら頑張っててなんとなくかわいいです。


👩‍💻:商品一覧には1ページにどのくらいの商品数を表示するべき?

1ページに表示する商品数は、画面サイズやデザインなどによって異なりますが、一般的には6~12個程度が適切です。  これは、ユーザーが商品を詳細に見たいときに複数ページに分かれていると不便だと感じたり、1ページに多すぎると商品を見つけるのが困難になるからです。  また、商品数が多い場合はページングなどを用いて、商品の一覧を分割することも考慮すべきです。
こういう「情報を尋ねる系」の回答は、ソースもなくフワッとしているので、必要があればChatGPT以外でちゃんと調べた方が良さそうです。


商品詳細

👩‍💻:商品詳細の画面レイアウトをワイヤーフレーム形式で表示して

「産地」というワードが詳細情報に。ちゃんと「ワイン」という情報を拾っててえらい。


注文確認

👩‍💻:注文確認画面の、スマホに対応したレイアウトをワイヤーフレーム形式で表示して

注文確認のような画面は情報がわりと決まっているため、一番完成度が高い気がします。ちゃんとダミーの名前、住所、メアドも入っててえらい!


3. 商品のダミーテキスト考えて

👩‍💻:商品詳細情報のダミーテキストを考えて

「商品名」が銘柄ではないですが、まあダミーテキストなので良いでしょう。


👩‍💻:あと5つ考えて

「同じようなのもっとくれ」系のリクエストに対応してくれるのが良いですよね。値段、産地もいい感じにバラけていて、ダミー情報としては良い感じです。


4. 商品画像はどんなのがいいの?

👩‍💻:ワインのECサイトでは、どんな商品画像を使うべき?

ワインのECサイトでは、商品の特徴を強調するために、以下のような商品画像が適しています。  美しいグラスに入ったワイン:ワインを美しいグラスに注いで撮影することで、ワインの魅力を引き出すことができます。  ボトルショット:ワインのボトルのデザインを写した写真を使用することで、ボトル自体のデザインにも注目させることができます。  製造元の情報:ワインがどこで作られたか、どのような製造元によって作られたかなどの情報を写した写真を使用することで、製造元にも注目させることができます。  地域の情報:ワインがどこで作られたか、どのような地域にあるかなどの情報を写した写真を使用することで、ワインがどんなところから来たものかを理解しやすくすることができます。  これらを参考に、ワインのECサイトでは商品画像を選ぶことで、ワインの魅力を引き出し、購買意欲を高めることができます。
抽象的な表現が多いですが、掲載する写真を決めるヒントにはなるかも?


サンプル画像生成は "Magician"に任せてみる🧙 

ChatGPTでは画像生成ができないので、上記のヒントと商品詳細のダミーテキストを元に、サンプル画像を生成してもらいます。

Magicianとは、最近パブリックβ版がリリースされたFigmaプラグインで、「画像 / コピー / アイコン」のAIによる生成がFigma上でできてしまうツールです。
現在は有料ですが、7日間のフリートライアルがあります。


3で生成した商品情報「オーストラリア産シラーズ」の商品写真を生成してみます。

🧙:さらに他の「フランス赤ワイン」「イタリア白ワイン」「スペインロゼワイン」「アメリカのカベルネ」「オーストラリアシラーズ」「フランスメルロー」も生成

ツッコミどころ満載ですが、まあダミーなので良いとしましょう...(構図を合わせたり、細かな調整は今回はスキップしましたが、背景色だけ統一してみました。)


🧙:ついでに商品詳細に使えそうな画像も生成

それっぽい画像は生成できます。カンプとして構図もしっかり指定したい場合は、他の画像生成AIを使うのが良いと思いました。


ついでに "Magician"にアイコンもつくってもらう🧙

まずはChatGPTにどんなアイコンをつくるか聞いてみます。

👩‍💻:ワインECサイトで必要なアイコンをリスト化して

この辺は一般のリソースがあり、すべて生成しなくても良さそうですね。

今回のサイト独自で使うようなアイコンは生成してもらいましょう。

🧙:ワイングラスとボトルのアイコン生成

Magicianで生成したアイコン。ちゃんとベクターで出力してくれるのでとてもありがたい(細かい調整は現時点ではできません)。


5. ブランドカラーとカラーパレット提案して

ブランドカラーを考えてもらう

👩‍💻:ワインショップにおすすめのブランドカラーのカラーコードは?

急にマジレスされてしまった…すみません…


👩‍💻:ワインショップでよく使われるブランドカラーのカラーコードは?

「おすすめ」は教えてくれないけど、「よく使われる」ものはいくつか教えてくれました。


これらのカラーコードをもとに色を起こしてみると…

もう少し他の色も見たいですね


👩‍💻:もう少し高級感のあるカラーを提案して

バーガンディだと安直すぎる気がしたので、なんとなくローズゴールドにしてみよう


ブランドカラーから、カラーパレットを考えてもらう

👩‍💻:#B76E79(ローズゴールド)がブランドカラーの、モダンなECサイトのカラーパレットをテーブル形式で表示して。カラー名、用途、HEX

これらのカラーコードをもとに色を起こしてみると…

グレーをテキストカラーで使うとしたら、#EAEAEAはちょっと厳しいな...?そして、アクセントカラーというか、ステータスのカラー(Success / Alert)なのか?なんかいろいろ足りないけど、まあ進めてみよう。


6. 日英それぞれフォントとフォントサイズ考えて

👩‍💻:ワインECサイトにおすすめの日本語・英語フォントをそれぞれウェイトと共に教えて

游明朝体と丸ゴシックか.......ちょっとそれは…。


👩‍💻:モダンなワインECサイトにおすすめの日本語・英語フォントをそれぞれウェイトと共に教えて

「モダンな」と入れるとNoto Sansが出てきた。モダンとは…。


👩‍💻:上記でフォントサイズのルールをテーブル形式で提案して

日英のフォントサイズは同じなんですね


7. ボタンのサイズも決めちゃって

👩‍💻:ECサイトで一般的なボタンのサイズとルールをテーブル形式で教えて

いろいろ気になるけどこれもこのままやってみよう。


このぐらいにして、とりあえずデザイン起こしてみる!が…

結果、作りながら「ChatGPTには〇〇に関して言われてないしな…」と自分で考えて進めないといけないところが多く、コンセプトがブレそうだったので途中でストップ。

画像比率/サイズとか、画像の角丸具合とか、非活性時のボタンどうするとか…聞いてないよ…

ChatGPTに提案されたものを無理やりつかってみても、
「グレー薄すぎてテキストカラー使えないから、ほぼ#000000しか使えないってことか…」等、実際にこの実験をやるなら「デザインしながらいろいろ聞く」進め方が良いのかもしれないなと思いました。

ここからのブラッシュアップは、もう少しChatGPTや類似プロダクトに関する勉強を進めてから、続編を書いてみたいと思います!

現時点での感想

以上、いろいろお願いしてみましたが、下記に現時点での感想を書いてみました。

✅ ダミーテキスト生成や、情報の抜け漏れチェックには使えそう

今回いろいろ訊いてみた中で、直近でも使えそうなのがダミーテキストの生成だなと思いました。
リストのデザインをつくるとき、本物のデータっぽい住所や名前の生成って地味に面倒なんですよね。それを任意のフォーマットでたくさん教えてくれるのはすごく助かる気がしました。

また、世の中で一般的に使われている画面であれば「どういう情報が必要か」をリスト化してくれるので、情報の抜け漏れをチェックするのには使えるかもしれません。


✅ 信憑性は常に疑うべき。「一般的な」のようなワードにも要注意

現時点で一番大事なのは「言われたことを簡単に信じない」に尽きる気がします。
「一般的に〜」みたいなワードでそれっぽく解説してくれたりしますが、情報のソースがなく、且つ誤情報もしれっと載せてくるので、回答を鵜呑みにしないことがやはり大事そうです。


✅ 気まぐれなアウトプットをコントロールするには、勉強が必要そう

上述したChatGPTからの回答は、すべて想定通りのフォーマットで返ってくるわけではありません。
さっきまでワイヤーっぽいフォーマットで描いてくれてたのに、急に表記方法が変わったり:

なぜかコードを書き始めたり:

なかなか安定した回答が得られず少し苦労しましたが、この辺りは私自身が仕組みを分かっていない部分があるため、これから勉強していきたいなと思いました。


✅ でも、とても楽しいし、これからの展開が楽しみ

今はまだ気まぐれだったり、適当なことを言ったりするChatGPTですが、近い未来デザイナーの"アシスタント"のような存在になってくれる世界はもうすぐそこだなと個人的には思いました。海外のデザイナーなどを追っていると、すでに実務にChatGPTなどのプロダクトを実際の制作フローに取り入れている方もいます。
AI関連ツールによってビジュアルデザインのアプローチが増えたり、今までたくさんの時間を費やしていたドキュメンテーションにかける工数が減ったりすることは純粋にとても楽しみです。

いま時点でAIにできること・できないこと・できるようになるかもしれないことを常にアップデートしていくのは、これからもデザインに向き合っていく1デザイナーとして、必要なことなのかもしれないと感じた実験でした。

この記事が気に入ったらサポートをしてみませんか?