🧐

文字列の中央寄せ（センタリング）ルールについて

2020/09/25に公開

idea

TL;DR

”文字列”は、中央寄せをした瞬間”文字列”ではなく”図形”になる
そのため、文字列を中央寄せすることは現実的に”不可能”
「何があっても確実に桁数が均一になる…ならなかったら首吊る…レベルの文字列を中央寄せにするか／しないか」という選択肢を1回実施すればOK

よくあるよね

業務画面のレイアウト初期段階で大体こういう会話ありますよね。

「可変長の文字列は左寄せにしましょう。」
「日付だけは中央寄せしましょう。」
「でも天気は”晴れ”、”雨”とか内容が限られてるし、中央寄せでいいよね中央寄せしようよ。」
「一定桁までゼロパディング（０埋め）した数字は中央に寄せるの？それとも右寄せ？」
「寄せる位置は内容によるし、デザインは好みなんだから、だれかが全部見て統一感があればいいよね」

現場によっては喧々諤々しながらもレイアウトが無事に完成、システムを本番に送りだしますが、そのシステムをリニューアルする際にはまた別の誰かが「好み」によってそのルールを再検討することになります。

そこでは、

「可変長の文字列は左寄せにしましょう。」
「日付だけは中央寄せしましょう。」
「でも天気は”晴”、”雨”とか内容が限られてるし、中央寄せでいいよね中央寄せしようよ。」
「一定桁までゼロパディング（０埋め）した数字は中央に寄せるの？それとも右寄せ？」
「寄せる位置は内容によるし、デザインは好みなんだから、だれかが全部見て統一感があればいいよね」

と、全く同じ議論が繰り広げられるわけです。

なぜ文字列は”寄せる”のか

この記事には、文字という図形が連続したもの、つまり文字列がたくさん載っていますね。

お分かりいただけただろうか？

この記事の文字列はなんと……すべて”左寄せ”されているのです！！＼ｷｬｰｺﾜｰｲ!!／

なぜ”左寄せ”されているんでしょうか？

それは、”横書きの日本語は、左から読むもの”だからです。

次の図を見てください。

目が画面内をうろうろ動き回らないといけなくて、大変ですよね。
文字列を読み始める開始位置が左にそろっていることで、読む労力を下げることができます。

その労力を経ることによって体験をもたらす創作物などは、あえてばらつかせたりするのももアリですが、システムデザインの場合においては、本来の目的に寄与しない場合のほうが多いはずです。

なぜ数字は”右寄せ”なのか

たとえば「1,002,003,000」という数字があったとします。日本語だと”十億二百万三千”と読みますね。英語でも”One billion two million three thousand”と読むと思います（なぜ自信ない

「1,002,003,000」

「十億二百万三千」

「One billion two million three thousand」

数字列と文字列、同じように左から対応する情報が並んでいるように見えますね。

では、次の図の数字を読み進めていきましょう。

「1……」

あれ？なんでここで止まってしまうんでしょうか？ちゃんと2とか3とか数字が見えているのでそこまでは読めるはずですよね。

お分かりだと思いますが、一番右端が見えていないと、そもそもどの程度の大きさを表す数字なのか、読み取ることができないんです。

つまり、私たちは数字を”読む”ときは右から読んでいると言えます。そのため、数字は”右寄せ”が一番読みやすいのです。

それを他者に伝えるために再度文字や音声で表現しなおすとき、左から順番に表現しているだけなんです。

蛇足：”上寄せ”、”下寄せ”

これまでと同様の理論で、”縦書きの日本語”は”上寄せ”が妥当であるといえます。

”下寄せ”……するような言語はあるんでしょうか？ちょっと私は知らないですが、同様の理論で考えれば、この世に存在する可能性はゼロではないかと思います。創作的にも面白そうですね。

”中央寄せ”してみる

実際に中央寄せした図を見てみましょう。

これまでの考察を考慮すると、これは本来の”寄せる”機能を果たしていないことがわかります。中央から読み始める文字列ではないですからね。

では、次の図を見てみてください。

あれ？中央寄せしているのに整っていますね。違います、よく見てください。

これは、”中央寄せ”したから整っているのではなく、”中央寄せ”したことにより”左寄せ”（”右寄せ”も）と同じ結果を得られたことにより、整っているように見えるのです。（等幅フォントでない点はご容赦下さい……文句はGoogle図形描画に）

では”中央寄せ”が適している表現対象は何か

中央から見始めることが最適なものは、存在するんでしょうか。あります。この記事に何度も登場しています。

「図」です。図を見るときは、図の内容をとらえるために図の大枠を視界でとらえていると推察します。
補助線を引いてみましょう。

下に見進めていく際に、視線のばらつきが少ないですね。

各々図の内容が違うと、それぞれ「あ、違う図だ。もう一回捉え直さないと。」と、再度中央から画像の全体像を見始めますので、連続して図を見るときのプロセスに統一感があります。

これで、「図は中央から開始する」という考察が得られました。

文字列を”中央寄せ”にすると「読む」行為にたどり着くまでに時間がかかる

複数の文字列が中央寄せで並んでいると、すぐに見た目で「あ、中央寄せになっているな」とわかりますね。

私たちは日本語をよく使用しますので、”日本語の文章は左寄せ（もしくは上寄せ）”というルールがある程度しみついています。同様に、”図形・絵は中央寄せ”というルールも無意識にしみついています。

そのため、「中央寄せになっている一連の文字図形の集合」＝「図形・絵」だというのがファーストインプレッションになります。

で、その図の中身を細かく観察して初めて

「あ、この図よく見ると文字が並んでいる。これ文章（もしくは単語、文字列）として意味があるんだ。」

と理解でき、文章の内容を読み始めるわけです。

左寄せの文字列

[左寄せだとわかる]⇒[文字列だとわかる]⇒[文字列を読む]

中央寄せの文字列

[中央寄せだとわかる]⇒[図だとわかる]⇒[図の中に文字列が並んでいることがわかる]⇒[文字列だとわかる]⇒[文字列を読む]

明らかに文字列を読むまでのプロセスが多くなることがわかります。

この図を見てみてください。

これは何かのグラフのように見えますか？

違います。この記事の文章を中央寄せしたもの です。

まとめ

以上のことから、

「中央寄せすると、まずは図として捉えられる」

「左から読まれる言語の文字列は左寄せが最適である」

ということがわかります。

ただ、実際の仕事だと「余白が云々」言って中央寄せしたがる人がいます。その場合には、先だって登場した考察から、

「中央寄せすることによって左寄せ（右寄せ）と同じ効果が得られれば、中央寄せしてもよい」⇒「文字数（桁数）が必ず一致してくるのであれば、中央寄せしてもよい」

という逃げ道を用意すれば、大丈夫です。

これで、「好み」に依らない、システムデザインとして「正解」なルールができました。

左から読まれる言語の文字列は左寄せ

数値は右寄せ

図は中央寄せ

文字数（桁数）が必ず一致してくるのであれば、中央寄せしてもよい

おわりに

この記事の理論は完全に考察ですが、学術的アプローチがあればそれがありがたいですね。
長々お付き合いいただきありがとうございます。