【AIウェブデザイン】実践！AIを活用したデザインの方法とは？

こんにちは～！アメリカ・シリコンバレー在住のSeikaです。

ウェブサイトのデザインには様々な工夫が必要ですが、
AI技術を使ってデザインすることで、効率的で最適化されたデザインが可能になります。
この記事では、Codex Communityのyoutubeチャンネルで紹介されていたAIを取り入れた驚くべき結果を実現する方法を実践していきたいと思います😉

(2023年3月28日公開)

---

1、画像生成

画像を生成します。
Midjourneyは本日制限がかかっており、無料使用不可😢
そのためNightCafeを利用しました。

プロンプトを繰り返し入力し、求めるイメージに近づけます。

1回目
beautiful website for shoes --v 4 --stylize 500 --q 2 --s 20000 --upbeta

※--v 4 → バージョン4
※stylize → 芸術性の値。値が高いと芸術的な画像が作成されまる。値は0～1000までで、100がデフォルト。

プロンプト1回目
自分の選択したnight cafeのバージョンが悪いためかイメージと違いました。

2回目
beautiful website for shoes, ui, ux, ui/ux, website --v 4 --stylize 500 --q 2 --s 20000 --upbeta

ui, ux, ui/ux, websiteを追加。
バージョンも変え、websiteのようになりました。

3回目
beautiful website for shoes, ui, ux, ui/ux, nike, red, blue, teal, yellow, running personwebsite --v 4 --stylize 750

※teal → 緑がかった青

色とnikeを追加

同じプロンプトでも結果は違います

4回目
https://dribbble.com/shots/17641717-Daily-UI-090-Create-New, beautiful website for shoes, ui, ux, ui/ux, nike, teal, yellow, green --v 4 --stylize 500 --q 2 --s 20000 --upbeta

dribbbleで自分のイメージに合う作品を探し、URLをコピペ。
night cafeの種類では3D Game v2 を選択しました。

ぷっくりした感じになりました

5回目
https://creator.nightcafe.studio/creation/CR1UxsCEsWtwYAS0h2cm, wallpaper render 8k shoes,-v 4 --stylize 500

今まで生成した画像の中で気に入ったもののURLを入力。
上手くいきません💦

違う方向に行ってしまいました

今回は3回目で生成したものがよかったので、解像度を上げダウンロードしました。

2、アウトライン作成

アウトラインはchatGPTを利用します。

1回目プロンプト
give me the broad outline for a website for shoes including hero title, tagline, call to action button, section for futures, and details about shoe
(シューズのウェブサイトについて、ヒーローのタイトル、キャッチフレーズ、アクションボタン、セクション、靴の詳細など、大まかな概要を教えてください。)

Hero Title: Step into Style Tagline: Find your perfect pair of shoes for any occasion

Call to Action Button: Shop Now

Section for Features:Comfortable Fit: Our shoes are designed with your comfort in mind, so you can wear them all day without any discomfort.
High-Quality Materials: We use only the finest materials to ensure that your shoes are durable and long-lasting.
Versatile Styles: Whether you need shoes for work, play, or a night out, we have a wide variety of styles to choose from.

Details about Shoe:Product Name: Classic Oxford
Description: Our Classic Oxford shoes are the perfect addition to any wardrobe. Made with genuine leather and a comfortable insole, these shoes are both stylish and practical.
Available Sizes: 7-13
Colors: Black, Brown, and Tan
Price: $99.99

Overall, this website is designed to showcase the quality and versatility of the shoes, while also highlighting the key features that make them a great choice for any occasion. The hero title and tagline help to create a sense of style and sophistication, while the call to action button encourages visitors to start shopping right away. Meanwhile, the features section and details about the shoes provide more information to help visitors make an informed decision about their purchase.

コピペがしやすいように、プロンプトを変えます。

2回目
Please provide content for reach out to them that I can copy-paste straight into a website
(ウェブサイトにそのままコピーペーストできるようなコンテンツを提供してください。)

Hero Section:
Hero Title: "Step into Style"
Tagline: "Discover Your Perfect Pair"
Call to Action Button: "Shop Now"
Featured Shoes Section:
Title: "Our Bestsellers"
Subtitle: "Trending styles handpicked for you" (Showcase 4-6 best-selling shoe styles with images, names, and prices)
Shop by Category Section:
Title: "Find Your Fit"
Subtitle: "Explore our wide range of categories" (Display categories such as sneakers, boots, heels, sandals, and more with corresponding images)
Customizable Shoes Section:
Title: "Make it Yours"
Subtitle: "Customize your shoes for a unique look"
Call to Action Button: "Start Customizing" (Showcase 2-3 customizable shoe styles with images and a brief description of customization options)
Our Promise Section:
Title: "Quality You Can Trust"
Subtitle: "Experience unmatched comfort and durability" (List 3-5 key features of your shoes, such as premium materials, innovative designs, and sustainable practices)
Testimonials Section:
Title: "Hear from Our Happy Customers"
Subtitle: "See why people love our shoes" (Display 3-4 customer reviews with star ratings, names, and review excerpts)
About Us Section:
Title: "Our Story"
Subtitle: "Dedicated to bringing you the perfect pair" (Provide a brief overview of your shoe store

3、Webサイト制作

動画ではノーコードでweb制作ができるEditor Xが紹介されていましたが、今回はスキップしfigmaを使い生成した画像とコンテンツを組み合わせました。

ヒーローエリア

まとめ

今回は、ウェブサイト制作でのAIの利用方法をご紹介しました。

AIを利用することによりプロトタイプを速く作ることができるようになりますね！
また、とりあえず入れていたLorem ipsumも今後出番は減りそうです。

AIは代替品ではなく、デザイナーのツールですね😉

それでは、今回の記事は以上です！
次の記事でお会いしましょう～✨

Follow me here😊
Youtube│Figma│Instagram│Twitter│Tiktok│Dribbble│Behance│Linkedin│Notion│Portfolio