前回の続き、UI/UXの調整を進めていきます
この記事は、「時計ログアプリ」UI/UX刷新シリーズの続編です。
前回はPart1を実装しました。今回はPart2とPart3を進めていきます。
まず、シリーズ全体の構成を整理します。
| Part | テーマ | 内容 | 状態 |
|---|---|---|---|
| Part 1 | 和モダンの土台 | モチボタン・配色・Zenモード背景・明暗スイッチャー | ✅ 完了 |
| Part 2 | 操作の作法 | カテゴリUI・記録リストの調整 | 📍 今回 |
| Part 3 | 仕上げ | 通知・ゲージ・全体の微調整 | 📍 今回 |
前回（Part1）でやった事：
コンセプト：和モダン
- 餅ボタン実装
- スタートボタンを「焼けた餅」のような有機的形状に変更
- 不均一な角丸＋呼吸アニメーションで「押したくなる」質感を演出
- 和モダン配色へ刷新
- 朱色・和紙色・墨色を基調に、落ち着いた和テイストへ統一
- Zenモード背景の調整
- 背景画像を鮮明に表示しつつ、UIの視認性を確保
- 明暗スイッチャー導入
- ライト／ダークをワンタップで切り替え可能に
今回やる事：
Part 2: オードブル (カテゴリー配置 & リストの整理)
- カテゴリUIの配置変更と一文字表示化
- 記録リストの表示件数制限とフィルター機能
Part 3: デザート (継続カレンダー & 通知機能)
- 終了通知の実装
- 利用時間ゲージの導入
- 全体の細部調整
最後に:見た目の調整と注意点(CLS[Cumulative Layout Shift])の対応
- 餅ボタンの再調整
- アプリの切り替わり調整
それでは、Part2から進めていきます。
Part 2: オードブル (カテゴリー配置 & リストの整理)
カテゴリーの配置とログ記録リストの情報整理を行っていきます。
１．プロンプトの依頼ーカテゴリーとログリストの大幅変化
見た目だけでなく、操作しやすさと読みやすさを底上げするフェーズ。
- カテゴリUIの刷新
- スタートボタン直下に、親指で選びやすい円形カテゴリボタンを配置。
- 頭文字だけのシンプル表示＋選択時の軽いアニメーションで、直感的な操作感を強化。
- ログ一覧の整理
- 表示は最新7件に絞り、情報の圧迫感を軽減。
- 必要なときだけ「すべて表示」で展開できる構成に。
- 視線の誘導を意識
- 最新ログをさりげなく強調し、「今の記録」が自然に目に入る設計に調整。
２．実装後のチェックポイント
コードが作成されて画面が切り替わったら、以下を確認していきます。
カテゴリーとログ表示の全体的な見た目と配置
見た目は十分にイメージ通り。
丸みのある円形カテゴリーとその中にある一文字の表示。それに一文字だけでは「？」になる時に文字の下に小さく正式名称を表示しておく。
ログリストの表示に関しても最大７件の表示とそれ以降は、「すべて表示」のボタン機能で開くように調整。
指の届き具合:スマホでの片手操作に対応したものか？
スマートフォンでのテストを行って、スマホで持った時、親指が無理なく「し・が・せ」に届く事を確認。
ボタンとの距離感も私個人的な使用感だが、誤タッチは何回か利用してみてなかった。
リズム感:カテゴリーの切り替えと反応は如何に？
円形になる事によって切り替えがスムーズになるか？の心配がありましたがここは、タップしていて「気持ちいいな」と感じたので、私の一押しポイントです！
リストのスッキリ感:画面がスッキリしましたか？
変更前は、永遠にログが蓄積している状態で一画面のスクロール幅が拡張し続けてしまう状態になっていました。
最大件数を設ける事で画面のスクロール幅が安定してスッキリした画面になったと感じています。
こういった些細だがUI/UXに関係するポイントは、気づいたら修正していくのが開発者としての責務なんだと変化がある事で気づけたと思います。
Part 3: デザート (継続カレンダー & 通知機能)
あらかたUI/UXのイメージは定まってきたのでさらに向上させる２つを追加します。
- 継続は力なり！カレンダーヒートマップで色の積み上げシステム。
- ログは残すがその場でどれくらい集中したのか知りたい：通知機能。
１．プロンプトの依頼ーちょっとした工夫を施す。
アプリに「続けたくなる理由」と「使い続けられる実用性」を与える最終フェーズ。
- 継続の可視化（カレンダーヒートマップ）
- 日々の記録を【色】として表示し、3ヶ月分の積み重ねを一目で確認。
- 時間量に応じた朱色グラデーションで、頑張りが自然に見える設計。
- 終了時のねぎらい（トースト通知）
- 計測完了と同時に「お疲れ様でした」と表示。
- トースト通知メッセージで、一区切りの達成感をきちんと演出。
- ログの絞り込み（実用性強化）
- カテゴリ別タブでログと合計時間を即切り替え。
- 振り返りや分析が、迷わず行えるように。
２．ここで何が生まれるか？
この「一瞬の肯定」が、次のアクションへの活力になります。
カレンダー（色）のからくり:
最初は真っ白なカレンダーですが、あなたがログをいくつか入れると、その日だけ「ポッ」と赤く灯ります。
これを見ると、「明日も灯したい」「カレンダーを朱色で埋めたい」という強烈な欲求が生まれます。
これが最強の継続装置のからくりです。
マスを埋めたいは、やがて継続に繋がります。これをするためにログを記録するのも面白いと思います。
反応が良ければさらにアップデートも考えていきたいポイントです。
トースト通知:どれだけ行ったのか知りたいはず。
今まで無言で終わっていたタイマーが、「お疲れ様でした！」と声をかけてくれるようになります。
このちょっとした通知だけでも大事だと感じています。
「何分行ったか？」をユーザーは、その瞬間だけでも知りたいと思った時に無言は寂しすぎます。
だから、せめてその瞬間だけでも集中した時間を知れる通知を付けた方が、満足感を得られると思いました。
トースト通知とは、「トースターから飛び出るトースト」からの由来で名づけられたようです。
トーストの由来については、Qiitaの記事から知る事になりました。
リンク：ポップアップをトーストと呼ぶのはどんなとき？ #modal – Qiita
最後に：見た目の仕上げとCLSへの対応
Part2・Part3の実装が完了しました。
最後に、ずっと気になっていた2つの課題に取り組みます。
- 餅ボタンの再チャレンジ ― 前回保留にした形状の調整
- CLSへの対応 ― 画面切り替わり時の違和感を解消
餅ボタン、再挑戦
一番こだわりたいと言っていた「餅ボタン」。
前回は、レイヤーの境界線がどうしても消えず、イメージとは違う仕上がりになりました。進行を優先して保留にしましたが、ずっと引っかかっていた部分です。
今回、新たに理想の餅のイメージを明確化して再挑戦しました。
理想の変化と、実際の変化
言葉で説明するより、見ていただいた方が早いと思います。
「理想」と「現実」の変化を並べた画像を作成しました。
さて、結果は——
……思った以上に、手強かった。
何度調整しても、理想の形には届かない。
これぞまさに「理想と現実の乖離」。開発で嫌というほど味わう、あの感覚です。
ただ、このプロジェクトで早めに体験できたのは良かったのかもしれません。
「そう簡単にはいかないよ」——餅ボタンにそう言われた気がします。
形状の調整は引き続き課題として残しています。
今後、CSSやSVGでのアプローチを検討しながら、理想の形を目指します。
CLS（Cumulative Layout Shift）への対応
もうひとつ、前回のセクション冒頭で挙げた注意点——CLSにも対応しました。
CLSとは、画面の要素が予期せずズレることで起きる視覚的な不安定さのこと。
ページ遷移や画面切り替わりの「ガタつき」は、無意識にストレスを与えます。
- どこが気になっていたか
-
アプリの利用開始時と終了時の画面切り替わり。
切り替わる瞬間に、要素がカクッと動く違和感がありました。
- AIエージェントへの依頼
-
以下のようなプロンプトで調整を依頼しました。
「最後に」での「CLS調整を依頼する」プロンプト画像。 - 調整後の変化
-
CLSの対応後の映像。利用開始と終了時の切り替わりに「中心からのブラーとズーム」を用いた内容。
結果、中心からのブラー＋ズームを用いた滑らかなトランジションに変化。
切り替わりの違和感が消え、画面遷移が「自然な流れ」になりました。
このセクションのまとめ
| 餅ボタンの形状調整 | 再挑戦するも理想には届かず。継続課題として保留 |
| CLSへの対応 | ブラー＋ズームのトランジションで違和感を解消 |
まとめ
今回は、セクション4（UI/UX）の調整としてPart2・Part3、そして仕上げを行いました。
まず、ここまでの実装を通しで動かした動画をご覧ください。
今回やったこと
Part 2: オードブル (カテゴリー配置 & リストの整理)
- カテゴリUIをボタン直下に移動
- 一文字表示（し・が・せ）で認知負荷を軽減
- 記録リストを7件表示＋「すべて表示」で整理
- フィルター機能（カテゴリ別）を追加
Part 3: デザート (継続カレンダー & 通知機能)
- 終了通知の実装（「60分集中しました」）
- 利用時間ゲージの導入（色が濃くなる＝溜まる感覚）
最後に：見た目の仕上げ
- 餅ボタン再挑戦 → 理想には届かず、継続課題
- CLS対応 → ブラー＋ズームのトランジションで違和感を解消
今回の学び
「餅ボタンは思い通りにいかなかったけど、CLSへの意識は確実に変わりました。些細だけど確実に体験を損なうものに気づけるようになった気がします。」
次回予告
セクション5：セキュリティ強化
- 公開前に必要なセキュリティチェック
- Firebase Authentication の設定見直し
- Firestore セキュリティルールの最適化
次回でセキュリティを固めれば、いよいよデプロイ（公開）です。
「作る」から「届ける」へ——ゴールが見えてきました。
最後に
ここまで読んでいただき、ありがとうございました。
UI/UXの調整は地味な作業の連続でしたが、「触り心地」が確実に変わっていく感覚は楽しかったです。
質問・感想・「ここもっと知りたい」があれば、コメントで教えてください。
それでは、また次回。
またお会いしましょう！Tomoyaでした。
コメント