こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「麻雀一番街」からお知らせ画面のデザインの事例を紹介します。お知らせ画面のデザインをする際の参考になれば幸いです。
以下、主な特徴です！
- 手数が少なく軽快な動作
- タブに表示してる文字列と本文見出しの文字列を変えて一覧性を担保
- イベントタブは訴求画像を大きく表示
- お知らせタブには更新頻度が低くユーザーの目に留めたい情報を表示
- 同系色で統一した落ち着いたデザイン
手数が少なく軽快な動作
「麻雀一番街」のお知らせ画面はこのようなデザインでした。
画面左にお知らせの見出しがあり、本文を次々と切り替えることができます。最近ではポピュラーな設計のデザインかと思います。
アニメーションで見るとこんな感じです。
本文を軽快に切り替えることができています。
タブに表示してる文字列と本文見出しの文字列を変えて一覧性を担保
「麻雀一番街」のようなお知らせ画面のデザインだと、タブ部分に長い文字列を表示できないと思っていました。
しかし、「麻雀一番街」のデザインのように、タブに表示する文字列と本文の見出しを変えるアイディアは自分には無い発想でした。
たしかに、冷静に考えればお知らせを読んでいるユーザーは少数派だと思いますし、本文と内容が一致していれば文字列が違っていても、実質的にユーザーは困らないと思います。お知らせ画面のデザインも地味に使い勝手が進化しているのだな、と感じました。
イベントタブは訴求画像を大きく表示
お知らせ画面のカテゴリは「イベント」と「お知らせ」の２つで分けられています。
「イベント」のタブの設計の特徴は訴求したい情報でまとめられていることです。
特にイベントやガチャの情報など一過性のものが多くみられ、更新頻度も高いのが特徴的です。
「イベント」タブの見た目の特徴としては、訴求画像を大きく表示し、文字ではなくグラフィックでユーザーに情報を伝えている点です。特にキャラクターを中心に訴求し、目を引くデザインにしています。
こういったデザインの背景には、お知らせ本文を読むユーザーは少数であり、すぐに閉じられる画面だと考え、瞬間的な見栄えを重視しているように感じます。
お知らせタブには更新頻度が低くユーザーの目に留めたい情報を表示
「お知らせ」のタブは全体的にフォーマルで、更新頻度の低い恒常的な情報がまとめられていました。更新頻度が低いため、長い期間、ユーザーの目に留まりやすい仕組みになっています。副次的な効果ですが、CS担当者が情報を案内しやすくもなります。
見た目については画像も少なくフォーマルな印象のデザインです。
「お知らせ」タブの見た目がシンプルな分、「イベント」タブの情報の賑やかさが際立っているように感じました。
同系色で統一した落ち着いたデザイン
最後にお知らせ画面の見た目について紹介します。
背景、文字色などを見ると、青い色相とトーンで統一した落ち着いたデザインになっています。
下地と本文の可読性についても、色の濃淡を利用して読みやすくなっています。
文字の読みやすさを利用して情報の優先度がデザインされています。
また青を中心に構成されていても、リンクははっきりと区別されたデザインになっています。より具体的に言うなら、リンクテキストだけ、やや他のトーンから外れた色になってます。彩度が高く、やや異質な感じがするのが直感的に伝わります。
個人的にはかなり基本に忠実なデザインだと感じました。
以上です。
お知らせ画面をデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「麻雀一番街」のガイドラインを確認したところ、以下の記載がありました。
本コンテンツのゲーム配信及び動画投稿を利用する際には、以下の内容をお守りの上お楽しみください。
1. お客様は本コンテンツから取り込んだゲームプレイの動画や静止画を、下記の場所にてご利用いただけます。
（1）YouTube、Twitch、Twitter、Facebook、ゲームの攻略・紹介・実況・解説など動画投稿サイト
（2）お客様の個人的、かつ非営利目的のブログ・ホームページ・及びＳＮＳ
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
