レシピアプリのデザイン:ホーム画面のリデザイン ビフォーアフター

レシピアプリは、画面が持てる最高の素材から始まります。おいしそうな料理です。下の初稿には本物のレシピと良い写真があるのに、4つも列挙する検索ボックス、虹色のカテゴリ、メイン写真の上の小さな大文字、そしてどの行にもあるアイコン3つで、それを窮屈にしています。修正版は中身をすべて残したまま、料理に余白を与えます。

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

新人の初稿

修正版

左の画面は見せたいものが山ほどあり、それを一度に全部伝えてきます。右では、同じレシピが料理する人の探す順番で現れます。探す、絞る、選ぶ、そして眺める。

夕食を決める前に、人が何を読まされるか数えてみましょう。初稿では、サブ行付きのあいさつ、検索ボックス、フィルターボタン、ベル、6色のカテゴリチップ、写真上のタイトル、大文字で5項目並んだ行、写真上のボタン2つ、そして4行それぞれに3つのアイコン。修正版は各ステップで求めるものが少なく、数字がそれを示しています。

修正1:検索に何が見つかるかを語らせる

Before

After

4つを挙げて入りきらないプレースホルダーと、2つに絞り、フィルターを1つ置いた版の比較。

初稿のプレースホルダーは「Search for recipes, ingredients, cuisines, ch...」で、4つ目の単語の途中で切れています。プレースホルダーは検索ボックスに許された唯一の一文ですから、ボックスが何をするかを言うべきで、しかも収まるべきです。初稿のリストは収まっておらず、途切れたヒントはミスに見えます。

修正版では、人が実際に入力する2つ、レシピか食材だけを挙げます。料理のジャンルや食事制限などは、隣のフィルターボタンの役目です。

フィルターボタンも、テラコッタで塗りつぶした四角から白い四角に変えました。塗りつぶしたボタンは行の中で一番目立つのに、それは検索ではなくフィルターでした。ベルはこの行から外れてあいさつの横に移したので、この行は検索と1つのボタンだけになります。

修正2:すべてのカテゴリに1つのスタイル

Before

After

5色で各アイコン付きの5カテゴリと、1つのスタイルと塗りつぶしチップ1つの比較。

カテゴリごとに色が違うと、色は何の意味も持たなくなります。朝食はピーチ、昼食はグリーン、夕食はパープル。どれも、どれが選ばれているかを料理する人に教えてくれませんし、初稿には選択状態そのものがありません。

修正版ではすべてのチップを白の無地にし、選択中の「すべて」だけをブランドのテラコッタで塗りつぶします。色が伝える事実は1つ、何がオンかです。

チップも大きくしたので、タップしやすくなっています。行は右端でフェードアウトしてスクロールできることを示します。初稿では行が画面端でただ切れていて、「ビーガン」が真っ二つです。フェードは「まだあるよ、スワイプして」と言い、ぶつ切りは何も言いません。

修正3:情報は写真の下へ

Before

After

明るい皿の上の大文字のタイトルと5項目と、その下のカードにあるタイトルとアイコン付き3項目の比較。

初稿は、明るい皿と明るいテーブルの上に、15 pxのタイトルと9 pxの白い大文字の行を置いています。皿こそが写真の主役なのに、その上に、皿に溶けて消える色の文字を載せているのです。しかもその行には、料理する人が決めるために必要な情報、時間、難易度、人数が入っています。写真の中で一番読みにくい部分です。

修正版ではテキストを写真の下のカードに移し、濃い色の文字にしました。今夜作るかどうかを決める3つの情報は、それぞれアイコン付きで残ります。30分には時計、簡単には棒グラフ、4人分には2人の人物。アイコンは一度覚えれば、行をひと目で読めます。修正版のカードではカロリーと評価を外しました。これらはレシピページに置けます。

写真上のボタンも、ハートと共有の2つから、保存の1つになりました。レシピカードで料理する人がしたいのはこれです。保存こそ、そのレシピが後で料理される道だからです。

修正4:1行は、レシピと時間とレベル

Before

After

シェフのクレジットとアイコン3つが付いた4行と、時間・レベルと控えめなアイコン2つの3行の比較。

初稿の各行には、サムネイル、名前、時間・難易度・「by Chef Anna」の行、そして3つのアイコン、ハート、ブックマーク、共有があります。ハートとブックマークは「これいいね」を言う2通りの方法で、4行のリストではその選択肢が12回も印刷されます。

修正版では各行に大きめの写真、名前、時間と難易度の1行を置きます。右側のアイコンは共有と保存の2つで、必要になるまで邪魔しない薄いグレーです。最初のレシピは保存済みの状態を示します。ブックマークが、選択中のカテゴリと同じブランドのテラコッタで塗られます。「Popular Recipes」のタイトルは「人気」に短縮しました。アプリはもともとレシピのアプリだからです。

修正版のリストは4件ではなく3件なので、タブバーの上にカードの余裕が生まれます。

細かな修正

• タブは5つではなく4つ。 ホーム、検索、保存済み、プロフィールが、ホーム、検索、保存済み、プランナー、プロフィールに代わります。
• 余白は1つに。 初稿は左14 px、右12 pxでした。修正版は両側20 px、ブロック間14 pxです。
• 短くしたあいさつ。 「Hi Maya! What would you like to cook today?」は「今日は何を作る?マヤ」になりました。
• ブランドカラーは1色。 テラコッタ #C8553D は、選択中のチップ、保存済みのブックマーク、アクティブなタブ、小さなラベルに使います。ほかには色を付けません。
• 本物の文字スケール。 文字は8〜18 pxから、iOSの11〜22 ptのサイズになりました。

自分のレシピアプリを点検する

Figmaファイルを入手する

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

無料のFigmaファイル

レシピアプリのホーム画面 ビフォーアフター

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

Figmaで開く

FAQ

レシピアプリのホーム画面には何を表示すべきですか?

何が見つかるかを伝える検索ボックス、カテゴリの行、時間・難易度・人数付きのおすすめレシピ1つ、人気レシピの短いリスト。カロリー、評価、シェフのクレジットはレシピページに置けます。

レシピの検索バーには何と書くべきですか?

収まる限りの短い言葉で、何が見つかるかを言います。「レシピや食材を検索」のように。見つけられるものを全部並べた長いリストは途切れてしまい、余分なものはフィルターの役目です。

レシピアプリのカテゴリチップはどう見せるべきですか?

すべて同じスタイルにして、選択中のチップだけをブランドカラーで塗ります。行はスクロールできるようにし、端でフェードさせて、まだあることを伝えます。

レシピの時間と難易度はどこに置くべきですか?

写真の下に、小さなアイコン付きで1行に。時間は時計、難易度はレベル、人数は人のアイコンです。料理写真の上の文字は読みにくく、料理も隠してしまいます。

レシピのリスト行にアイコンはいくつ付けるべきですか?

2つ以下。保存と共有で十分で、控えめなグレーにすれば料理と張り合いません。

出典

• 両方の画面は自作で、Figmaで設計・計測しました。ユーザー、シェフ、レシピのリストは練習用の架空のものです。
• 写真はPexelsより、Tamra Creatives Agency、Willians Huerta、Kei Scampa、Ana Palade、adrian vieriu、Surendra Shrestha。
• Apple Human Interface Guidelines: Typography。修正版の画面で使ったiOSの文字サイズの根拠。
• W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum)。画像や背景の上の文字について。
• 最初は App Brainy でカルーセル投稿として公開しました。