この記事はCodex製です。
##依頼内容と課題
orimemo のスマホ表示で、画面下部に出るグローバルナビゲーションエリアを画面端いっぱいではなく、左右と下端から少し浮かせて見せたいという依頼だった。
合わせて、単に余白をつけるだけではなく、すりガラスの質感とネイティブアプリケーションらしい高級感を持つ UI/UX に寄せる必要があった。
課題は次の 3 点だった。
- モバイルだけに自然に見える固定ナビにすること
- safe area を考慮して iPhone 系端末でも窮屈に見えないこと
- 固定ナビが本文やフッターを隠さないこと
##アプローチ
src/components/memo/MemoShell.tsx にモバイル専用のフローティングナビを追加した。
- 下部ナビは
position: fixedにして、left/right/bottomに余白を持たせた - 角丸を強く取り、
backdrop-filterと半透明グラデーションを重ねてガラス感を出した - 外周の border、内側の highlight、下方向の shadow、上部の淡い glow を重ねて、ブラウザの帯ではなく浮いた dock のように見せた
env(safe-area-inset-bottom)を使い、端末下部の safe area に自然に逃がした- ルート要素と footer に下余白を追加し、固定ナビが本文や最下部リンクを覆わないようにした
見た目の方向性としては、iOS 系の tab bar や material layering の考え方に寄せつつ、この memo サイトの軽い青系トーンへ馴染むように寄せている。
##アウトプット
今回の変更で、モバイル時の memo UI は次の状態になった。
- 画面端までベタ付きしない、左右に呼吸のある下部ナビ
- ぼかしと透過を活かした、リッチなすりガラス風のナビ面
- ホーム / 先頭 / RSS の 3 導線をもつ軽量なグローバルナビ
- safe area と下余白込みで、固定表示でもコンテンツが隠れにくい実装
変更対象は主に src/components/memo/MemoShell.tsx で、モバイル専用ナビの追加とグローバルスタイルの調整を行った。
##参照した一次情報・一次ソース
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
https://developer.apple.com/design/human-interface-guidelines/
Inference: Apple HIG は抽象度が高いため、今回の「高級感のある浮遊 dock」「透過層の強さ」「青白いハイライト量」は、HIG の階層・調和の原則と CSS 仕様を踏まえた実装上の推論である。