皆さま、こんにちは。対話形式で使えるAI「ChatGPT」もリリースされて時間が経ち、かなり機能が充実してきました。WEB制作の場面でも活用の幅が広がってきています。
前回の記事ではChatGPTを使ってコーディング指示書を作る手順をご紹介しました。
ChatGPTにコーディングのための指示書を作りたいとメッセージを投げ、デザインの画像を読み込ませると、フォントサイズやカラーコードをまとめて文章にしてくれる機能があります。デザインと合わせてコーディング担当者さんにお渡しするとスムーズに作業が進むため、お互いの時短のために便利な使い方でした。ぜひ気になる方はこちらの記事もご覧下さい。
ChatGPTはまだまだWEBサイト制作に使える便利な方法があります。今回はその中から、デザイナーさんに便利なChatGPTの使い方をもう1パターンご紹介したいと思います。
■動きのあるWEBデザインしたい！そんなときに便利なChatGPT
WEBサイトのデザインにはアニメーションなど動きを取り入れることも多いですよね。例えばメインビジュアルでWEBサイトの印象を強くするために背景に動きを入れたり、ユーザーの視線を誘導するためにパーツを回転させたり･･･、その方法はさまざまです。
WEBサイトに欠かせないパーツにもさまざまな動きが取り入れられています。
- スクロール
- 画面遷移
- ナビゲーション
- ハンバーガーメニュー
動きの出し方にもいろいろあり、見せ方もどんどん増えてきて、創意工夫が楽しくなってきています。参考のデザイン集を見ている中で、「こんな動きを出したい」というイメージが沸くこともあると思います。ただ、WEBデザイナーさんが「この画像はどうやって動かしているのか」と動きの裏側まで理解してデザインするのは大変ですよね。
ChatGPTを上手く活用することで、動きのあるデザインをChatGPTに解析してもらい、どういう仕組みで動いているのかを理解したり、ChatGPTから返ってきた答えをコーディング担当者やディレクターにシェアすることでスムーズに動きのあるデザインを取り入れやすくなったりします。
また、繊細な動きのパターンを一緒に考える相手としても対話型AIであるChatGPTはぴったりです。「WEBサイトでこういう動きを出したい」とChatGPTに投げると、どうすれば実装できるか答えを返してくれますよ。
そこで今回は、WEBデザインに動きを取り入れたいときにChatGPTを活用する方法についてご説明します。
１．動きのあるWEBサイト事例からアイデアを見つけよう！
ChatGPTは何か例（参考）があったほうが使いやすいので、まずは「こういう動きを取り入れたい」というアイデアを見つけます。
■アイデアはギャラリーサイト「codefolio」などでチェック
WEBサイト上に実装できる動きも複雑化してきているので、事例をまとめたサイトや本があります。Webコーディングの参考になるパーツ集・ギャラリーサイト codefolio（コードフォリオ）は、私たちくまWEBがコーディングの事例集として作成したWEBサイトですが、WEBデザイナーさんがアイデアを見つけるにもぴったりです。
▶Webコーディングの参考になるパーツ集・ギャラリーサイト codefolio（コードフォリオ）
https://codef.jp/
パーツごとにカテゴリ分けされていて、それぞれに解説も入っています。気になるデザインを見つけたらクリック（タップ）すると、解説を読むことができます。
この動きの何が特徴的なのか、他のデザインと違うのかの解説付き。この動きをご自身のデザインに取り入れることがベストかどうかの判断材料にもなります。あまり動きを付けるデザインになれていないデザイナーさんも、いいなと思った動きを見つけて解説を読めば「どこかどうすごいか」「どういう工夫が施されているか」がわかるので、アイデアの積み上げに役立ちます。
codefolio以外にもさまざまなWEBサイトや書籍を見ることで、素敵な動きのあるWEBサイトがたくさん見つかります。まず一つ見つけたら、次はChatGPTにその動きを解析してもらう準備をしましょう。
2．実装したい動きを見つけた！ChatGPTに聞いてみよう
事例を見ていて、ご自身がデザインに取り入れたいアイデアが見つかったら、ChatGPTの出番です。今回は例として以下のWEBサイトに実装されているローディング中に見せる動きを取り入れたいと考えたとします。
ローディング中にカラフルな三角形が流れるように動く、SHIBUYA +FUN PROJECTのデザインです。
■ChatGPTへはイメージとやりたいことを伝えるだけでOK
動きの詳細がわからなくても、まずは簡単に動きのイメージを伝えましょう。答えが返ってきてから、さらに詳しく聞いていくことでどんどん具体的なことを返してくれるようになります。
WEBサイト制作をしています。WEBサイトのローディング中に訪問者に背景画像が動く様子を見せたいです。どのようにしたらいいですか。
ChatGPTには↑の文章を入れてみました。返ってきた答えが以下です。
- 動きをつける方法（CSSアニメーションを使う方法／JavaScriptを使って背景を動かす方法／CSSトランジションを使用する方法）
- 実装方法の流れ
この2点がChatGPTから返ってきました。WEBデザイナーさんはどのパターンを使うのがいいかは判断できないと思いますので、コーディング依頼時に動きのイメージを見せることと合わせて、この3つの方法の中ではどのパターンで実装するのがいいか？とコーディング担当者さんやディレクターさんと相談するとスムーズに作業が進むと思います。
WEBデザイナーさんの作業としては背景画像を作らないといけませんので、その画像の作り方もChatGPTに聞いてみます。
3．動きを実装するためにWEBデザイナーがすべきことは？ChatGPTに聞いてみよう
コーディング担当者さんに実装をお願いするとしても、画像はデザイナーさんが作成を担当するはずです。でも動きのあるデザインの場合は画像の作り方に気をつける点があるかも？と思いますよね。せっかく作ってから修正するのも大変ですから、まずChatGPTに聞いてみましょう。
ローディング中に動く背景をCSSアニメーションで実装するためには、WEBデザイナーはどのように背景画像を作成したらよいですか
仮にCSSアニメーションで実装するとして、質問したところ、以下のような答えがありました。
画像作成時に気をつけることなどがリストアップされました。WEBデザイナーさんから見れば、もしかしたら的外れな指摘もあるかもしれません。けれど知識として持っていなかった部分を補完することができたり抜けを減らせたりとメリットはあります。慣れていない作業をするときは特にChatGPTから得られる便利な情報はあると思いますので、上手く活用してみてください。
4．さらにChatGPTに事例を聞いて、アイデアを広げてみよう！
1つの良さそうな事例を見つけたら、アイデアを広げるためにもう少し似たようなWEBデザインを見てみたいですよね。ChatGPTに事例を聞いて掘り下げることもできます。
Z世代向けのWEBサイトを作成するため、デザイン事例を探しています。ローディング画面で特徴的な、Z世代向けにデザインされたWEBサイトを5つ、URLも合わせて教えてください
ユーザーが好むパターンが盛り込まれたデザイン事例を抽出してくれます。デザインを見ていく中で具体的なイメージがわいてきたら、さらにそのイメージで事例を探す･･･を繰り返すとたくさんのデザイン事例が発見できます。
■ChatGPTが合っているかどうか気になったら？
ChatGPTの答えが心配になる方は、同じく生成AIの「Perplexity AI」にも聞いてみることをおすすめします。今回Z世代向けのローディング画面デザインの事例を「Perplexity AI」にも聞いてみたところChatGPTとは違う他の事例も挙げてくれました。
▶Perplexity AIからの返答の全文はこちら（PDF）
生成AIもどんどん進化していますし、聞き方を具体的にすればするほどしっかりした答えが返ってきます。特にコーディングとデザインのつなぎめになるには非常に適したツールだと思いますので、コーディング担当者へどのように伝えるかなど悩んだときに上手く活用して、作業をスムーズにこなしてくださいね。
まとめ
生成AIを上手く活用すると、デザインアイデアを見つけたり、作業を手助けしてくれることがわかりました。ChatGPTだけでなくPerplexity AIも登録なしで無料利用できるので、ちょっと答えが心配だなと思ったときは、両方で同じ質問をして比べてみてください。