ダッシュボードを1枚のウェーブチャートを中心に再設計する

機能を足すリリースもあります。GeekBye v1.8.2はむしろ一つを_取り除いた_ — そしてその除去こそが物語です。2026年2月のある午後、18のコミットがダッシュボードのホームを録音のリモコンから読み取り専用の分析ビューへと変えました: 四つの統計と一枚のアクティビティチャートです。その道すがら、22分だけ生きた棒グラフ、20分だけ生きた統計カードのグリッド、そしてその両方を置き換えた手書きのSVGウェーブを出荷しました。探索の全体がコミットのタイムスタンプに保存されていて、これはこの世で最良の種類の設計ドキュメントです。

ダッシュボードはリモコンであることをやめた

このリリースの前、ダッシュボードのホームはコントロールパネルでした。先頭にはヒーローカード — LIVEバッジ、Pause/Resume/Stopボタン、グラデーションの塊、そしてそれらすべてを録音機に配線するuseSessionStateフックを備えた大きな録音ウィジェット — がありました。ダッシュボードは一度に二つのものであろうとしていました: ミーティングを_眺める_場所と、録音機を_操作する_場所です。二つのプロダクトが一つの画面で、静かに競い合っていたのです。

v1.8.2は一つを選びました。ヒーローカードとuseSessionStateの配線を削除しました — その中には、セッションが終わった瞬間にミーティングの詳細ページへ自動で連れて行くエフェクトも含まれます。まさにこれが、作業の途中で人を驚かせる「親切な」ジャンプの典型です。録音機の開始と非表示は、素朴なナビバーのトグルへ移されました(セッションコントローラからオン/オフスイッチへと変わる過程で百行ほど失った、用途変更されたボタンです)。裏では新しいnavbar:hide IPCハンドラが支えています。残ったのは、一つのことだけをするダッシュボードです: あなたが録ったものを見せる。読み取り専用。静かです。

この移行には、取り上げる価値のある小さくて人間的なバグがあります。再設計が静かに持ち込み、目のいい人が同じ時間内に捕まえる、まさにそういう類のものだからです。二つの新しいサイドバーボタン — StartとHide — は_同じ_汎用グリッドアイコンで出荷され、見た目が同一でした。12分後のフォローアップがStartに再生アイコンを、Hideにアイオフ(目に斜線)アイコンを与え、Hideを琥珀色に染めたので、「アプリを消す」が「開始」の中立な双子ではなく、意図的なアクションとして読めるようになりました。アイコンはコピー(文言)です。同じに見える二つのボタンは同じことを言っており、この二つは同じことを意味してはいなかったのです。

22分だけ生きた棒グラフ

ここが私の大好きな部分で、しかもgitログから完全に読み取れます。16:29:34に再設計の最初の稿が着地しました: 棒で描かれた7日間のアクティビティチャート — アニメーションする列、小さな日でも見えるようにする最小高さ、ゼロの日には2ピクセルの薄い切り株。妥当です。ありふれています。何も考えずに手が伸びる類のチャートです。

16:51:21に — その22分後 — それは削除されました。置き換えのコミットは、自分がしたことをそのまま述べています: "replace bar chart with smooth wave area chart for 7-day activity"。そして16:52:21、その1分後、別のコミットがウェーブの周りから角丸カードとボーダーを剥がしました。"for cleaner look"。

なぜ? コミットは_何が_変わったかしか言わないので、_なぜ_は読み解きになります — が、データの形を見れば明白です。これは、典型的なユーザーがどの日もミーティングが0、1、2件というツールです。七本の棒、そのほとんどが2ピクセルの高さでは、がらんとした駐車場のように見えます。同じ七つの数字を連続した塗りつぶしのエリアとして描くと、_トレンド_のように見えます — その週が忙しかったところで穏やかに盛り上がるウェーブです。何も捏造していません。y値は同一です。再設計はただ、疎で正直なデータを不在ではなく一つの形として読ませる符号化を選んだのです。

統計も同じ時計の上で同じ扱いを受けました。最初の稿(16:29)は四つの数字を2×4のカードグリッドに置きました。16:49にグリッドは1本のインライン統計ストリップに折り畳まれました — 細い罫線の仕切り、小さめの字、四つではなく一つのコンテナからなる、境界線付きの一行です。画面上の五つのボックス(四枚のカードとチャートカード)が二つ(ストリップとウェーブ)になりました。次のPRはもう一つ正直な仕上げを加えました: 「Total Time」というラベルが「Time in Meetings」になったのです。何の_合計_なのか、というのは誰も問わずに済むべきではない、もっともな問いだったからです。

20分、最初の稿から最終稿まで、すべて一つのプルリクエストの中で。もしこれらが「redesign dashboard」という一つのコミットにスカッシュされていたら、探索は見えなくなっていたでしょう。そうしなかったからこそ、あなたはデザイナーがリアルタイムで収束していくのを見ることができます。

ウェーブ、その仕組み

ここにチャートライブラリはありません。ウェーブはJSXで組んだインラインSVGで、一見の価値があります。どんなスパークラインにも盗める、小さくて正直なレシピだからです。

スムージングがコツです。隣り合う各点のペアについて、パスは三次ベジェ区間を使い、その二つの制御点は両者の水平方向の中点に置かれます — cpx = (prev.x + curr.x) / 2 — 制御点はそれぞれの端自身の高さに保たれます。これが古典的なフラットタンジェント・スムージングです: 曲線はどのデータ点も、最高値より上にも最低値より下にもオーバーシュートすることなく通り抜けます。素朴なCatmull-Romスプラインならやってしまうことです。ミーティング数についてのチャートでは、「起きなかった値をほのめかす山を決して描かない」ことは気の利いた配慮ではなく、正しさそのものです。塗りつぶしのエリアは同じ曲線を下辺で閉じ、垂直グラデーション(シアン、30%からほぼゼロへとフェード)で塗ったもので、線はframer-motionのpathLengthアニメーションで左から右へと自らを描き出します。

SVGの下にはデータの配管があり、これが静かな主役です。トランスクリプトリポジトリの新しいgetAggregateStats()メソッドは、ローカルのSQLite transcript_sessionsテーブルに対して三つのプリペアドステートメントを走らせます: 全期間の合計(件数、合計時間、平均時間)、直近七日間のローリングカウント、そして日ごとのGROUP BY date(created_at)バケットです。そして — これがチャートを堅牢にする細部ですが — 小さなJavaScriptのループが直近七暦日を歩き、クエリが返さなかった日をすべて0でバックフィルします。したがってチャートは常にちょうど七点であることが_保証_されます。

その保証こそが、ビューのあちこちにガードを散らばせる代わりに、エッジケースを消し去るものです。空っぽの週? 七つのゼロ、そして分母へのMath.max(count, 1)が、ゼロ除算する代わりに線を一番下で平らに保ちます。i / (n − 1)のx間隔の式にNaNを生じさせるような単一のデータ点? 起こりえません — リポジトリは七点未満を決して吐き出しません。曜日ラベルすら各バケットを素の深夜ではなくT12:00:00でパースするので、YYYY-MM-DDの文字列が負のUTCタイムゾーンで前日にずれ落ちることもありません。データの形を源で直せば、レンダリングのコードは意図して素朴でいられるのです。

そのすべてがマシンの上にとどまります。統計クエリはローカルのデータベースを読み、型付きのtranscript:get-stats IPCチャネルを通じて返り、マウント時に四つのカウントアップ数字へとアニメーションします。このチャートを描くために、あなたのミーティング履歴がラップトップを離れることは何一つありません — 会話を録音するツールにとって、これが分析ビューを組む唯一許容できるやり方です。

もう一つのバグ、再設計はそれを光の下へ引きずり出すから

同じリリースには、ダッシュボードとは何の関係もなく、再設計がつまずく類の負債とは大いに関係のある修正が同梱されていました。アプリのダークなスクロールバーのスタイリングは、同じクラスに対する二つの競合するCSS定義へと分かれてしまっていました — 古い紫のものと、新しい黒地に白のもの — そしてどちらが勝つかはカスケードの順序次第でした。さらに悪いことに、そのクラスを忘れずに付けた要素だけがそもそもスタイルされ、それ以外はすべてデフォルトの明るいスクロールバーに戻り、水平スクロールバーは一度もスタイルされていませんでした。古いルールが幅だけを設定し、高さを決して設定しなかったからです。修正は両方の定義を削除し、スクロールバーをすべての要素に対して_グローバルに_スタイルし、それを担っていた10のコンポーネントから、いまや死んだそのクラスを取り除きました。10回繰り返される二行の差分です — 同じものを二度スタイルし、その両方を生き延びさせたことへの、華のない税金です。

このリリースが教えてくれた三つのこと

1. 絞り込むために引き算せよ。 ダッシュボードは_より少なく_やることでよくなりました — 決して必要としなかった録音操作を失い、一つの明快なものになったのです。ビューアでありリモコンでもある画面は二つの半端なプロダクトです。一つを選び、もう一つを本来あるべき場所へ移しましょう。
2. データにふさわしい符号化を選べ。 疎なカウントは、同じ数字から、棒では不在として読まれ、エリアチャートではトレンドとして読まれます。これはごまかしではありません — 現実の、薄いデータに語らせる正直な形を選ぶことです。
3. データの形は上流で保証せよ。 七点までバックフィルするループこそが、チャートのコードに散らばったnullチェックがない理由です: ゼロ除算も、単一点のNaNも、欠損した日も、すべて消えます。クエリがちょうど七つのバケットを約束するからです。堅牢なレンダリングは一層下から始まります。

v1の物語の前の章は、26時間で四つのリリース(v1.7.6–v1.8.1)を; そして弧の全体については、ソフトウェアを完璧に出荷することの解剖学をご覧ください。