ストリーミングアプリのデザイン:ダークなホーム画面の改善 ビフォー・アフター

ある人が再生ボタンを押すためにストリーミングアプリを開きます。下の初稿には売れる作品があるのに、肝心のボタン1つを、他のものでぐるりと囲んでいます。アイコン4つのヘッダー、9pxの文字で6つの情報を並べた行、同じ重さの3つのボタン、そしてシアンのアプリに混ざった赤いバッジ。修正版は同じ作品、同じ行のまま、画面の順番を視聴者の行動の順番に合わせました。

画面全体のビフォー・アフター

新人の初稿

修正版

左では、ヒーローの最初に目に入るのが大文字のタイトルと、読めないほど小さな行です。右のヒーローには、名前と1行とボタン1つだけがあります。

修正1:役割が2つのヘッダー

ビフォー

アフター

小さなアイコン4つと、丸いボタン2つの比較。

初稿のヘッダーには、検索、キャスト、赤い点付きのベル、視聴者のアバターが並び、それぞれ幅は約20pxです。行はごちゃごちゃしていて、アバターは下のProfileタブと重複しています。

修正版は検索と通知を40pxの丸いボタン2つにして残し、キャストアイコンとアバターは外しました。ベルの点はシアンです。プロフィールにはすでにタブがあるので、ヘッダーで繰り返す必要はありません。

使い回せるルール:すべての操作は1か所に置く。タブバーにProfileがあるなら、ヘッダーにプロフィール画像は要りません。

修正2:Playボタンは1つ

ビフォー

アフター

タイトル、小さな情報行、3つのボタンと、タイトル、1行、ボタン1つの比較。

ヒーローは画面で最も価値のある場所なのに、初稿はそこを埋め尽くしています。タイトルはポスター中央下に大文字で置かれ、赤い「NEW EPISODES」チップの下にあります。その下の9pxの行には「2025 • TV-MA • 2 Seasons • Sci-Fi, Action, Drama • ★ 8.3」と6つの情報。さらにPLAY、MY LIST、INFOの3つのボタンが、すべて大文字でほぼ同じ重さで並ぶので、視聴者は押す前に選ばされます。

修正版はタイトルを画像の左下に移し、読めるように下に暗いフェードを敷き、その下に短い1行「Sci-fi · Season 2 · 2025」を置きました。チップはブランドのシアンで「New season」です。

画像の下では、幅広の白い「Play」ボタンが横幅の大部分を占め、その横にリスト用の丸い「+」があります。INFOは画面にありません。

使い回せるルール:ヒーローに必要な操作は1つ。画面で一番大きなボタンを与え、他はすべて小さくしましょう。

修正3:残りがどれだけか分かる幅広カード

ビフォー

アフター

細い赤いバーの縦長ポスター3枚と、残り時間付きの幅広カード2枚の比較。

初稿の「Continue Watching for Alex」行は、縦長ポスターが3枚です。それぞれの下に3pxの赤い進捗バーと、10pxの「S2:E5」のようなラベルがあります。ポスターは作品が何かは伝えますが、視聴者がどこで止めたかは伝えません。しかも赤いバーは、シアンのアプリに入り込んだ2色目です。

修正版は幅広カード2枚にして、進捗バーは画像の中にシアンで入れ、タイトルを下に置きました。タイトルの下の行は「S2 E5 · 残り12分」。続きを見ようとする人が抱く疑問、「これを見る時間はあるかな?」に答えています。

使い回せるルール:続きを見る行は視聴者の現在地のためにある。エピソードコードだけでなく、残り時間を見せましょう。

修正4:読める順位

ビフォー

アフター

同じチップのポスター4枚と、順位付きのポスター4枚の比較。

初稿の「TRENDING NOW」行にはポスターが4枚あり、どれにも同じ赤い「TOP 10」チップが付いています。チップは全部がトップ10に入っていることは言っていても、何位かは言っていません。視聴者には1位と4位の区別がつきません。

修正版は行名を「Top 10 today」に変え、各ポスターの横に大きな輪郭線の数字を置きました。1、2、3、4。これで行に、左から右へ読む順番が生まれました。「See all」リンクはブランドのシアンで、進捗バーと同じ色です。

使い回せるルール:ランキングには順位を見せる。全アイテムで同じバッジは、ただの飾りです。

細かな修正

• ブランドカラーは1色。 修正版はロゴ、進捗、リンクにシアン #22D3EE を使っています。赤いバッジと赤い進捗バーは消えました。
• ヒーローに合う背景。 修正版はヒーローのアンバー #3A2510 から #0E0E12 へ溶けていくので、最初の画面が1枚の画像のように感じられます。初稿は真っ黒 #000000 の上にありました。
• 左端を揃える。 初稿の余白は左14px、右12pxでした。修正版は左右とも20px、セクション間は16pxです。
• きちんとした文字スケール。 文字は7から30pxだったものを、iOSの11から28ptのサイズにしました。
• タブは5つでなく4つ。 Home、Search、Coming Soon、Downloads、MoreをHome、Search、Downloads、Profileにしました。

自分のストリーミング画面を点検する

FAQ

ストリーミングアプリのホーム画面は、最初に何を見せるべき?

作品タイトル、短い情報1行、大きなPlayボタン1つのあるヒーローです。視聴者自身の現在地である続きを見る行は、そのすぐ後に置きます。

ヒーローバナーのボタンはいくつが適切?

メインボタン1つと、多くてもリスト用のプラスのような小さなサブボタン1つです。同じ重さのボタンが3つあると、視聴者は再生を押す前に選ばなければなりません。

続きを見る行はどうデザインする?

進捗バー、タイトル、「残り12分」のような残り時間が付いた幅広カードを使います。縦長ポスターは作品が何かを示し、幅広カードは視聴者が止めた場所を示します。

Top 10の行はどうデザインする?

各ポスターの横に大きな順位数字を置いて、行に順番を持たせます。全ポスターに「Top 10」と書いたバッジでは、その作品が何位なのか分かりません。

ダークなストリーミングアプリに合う色は?

暗い背景に、進捗とリンク用のアクセントカラーを1色。修正版は、ヒーローのアンバーから #0E0E12 へ溶ける背景の上にシアン #22D3EE を使っています。

ストリーミングアプリの文字サイズはどのくらい?

プラットフォームの文字スケールに従います。修正版はiOSの11から28ptを使っているので、ヒーロー内に11未満の文字はありません。

出典

• 2つの画面はどちらも自作で、Figmaでデザインし、計測しました。視聴者、作品、Streamixアプリは架空のもので、ポスターはすべてベタ塗りの色にタイトルを文字で載せたものです。
• アバター写真はPexelsのAmir SeilSepour氏によるものです。
• Apple Human Interface Guidelines: Typography。修正版で使ったiOSの文字サイズの出典です。
• Apple Human Interface Guidelines: Dark Mode。暗い背景で機能するインターフェースを設計するための出典です。
• 最初に App Brainy でカルーセルとして公開しました。