【VibeCodingChallenge#9】UIについての相談アプリ

はじめに

このVibeCodingChallengeは、AIだけで、コーディングをすることで、何がAIにできて、何ができないのかを学ぶために個人的に行っている取り組みですので、ぜひご覧ください。
　前回以下のような、認識合わせ用レベルのUIがどのくらいの時間で、どこまでできるのか？という挑戦をしました。
https://zenn.dev/tkinzenn/articles/5306d5346b9e58

ただ、UIが淡白だったので、UIを改善したいと思いたったが、どんな色味が良いんだろう？と思い立ち、生成AIに要件に合う色味をよしなに提案してと、指示しようとしましたが、「逆に自分が思うUIの色味を指定して、その印象がどのようになるのかを分析してもらえる」 と、それも面白いのではと思いました。（自分のセンスのなさもバレそう）

最終成果物

以下を実装しました
1.サイトで想定している色味を文字も含めて設定（今回はプライマリボタン、セカンダリボタン、通知、プログレスバー、背景色を設定可能）
2.設定内容に応じて、可変にプレビューが変化
3.下部の分析ボタンを押下すると、GeminiのAIにより、サイトイメージが分析され、改善点を指示。

以下動画です
https://youtu.be/TYdxJ5ZTveI

動画内で出てくる結果は以下の通りです。

# UI色彩分析と改善提案

このUIの色設定は、いくつかの問題点を含んでいます。以下、詳細に分析し、改善案を提示します。

**1. 色彩心理学的分析**

鮮やかな緑(#04e753)のページ背景は、自然、成長、新鮮さを連想させますが、同時に落ち着きのなさや刺激の強さを与える可能性があります。長時間利用には不向きで、集中力を阻害する可能性も。プライマリボタンの青(#118fe4)は信頼感と安定感を、赤(#f00a0a)の文字色は緊急性や注意喚起を促します。しかし、この組み合わせは攻撃的で、ボタンの本来の機能（クリックを促す）と相反する心理的効果を生む可能性があります。セカンダリボタンのグレー(#95a5a6)は中立的ですが、背景の緑とのコントラストが低く、視認性が低い。通知の緑(#28a745)は肯定的な印象を与えますが、背景色との類似性が高く、埋もれてしまう可能性があります。

**2. UI調和とバランス分析**

ページ背景の緑とUI要素の青、グレー、黄色の組み合わせは調和が取れていません。色相環で近接していない色が散在し、統一感が欠如しています。プライマリボタンの赤文字と青背景はコントラスト比が低く、WCAGの基準を満たしていない可能性が高い。特に色覚多様性を持つユーザーにとっては識別が困難です。ナビゲーションバーの黒(#343a40)は安定感を与えますが、背景の緑とのコントラストが強すぎるため、目に負担がかかります。

**3. ユーザーエクスペリエンス分析**

プライマリボタンの低コントラストは可読性を低下させ、クリックミスを誘発する可能性があります。背景の鮮やかな緑は長時間使用時の目の疲労を増加させます。また、緑と赤の組み合わせは一部の色覚障害を持つユーザーには識別困難です。セカンダリボタンの視認性の低さも操作性を阻害する要因となります。

**4. ブランディング戦略分析**

この配色からは明確なブランドイメージを読み取ることが困難です。色の選択に一貫性がなく、ターゲット層への訴求効果も不明確です。競合他社との差別化も難しいでしょう。

**5. 科学的根拠に基づく改善提案**

* **ページ背景色:**  #f8f9fa (ライトグレー) -  目に優しく、コンテンツを際立たせます。
* **プライマリボタン:** 背景色 #007bff (青), 文字色 #ffffff (白) -  信頼感と高い視認性を確保。
* **セカンダリボタン:** 背景色 #6c757d (グレー), 文字色 #ffffff (白) -  適切なコントラストと中立性を維持。
* **通知:** 背景色 #28a745 (緑), 文字色 #ffffff (白) -  肯定的な印象を維持しつつ、視認性を向上。
* **プログレスバー:** #ffc107 (黄色) -  進捗状況を明確に表示。
* **ナビゲーションバー:** 背景色 #343a40 (ダークグレー), 文字色 #ffffff (白) -  安定感と視認性を両立。

これらの変更により、WCAGのAAレベル以上のコントラスト比を確保し、色覚多様性にも配慮したデザインになります。A/Bテストでユーザーの反応を検証し、更なる最適化を行うことを推奨します。これらの変更は、ゲシュタルト心理学の原則に基づき、視覚的階層を明確にし、ユーザーエクスペリエンスを向上させます。

テキトーに作ったので、非常に見にくいものになったため、ぼろくそ言われてますね。

今回の学び　色の大切さ

その後、たくさんのものを試しましたが、赤は緊急感、青は信頼、緑は安全、グレーは中立など同じUIでも色における表現の違いを知れました。今回のように、定量的に測れるものではなく、定性的な印象まで表現ができるのはある種生成AIの強みでもありますね。
こうした色味の大切さを示す学習教材としても使えるかもしれませんね。私自身何気なく、iPhoneのサイトかっこいいとか、何も考えていなかったので、今後気を付けてみてみようと思います。

終わりに

このVibeCodingChallengeを通して様々なものを作る中で、思いもしなかった学びにも出会えています。これこそVibeだなと思いつつ、もう少し今後は堅牢なプロンプトやAIをもっと駆使したWebアプリなどを作れればいいなと思っていますので、今後もどうぞご覧ください。