AIで生成したWebデザインのクオリティを研究してみた

デザイン

AI検証してみた

近年注目度が高いAIですが、大きくAIと言っても工程ごとに最適なツールは異なります。
今回はWeb制作の工程であるワイヤーフレーム作成〜デザインまでをAIで生成してみました。
どのくらいのクオリティのものが生成されるのか？という観点でも調査してみます！

概要

ワイン専門店ル・セラー (Le Cellier)のサイトを新規作成するものとします。
(↑これはchatGPTに考えてもらった架空のお店です！)

ターゲット：港区に住む比較的アッパー層
メインカラー：ホワイト
高級感があり、少し外した感じのおしゃれさが欲しい

使用ツール

使用したツールは以下です。

chatGPT：概要整理、プロンプト作成、デザインルール作成
relume：ワイヤーフレーム作成
Figma：デザインの微調整
midjourney：画像作成

といった感じです。
Figmaはあくまでもデザインツールに起こすための受け皿的な使い方をしたのでAIツールとしては使っていないです🙇‍♀️

手順

1.chatGPTにて概要作成→プロンプト作成

先ほどの概要を教えて、プロンプトを生成してもらいました。

ワイン販売サイト「ル・セラー (Le Cellier)」のリニューアルをお願いします。ターゲットは港区に住む比較的アッパー層で、高級感があり、少し外したおしゃれさを持つサイトにしてください。

### サイト構成:
1. ホームページ (Home)
- ヘッダー: ロゴ、ナビゲーションメニュー（ホーム、ワイン一覧、特集、イベント、ブログ、コンタクト）
- メインビジュアル: 高品質なワインの写真、キャッチフレーズ
- イントロダクション: サイトのコンセプトと特徴の簡単な紹介
- おすすめワイン: ピックアップされたワインの写真と簡単な説明
- 特集セクション: 季節の特集や特別なワインコレクションの紹介

2. ワイン一覧 (Wine List)
- 各カテゴリーページ（赤、白、スパークリング、ロゼ、デザート）
- 各ワインの詳細ページ: 写真、説明、価格、レビュー、ペアリング提案

3. 特集 (Special Features)
- 限定ワインや季節の特集紹介

4. イベント (Events)
- イベント情報: ワインテイスティングやワークショップ
- 過去のイベントレポート

5. ブログ (Blog)
- ワインの豆知識、最新ニュース、スタッフのおすすめ

6. コンタクト (Contact)
- お問い合わせフォーム、店舗情報、SNSリンク

### デザイン指示:
- カラー: ホワイトをメイン、ゴールドをアクセント（必要に応じて他の色も検討）
- フォント: 高級感とおしゃれさを兼ね備えたフォント
- レイアウト: シンプルで直感的、ビジュアル重視

### 必要な機能:
- レスポンシブデザイン、SEO対策、Eコマース機能（カート、支払い、配送）、レビュー表示、商品検索・フィルタリング機能

以上の要件に基づいて、ユーザーフレンドリーで魅力的なWebサイトを作成してください。

一旦このプロンプトで行ってみます！