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

ノートアプリのホーム画面の仕事はひとつです。欲しいノートにたどり着かせること。下の初稿には、ノートを探すための要素は全部そろっています。ただし、6色・12枚の付箋に8pxの文字を詰め込み、さらに8色の8個のタグを足し、本文を読む前にストレージの警告を出し、しかもノートの上に浮かぶ「+」ボタンまで居座らせています。

修正版は機能をひとつも削らず、ノートの周りの装飾だけを取り除きます。色付きのタグは細線のフォルダチップに、ピン留めしたノートは白いタイル2枚に、それ以外のノートはプレーンな行になり、検索はシンプルなタイトルの下のグレーの欄ひとつになります。

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

新人の初稿

修正版

左は、すべてが同じ音量で叫んでいます。付箋の6色、タグの8色、黄色いバナー、黄色い「+」がすべて張り合い、肝心のノートが画面でいちばん小さいものになっています。

右は、人が考える順番どおりに読めます。これは何か、検索できるか、どのフォルダか、何をピン留めしたか、ほかに何があるか。色が使われているのはノートの中身だけです。

何が変わったのか、数字で見る

修正1:シンプルなタイトルと検索欄ひとつ

Before

After

小さなセリフ体のワードマークの下にAll Notes (128)、Date Modifiedのドロップダウン、2つの表示切り替え、検索アイコンがあり、その下に黄色いストレージバナーとUPGRADE NOWボタン。対して、大きなNotesタイトル、三点メニュー、「Search」と書かれたグレーの検索欄。

初稿のヘッダーには、ノートが1枚も見える前に7つのコントロールがあります。メニュー、ワードマーク、件数、並べ替え、2つの表示切り替え、検索アイコン。そのうえバナーが、容量の85%を使ったと告げ、支払いのボタンまで付いてきます。

修正版は、画面に名前と入口を与えます。Notesは34pxのボールド。検索は幅いっぱいの欄で、角丸10pxの薄いグレー(#F2F2F7)なので、入力欄に見え、アイコンが検索だと誰かに推測させる必要がありません。

並べ替えと表示切り替えは、三点メニューの奥にきちんと残っています。ストレージ警告とアップグレードは、アカウント管理に行く場所であるプロフィールへ移しました。

使い回せるルール:画面の上部は、その画面の名前と主な入口だけを示す。それ以外はメニューの奥へ。

修正2:色付きタグではなくフォルダチップ

Before

After

8個の小さな塗りつぶしタグ。Workは赤、Ideasはアンバー、Journalは緑、Personalは青、Travelはティール、Recipesはオレンジ、Homeは紫、Booksはピンクで、すべて1行に詰め込まれている。対して、All、Work、Ideas、Journal、Travelと書かれた細線のピル型チップ。Allは黒で塗られ、残りは右端からはみ出している。

8色・8個のタグは、色だけではすぐ区別がつかなくなりますし、9pxではタップもしづらいです。しかも行にちょうど収まってしまうので、完成した行に見えて、続きがあることを示してくれません。

修正版は、細線の輪郭を持つ32pxのピルを使います。選択中のAllは黒で塗りつぶし。残りはプレーンで、Travel以降のフォルダは右端からスワイプで現れます。画面の端で切れているチップは、親指にスクロールできることを伝えるので、矢印は要りません。

使い回せるルール:選択中の項目は、項目ごとに違う色ではなく、塗りで示す。

修正3:よく使うノートは白いタイル2枚でピン留め

Before

After

黄、ピンク、青の3枚の付箋が横に並び、それぞれ上の角に小さなピンとその他アイコン、8pxの文字がある。対して、アンバーのピンがついたPinnedの見出しと2枚の白いタイル。小屋の鉛筆スケッチにタイトルCabin renovationと2h ago、そしてローンチチェックリストのテキストプレビューにタイトルと9:12 AM。

初稿では、ピン留めしたノートは、11pxのピンアイコンを除けば、ほかのノートとまったく同じ見た目です。最初の2枚の付箋は、修正版でピン留めされているのと同じノートです。ピンは扱いを何も変えないので、見つけやすさも何ひとつ変わりません。

修正版は、ピン留めしたノートに専用のセクションと専用の形を与えます。角丸12pxと細線の169px白タイル2枚が、Pinnedの見出しの下に並びます。小屋のノートはスケッチを、ローンチチェックリストはテキストプレビューを見せ、それぞれの下に14ptセミボールドのタイトルと12ptの日付がつきます。ピン留めが見た目を変えるようになり、だからこそピン留めする意味があるのです。

使い回せるルール:状態が重要なら、画面上にその居場所を与える。同じカードに小さなアイコンを載せるだけでは、居場所とは言えない。

修正4:それ以外のノートはプレーンな行に

Before

After

緑、オレンジ、紫、黄、ピンク、青の付箋が2行。それぞれ小さな本文でぎっしりで、下にEditedの日付がある。対して、白地のプレーンな4行。Lisbon in May、Sourdough notes、Book ideas、Morning pagesで、それぞれ16ptのタイトルに日付と本文1行がつき、細線で区切られている。

付箋はノートを丸ごと見せるので、8pxの文字が数行並ぶだけです。読めないし、ざっと見渡すこともできず、12枚で画面が丸ごと埋まります。6色には意味がないので、色から学べることもありません。

修正版はリストです。各ノートは16ptのタイトルと日付、そして14ptで省略記号で終わる本文1行。行の高さは57pxで、間は細線なので、ピン留めタイルの下に約8行が収まります。タイトルがひと目で全部読め、最初の1行からちゃんとしたノートを開けます。

使い回せるルール:リストは探すためのもので、カードは1つのものをじっくり見るためのもの。仕事に合うほうを選ぶ。

修正5:タブバーと新規作成ボタン

Before

After

初稿の下部。最後のノートの上に黄色い丸の+ボタンが乗り、その下にNotes、Daily、Tasks、Tags、Profileの5つのラベル付きタブを持つフラットなタブバーがあり、アイコンは塗りと線が混在している。対して、4つのアイコンがあり1つが選択された浮かぶカプセルとその下をスクロールするノート、そして鉛筆アイコンのついた別の丸いアンバーの新規作成ボタン。

初稿は最後のノートの上に浮かぶ「+」を置くので、文字が隠れます。タブバーはラベル付きの5タブで、Notesのアイコンだけが塗りつぶし、ほかは線画です。

修正版は、2つの役割に2つのコントロールを用意します。52pxのアイコンだけのカプセルに、統一されたアイコンスタイルで4つのタブを収め、その隣に鉛筆の付いた52pxのアンバーの新規作成ボタンを置きます。ノートは両方の下まで続くので、バーで途切れたリストではなく、1本の長いリストに感じられます。Tagsタブは、フォルダチップが役割を引き受けるので無くなりました。

使い回せるルール:「新しく作る」ボタンは親指のある場所に置き、独自の形と色を与えて、ナビゲーションと間違えられないようにする。

そのほかの小さな修正

• 機能はすべて残る。 検索はタイトルの下の欄に。Date Modifiedの並べ替えとグリッド/リストの切り替えはドットの奥に。All Notes (128)はAllフォルダになりました。その他ボタンは各ノートの中に。ストレージ警告はプロフィールへ移動。
• マージンはひとつ。 初稿は左14px、右12px。修正版は左右とも20pxで、ブロック間は10px。
• アクセントはひとつ。 アンバー(#F5B301)はピンと新規作成ボタンだけに使います。ほかはすべて黒、グレー、白。
• 読める文字サイズの階層。 初稿は8〜14px。修正版は日付の12pxから始まり、タイトルの34pxまで。
• 本物のコンテンツ。 スケッチのタイルは色付きの箱ではなく実際の絵を見せるので、開く前からピン留めセクションでノートの内容が分かります。
• ワードマークなし。 初稿のヘッダーにはセリフ体のワードマーク「Margin」があります。修正版にはありません。Apple Notesでは、画面のタイトルがそのままヘッダーだからです。

自分のノート画面を監査する

Figmaファイルを入手

無料ファイルには、新人の初稿、修正版の画面、そしてすべてのパーツがコンポーネントとして入っています。

無料のFigmaファイル

ノートアプリのリデザイン、ビフォーアフター

2つの画面とすべてのパーツをFigmaコンポーネントで収録。無料、閲覧のみ。複製して下書きに保存してください。

Figmaで開く

FAQ

ノートアプリのホーム画面はどうデザインすべきですか?

シンプルなタイトルと検索欄ひとつで始め、次にフォルダチップ、短いPinnedセクション、タイトルと本文1行ずつのノートリストを置きます。警告やアップセルは邪魔にならない場所へ追いやり、ノートが画面でいちばん目立つようにしましょう。

ノートアプリはグリッドとリストのどちらを使うべきですか?

ノートを探すならリストです。タイトルと1行の本文ならひと目で読めるからです。フルカードのグリッドは、各カードが読めるほど大きい場合にしか成立せず、幅117pxでは文字が8pxまで落ちてしまいます。

ノートアプリでは何色使うべきですか?

アクセントはひとつ。Apple Notesはピンと新規作成ボタンにだけ1色のアンバーを使い、ほかはすべてニュートラルにして、色はノートに任せています。

ノートアプリのストレージ警告はどこに置くべきですか?

プロフィールや設定画面に置くか、ユーザーが上限に近いときだけ小さな通知として出します。最初のノートの上にバナーがあると、毎回の訪問が売り込みのメッセージから始まってしまいます。

ノートアプリでピン留めしたノートはどう見せるべきですか?

Pinnedの見出しの下に専用のセクションを作り、プレビュー、タイトル、日付つきの2枚のタイルとして見せます。同じカードにピンアイコンが付いただけでは、ノートは見つけやすくなりません。

出典

• 2つの画面はどちらも自作で、Figmaでデザインと計測をしました。アプリのMarginとそのデータはすべて架空です。ノートは両方の画面で一致しています。ピン留めの2枚のタイルは初稿の最初の2枚の付箋で、行は同じタイトル、日付、書き出しを持つ次の付箋です。
• 参考にしたパターン:iPhoneのApple Notes。
• 写真:Sofya Borboris氏の鉛筆スケッチ(Pexels)。傾きを補正し、絵の部分に切り抜いて白地に配置。AI生成ではありません。
• アイコンはPhosphor(MIT)のものです。ステータスバーは計測したiPhoneのスクリーンショットから描き起こしました。初稿のワードマークはLibre Caslon Display Regularです。
• 最初にApp Brainyでカルーセルとして公開しました。