シルスプのブログにようこそ
UIデザイナーとして日々の鍛錬を行う「Daily UI」。
今回の課題は #069 Trending（トレンド） です。
Daily UI https://www.dailyui.co/
「トレンド」というお題は、ECサイトの売れ筋からSNSのハッシュタグまで
幅広く解釈できますが、
今回は「ユーザーが季節感を感じ、次の行動（旅行や外出）に繋げたくなる検索体験」を
テーマに設定しました。
具体的には、春の訪れを感じさせる「日本の桜の名所検索トレンド」をモチーフにした
モバイルUIを制作しました。
このブログでは、制作したUIの背後にあるUX設計の意図、視線誘導のロジック、
そして使用した配色やタイポグラフィのこだわりについて、
UIデザイナーの視点から徹底解説します。
出来上がった作品はこちら ↓
1. 企画とコンセプト設計：なぜ「桜」なのか？
1-1. コンテキスト（文脈）の重要性
UIデザインにおいて「トレンド」を表示する最大の目的は、
「ユーザーの意思決定をサポートすること」です。
ユーザーは何を探すべきか迷っていることが多く、
他者の動向（トレンド）を知ることで安心感を得たり、新しい発見をしたりします。
単に「人気ランキング」を作るのではなく、今回は以下のペルソナとシナリオを
設定しました。
- ペルソナ:
30代の社会人。週末の予定を立てたいが、具体的な行き先が決まっていない。 - シナリオ:
春の季節、漠然と「桜が見たい」と思いアプリを開く。今、みんながどこに注目しているのかを知りたい。
1-2. 情報設計（IA）のポイント
この画面に必要な要素は以下の通りです。
- タイトル: 何のトレンドなのかを一目で理解させる
- 検索バー: トレンド以外の能動的な検索への導線
- ランキングリスト: 順位、場所名、説明、魅力的な写真
これらをスマートフォンという限られた画面領域（ビューポート）にどう収めるかが、
今回のデザインの鍵となります。
2. ビジュアルデザインとUI構成の徹底解剖
実際の完成画面に基づき、各セクションのデザイン意図を解説します。
2-1. ヘッダーエリア：感情に訴えるファーストビュー
画面上部の青いヘッダーエリアは、アプリのブランドイメージと
季節感を伝える重要なセクションです。
配色の意図:
ベースカラーには落ち着いたスカイブルー系（#78A9D1相当）を採用しました。
桜のピンク色は、青空の下でこそ最も映えます。
あえてヘッダーを青にすることで、リスト内の桜の写真（ピンク）との補色対比を
作り出し、写真を引き立てる効果を狙っています。
イラストレーションの採用:
「Trending」という文字情報だけでは無機質になりがちです。
望遠鏡で遠くを見つめる人物の線画イラストを配置しました。
これは「発見」「探索」「未来の予定」というメタファーであり、
ユーザーにワクワク感（Discovery）を提供するためのあしらいです。
タイポグラフィ:
「Top Trending Searches for」という英語見出しは、サンセリフ体でモダンかつ親しみやすい。
視認性を保ちつつ、装飾的な役割も果たしています。
2-2. 検索バー：アフォーダンスの確保とマイクロコピー
ヘッダー直下には検索バーを配置しました。
プレースホルダーの工夫:
単に「検索」とするのではなく、「日本の桜の名所」と具体的なプレースホルダーを
入れることで、「ここで何ができるか」を瞬時に理解させる（マイクロコピーの最適化）を
行っています。
これにより、ユーザーの認知負荷を軽減し、スムーズな検索体験を提供します。
アイコン配置:
右側に配置したルーペアイコンは、検索機能の普遍的なシンボルであり、
迷わず操作できるアフォーダンス（手掛かり）を提供しています。
2-3. リストデザイン（カードUI）：情報のスキャン性を高める
メインコンテンツであるランキングリストは、「カード型UI」を採用しました。
これには明確な理由があります。
① Z型・F型の視線誘導への対応
ユーザーはスマホ画面を流し見（スキャン）します。
- 順位（数字） → 左上で瞬時にランクを把握
- 場所名（タイトル） → 興味のある地名か判断
- 写真（ビジュアル） → 右側の画像で直感的な魅力を確認
- 詳細（テキスト） → 興味がわけば説明文を読む
この視線の流れを阻害しないよう、要素の配置を厳密にグリッドで整理しています。
② フォントのジャンプ率と階層構造
- 見出し:
「1. 吉野山(奈良県)」のように、フォントサイズを大きく、ウェイト（太さ）を
持たせることで、第一階層の情報であることを明示 - 本文:
説明文はサイズを落とし、行間（line-height）を十分に取ることで、
長文でも圧迫感を与えないようにしています
③ サムネイル画像の役割
リスト右側に正方形の画像を配置しました。
テキストだけでは伝わらない「吉野山の圧倒的なスケール」や
「弘前公園の花筏（はないかだ）」の美しさを、
ノンバーバル（非言語）な情報として伝達し、タップ率（CTR）の向上を狙っています。
3. ユーザーを惹きつけるUXライティング
デザインだけでなく、画面内のテキスト（UXライティング）も重要です。
ユーザーの行動を促し、情報の信頼性を高めるため、以下の工夫をしています。
具体的かつ固有の名称:
「奈良の山」ではなく「吉野山」、「青森の公園」ではなく「弘前公園」と
固有名詞を明記することで、情報の信頼性とリアリティを高めています。
魅力的なディスクリプション:
- 吉野山: 「日本を代表する桜の聖地」「約3万本の桜は圧倒的なスケール」
- 弘前公園: 「桜の名所ランキングで常に上位に入る人気スポット」「桜祭りの期間中は200万人以上が訪れます」
- 上野恩賜公園: 「アクセスの良さと歴史ある花見文化」
これらのキーワードは、ユーザーの検索意図（インテント）と合致しやすく、
各スポットの独自性を端的に伝えています。
4. ユーザビリティとアクセシビリティの考慮
見た目の美しさだけでなく、使いやすさにも配慮しました。
コントラスト比:
背景のライトグレー（#F5F5F5程度）に対し、カードは白（#FFFFFF）を採用。
ドロップシャドウを控えめに適用し、背景とコンテンツの境界を明確にしています。
これにより、視覚にハンディキャップがある方でも要素の区切りを認識しやすくなります。
タップ領域の確保:
各カードは十分な高さ（約120px〜140px想定）を確保しており、
指でのタップミスを防ぐ設計です。
セーフエリアへの配慮:
画面下部はiPhoneのホームインジケーター領域を考慮し、コンテンツが隠れないよう
余白（パディング）を設計しています。
5. 使用ツールと制作フロー
今回の制作は以下のフローで行いました。
- Figmaでのワイヤーフレーム: 情報の優先順位を整理
- ムードボード作成: Pinterestなどで「Travel App UI」「Spring Color Palette」を収集
- UIデザイン（Figma）:
- フォント：和文には可読性の高いゴシック体（Noto Sans JPなど想定）を使用
- 画像素材：Unsplash等のロイヤリティフリー素材から、色味のトーンを合わせて選定
- モックアップ作成: 実際の端末（iPhone 15 Proフレーム）にはめ込み、実機での見え方を確認
まとめ：トレンド画面は「発見の入り口」である
Daily UI #069「Trending」の制作を通じて、単なるリスト表示以上の価値をどう
提供するかを模索しました。
今回の「桜の名所トレンド」UIのポイントは以下の3点です。
- 季節感のあるテーマ設定でユーザーの共感を呼ぶ
- 視認性の高いカードUIで、情報をスムーズに処理させる
- 写真とテキストのバランスで、情緒的価値と機能的価値を両立させる
UIデザイナーにとって、トレンド画面は「データを見やすく並べる」作業ではなく、
「ユーザーに新しい出会いを提案する」クリエイティブな場です。
今後も、マーケティング視点と純粋なグラフィックデザインの視点を融合させ、
ユーザーにとって価値あるUIを探求していきたいと思います。
次のステップ: あなたならどう改善する？
デザインに正解はありません。もしこの画面をさらにブラッシュアップするとしたら、
以下のような機能追加が考えられます。
- 「保存」機能: 各カードにブックマークアイコンを追加する
- 「距離」表示: 現在地からその場所までの距離を表示する
- マイクロインタラクション: スクロール時に要素がふわっと浮き上がるアニメーションの実装
- フィルター機能: 地域別、見頃時期別などの絞り込み検索
皆さんもぜひ、自分なりの「Trending」画面をデザインしてみてください。
では、またね～
