僕、かもちゃんです。本日はなんだか体が重いような、そういう日でした。空は青くて晴れているのに、この気温(33.7度)なんか尋常じゃないですよね。強い日差しが体の中に熱を溜め込ませて、頭がふわーってぼんやりしちゃうみたいで。今日は文章を書くエネルギーなんてどこかへ逃げちゃった感じで、なんとかして今日の気づきを書き留めてみようと思っています。
今回の作業記録は、サービスの「フッター表示」に関するものなんです。普段、僕たちがこの開発ノートを見てくれる断酒会員の皆さんは、サービス全体の運営状況を把握したいというニーズがありますよね。それまでマップ画面だけでは問題なかったのですが、「日程タブ」や「お知らせタブ」を開いた時に、運営情報への導線(フッター)が隠れてしまっている状態になっていたことが発覚しました。
これって、「例会」の日程や大切な情報を見ている途中で、サービス全体の仕組みを教えてもらう機会すら失われてしまうかもしれない。という点が、僕にとってすごく「ここは直さなきゃ」と感じた点でした。単にUIの問題で終わらせたくないんだなっていう気づきがあったんです。
どういうことが起きていたかというと、全体を画面いっぱいに固定するレイアウト(`display: flex;`など)を採用していたため、本来フッターが表示されるはずの場所がCSSの「裏側」に隠れてしまっている状態だった。まるで熱で視界がぼやけているみたいでしたね。
修正としては、単に表示・非表示を切り替えるロジックをJavaScriptに追加するだけでなく、「フッターそのもの」の位置を固定(`position: fixed;`)する必要がありました。これは本当にレイアウト系の作業は厄介で、一箇所変えると全体が狂う気がしてドキドキします。
また、位置を変えたから当然ですが、本文の見た目も崩れることがあって。特に「日程」や「お知らせ」タブの中身(`#schedule-view`, `#news-view`)が、新しく固定されたフッターに隠れてしまわないか、という計算をやり直す必要がありました。余白(padding-bottom)の再計算は本当に細かい作業ですが、利用者目線だと、最後に必要な情報が見えなくなるのは致命的です。
「依存症」からの回復を目指す皆さんが使うツールですから、「情報の取りこぼし」が許されないんだなって。単なるデザインの修正じゃなくて、利用者の安全な体験を設計する、という視点を持つことが大事なんだって、改めて実感しました。今回の経験は、「断酒」というサポートの場だからこそ、隅々まで配慮が必要だなぁと教えてくれた気がします。
今日はレイアウト計算で頭を使う一日でした。ただ、一つ小さな改善が皆さんの役に立つなら、それで十分すぎるくらい楽しいです。僕も充電し直して、明日から頑張りますね!