Daily UI #049（Notification）

Daily UI 49日目のお題は「Notification」。
ライフログアプリのお知らせ画面を制作します。

制作過程

今回は2時間くらいでした。

制作の流れ
リサーチ：34分
要件定義・必要な項目を考える：2分
ワイヤーフレーム・ビジュアル：1時間33分
---------------------------
計　2時間9分

リサーチ

既存アプリの通知画面を主に参考にしました。

主に参考にしたサービス
LINE, V Pass, メルカリ, SHOWROOM, ホットペッパービューティー, ヤフオク, ヤフーショッピング, 楽天市場, note, Timetree

要件定義

以前制作したライフログアプリの要件を流用することにします。同じアプリの通知画面を作る想定です。以前作ったものはこちら ↓

（過去回から流用）
サービス名：Chronolog（クロノログ）
サービス内容：
時間ごとのアクティビティ記録、カスタムタグ付け、カレンダービューとタイムラインビューリマインダー機能、統計とグラフ表示、写真・メモの添付、目標達成トラッカー
ペルソナ：
山田あかり（29歳・IT企業のマーケティング担当）
・平日は仕事で忙しく、休日は趣味のカフェ巡りや読書を楽しむ。時間管理や自己改善に興味があり、日々の習慣を記録して見直すことを大切にしている。

合わせて必要な項目も考えます。

項目
・お知らせ
・バックボタン
・お知らせ内容
　　・サムネイル
　　・タイトル
　　・本文
　　・通知日時

ワイヤーフレーム・ビジュアル

制作したワイヤーフレームがこちら ↓

レイアウトをいくつかパターン出ししました。ヤフーショッピングの「すべて既読にする」機能がいいなと思って置いてみたんですが、これだと中身まで読んでほしい時に読まれないかも、と思ってやめました。1番最後の画面でいくことにします。

ヤフーショッピング「すべて既読にする」

少し色をつけたところ ↓

完成

制作したデザインがこちら ↓

ホームタブを押して、画面右上にある通知アイコン（🔔）を押した時に表示される画面、という想定です。

制作してみて

左右と上下で余白が全然違くて、どうも気持ち悪い感じになってしまいました。「通知をオンにする」ボタンを目立たせるために背景に薄く色をつけたんですが、下の通知のアイコン（サムネ？）部分も同じようなあしらいなのであまり目立っていないなあと後から思いました。