UIデザインで中央配置がずれてしまう理由と解決方法

UIデザインには、至る所に中央揃えが使用されます。
しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？

UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。

Hardest Problem in Computer Science: Centering Things
by Niki Tonsky

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• フォントにおける中央揃え
• line-heightにおける中央揃え
• アイコンにおける中央揃え
• アイコンフォントにおける中央揃え
• 中央配置がずれているのは、スキルの問題
• 水平方向の中央揃え
• デザイナーができること
• フォントデザイナーができること
• デベロッパーができること
• 中央配置にアイコンフォントをお勧めしない理由
• 視覚的な調整も必要
• すべての人ができること
• 終わりに

はじめに

「わたし達は文明として、中心に置く方法を忘れてしまった」これが私の主張です。
もちろん、CSSで要素を中央に配置する方法は知っていると思います。これまでにないほど簡単なCSSで実装できます。

なぜhorizontal/verticalといった分かりやすい単語ではなく、4つの単語を覚える必要があるのかは聞かないでください。それでも以前よりは良くなりました。

また、CSS Gridを使用することもできます。

なぜCSS Gridだとjustify-contentがjustify-itemsであるのかは聞かないでください。

学校で習う気分で、その原理から推測してみます。

ChatGPTも中央に配置する方法を知っています。

まぁ、そうなりますよね。

私が言いたいのは、誰もがある要素を中央に配置する方法を知っているということです。もし迷ったとしてもその方法はすぐに見つかります。

しかし、実際のアプリケーションを見ると、これらの方法は使用されていないことが分かります。いつくか実際の例を見てましょう。
何かおかしくないですか？

これも中央からずれています。

中央配置だと思うのですが、中央ではないですね。

つまり、ノウハウと知識を応用するときに、何かが明らかに失われています。

理論と実践に違いはありません。しかし残念ながら、わたし達は実践の中に生きています。

では、何か起きているのか？ 確認してみましょう。

フォントにおける中央揃え

フォントは最大の犯罪者の1つです。適切に整列されていないテキストはいたるところで見かけます。実際の例をいくつか見てましょう。

Appleのテキストも中央からずれています。

Microsoftも。

GitHubもずれています。

Valveもダメです。

Slackもずれてます。

Telegramもできていません。

Google Mapsもずれてます。

正直に言うと、これらは探すまでもなく、整列の悪いボタンは無限に提供できます。

これで理解いただけたと思います。大小を問わず、ネイティブ企業でもWeb企業でも無数の企業が存在しますが、フォントの中央揃えの問題が大丈夫な企業はどこにもありません。

line-heightにおける中央揃え

フォントのメトリクスだけでは十分でない場合、完璧な中央揃えの道のりで次に問題になるのがline-height（行の高さ）です。

line-heightは、、、複雑です。line-heightについて学ぶには、Vincent De Oliveiraの記事が参考になります。

line-heightが原因で、中央配置がずれている例を見てましょう。

まずは、Slack。

Notion:

Airbnb:

YouTube:

異なるコンテナ内で整列させることはほぼ不可能です。

多くの人がいろいろな方法を試しています。

しかし、成功した人は多くないです。

CSSが邪魔になる可能性もあります（コントロールごとに異なるデフォルトがあり、整列させる前に元に戻す必要があります）。

これらに簡単な解決方法はありません。根気よく、仕様を詳しく調べるだけです。

アイコンにおける中央揃え

アイコンを配置するのは、小さな矩形をテキストと一緒に並べるようなものです。したがって、フォントと行の高さに起因するすべての問題がここに適用されます。アイコンをテキストに隣接させるのは、非常に難しい作業です。

Atom:

以前はTwitterとして知られていたプラットフォーム:

iOS:

Mozilla:

YouTube:

アイコンがテキストよりも優先される場合があります。

逆に、テキストがアイコンよりも優先される場合があります。

場合によっては両方というのもあります。

一部のアイコンは、単なる古いHTMLフォームコントロールです。

様式化されていることもあります。

完璧な位置合わせを実現するために創造力を発揮する人もいます。

しかし、全体的にはかなり絶望的なゲームです。

問題は、CSSが役に立たないことです。vertical-alignプロパティには13個の値がありますが、どれもアイコンを意味のある方法で整列させることはできません。

text-align: middle;がもっとも近いですが、これはcap-heightではなく、x-heightで整列するため、依然としてアンバランスに見えます。

まさにこれが、人々がWebプログラミングをこよなく愛する理由です。常に、挑戦があります。

アイコンフォントにおける中央揃え

矩形を揃えるのは比較的簡単ですが、テキストの整列は難しいものです。アイコンは矩形です、ではアイコンをフォントファイルにするとどうなるでしょうか？

何も揃えることができなくなりました。

アイコンのサイズも設定できていません。上の例では、すべてのアイコンが同じfont-sizeとline-heightに設定されています。ご覧のように、すべてのアイコンは異なるサイズ、異なるパディングで表示され、適切な位置揃えができていません。

多くの欠点があり、利点がほとんどないにもかかわらず、企業はアイコンフォントにすることを急いでいます。その結果がこれです。

左: macOS 10.14、右: macOS 10.15

電卓のアプリですが、演算子が垂直方向に揃っておらず、ぼやけていることに注目してください。これはすべてアイコンフォントに切り替えたせいです。

Appleはアイコンフォントにあまりにも熱心なので、QuickTimeの録画ボタンも台無しにしてしまいました。

拡大すると、よく分かります。左にすこし寄っています。

Appleのは他にもあります。

2つ目。

3つ目。

4つ目。

5つ目。

6つ目。

7つ目。

テキストの配置と同様に、配置の悪いアイコンも無限に存在します。

中央配置がずれているのは、スキルの問題

中央に配置できない問題の原因は、プログラマーだけではありません。デザイナーにもあります。

Apple Vision Pro:

アイコンの問題点は、見栄えを良くするためにはアイコンの形状を考慮しなければならないことがあることです。

左: 悪い中央揃え、右: よい中央揃え

三角形は特に注意が必要です。

場合によっては左すぎることもあります。

場合によっては右すぎることもあります。

高さがおかしいこともあります。

水平方向の中央揃え

中央揃えが難しいのは垂直方向だけと思うかもしれませんが、実は水平方向も難しいかもしれません。

単にいい加減なだけであることを除けば、これらに深い理由はないと思います。

これも。

これは意図的なのでしょうか?

アイコンもその影響を受ける可能性があります。

テキストも。

デザイナーができること

では、何が問題なのか。

すべてはフォントから始まります。テキストブロックのバウンディングボックスは現時点では次のようになっています。

問題は、このように見えることもあるということです。

もしくは、こうです。

では、テキストブロックのバウンディングボックスを中央配置にして、テキストを中央配置しようとするとどうなるでしょうか？

文字がずれてしまいます！
矩形が完全に中央配置になっていてもです。

しかし、フォントのメトリクスがアンバランスになることはあっても、そうなるとは限りません。実際には何が起こると思いますか？

実際には、一般的なフォントのほとんどはメトリクスがわずかにくずれてしまいます。多くの場合は、大幅にずれてしまいます。

%はcap-heightに対するものです

10%という数字は決して小さい数字ではありません。font-sizeが13だと、1pxに相当します。2xのスケーリングだと、2pxです。簡単に目立ちます。

基本的に、Windows上のGitHubでこのように見えるのはSegoe UIのせいです。

この解決方法は、簡単です。タイトなバウンディングボックスを作成すれば、中央配置は簡単になります。

Figmaを使用するのであれば、これはすぐにできます（※設定を変更する必要があります）。

フォントデザイナーができること

もしあなたがフォントデザイナーである場合、ascender − cap-height = descenderのようにメトリクスを設定することで、誰もが使いやすくなります。

このアイデアを視覚的に見てみましょう。

重要なポイントです！
アセンダとディセンダをこの境界線まで伸ばす必要はありません。画像で分かるように、たとえば私のアセンダのスペースはあまり活用されていません。数字を一致させるだけです。

Webでもネイティブでもこの問題を避けるために、すでにこのルールに準拠しているフォントを選ぶようにしましょう。SF Pro Text、Inter、Martian Monoはすでにこのルールに準拠しているので、余分な努力をしなくても完璧な中央揃えができます。

詳しくは、Font size is useless（翻訳: フォントのサイズ設定は役に立たない、問題点と解決方法）をご覧ください。

デベロッパーができること

デベロッパーからすると、もう少し注意が必要です。

まず理解しておかなければならないのは、使用するフォントを知っておく必要があるということです。もしフォントを置き換える予定がある場合は、残念ながらこの方法は機能しません。

たとえば、IBM Plex Sansを使用することになったとしましょう。IBM Plex Sansのメトリクスは下記の通りです。

font-sizeを設定するとき、設定するのはUPM（1emと等しくなります）です。しかし、テキストブロックが実際に占めるスペースはアセンダとディセンダの間のスペースです。

これは簡単な計算で、padding-bottom: 0.052em;でうまくいくことが分かります。

このように機能するはずです。

そして、CSSを適用するとこうなります。下記の画像はテキストを選択した状態で、テキストのバウンディングボックスを表示しています。

フォントに必要なメトリクス（アセンダやディセンダなど）は、Font Inspectorから取得できます。

これで基本ができたので、アイコンと整列させるためにvertical-align: baseline;を設定し、(iconHeight - capHeight) / 2だけ下に移動します。

これを実現するには、フォントのメトリクスとアイコンのサイズの両方を知っている必要があります。そうすれば、うまくいきます。

上記の画像はテキストを選択した状態で、バウンディングボックスが正しい位置とどれだけ重なっているかを確認したものです。

中央配置にアイコンフォントをお勧めしない理由

なんのために？

アイコンのために

どうやって使うのですか？

フォントにして使います

それは、やめてください！

アイコンには通常の画像フォーマットをお勧めします。画像には幅とか高さとかサイズがあります。

判断の助けになるよう、下記の図を用意しました。

Appleがアイコンフォントを使用して、チェックマークを矩形の中央に配置しようとどれだけ努力しているかをご覧ください。

こんなにも細かい数字で設定しても、失敗します！

2つの矩形を揃えることほど簡単なことはありません。そして、周囲に任意の空きスペースがあるテキストを整列させることほど難しいことはありません。

これは勝ち目のないゲームです。

視覚的な調整も必要

わたし達デベロッパーは、数学的に矩形を揃えることしかできません。そのため、手動で補正が必要なものについては、十分な大きさの矩形で囲み、その中でアイコンのバランスを視覚的に調整します。

すべての人ができること

ご注意ください。
中央揃えがおかしいと、せっかくのUIが台無しになります。

テキストを適切に配置すると、UIを魅力的にします。

たとえ、中央配置にするのが難しいとしても、ツールが不便でも、解決策を探さなくてはならないとしても、力を合わせれば、矩形を台無しにすることなく、矩形を別の矩形の中に入れる方法が見つけられると私は信じています。

私はバランスの取れた美しいUIの世界に生きたいと思っています。そして、あなたもそうだと信じています。

最終的に、すべてに価値があります。

終わりに

これがなければ、この記事は不完全なものになってしまうでしょう。

こうならないように、気をつけてください！