ChatGPTを活用したWEBデザインの方向性整理術

こんにちは！プロクラスの村瀬です。

ここ数年で、AIの進化・普及が加速しているのを様々なシーンで感じるようになってきました。

Web制作の現場でもコンテンツ制作の補助やアイデア出し、ペルソナ設計のヒントとしてChatGPTを活用しています。

今回はWEBサイトのデザインを行う前段階として、ChatGPTを用いた参考サイトの分析とデザインの方向性整理を行ってみた使用感についてお伝えできたらと思います！

デザイン制作前の準備について

まず前提としてサイトデザインを進める前に、クライアントやディレクターからの依頼内容を元に情報の整理を行います。その際に共通認識としてどのようなサイトにしたいかを明確化するために参考サイトなどもいくつかピックアップします。

この参考サイトについて分析をし、整理した上でデザインに反映してく流れになるのですが、今回は分析の部分をChatGPTにお願いしてみました。

ChatGPTで行った分析内容

まず参考サイトのURLとともに「特徴」「与える印象」「想定ターゲット層」を分析してもらうように依頼しました。それぞれ以下のような内容を探っていくことが目的です。

サイトの特徴：構成、UI・UX、カラー設計、アニメーションの使い方など
与える印象：信頼感、親しみやすさ、スタイリッシュさなど
想定ターゲット層：年齢層、業種、デジタルリテラシー、関心のある分野など

ChatGPTからの返答

例としてプロクラスキッズのサイトの分析依頼をした際はこのような返答が返ってきました。

デザイン的特徴

カラフルでポップなビジュアル

ゲームやキャラクターなど子どもに親しみやすいイラストやアイコンが多用され、興味を引きつけやすい構成です。
シンプルかつ構造化されたレイアウト

トップメニューは「プロクラスについて」「コースについて」「教室一覧」「無料体験」など、大分類で整理されており目的の情報が簡単に見つけられます。
ビジュアル中心の情報訴求

画像（キャンペーン告知やコース例）を効果的に配置し、理解しやすく興味を惹く演出が施されています。
親子どちらも配慮した文体と情報量

「論理的思考力」「将来役立つITスキル」などと保護者への訴求もしつつ、「ゲームを作る」「ワクワクする題材」など子どもにも響く内容をバランス良く盛り込んでいます。

印象

楽しく学べる雰囲気

ゲーム感覚でプログラミングを学ぶという印象が強く、子どもの関心を引くことに重点を置いています。
安心感と信頼感

「生徒1〜3名に講師1名」「IT企業スタッフ考案カリキュラム」など、少人数・専門性の高い指導体制を強調し、保護者にも安心感を与えています。
成果が見える・参加への誘導

「年1回のコンテスト」「実践的スキル」「無料体験キャンペーン」など、成果の見える機会と体験のハードルを下げる設計もされています。

想定ターゲット層

ターゲット	特徴
小学生〜中高生	マインクラフト、スクラッチ、Unityなどに興味がある、ゲーム・ロボットに親しみがある年齢層。
プログラミング初心者	ブロック型からスタートでき、段階的にコード学習に進める構成。未経験でも安心。
将来のITスキルを意識する保護者	大学入試やAI時代を見据えた論理的思考・ICTスキル育成を重視する家庭。
成果やイベントを重視する家庭	コンテストや作品発表を通して「成果が見える」活動を望む保護者・生徒。
京都を中心とした関西圏の家族	京都など関西に教室があるため、地域密着型の利用者を対象としています。

ChatGPT活用で得られたメリット

実際に使ってみて、かなり分析と言語化をしてくれてびっくりしました。ChatGPTを活用するメリットはこんな感じでしょうか。

抽象的な印象を言語化できる
複数サイトを比較した時の共通点・差分を整理できる
自分たちでは気づかない視点が入る

ChatGPTはあいまいで抽象的な部分も言語化をきっちり行ってくれる印象です。
ただ、すべてが正しいわけではないので、あくまで「分析・整理のアシスタント」としての役割であることを頭の隅に置き、最終的な判断については私たち人間が行うことで「なぜこのデザインにしたのか」という部分に深みや説得力が出るのではないかと思います。