今回は、セクション４(UI/UX）の調整編です。
目標：「使いやすい・毎日ログを残したくなる」を目指して作り上げていこうと思います。
本日行いたい事
UI/UXのアイデアを出して、何を行うか決める。そして１つ変更に移す。
セクション5での大まかな順序
- アイデア出し：AIと共に自分のイメージするアイデアを出してセッションする。
- アイデアを固めて何を行うか決める。そして順序良く実装する。
- 変化を見て自分のイメージと一致しているかを評価して修正する。
ここはより自分の独自性を高める大事で面白いフェーズです。なのでより広い空想をイメージしてアイデアを出していく事をおススメします。ではご覧ください。
アイデア出しとUI/UXでの注意点
UI/UXに関しては自由で良いと言いましたが
私としては、一度作成の上での注意点を調べるようにしています。そこで挙がった注意点は、以下の３つです。
これを基本として守ってアイデアを考えて行こうと思います。
⚠️ UI/UX 作成での気を付けること
１．CLS (Cumulative Layout Shift) を防ぐ
- 現象: Remote Configで背景画像を取得している間、画面がガタついたり、画像が遅れてパッと出る現象。
- 対策: 画像が読み込まれるまでの間の「待たせている感」を消すのが些細な気遣いになる。
２．親指の可動域を意識する
- 現象: スマホで片手操作する時、遠い所(左上のボタン)は押しにくい。
- 対策: スタート/ストップ、カテゴリ選択など、頻繁に使うボタンは画面下半分に集約する。
３．ボタンの即時反応で些細な不安を消す。
- 現象: ボタンを押したのに「反応したかな？」と不安になる。
- 対策: タップした瞬間にボタンが少し沈む（縮小する）アニメーションや、エフェクトを入れる。
UI/UX作成での3つの指摘について
どれも的を射ていると感じました。
メニューバーが遠い、ボタンが押しづらい——ほんの小さな違和感ですが、積み重なると確実に負担になります。さらにボタンの反応が薄いと「押せた？」と一瞬迷う。このわずかな引っかかりが、気づかないうちにストレスへ変わっていきます。
長く愛されるアプリは、こうした「些細だけど確実に体験を損なうもの」への配慮が行き届いているのだと、改めて実感しました。
CLSは盲点だった
正直、ここは意識が薄かったです。
画面切り替え時のわずかなガタつきやラグ。それだけで集中が途切れ、没入する前にノイズが入ってしまう。ユーザーが「使いにくい」と言語化する前に離脱する原因は、案外こういうところにあるのかもしれません。
開発者として、今後大事にしたい視点がひとつ増えました。
私のイメージするアイデア
このアプリで一番こだわりたいこと
「時計ログアプリ」で最もこだわりたいのは、ボタンです。
前のセクションで触れたUI/UXの指摘とも関連しますが、毎日触れる部分だからこそ、ここだけは妥協したくない。「押したくなる」「押して気持ちいい」を本気で追求します。
以下が、優先順位をつけて整理したアイデアリストです。
-１.ボタン
–押す前からボタンが呼吸しているように動いている。
–ボタンを押したら気持ちのいいアニメーションとエフェクトを取り入れる。
–そこでボタンの形を「焼けた餅」の形にしたい。モバイルでの指の可動域にも対応できるから。
–ボタンは立体的に浮き出ている感じにしたい。
-２.カテゴリー
–カテゴリを現在の位置からボタンの下に配置する。下すぎない事。
–カテゴリのボタンを〇と一文字（仕事＝し・学習＝が・生活＝せ）にして選ぶ負担を軽くする。
–一文字の下に正式なカテゴリを表示しておく。何の略なのかわかるように（仕事・学習・生活）
-３．色合い
–独自性で一般的でないもので作ろうと思う。#C5453A を標準カラーにしてそれに合った色を組み合わせたい。
–毎日使いたくなる色合いを目指したい。人間心理に根差した色や開いたときにログを取ろうとなる色、この色＝時計ログアプリとなるもの。このアプリ自体の色の基本となるもの。それを中心としたカラーバリエーションスタイル。
-４．記録の表示
— 記録の表示も7件までで後は、View allとしてみたい時に表示するもの。
–記録のフィルター機能(日にち・時間帯・カテゴリ別）
-５．その他
–背景画像は不透明度を入れなくていい。100%
–終了後に通知を作る。（12:00~13:00 60分集中しました）
–隅にゲージを用意して、利用時間によって「色が濃くなる」事で明らかな使用がわかる。それを溜める感覚を作る。Bの案を少し変化させたもの
—ステップアップ案：24H単位では、さみしいのでカレンダーのマスに色を着けていくようにしてカレンダーで利用状況のログを色で確認できる。→いや今の流行は育てる事だと思う。からキャラクターやログを作る事で育成するスタイルの方が楽しめるかも。
アイデアの背景を解説します
１. ボタン ― 「焼けた餅」の形にする理由
モバイルを操作するとき、多くの人は画面下部を持ち、親指で操作します。
ボタンが画面中央にあると、親指を「伸ばす」動作が必要になる。この小さな負担が、毎日の利用では確実に蓄積します。
餅のように横に広がった形状なら、左右どちらの手でも無理なく届く。見た目のユニークさと、人間工学的な合理性を両立させたい——それが「焼けた餅」の発想です。
２. カテゴリー ― 一文字にする理由
カテゴリをボタン直下に配置し、表示を一文字（し・が・せ）に。
毎日選択する項目だからこそ、「漢字を読む → 意味を理解する」という認知コストを削りたいと考えました。
- 「し＝仕事」
- 「が＝学習」
- 「せ＝生活」
合言葉のように頭で自動変換される状態を目指します。キーとバリューの関係を直感的にマッピングできれば、選択は「考える」から「反射」に変わります。
３. 色合い ― 和モダンをテーマに
餅の形から連想したのが「小豆」でした。
最初は小豆色をベースにしようと思いましたが、少し暗い。毎日開く画面が重たい印象だと、アプリへの愛着も薄れてしまいます。
そこで、小豆色の周辺から「明るく、でも落ち着いた」トーンを探し、#C5453A を基準色に採用しました。
テーマは「和モダンなログアプリ」。
この色＝時計ログアプリ、と認識されるような独自性を目指します。
４〜５. その他のアイデアについて
記録表示・通知・ゲージ機能などは、コア体験（ボタン・カテゴリ・色）を固めた後に段階的に実装します。
特に「利用時間で色が濃くなるゲージ」や「カレンダーに色がつく」仕組みは、「溜める・育てる」感覚を生む設計として温めています。
Gemini AIとのセッションで、コード量・システム構成ともに問題ないとの評価を得ています。
今回も一気に実装せず、2つずつ丁寧にプロンプトを構築し、AIエージェントと足並みを揃えながら進めていきます。
セッション後のアイデアの確定
これらを実装するにあたって順序良く進める為に以下の３段階のPart構成で行っていこうと思います。
「和モダン・時計ログ」 の構築へ向けて、3段階に分けて進めます。
- Part 1: メインディッシュ (餅ボタン & 和モダンカラー)
- 一番の顔である「餅ボタン」と「全体の配色」を実装します。これだけでアプリの印象がガラリと変わるようにしていきたいと思います。
- Part 2: オードブル (カテゴリー配置 & リストの整理)
- カテゴリの再配置とリストの整理を行い、使い勝手を向上させます。
- Part 3: デザート (継続カレンダー & 通知機能)
- カレンダーヒートマップと通知機能を実装し、達成感を演出します。
Part 1:メインディッシュ (餅ボタン & 和モダンカラー)
まずは、大事なボタンのポイントとカラーを変更していこうと思います。
1.プロンプトの依頼
アプリの世界観を「和モダン（Japanese Modern）」に再定義。
スタートボタンと配色を中心に、触感と雰囲気を大きくアップデート。
- 餅ボタン実装
スタートボタンを「焼けた餅」のような有機的形状に変更。
不均一な角丸＋ゆっくり呼吸するアニメーションで、押したくなる質感を演出。 - 和モダン配色へ刷新
朱色・和紙色・墨色を基調に、全体を落ち着いた和テイストに統一。 - Zenモード背景の調整
背景画像をより鮮明に表示しつつ、UIの視認性を保つバランスに調整。 - 明暗をワンタップで切り替え可能なスイッチャーの導入
ユーザーの好みに対応したスタイルで世界観を選択可能にした。
２.変化の確認
世界観を感じさせる「和モダン」なカラーバリエーションに大幅に切り替わりました。
一般的な「黒・白・赤」ではなく、「朱色・和紙色・墨色」を基調とすることで落ち着きを感じられ心地よさが感じられるようになった。
明暗をワンタップで切り替えるスイッチャーの導入によって、世界観を崩さないカラーバリエーションに変化したのでどちらを選択しても心地よく楽しめると思う。
残念なポイント：
一番重要視していた「ボタン」を「餅ボタン」に切り替える変更が叶いませんでした。
餅のように「うにょうにょ」とした動きや立体感が増したものの、イメージしていた「餅ボタン」とは違うものが出来上がってしまいました。
ここを少し調整していこうと思います。
３. 調整結果 ― 理想の餅、まだ遠い
形は、それっぽくなりました。
丸みを帯びたシルエット、横に広がるフォルム。パッと見は「餅ボタン」と呼べるものになっています。
ただ、どうしても境界線が気になる。
レイヤーが分離しているような、微妙な段差感。ボタン全体が「ひとつの塊」として見えない。
何度か調整を試みた
- AIエージェントに「レイヤーを一体化してほしい」と依頼。
- プロンプトを変えて再依頼。
- 表現を具体的にして、もう一度。
結果は…変わりませんでした。
ここで判断を下す
正直、もう少し粘りたい気持ちはありました。
でも、ここで止まり続けると全体の進行が遅れる。完璧を目指して動けなくなるより、「今の最善」で次に進むことを選びました。
餅ボタンの調整は、一旦保留。
他のパーツを進めながら、解決策が見つかったタイミングで戻ってくることにします。
開発は、こういうものだと思う
思い通りにいかないことは、当たり前にある。
大事なのは、「止まるか、進むか」を自分で決めること。今回は進む判断をしました。
この餅が理想の形になる日を、楽しみにしておきます。
今回はここまで
本当はセクション4のアイデアをすべて実装するところまで書きたかったのですが、ボリュームを考えて分割しました。
今回の内容をまとめます。
- 「ボタン」「カテゴリ」「色合い」を軸にしたアイデアを構築
- 餅の形＋和モダン配色という独自コンセプトを設計
- Gemini AIで技術的な実現性を確認
- Part1:メインディッシュ (餅ボタン & 和モダンカラー)の実装
次回予告：アイデアを「動くもの」に変える
次回は、今回整理したアイデアを実際にコードへ落とし込んでいきます。
- Part 2: オードブル (カテゴリー配置 & リストの整理)の実装
- Part 3: デザート (継続カレンダー & 通知機能)の実装
- 全体的な調整と注意点を守る
「アイデアを出す」から「動くものにする」へ。
ここがバイブコーディングの醍醐味だと感じています。
バイブコーディングで変わったこと
以前なら、アイデアを思いついても選択肢は2つしかありませんでした。
- 自分でコードを書く（学習コストと時間）
- 書ける人を探す（コストと依存）
今は違います。
AIエージェントがコードを担当してくれる。だから私たちは「何を作りたいか」を明確に言語化することに集中できる。
技術力がなくてもアイデアを形にできる——これは本当に大きな変化だと思います。
Firebaseを選んだ理由
「作ったはいいけど、どうやって公開すればいいの？」
個人開発を始めたばかりの頃、ここで止まる人は多いはずです。私もそうでした。
Firebase Hostingなら、デプロイまでの道のりが短い。作る→公開する→反応をもらう、このサイクルを早く回せる環境が整っています。
だからこそ、これからもFirebase × 個人開発の記録を発信していきます。
最後に
ここまで読んでいただき、ありがとうございました。
アイデアを形にする過程を、少しでも楽しんでもらえたなら嬉しいです。
質問・感想・ツッコミ、何でもコメントで待っています。
それでは、また次回。
Tomoya
コメント