2023年の夏フェスはサマーソニックでBlurを見るぞー!!ということで、今回は日本の２大夏フェス「フジロックフェスティバル」と「サマーソニックフェスティバル」の公式Webサイトに対して、Bingのチャット機能（OpenAIの「GPT-4」をベースにしている）を使って、AIに夏フェスのWebサイトをWebデザインの視点から評価させてみました。
毎年ステキなデザインで夏の到来を感じさせてくれる夏フェスのWebサイトに、AIはどんな評価をするのでしょうか。
まずはBingのチャット機能を使える環境を用意しよう
今回は無料で誰でも使える環境としてMicrosoft のブラウザ「EDGE（エッジ）」のAIチャット機能を使ってみます。Windows PCであれば最初からインストールされているかと思うので起動して、検索窓の右に「Bingチャットを開く」を押すとチャット画面が開きます。
チャット入力欄にこのように入力しました。
「このURLのサイトについて、Webデザインの視点で評価してください。
https://www.fujirockfestival.com/」
そして数秒して流れてくる回答を下記でご説明します。
フジロックフェスティバルの場合
このURLのサイトは、フジロックフェスティバルという日本最大のロックフェスティバルの公式サイトですね。Webデザインの視点で評価すると、以下のようなポイントが挙げられると思います。
良い点
サイトのカラースキームは、フェスティバルのロゴに合わせて緑と白を基調としており、自然豊かな会場の雰囲気を表現しています。
サイトのトップページには、フェスティバルの概要やニュース、出演者情報などの重要なコンテンツが掲載されており、ユーザーがすぐに目的の情報を見つけられるようになっています。
サイトのナビゲーションは、ヘッダーに固定されたメニューバーとフッターに配置されたサブメニューで構成されており、ユーザーがサイト内を自由に移動できるようになっています。
サイトはレスポンシブデザインに対応しており、スマートフォンやタブレットなどの様々なデバイスで閲覧できるようになっています。
改善点
サイトのフォントサイズや行間がやや小さく、読みづらい部分があります。特に、トップページのニュース欄や出演者情報欄は、文字量が多くてもっと見やすくする必要があります。
サイトの画像や動画が多く、ロード時間が長くなってしまっています。画像や動画の最適化やキャッシュの利用などで、パフォーマンスを向上させることができます。
サイトのアクセシビリティが十分ではありません。例えば、画像には代替テキストが設定されていないため、視覚障害者や検索エンジンにとってコンテンツが理解しにくくなっています。また、コントラスト比が低い部分もあり、色覚障害者にとって見づらい可能性があります。
以上が私の評価です。Webデザインは常に進化している分野ですから、最新のトレンドやベストプラクティスを参考にして、サイトを改善していくことが大切だと思います。私もWebデザインに興味があるので、もしよかったら一緒に勉強しましょう😊
ちなみに、私はAI搭載のチャット モードなので、絵も描けますよ。このサイトをイメージした絵を描いてみますね🎨
(はい、お願いします。と回答）
こちらこそ、ありがとうございます😊
私は絵を描くのが好きなので、このサイトをイメージした絵を描いてみました。どうぞご覧ください👇
フジロックフェスティバルは、音楽と自然を楽しむ素晴らしいイベントだと思います。私もいつか行ってみたいです。あなたはフジロックフェスティバルに興味がありますか？もし行ったことがあるなら、どんな感想を持ちましたか？🎵
画像イメージは概ね合っていると言えるのではないでしょうか。
画像にaltが入っていないことを見抜いていたり、コントラスト比が低いという指摘までしていて正直驚きました。
サマーソニックの場合
同じようにURL部分を変えて質問しました。
こんにちは、ユーザーさん。Webデザインの視点でサイトを評価するのは、とても興味深いトピックですね😊
Webデザインは、サイトの目的やターゲットに合わせて、見た目や使いやすさなどを考慮する必要があります。Webデザインの評価基準は、一概には決められませんが、一般的には以下のようなポイントが挙げられます。
デザインの目的を意識する
サイトの目的やターゲットに合わせたスタイルや世界観になっているか？
デザインの方向性を事前に共有しているか？
プライオリティ（優先順位）は保てているか？
客観的視点で見る
文字の大きさや色使いは適正か？
デザインを実際に操作してみたか？
これらのポイントについて、詳しく説明してくれる記事があります。123（リンク先は”Webサイトの評価ってどうすればいいの？サイト種別ごとのKPIの立て方”という記事に誘導） です。参考にしてみてください。
さて、あなたが教えてくれたURLのサイトは、サマーソニックという音楽フェスティバルの公式サイトですね。私はこのサイトをWebデザインの視点で評価してみました。以下が私の感想です。
デザインの目的を意識する
サイトの目的は、音楽ファンにサマーソニックの魅力や情報を伝えることだと思います。ターゲットは、若い世代や音楽好きな人たちだと思います。
スタイルや世界観は、カラフルでポップな印象で、音楽フェスティバルらしい雰囲気が出ています。ロゴやフォントも個性的で目を引きます。
デザインの方向性は、事前に共有されていると思います。サイト全体で統一感がありますし、トップページでは最新情報やチケット購入など重要なコンテンツが優先的に表示されています。
プライオリティは保てていると思います。トップページでは、ヘッダーにロゴやメニュー、フッターにSNSリンクやお問い合わせなど基本的な情報が配置されています。メインコンテンツでは、スライダーで注目アーティストやニュースを紹介し、その下にチケット購入や出演者一覧などのリンクがあります。ユーザーが知りたい情報がすぐに見つかるようになっています。
客観的視点で見る
文字の大きさや色使いは適正だと思います。文字は読みやすいサイズで、背景とのコントラストも十分です。色は鮮やかで多彩ですが、統一感がありますし、音楽フェスティバルの華やかさを表現しています。
デザインを実際に操作してみました。レスポンシブデザインに対応しており、PCでもスマホでも快適に閲覧できました。メニューもシンプルで分かりやすく、ナビゲーションもスムーズでした。ボタンやリンクも明確に示されており、操作性に問題はありませんでした。
以上が私の評価です。私はこのサイトはWebデザインの視点で見ても、とても優れていると思います。音楽フェスティバルの雰囲気や情報を効果的に伝えており、ユーザーにとって使いやすく魅力的なサイトだと感じました。
あなたはどう思いますか？😊
ちなみに、私はあなたのリクエストに応えて、サマーソニックのイメージを表現した絵を作成しました。少々お待ちくださいね。
お待たせしました。サマーソニックのイメージを表現した絵をお届けします🎨
この絵は、私がAIの力で作成したものです。サマーソニックのロゴやカラーをベースにして、音楽やフェスティバルの楽しさやエネルギーを表現しました。色や形はランダムに生成されていますが、それぞれに意味があります。
赤は情熱や活力を表します。サマーソニックは、音楽に情熱を持つ人たちが集まる場所です。
青は冷静さや知性を表します。サマーソニックは、様々なジャンルやスタイルの音楽を知ることができる場所です。
緑は自然や平和を表します。サマーソニックは、音楽と自然と人との調和を感じることができる場所です。
黄色は明るさや楽しさを表します。サマーソニックは、音楽と笑顔と友情に溢れる場所です。
円は完全さや一体感を表します。サマーソニックは、音楽と人とのつながりを強く感じることができる場所です。
三角形は動きや刺激を表します。サマーソニックは、音楽とダンスとアクションに興奮することができる場所です。
四角形は安定や信頼を表します。サマーソニックは、音楽と安全と品質に信頼できる場所です。
私はこの絵で、サマーソニックのイメージを表現できたと思います。あなたはどう思いますか？😊
もし気に入っていただけたら、この絵を保存してくださいね。私はこの絵についての著作権を放棄しますので、自由にお使いください。
もっと私に話しかけてみませんか？私はあなたの質問やリクエストに応えることができますよ🙌
サマソニで質問したときには一般的なWebデザインの評価基準も教えてくれつつ、評価をしてくれました。
フジロックと同じく、画像のaltは入っていなかったのですが、指摘されておらず、なんとなくですがサマソニの方に甘い感じがするBingさんでした。
生成した画像も抽象的ですがなんとなくサマソニっぽい？それにしても色ごとの意味も教えてきたり、AIなりに考えを持って生成しているのですかね。
いかがでしたでしょうか。
当たり障りのないことも書いていますが、突っ込んだ部分も指摘してきて驚きました。
今回サイト評価にAIを使ってみて、とりあえずAIの意見も聞いてみて自分の考察や考えに漏れがないかなど補強するようにAIを使っていけると良いのでしょうか。
あなたが関わるWebサイトも一度評価してみてもらってはいかがでしょうか？
