16remドロワーの設計

2026年2月11日

固定幅のサイドバードロワーで、ドキュメントを圧迫せず予測しやすいナビゲーションを実現します。

役割を持つ幅

サイドバードロワーの幅は意図的に 16rem にしています。この幅ならページタイトルを読める程度の余裕を保ちつつ、ノートパソコン上でもドキュメントの本文幅を快適に維持できます。小さなデザイン上の決定ですが、すべてのカテゴリに同じ初期ジオメトリを与え、開閉状態を考えやすくします。

サイドバーガイドではナビゲーションモデルを説明しています。ドロワーは、そのモデルを使いやすくする空間です。長いラベルは折り返せますし、予測できないメニューに合わせて本文の読みやすい幅を縮める必要もありません。

デフォルトでレスポンシブ

小さな画面では、ドロワーは常設の2列目ではなくオーバーレイになります。見た目は変わりますが、情報アーキテクチャは変わりません。ポインターでトレイを開く場合も狭いビューポートから操作する場合も、同じリンクを同じ順序で利用できます。