コンピュータサイエンス最大の難問: 要素の中央揃え（centering things）
(tonsky.me)- 多くの企業のアプリケーションでは、テキストやアイコンなどのUI要素がきちんと中央揃えされていない
- CSS の flex と grid を使えば簡単に中央揃えできるにもかかわらず
display: flex
justify-content: center /* 水平センタリング */
align-items: center /* 垂直センタリング */
または
display: grid
justify-items: center /* 水平センタリング */
align-items: center /* 垂直センタリング */
中央揃えを難しくする要因
- フォントのメトリクスが重要な役割を果たす。人気のあるフォントの多くはバウンディングボックスがぴったり合っておらず余白があるため、中央揃えが難しい
line-height設定の影響で、異なるコンテナ内にある2つの要素を揃えるのはほぼ不可能- アイコンをテキストの横に揃えるのも非常に難しい作業。CSS の
vertical-align属性ではアイコンを意味のある形で揃えられない - アイコンをフォントファイルに入れて使うアイコンフォントは、サイズやパディングの調整ができず、整列がさらに難しくなる
- デザイナーも、アイコンの形状を考慮せず機械的に中央揃えしてしまうミスを犯しがち
- 水平方向の整列も、細心の注意を払わないとずれてしまうことがある
解決策
デザイナー
- フォントのバウンディングボックスをテキストにぴったり合わせて調整すれば、中央揃えははるかに簡単になる
- Figma ではこの機能をサポートしている（デフォルトではない）
- Vertical Trim : Cap Height to baseline
フォントデザイナー
- ascender と descender の間の空間が cap-height の2倍になるようにフォントメトリクスを設定すれば、開発者は簡単に中央揃えできる
- 実際の ascender/descender を境界まで延ばす必要はなく、数値だけ合わせればよい
Web開発者
- 使用するフォントを事前に把握している必要がある（フォント代替時には機能しない）
- フォントメトリクスを使って計算した
padding-bottom値を追加することで、垂直方向の中央揃えを調整できる - アイコンも
vertical-align: baselineを設定し、フォントメトリクスとアイコンサイズから計算した値だけ下に移動させれば揃えられる
アイコンフォント
- アイコンフォントの使用はどうかやめて、通常の画像フォーマットを使うこと
- 幅と高さを持つ長方形2つを揃えるより簡単なことはない
視覚的補正
- 開発者が揃えられるのは数学的に完全な長方形だけ。手動補正が必要なものは、アイコンを視覚的にバランスよく長方形の中に配置すること
GN⁺の意見
- 細かなディテールへの関心によって、UI品質を大きく向上させられることを示している。ごく些細に見える中央揃えひとつでも、全体の印象は変わる
- 単に「デザイナーはデザインだけ、開発者は実装だけ気にすればよい」という考え方ではなく、お互いの領域を理解して協力することでよい結果が生まれることを示唆している
- そもそもブラウザごとのレンダリング差異が出ず、デザイナーの意図どおりに実装しやすくするために、デザイン段階からフォントメトリクスを合わせてモックを作るのがよさそう
- Apple、MS、Google など名だたる企業の製品でもこうした問題が見つかるが、多くの人は気にも留めず通り過ぎるほど関心が薄いようだ。それだけ細部へのこだわりを持って作ることが重要
- とくに最近は UI テスト自動化ツールなどの利用により、人の目で一つひとつ確認する工程が省略されることで、こうした問題はさらに頻繁に起こりうるため注意が必要に見える
3件のコメント
機械的な中央揃えが本当に良いのかも考えてみる必要がありますね。マウスが左右対称よりも少し左右非対称なエルゴノミクス形状のほうが使いやすいように、全体的な使い勝手を見て決めるべき要素なのかもしれません。
意図と異なる結果になりうる、というのが核心のように思います。たとえば、マウスクリックが画面上で矢印の先端部分ではなく、尾の部分で判定されるような状況ですね。
Hacker Newsの意見
要約:
justifyとalignを対話的に試せるデモサイトの紹介