メモアプリのリデザイン

Rio Azuma
UI, Web Designer

Overview

Date : 2019年7月
Time : 1日
Type : practice
Tools : sketch
Challenge : メモアプリ2つのリデザイン


Process

1. 既存のメモ帳アプリ2つの比較

Evernote以外では、Appleの黄色いメモ帳と、Komorebiの青のメモ帳をよく使うので、その2つのアプリを比較しました。
※ここからは『Apple』と『Komorebi』という呼称で呼びます

【大きな違い】
・komorebiは広告をつけている（ちょっと邪魔）
・Appleの方がメモ帳としての装飾の幅が広い

【メモの管理方法】
Apple　→　フォルダを作成して整理できる
komorebi　→　メモを付箋のように色をつけて管理できるがフォルダは作成できな

【タップ時のインタラクションの違い】
Apple　→　タップしたら色が変わる
komorebi　→　タップしても反応なし

【テキスト】
・メモを入力する際のデフォルトサイズは16pxで同じ
・character（文字間）-0.14で同じ
・line-height（行間）がAppleの方が広い
Apple　→　line-height 25
komorebi　→　line-height 23

【戻るボタン】
Apple　→　アイコン『<』
komorebi　→　『戻る』

【メモのリスト順番】
Apple　→　編集日時順（フォルダ間の移動はできるが並び替えは不可）
Komorebi　→　作成日時順（自由に並び替え可能）

【検索機能】
Apple  →　あり
Komorebi　→　なし

【TOP画面】
◼︎ Apple
-    左右margin 16px
-   （下にスクロールせずに）1画面に9個のフォルダ
（フォルダをタップしてメモリストにいくと1画面8個のメモ）
-    一行あたりheight 44px
-    編集ボタンは右上に

◼︎ komorebi
-　  左右margin 12px
-   （下にスクロールせずに）1画面に12個のメモ
-　  一行あたりheight 50px
-      編集ボタンは左上に

【メモ帳リスト画面 / 新規メモ作成のアイコン】
◼︎ Apple
-　新規メモ作成アイコンは右下
-　タップエリア28px × 28px
-　メモ帳リストには『タイトル』『編集日時』『メモの一行目の一部』が表示

◼︎ komorebi
-　新規メモ作成アイコンは真ん中下
-　タップエリア58px × 58px
-　メモ帳リストには『メモの一行目』のみ表示

▲komorebiのTOP 画面を『右手片方でスマホを触る時に親指ゾーンマップ』に当てはめてみると、ちゃんと緑の親指が最もタップしやすいエリアに配置されていました！

【メモ削除の流れ】
どちらともリストを左にスライドすると一瞬で削除できるのですが『編集』ボタンからの削除の流れを比較してみます。

◼︎Apple（図の下側です）
-　削除までにタップ3回
-　『編集ボタン』をクリックすると、左に削除アイコンが登場してテキストがX軸を右方向に31pxずれる

◼︎komorebi（図の上側です）
-　削除までにタップ2回
-　『編集ボタン』をクリックすると、左に削除アイコンが登場してテキストがX軸を右方向に32pxずれる




2. 既存アプリの改善点の洗い出し

●背景色
Appleのメモ帳の背景がくすんだ色で暗くて気分まで下がってしまうので、真っ白にする

●新規メモ作成アイコン
Appleのタップエリアが小さいので、Komorebiのタップエリアの大きさが操作しやすいが、位置が上すぎるのでもう少し真ん中下の配置にする

●削除の流れ
基本メモ削除するときはスライドで削除してしまうので、どっちでもあまり気にならないが、もう一つの削除方法を比較すると、『編集』ボタンの位置は右上（Appleを採用）が操作しやすく、操作の流れは2タップ（Komorebi）がサクッとできて良い

●メモリスト
Komorebiのように一行だと一画面で沢山のメモ数を閲覧できて良いが、一行（タイトルのみ）はメモ内容を忘れてしまうので、ここはAppleの仕様にする

●リストの順番 / 検索機能
検索機能は絶対に必要
リストの順番は、編集日順番に自動的に並び変わってくれるが、更に自由に並び順を変更できる仕様にする

●タップ時のインタラクション
した時に反応があるとスッと、サクサクと遷移した感が出るので採用する




3. リデザインしたUIを設計

●ターゲット
メモ帳アプリを何種類か使い分けるほどよく利用する人

●ユースケース
上記二つの簡易的で、起動が早く軽いメモ帳アプリをスマホで使う時は、「あ！メモしておかなきゃ」って急いでいる時が多いと仮説
（evernoteは起動までに時間がかかるので急いでいるときは適さない）

●アプリの特徴
・サクッと使える感＝タップ後のインタラクションでカラーを変える
・検索機能は頻繁に使うので、常に出しておく
・右上の『編集』ボタンは、わかりやすく削除のアイコンにする
・フォルダ名とフォルダ内のメモ帳の階層構造がわかりやすい（インデントで設定）


WEBSITE