シルスプのブログにようこそ
70日目の課題は、Event Listing
今回の課題は #070 Event Listing（イベント一覧） です。
Daily UI
https://www.dailyui.co/
イベントアプリやチケット予約サイトにおいて、
この「一覧画面」は最も重要なコンバージョンポイント（CV地点）の一つです。
単に情報を並べるだけでは不十分であり、ユーザーに「楽しそう！」「行ってみたい！」と思わせる情緒的な価値（Emotional Design）と、目的のイベントへ素早く辿り着ける機能的な価値（Functional Design）の両立が求められます。
今回は、ポップで親しみやすいデザインを通して、
ユーザーの探索意欲を刺激するイベント検索UIを制作しました。
この記事では、制作した画面（添付画像）を元に、情報設計（IA）、視覚階層（ビジュアルヒエラルキー）、そして配色のロジックについて、解説します。
1. 企画とコンセプト設計：能動的検索と受動的発見のバランス
1-1. ターゲットユーザーとシナリオ設定
UIデザインを始める前に、まず「誰が」「どのような状況で」使うのかを定義しました。
ペルソナ: 週末の予定が空白の20代〜30代。特定のアーティストを探している場合もあれば、「何か面白いことないかな」と漠然と探している場合もある。
コアバリュー: 「手軽さ」と「発見」。堅苦しいチケット予約画面ではなく、雑誌をめくるような感覚でイベントを探せる体験。
1-2. 検索における2つのメンタルモデル
イベント系アプリには、大きく分けて2種類のユーザー心理が存在します。
目的型（Search）: 「特定のバンドのライブに行きたい」という明確な目的がある。
探索型（Discovery）: 「今週末、暇だな」という漠然としたニーズがある。
今回のUIでは、この両方に対応するためのハイブリッドなレイアウトを採用しました。
上部には明確な「検索バー」を配置し（目的型への対応）、
その下には視覚的に楽しい「カテゴリー」や「おすすめ」を配置する（探索型への対応）ことで、幅広いニーズをカバーしています。
2. ビジュアルデザイン徹底解剖：各セクションの意図
実際の完成画面に基づき、上から順にデザインの意図を解説します。
2-1. ヘッダーエリア：ファーストビューで世界観を作る
画面最上部の「Event Listing」エリアは、アプリ全体のトーン＆マナーを決定づける重要な場所です。
イラストレーションの採用: 今回は、パステルカラーの風船と雲の3Dイラストをヘッダー背景に採用しました。
これは「お祭り感」「非日常」「高揚感」を演出するためです。
無機質な単色ヘッダーではなく、リッチなビジュアルを使用することで、ユーザーがアプリを開いた瞬間にポジティブな感情を抱くよう設計しています（Visceral Design：本能的デザイン）。タイポグラフィ: 「Event Listing」の文字には、少し遊び心のあるサンセリフ体を使用し、親しみやすさを強調しました。
2-2. 検索バー：マイクロコピーによる誘導
ヘッダー直下には検索ボックスを配置。
プレースホルダーの工夫:
単に「検索」とするのではなく、「アーティスト、公園名で検索」と具体的な例示（プレースホルダー）を入れています。
これにより、ユーザーは「ここでは何を入力して検索できるのか」を瞬時に理解できます。
これはユーザビリティ向上における基本ですが、
非常に効果的なテクニックです。視認性の確保:
白地の背景色に対してグレーのボックスを置きくことで、
入力エリアであることを明確にアフォーダンス（示唆）しています。
2-3. ピックアップ（Heroエリア）：情報の優先順位
検索バーの下には、最も注目すべきイベントを大きく表示する「ヒーローカード」を配置しました。
レイアウトの工夫:
左側にイメージ画像、右側にテキスト情報を配置する構成です。
ユーザーの視線は左から右へ流れるため、
「画像で興味を惹き（キャッチ）」→「詳細を確認する（リード）」という自然な視線誘導を実現しています。情報の取捨選択:
カード内には多くの情報を詰め込みすぎず、以下の要素に絞りました。イベント名: 「夏フェス」
場所（エリア）: 「TOKYO」（バッジで強調）
日時: 「2025.9/13(土)・14(日)」
詳細場所:
「千葉市〇〇スポーツ公園」 特に日時の表記において、
曜日を入れることは必須です。
ユーザーは「日付」よりも「曜日（週末かどうか）」で意思決定を行う傾向があるためです。
2-4. カテゴリーナビゲーション：色による認知負荷の軽減
中段には4つの主要カテゴリー（音楽、スポーツ、演劇、クラシック）をボタンとして配置しました。
カラーコーディングの心理効果:
音楽（赤・ピンク系）: 情熱、エネルギッシュ、興奮。
スポーツ（青系）: 爽やかさ、動的、信頼。
演劇（紫系）: 芸術性、創造性、優雅さ。
クラシック（緑系）: 安らぎ、調和、落ち着き。
それぞれのジャンルが持つイメージカラーを使用することで、
文字を読まなくても直感的にジャンルを識別できるようにしています。これは「認知負荷（Cognitive Load）」を下げるためのAEO的な
アプローチでもあります。
アイコンとラベルのセット:
アイコン単体では意味が曖昧になる可能性があるため、
必ずラベルを併記しています。
また、ボタンのサイズを大きく取り、
モバイル端末でのタップしやすさ（Fitts’s Law：フィッツの法則）を考慮しました。
2-5. おすすめチケット情報：回遊性を高める
下部には、さらに詳細なリストへの入り口となる「おすすめ」セクションを設けました。
サムネイルの魅力:
ここではテキストよりも「写真」をメインに見せるレイアウトにしています。
ライブ会場の熱気や照明の美しさが伝わる写真を選ぶことで、ユーザーの「行ってみたい」という欲求を刺激します。「もっと見る」への導線:
セクション右上に配置したリンクにより、受動的な閲覧から能動的な一覧探索への遷移を促しています。
3. UXライティングとSEO・AEO対策
デザインだけでなく、画面内の言葉選び（UXライティング）も重要です。
また、現代のアプリ開発では、検索エンジンやAIアシスタントにコンテンツを正しく理解させる構造化も意識する必要があります。
3-1. 具体的で検索されやすいキーワード
「夏フェス」「TOKYO」「チケット」:
これらの単語は検索ボリュームが大きく、ユーザーのニーズが高いキーワードです。
UI上の目立つ位置に配置することで、スクリーンショット解析を
行うAIや、アプリストアの検索アルゴリズムに対して、
このアプリが何を提供しているかを明確に伝えます。
3-2. 明瞭な日時表記
AIアシスタント（GoogleアシスタントやSiriなど）が
「今週末のイベントは？」という質問に答える際、
正確な日付データは不可欠です。
「9/13(土)」のように曜日まで明記することは、
人間にとって読みやすいだけでなく、情報の曖昧さを排除する
意味でも重要です。
4. デザインシステムと使用ツール
今回の制作における技術的な側面についても触れておきます。
ツール: Photoshop
フォント:
和文: FOT-筑紫A丸ゴシック Std
– 視認性が高く、太さのバリエーションが豊富なため、情報の階層化に適しています。欧文: Futura（ヘッダー部分） –
幾何学的でモダンな印象を与え、イベントの楽しさを表現します。
カラーパレット:
ベースカラーには白（#FFFFFF）を使用し、コンテンツ（写真やバッジ）の色を引き立てています。
アクセントカラーにはパステル調の色味を使用し、
全体的に明るく開放的なトーンで統一しました。
5. ユーザビリティとアクセシビリティのチェックポイント
美しいだけでなく「使える」デザインにするために、以下の検証を行っています。
コントラスト比:
文字色と背景色のコントラスト比（特にカテゴリーボタン内の文字）が、WCAG（Web Content Accessibility Guidelines）の基準を満たしているか確認し、
弱視のユーザーでも読みやすいように配慮しています。タップ領域:
モバイルファーストの観点から、ボタンやリストの高さは最低でも
44px以上を確保し、指での誤操作を防いでいます。
今回のカテゴリーボタンは約60px程度の高さを確保しており、
非常に押しやすい設計です。親指の可動域（Thumb Zone）:
よく使う「カテゴリー選択」や「リストのタップ」は、片手操作でも届きやすい画面中段〜下部に集約しています。
まとめ：情報は「探す」ものではなく「出会う」ものへ
Daily UI #070「Event Listing」の制作を通じて、
単なるリスト表示を超えた「体験の入り口」としてのUIを模索しました。
今回のデザインの要点は以下の3つです。
感情に訴えるビジュアル:
イラストと配色で「楽しさ」を予感させる。直感的なナビゲーション:
色とアイコンで、瞬時にカテゴリーを識別させる。明確な情報の優先順位:
ユーザーが知りたい情報（何が、いつ、どこで）を迷わず伝える。
これからのイベントアプリは、ユーザーが検索する手間を省き、
AIが好みを学習して「これ好きでしょう？」と提案してくれるようなインターフェースへと進化していくでしょう。
しかし、最終的にユーザーが「タップしてみよう」と決断する背中を
押すのは、今回のような「人の心を動かすビジュアルデザインの力」
であると信じています。
次のステップ: UIをさらに進化させるなら？
もしこのデザインを実際のアプリとしてリリースするなら、
次のような機能追加を検討します。
ソーシャル機能:
「友人が参加予定のイベント」を表示し、社会的証明（Social Proof）を活用する。パーソナライズ:
ユーザーの過去の閲覧履歴に基づき、トップの「夏フェス」カードを「ジャズコンサート」や「サッカーの試合」に動的に差し替える。ダークモード対応:
夜間のチケット検索や、ライブ会場（暗所）での使用を考慮した配色の検討。
では、またね～
