スポナビプロ野球速報のリデザイン

このブログは、「1ヶ月続けた"勝手にUI改善"の振り返り」の続編です。

上のブログに書いてある通り、私はUIデザインスキルに対して以下のような課題を抱えていました。

1. 既存のUIを使いまわすことしかできない。(もちろん統一感のあるUIは大切ですが、負の遺産として排除したいUIもそのまま使ったりしていました)

2.自分が作ったUIに全く自信がなく、なぜそれが良いのか説明できない。(作っても作ってもそのUIがベストな理由が説明できずに悩み続ける。悩んだ挙句に先輩デザイナーに相談しに行く)

3. エンジニアから相談を受けてもすぐに答えれない(2の理由から、こちらのUIが良いと説明できないので、結局先輩デザイナーに相談する)

そのため、既存アプリのトレースやリデザインを通してUIデザインのスキルを身に付けようと考え、勝手にUI改善を始めることにしました。

詳細はブログに書いておりますので、興味のある方はぜひご覧ください。

はじめに

今回リデザインの題材として「スポナビプロ野球速報」を選びました。選んだ理由は、野球ファンならだれでも重宝しているアプリにも関わらず、UI面における改善点が多く見受けられるなと思ったからです。(私自身、スポナビプロ野球速報のヘビーユーザーというのも選んだの理由の1つでありますw)

スポナビプロ野球速報ってどんなアプリ？

「スポナビプロ野球速報」は、その名の通りプロ野球の速報が一球ごとにリアルタイムで更新されるアプリです。全球団の試合状況が確認でき、試合途中からアプリを開いても途中経過を確認できます。また、速報だけではなく、選手の対戦成績や今シーズンのデータなど細かくチェックすることができるので、野球ファンにとっては、神アプリと言っても過言ではないです。(決して運営会社の回し者ではありませんw)

アプリが抱える課題

まず、アプリが抱えるUIに関する課題点を洗い出しました。今回、洗い出した課題点は以下のとおりです。

1. ハンバーガーメニューの中に速報機能以外の全機能が隠れているため、機能数の割に利用されづらい。(とりあえずメニューの中突っ込んどくか状態)

2. 試合の速報(exソフトバンク-楽天)をクリックできるかわかりづらい。

3. コラムをTOPでおすすめしているが、スクロールしないと見てもらえない。広告的なオススメの仕方をしているので、あまりクリックしたいとは思えない(主観)。

4. 全ページ、ほとんど同じ大きさ・太さのフォントを利用しており、情報の優先度が分かりづらい。

5. お気に入りチームを登録しても、ほとんど意味がない(速報で一番上に表示されるものの速報は全チームTOPで確認できる)

これらの課題を抱えており、特に速報以外の機能を利用するまでの道のりが遠く、野球がある時間帯以外開くモチベーションが起こりづらいアプリとなってしまっています。

もちろん、アプリ名に"速報"とある通り、プロ野球の速報ができればアプリとしての目的が果たせています。(いつも本当に感謝してます)

とはいえ、シーズンに野球の試合が行われているのは144試合。1試合あたりの平均時間は3時間8分です。つまり、1年の大部分はこのアプリを開く必要がないわけです。コラムやニュースなど野球ファンとしては魅力的な情報が詰まっているのに勿体無いですよね…

実際、アプリをダウンロードしているとコラムの通知がくるので、運営の方も何とか野球の試合がない時もアプリを開いてもらおうとしているようです。(特に今のシーズンは速報機能使わないんですよね...最近コラムやニュースの通知が多い気がしますw)

アプリの改善方針

今回アプリを改善する目的は「野球の試合が無い時期も使いたくなるアプリ」にリデザインすることです。既に豊富にある機能を利用しやすくすることで、速報機能を使う機会が無い場面でもアプリの利用頻度をあげたいと考えています。

以上を踏まえて、具体的な改善方針を考えました。(UIデザインスキルを向上させることが個人的なゴールなので、既存アプリのUI上の課題に対する改善点をメインに挙げています)

1. ios標準の下タブを取り入れることで、ハンバーガーメニューに隠れていた機能を常に表示する(タブに入れる情報もきちんと整理する)

2. 情報の優先度を整理し見やすいUIに改善する。

3. お気に入りチーム専用のタブを追加し、お気に入りチームの情報を頻繁に確認できるようにする。

ios標準のタブを追加することで、ユーザーが他の機能を目にする機会が頻繁に増えると考えました。実際にタブに追加するメニューは、「速報」「ニュース(コラム含む)」「データ」「お気に入り」「その他」の5つです。

上記の5つを選択した理由はそれぞれ以下の通りです。
「速報」→アプリの目玉機能。1番利用されている機能である。

「ニュース」→こちらも野球ファンにとっては、知りたい情報が盛りだくさん。シーズン以外でも更新されるので、1年中アプリを利用してもらうためには、欠かせない機能。

「データ」→現在の順位や打率は、野球ファンなら誰しもが気になる情報です。タブに追加することでこれらの情報にアクセスしやすくします。

「お気に入り」→お気に入りチームの情報は、データやニュース以上に気になるものです。せっかくのお気に入り機能があるので、お気に入りタブを追加することを提案します。

「その他」→上記のタブに収まりきれなかった機能をその他タブに追加します。Facebookのその他と役割は同じです。

では、それぞれの画面の改善案について説明していきます。

アプリの改善案

「速報」タブ

最初に速報タブの画面を改善しました。速報タブの画面ではメイン機能である「速報」を目立たせています。現状の試合状況がどうなっているかを分かりやすく伝えることを意識しました。

◆ 課題点

・ハンバーガーメニューに機能が隠れている。

・見出しと試合のコンテンツが同じフォントを使用しているため、似たような情報に見えてしまう。

・試合情報がクリックできるかわかりづらい。

・お気に入りチームの情報をパリーグにも表示しているので、同じ情報が2つ表示している。(一瞬混乱を生んでしまう)

◆ 改善ポイント

・下タブアイコンで頻繁に利用しそうな機能を常に表示する。アイコンは、ios11から推奨されるようになった塗りアイコンを作った。

・アプリ背景、試合情報カード、ヘッダーの背景色を整理し、試合情報カードの押せる感を出した。

・見出しとカード内のフォントに強弱をつけて見やすくする。

・カード内のフォントも強弱をつけて見やすくする。

・お気に入りチームの試合状況はパリーグorセリーグには表示しない。

「速報」タブ - 詳細情報(トップ)

試合詳細情報では、情報量が多いにもかかわらず、フォントの強弱がついておらず、わかりづらくなっていました。そこで、HIGを読み込んだり、FacebookやTwitter、airbnb等のアプリを参考にして改善していきました。主な課題点と改善ポイントは以下の通りです。

※2017/11/16 : 本塁打の数字を算用数字に修正しました。

◆ 課題点

・見出しと本文のフォントの強弱がなく、情報の優先順位がわかりづらい。

・トップ、速報、経過、成績がスライドバーになっているのに、押せるかどうかするわかりづらい。

◆ 改善ポイント

・フォントのカラー、太さ、大きさで見出しと本文の情報に差をつけた。

・余白を大胆に取ることで、情報の区分をはっきりさせて見やすくした。

・ナビゲーションをスコアの下に持ってきて、マテリアルデザインガイドラインを参考に改善した。(スコアボードもナビゲーション固定だったため、スコアの下に持ってきた)

「速報」タブ - 詳細情報(速報)

試合詳細ページの速報タブでは、一球速報という神機能があるにも関わらず、一球速報が他のテキストと比較しても目立っていませんでした。フォントの大きさやカラー、要素間の余白を整理して、情報の区切りがはっきり分かるように改善していきました。

◆ 課題点

・一球速報(beforeで試合終了と出ているところ)が目立っていない。

・ランナーやデータ等の押せる感が伝わらない。

・選手の個人情報が文字文字しくて、情報が頭に入ってきづらい。

◆ 改善ポイント

・一球速報の背景に色を入れて、フォントの強弱をつけた

・Google系アプリを参考にし、背景色+アイコンを組み合わせて、ランナーやデータ等の押せる感を出した。

・選手情報に顔写真を使って、チーム名の情報を削除。フォントの強弱やborderを入れることで、テキストが多くなっても見やすく改善。

「速報」タブ - 詳細情報(経過)

試合詳細ページの経過タブでは自分が見逃したイニングの情報を確認したいケースに利用されるかと思います。現状のUIですと、どちらのチームの情報を表示しているか、また何回のことを伝えるかが分かりづらくなっていました。そのため、改善ではフォントの強弱をつけることでどちらのチームがいつ攻撃しているかをハッキリ分かるようにしました。

◆ 課題点

・どちらのチームの攻撃かわかりづらい

・何回の攻撃を見ているかわかりづらい。

・アウトカウントが直感的に頭に入ってこない。

◆改善ポイント

・見出しと本文のフォントに強弱をつけた。

・アウトカウントとランナーをイラストに変更した。

「速報」タブ - 詳細情報(成績)

試合詳細ページの成績タブでは大きな変更を加えてはいません。既存のUIで「その試合の個人成績を確認したい」という目的を達成することができると考えました。そのため、この画面では以下のような細かいUI上の課題を解決しました。

◆ 課題点

・打者成績と投手成績がスライドバーを使っているにも関わらず、押さないと切り替えできないので、ユーザーに間違ったアクションを促すUIを利用している

・パッと見たときにどちらのチーム情報か分かりづらい(プロ野球に詳しければ選手情報を見れば分かるが...)

◆改善ポイント

・打者成績と投手成績に関して、pinterestを参考に、タブで切り替えるUIを採用した

・球団名のフォントサイズを大きくした

「ニュース」タブ

既存のニュースページは、タイトルや写真も分かりやすくニュースを見るという点では大きな問題点がないと考えました。ただ、なぜかプロ野球以外のニュース(サッカー等)が見れるんですが、(野球に関する)ニュースと関連性の近いコラムやドラフト情報が確認できませんでした。今回は他の改善案と同じようなトンマナのデザインに改善しつつ、ヘッダーナビゲーションを使い、関連する情報を確認しやすくしました。

◆ 課題点

・コラムやドラフト情報を確認しようとすると、確認するまでのステップ数が多くなってしまう。(ホームに戻る→ハンバーガーメニューを開く→コラムを開く)

・野球以外のニュースを表示している

◆改善ポイント

・ヘッダーナビゲーションを使い、コラム、動画、ドラフトの情報をまとめて表示した

・他のページのトンマナに合わせたUIに修正

「データ」タブ

既存のアプリでは、野球のデータに関する情報がハンバーガーメニューにバラバラに置かれていました。順位表やチーム成績、個人成績を行き来しようと思ってもハンバーガーメニューに戻るしか方法がありませんでした。そのため、「順位表」「チーム成績」「個人成績」「公示」を1つのタブにまとめることにしました。その他の課題点や改善ポイントは以下のとおりです。

◆ 課題点

・タブUIを採用しているが、タブを切り替えてもコンテンツの差異があまりない。(ex トップとパリーグ・セリーグはほぼ同じ情報、交流戦やオープン戦は一部期間をのぞいてほとんど確認しない)

・個人成績等のデータにアクセスしようと思っても、ステップ数が多くて面倒。

◆改善ポイント

・ヘッダーナビゲーションに「順位表」「チーム成績」「個人成績」「公示」を表示した。

・他のページのトンマナに合わせたUIに修正

「お気に入り」タブ

既存アプリにはお気に入り機能がなかったので、チーム情報をお気に入りタブに表示するようにしました。今回は既存のチーム情報のUI上の課題を解決しつつ、お気に入りチーム感を演出できるように改善していきました。また、お気に入り情報に入れるコンテンツの検討余地はあると思いますが、今回はすでにある機能を使いまわす形で案を考えていきました。

◆ 課題点
・タブの中身が多いにも関わらず、二行で表示されていて、選択しづらい。

・週間スケジュールは「いつの試合」かが重要な情報であるにも関わらず、試合の一覧を見たときに日付が分かりづらい。

◆ 改善ポイント

・日付と試合カードを分けて表示した。

・フォントの強弱をつけて試合カード内の情報の優先度をハッキリとつけて表示した。

・チーム名、見出し、試合カード内の情報のフォントに強弱をつけて、ページ全体を見たときも、情報の区切りを分かりやすくした。

・球団ロゴを大きめに表示して「お気に入りチーム感」を演出した(主観が強いが自分は好きなチームのロゴを見ると上がるw)

「その他」タブ

ハンバーガーメニューにあり、他のタブに収め切ることができなかったものを
「その他」タブにまとめました。既存アプリと比較するものがないので、改善ポイントだけ説明していきます。

◆ 改善ポイント

・FacebookやTwitter,iOS標準アプリを参考にその他タブを作成した

・見出しとセル内のフォントの強弱をハッキリつけることで、クリックできるものと見出しを一目でわかるようにした。

カレンダー機能

カレンダー機能では、「1ヶ月にどれくらい勝利できたかが分かること」が重要だと考えています。そのため、勝敗を色で判別できるようにしたり、現在表示しているのがどのチームかを分かりやすく改善しました。細かい課題点と改善ポイントは以下の通りです。

◆ 課題点

・○と×がどちらのチームの情報か分かりづらい

・全体を見たときに、どれだけ勝利しているかが分かりづらい。

・選択されているチームが分かりづらい

・チームの選択方法が分かりづらい

◆改善ポイント

・対戦相手のみをカレンダーに表示

・勝敗を色で区別した

・ヘッダーナビゲーションでチームを選択できるようにした

・横方向のナビゲーションでチーム変更をする代わりに、月の切り替えをスクロールに変更

まとめ

今回改善した画面数は合計10画面ですが、各画面のスクロールした状態まで想定せず好き勝手に改善させてもらいました。1ヶ月半に渡って勝手にUI改善を継続したおかげで、UIを作成する上でのルールをある程度理解できるようになりました。

また、勝手にUI改善を始める前まで苦手意識を持っていた「デザインの言語化」が以前に比べてできるようになったと感じています。引き続き様々なアプリを触って勝手にUI改善し、スキルを伸ばしていきたいと思います。

最後に、今回の製作過程は全て以下のMomentsにまとめています。気になる方はぜひご覧ください。今回紹介しきれなかったボツ案もたくさん載せてます。