ポッドキャストアプリのデザイン:ホーム画面のリデザイン、ビフォーアフター

ポッドキャストアプリで最もよくある行動は、中断したところから再開することです。下の初稿にはリスナーに必要なものが全部そろっていますが、肝心のそれだけが隠れています。途中まで聞いていたエピソードは、3枚のカバーの間にある小さなカードに、ヘアラインの進捗とともに置かれているだけ。修正版では番組もチャートもジャンルも残しつつ、一時停止中のエピソードを画面でいちばん大きな要素にしました。

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

新人の初稿

修正後

左では、ユーザーのエピソードは同じ大きさの3枚のカバーの1つで、下に2 pxの進捗があるだけ。チャートの各行は末尾にアイコンが3つ並びます。右では、一時停止中のエピソードに専用のカードがあり、6 pxの進捗バーと大きな3つのコントロールがつき、リストの行は末尾にボタンが1つだけです。

修正1:中断したエピソードに大きなカード1枚

Before

After

ヘアラインの進捗がついた3枚のカバーと、残り時間とコントロールがついた1枚のカード。

初稿の「続きを聴く」は棚です。同じサイズのカバーが3枚並び、それぞれに2 pxの進捗線があり、タイトルは「Ep. 142: Why Great Apps Feel Calm (And...」で切れ、「残り23分」は小さな灰色の文字。大事な1本を再開するには、エピソードを開き、プレイヤーを待ち、再生を押す必要があります。

修正版では、一時停止中のエピソードにカードを与えます。上にはカバー、紫のラベル「続きを聴く · 残り23分」、完全なタイトル「Why great apps feel calm」、番組名「Studio Hour · Episode 142」。下には6 pxの進捗バーが、30秒戻し、再生、30秒進めの3つのコントロールと並びます。ほかの2枚のカバーはこのセクションから外しました。

30秒戻しと30秒進めのボタンは、中に30が入った円形の矢印で、44 pxのタップ領域を持ちます。Audibleが使っているパターンです。中断されたリスナーは、ホーム画面を離れずに30秒戻れます。

再利用できるルール:ユーザーがやっていたことが、次にやる可能性のいちばん高い行動です。だからカードとコントロールを与えましょう。

修正2:2行タイトルと再生ボタン1つ

Before

After

途切れたタイトル、順位番号、3つのアイコンと、全文のタイトルと再生ボタン1つ。

初稿のチャートの各行は、末尾にダウンロードの矢印、三点メニュー、再生の三角が並ぶので、タイトルは残りの幅に収めるしかなく、収まっていません。「The Week in Tech, in 20 Minutes: Al...」「How to Learn Anything in 30 Days...」「Live from Brooklyn Part 2 (Uncut Ex...」。順位は大きな紫の数字で、各タイトルの下の1行に番組、カテゴリ、長さが入ります。

修正版ではタイトルを2行まで折り返します。「The week in tech, in 20 minutes」。その下には曜日と長さの1行、「Today · 21 min」。右には丸い再生ボタンが1つ。行に必要な操作はこれだけで、タップ領域も十分な大きさです。ダウンロードとメニューは行から外しました。このリデザインでは、それらをどこに置くかまでは描いていません。

このリデザインは、リストの見た目だけでなく役割も変えました。順位つきの5行の「トップチャート」が3行の「次に聴く」になったので、実際のアプリではチャートの置き場所がまだ必要です。

再利用できるルール:タイトルは折り返しましょう。切れたタイトルは読めません。そして各行の操作は1つにします。

修正3:ジャンルは1つのスタイルで

Before

After

2行にわたる6色のベタ塗りと、1つだけ塗りつぶされたピル1列。

初稿のジャンルタグは、ピンク、青、赤、緑、オレンジ、ティールで、どれも白い文字のベタ塗り。2行を占めます。

修正版は、1つのスタイルのピルを1列に並べます。「すべて」はブランドの紫 #8B5CF6 で塗りつぶし、残りは白。収まらないジャンルのために、末尾に「その他」を置きました。塗りつぶされたピルだけが意味を持ち、それは「いま見ているのはこれ」ということです。

再利用できるルール:色は、どれが選ばれているかを伝えるもの。どれがどれかを伝えるものではありません。

修正4:使う操作だけのミニプレイヤー

Before

After

前へ、一時停止、次へと、30秒戻し、一時停止、30秒進め。

ミニプレイヤーは画面の中でいちばん場所がないので、中のコントロールはどれも居場所を勝ち取らなければなりません。初稿の3つは、前へ、一時停止、次へ。前へと次へは別のエピソードに飛びます。

修正版は30秒戻し、一時停止、30秒進めを使います。カバーとタイトル「Why great apps feel...」は左に残し、その下に番組名を置きました。進捗線はプレイヤーの上端に走るので、1行を使わずにエピソードの進み具合が分かります。

再利用できるルール:ミニプレイヤーには、聴いている間に実際に使われる3つのボタンを置きましょう。

細かな修正

• 左端をそろえる。 初稿の余白は左14 px、右12 pxでした。修正版は両側20 px、カード間16 pxです。
• ブランドの紫は1色。 塗りと再生ボタンには #8B5CF6、小さな紫の文字には、読みやすさのためにコントラストを高めた濃い #7C3AED を使います。
• 本物の文字スケール。 文字は8〜20 pxから、iOSの11〜28 ptのサイズになりました。
• タイトルは大きく、ヘッダーは小さく。 初稿のヘッダーには検索アイコン、ベル、アバターがありました。修正版はアバターと大きな「ポッドキャスト」のタイトルだけを残します。
• タブは5つではなく4つ。 ホーム、ブラウズ、ライブラリ、検索、プロフィールは、「今すぐ聴く」、ブラウズ、ライブラリ、検索になりました。プロフィールはヘッダーのアバターです。

自分のポッドキャストアプリを点検する

Figmaファイルを入手する

無料のファイルには、両方の画面がコンポーネントとして入っており、すべての修正がビフォーアフターのペアで、さらにカラー変数とiOSのテキストスタイルも含まれています。

無料のFigmaファイル

ポッドキャストのホーム画面、ビフォーアフター

両方の画面と、修正した各パーツをFigmaコンポーネントで。無料、閲覧専用、複製して下書きに入れてください。

Figmaで開く

FAQ

ポッドキャストアプリのホーム画面では、最初に何を見せるべきですか?

リスナーが途中まで聴いていたエピソードを、残り時間、再生、30秒戻し、30秒進めをつけた大きなカード1枚で見せます。チャート、ジャンル、新着番組はその後です。

ポッドキャストのミニプレイヤーには、どんなボタンが必要ですか?

30秒戻し、一時停止、30秒進めです。前のエピソードと次のエピソードは別のエピソードに飛ぶので、フルプレイヤーに任せましょう。

「続きを聴く」セクションはどうデザインしますか?

直近で一時停止したエピソードのカードを1枚。カバー、完全なタイトル、番組、残り時間、進捗バー、そして再開用のコントロールを載せます。ほかのカバーと同じサイズにしてはいけません。

ポッドキャストアプリでは、エピソードをどうリスト表示すべきですか?

タイトルは2行まで折り返し、曜日と長さは灰色の1行にまとめ、行の末尾は再生ボタン1つで終わらせます。ダウンロードとメニューはエピソードのページに移しましょう。

ポッドキャストアプリのジャンルフィルターはどうデザインしますか?

1つのスタイルのピルを1列に並べ、選択中のものをブランドカラーで塗りつぶし、末尾に「その他」を置きます。6つのタグに6色を使うと、色が何も意味しなくなります。

ポッドキャストアプリの文字サイズはどのくらいにすべきですか?

プラットフォームの文字スケールに従います。修正版の画面はiOSの11〜28 ptのサイズを使い、大きなタイトルをつけています。

出典

• 両方の画面は私たち自身のもので、Figmaでデザインし計測しました。番組名、エピソード、人物は架空です。カバーは写真に番組名を重ねたものです。
• 写真はPexelsより、Jace Oner、Somogro Bangladesh、Sound On、Brett Sayles、Ali Dashti、frank minjarez、pessoas uem。
• Apple Human Interface Guidelines: Typography。修正版の画面で使ったiOSの文字サイズの根拠です。
• Apple Human Interface Guidelines: Accessibility。44 ptのタッチターゲットサイズの根拠です。
• 最初に App Brainy でカルーセルとして公開しました。