§13-01
ダーク / ライト切替 (system 追従可)
ライト・ダーク・システム追従の 3 択で外観を切り替える。
見やすい配色を利用者が選べ、端末設定に任せることもできる。夜間の利用や眩しさに敏感な人に配慮したいサービスで標準的に置く。
実装のポイントlight/dark/system の 3 値で持ち、system 時は matchMedia を購読する。初回のちらつきは head 内のインラインスクリプトで先にクラスを付けて防ぐ。
- ブラウザ API
- 永続化
§13
パーソナライズ
Personalization
- Patterns
- 10
- Demos
- 10
§13-02
言語切替 (i18n)
表示言語をドロップダウンから切り替える。
ブラウザの自動判定が合わない利用者が、自分で言語を選べる。多言語で提供するサービスのヘッダーやフッターに置く。
実装のポイント言語名はその言語自身の表記で並べ、国旗は使わない。切替時は html の lang 属性も更新し、選択は URL かクッキーに保存して再訪時に復元する。
- 状態管理
§13-03
レイアウト密度 (comfortable/compact)
表示の余白を広めと詰めた形で切り替える。
一覧の見やすさと一画面の情報量のどちらを優先するかを利用者に選ばせる。表や受信箱を長時間使う人の好みに応える。
実装のポイント密度はクラスや CSS 変数で余白をまとめて切り替え、個別コンポーネントに分岐を書かない。選択はユーザー設定として永続化する。
- 状態管理
§13-04
フォント / 文字サイズ調整
本文の文字サイズを利用者が調整できる。
視力や端末に合わせて読みやすい大きさを選べる。長文を読むサイトや高齢の利用者が多いサービスで必要になる。
実装のポイント本文を rem で組み、ルートの font-size か CSS 変数を変えて全体を比例拡大する。px 固定の要素があると崩れるので、上限下限と既定値に戻すボタンを用意する。
- 状態管理
- アクセシビリティ
§13-06
Bookmark / お気に入り
気になる項目を保存して自分の一覧から戻れる。
見つけた項目をあとで探し直す手間をなくす。商品や記事、場所など、比較や再訪を前提に閲覧する一覧で使う。
実装のポイント星ボタンは aria-pressed と「お気に入りに追加」のラベルを持たせ、楽観的に切り替える。お気に入りは一覧上部に固定するなど再訪時の導線とセットで設計する。
- 状態管理
- 楽観的更新
§13-07
Recently viewed
最近開いた項目を一覧にして再訪しやすくする。
前に見たものに戻る手段を用意する。商品や記事を比較しながら回遊するときに、探し直す手間を省く。
実装のポイント閲覧履歴は重複を除いて先頭に移し、件数上限を設けて localStorage などに保存する。個別削除と全消去を用意するとプライバシー面の不安を減らせる。
- 永続化
§13-08
Recommendation
利用履歴に基づいて個人向けの項目を薦める。
膨大な選択肢から自分に合うものを探す手間を減らす。閲覧や購入の履歴が蓄積されるコンテンツや商品のサービスで使う。
実装のポイント推薦理由（「閲覧履歴から」など）を各カードに添えると納得感が出る。非表示や「興味なし」のフィードバック操作を用意し、次回の推薦に反映する。
- CSS のみ
残り 2 件のパターントピックフォロー / Saved view / smart filter …
§13-10
Saved view / smart filter
絞り込みや並び順の組み合わせに名前を付けて保存する。
よく使う条件を毎回組み直さずに開ける。担当案件だけ、今週締切だけといった定番の見方を持つ業務ツールに向く。
実装のポイントビューはフィルタ条件を URL のクエリとして保存すると共有やブックマークにも使える。件数は保存時ではなく表示時に再集計する。
- 永続化