イベントチケットアプリのデザイン:ホーム画面のリデザイン、ビフォーアフター

イベントアプリが売るのは、ひとつだけ。夜の外出です。下の初稿には正しいイベントが載っているのに、それを埋もれさせています。50文字の検索ヒント、8色のカテゴリ、写真の上に8 pxで載った住所、そしてどの行にも6つの情報。修正版はイベントも写真もそのままに、写真が映えるダーク背景に置きます。

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

初心者の初稿

修正後

左の画面には5つのセクションがありますが、主役はひとつもありません。アイコン2つのヘッダー、8つの円、写真に4つの要素が載ったカード、そしてリスト。右では、ヘッダーが問いかけとなり、写真カードが主役になり、リストはリストらしくなっています。すべて同じ20 pxの端から始まり、セクション間は16 pxです。

修正1:大きな2行の見出しと検索フィールドひとつ

Before

After

小さな都市ラベルとベルとカートに対して、この画面が何のためのものかを語る大きな見出し。

初稿の上部バーは、ただのツールバーです。小さな太字の都市名、ベル、バッジ付きのカート、そして50文字のヒント「Search events, artists, venues, teams and more...」とフィルターアイコンのついた検索フィールド。今いる場所を伝え、道具を渡すだけです。

修正版は、ひとつの文を渡します。「Tonight in」は白、「Los Angeles」はマゼンタで小さなシェブロン付きなので、都市の切り替えもできます。28 ptは、画面で一番大きな文字です。

検索フィールドは「Artists, venues, events」になり、フィルターアイコンはそのままです。ベルとカートはヘッダーから外れましたが、このリデザインでは移動先は描いていません。

使い回せるルール:ホーム画面の上部には、この画面が何のためのものかを言葉で書くこと。

修正2:8つの円が1行のピルになる

Before

After

8色が2行に並ぶ状態から、同じスタイルの1行へ。選択中のピルは塗りつぶし。

初稿の8つの円は、ピンク、青、黄、紫、緑、オレンジ、水色、ローズ。ライトモード用のパステルを、黒い画面にそのまま持ち込んだものです。2行を占め、イベントをひとつも見せる前から、選ぶことを人に求めています。

修正版は1行のピルです。Concertsはブランドのマゼンタ #D6246E で塗られ、残りは無地のダークなピル。行はスクロールするので、「Come...」が端で切れているのはわざとで、右にまだあると伝えています。

Moreは末尾に固定されているので、全リストはいつも1タップ先です。カテゴリは8つから7つのピルになり、残りはMoreの奥に入りました。

使い回せるルール:フィルターはフィルターらしく振る舞わせること。1行、選択状態はひとつ、色もひとつ。

修正3:ボタンひとつの注目カード1枚

Before

After

タグ、長いタイトル、小さな詳細、2つのボタンから、大きな写真、名前、ボタンひとつへ。

初稿は写真の上に4つのものを載せています。赤い「SELLING FAST!!」タグ、ハート、大文字のタイトル「NEON NIGHTS LIVE: THE WORLD TOUR 2026」、そして日付、時間、会場、住所を8 pxで並べた1行。写真の下には、手数料込みの価格と、大文字の2つのボタン「BUY TICKETS」と「SHARE」。写真の大半が文字で覆われています。

修正版は写真を高さ228 pxにして、ステージを見せます。名前は、タイトルの下で0から78%まで濃くなるやわらかな黒いシェードの上に載るので、写真のどの部分でも白い文字が読めます。小さな行にあった日付は、白い日付チップ「OCT 24」に置き換わりました。

会場と時間は「Marlow Theatre · Sat 8 pm」に縮みます。写真の下には、左に「From $45」と「312 going」、右にボタンひとつ「Get Tickets」。タグ、住所、Shareボタンは消えました。

使い回せるルール:カードひとつにアクションひとつ。カードの仕事はタップされることなので、ひとつだけ渡すこと。

修正4:日付、会場、価格のあるトレンド行

Before

After

1本のグレーの行に6つの情報と2つのアイコンから、日付、名前、会場、価格へ。

初稿のどの行も、名前、日付、時間、会場、年齢制限、価格帯、関心数を、折り返す8 pxの1行に詰め込んでいます。しかも各行にハートとシェアのアイコンまで。まとめて読むと、もはや段落です。

修正版は、情報それぞれに居場所を与えます。上にはブランドカラーの大文字で日付「FRI, OCT 30」。その下に太字の名前、さらにその下にグレーの会場。右端には角丸のチップで価格「$25」を置きます。これは初稿の「$25-$40」の開始価格です。

写真は正方形のサムネイルとして残ります。年齢制限、関心数、ハート、シェアのアイコンは行から外れました。フルアプリなら、それらの居場所はまだ必要です。

使い回せるルール:行に情報が多いときは順位をつけ、上位4つに専用の居場所を与えること。

その他の細かい修正

• 黒ではないダーク背景。 初稿は純粋な #000000 の上に、ライトモードのパステルをそのまま載せています。修正版はほぼ黒の #0B0B0F に、iOSのダーク面 #1C1C1E を使い、カードが背景から浮き上がるようにしました。
• アクセントは1色、テキスト用にはより明るい色。 ブランドのマゼンタ #D6246E は、選択中のピルとボタンを塗ります。ダーク背景ではベースのマゼンタは暗すぎて読みにくいので、マゼンタの文字とアイコンには明るい #EC4F88 を使います。
• 左端をそろえる。 初稿は左14 px、右12 pxでした。修正版は両側20 px、セクション間16 pxです。

自分のイベントアプリを点検する

Figmaファイルを入手する

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

無料のFigmaファイル

イベントチケットのホーム画面、ビフォーアフター

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

Figmaで開く

FAQ

イベントチケットアプリのホーム画面は、最初に何を見せるべき?

「Tonight in Los Angeles」のように画面の目的を語るヘッダー、次に検索フィールドひとつとカテゴリピルの1行。注目イベントはそのすぐ後に続けます。

注目イベントカードはどうデザインする?

大きな写真1枚、やわらかなシェードの上にイベント名、チップで日付、価格、ボタンひとつ。住所、タグ、シェアボタンは、イベントページに取っておきます。

イベントアプリのカテゴリはいくつ見せるべき?

スクロールする1行に7つほどのピルで、選択中のものを塗りつぶし、Moreを末尾に固定します。8色の円を2行で見せると、選択を早く求めすぎます。

イベントアプリにダークモードは向いている?

向いています。ステージや観客の写真はダーク背景で映えるからです。純粋な黒にライトモードの色を残すのではなく、#0B0B0F のようなほぼ黒に、少し明るい面を重ねてください。

一覧でイベントの詳細をどう見せる?

順位をつけます。まずアクセントカラーで日付、次に名前、会場、価格。年齢制限、関心数、余分なアイコンは詳細ページに回します。

出典

• 両方の画面は私たち自身のもので、Figmaで設計し計測しました。イベント名、会場、住所は架空のものです。日付は2026年のカレンダーで確認済みです。
• 写真はPexelsより、Thibault Trillet(両画面の注目ステージ)、Sid Dalal、julio cesar resendiz resendiz、Maor Attias、Martin Lopez。
• コントラストはWCAG 2.2 contrast formulaで確認:#D6246E 上の白文字は4.8:1、ダーク背景上の #EC4F88 は5.7:1で、#D6246E だと4.1:1になります。
• Apple Human Interface Guidelines: Typography、修正版の画面で使ったiOSの文字サイズの参照元。
• 最初にApp Brainyでカルーセルとして公開しました。