文字の揃え方とは?左揃え・中央揃え・右揃え・両端揃えの使い分けを解説

文字の揃え方の基本

まずは文字の揃え方にどんな種類があり、それぞれどんな特徴があるのかを押さえましょう。

見本で見比べると、違いがよく分かります。

文字の揃え方とは

文字の揃え方とは、文章や見出しの各行を、枠の中のどの位置に合わせて並べるかを決めることです。

基本は左揃え・中央揃え・右揃えの3つで、これに行の両端をそろえる「両端揃え」を加えた4つを覚えておけば十分です。
揃え方は、書体・サイズ・太さ・間隔と並ぶタイポグラフィの5つの要素のうち「配置」にあたります(タイポグラフィとは)。

同じ文章を4つの揃え方で並べると、次のようになります。

左揃えは行の頭が一直線にそろい、中央揃えは左右対称、右揃えは行の終わりがそろっています。

両端揃えは、最後の行以外の左右の端がそろい、きっちりとした四角いかたまりに見えます。

揃え方で読みやすさが変わる理由

揃え方によって読みやすさが変わるのは、次の行の「読み始めの位置」が変わるからです。

横書きの文章は左から右へ読み、行の終わりまで来ると、視線を左に戻して次の行の頭を探します。

左揃えなら次の行の頭はいつも同じ位置にあるので、視線を迷わず戻せます。

一方、中央揃えや右揃えでは行の頭の位置が毎回変わるため、行数が増えるほど「次はどこから読むのか」を探す手間がかかります。

なお、縦書きの日本語は上から下へ、右の行から左の行へと読むので、ここでの話は横書きの場合です。

日本語の本文と両端揃え

日本語の本文では、両端揃えもよく使われます。

Webの標準を定める国際的な団体W3Cがまとめた「日本語組版処理の要件」でも、書籍の本文は行頭と行末をそろえるのが原則とされています(日本語組版処理の要件:3.8 行の調整処理)。
「組版(くみはん)」とは、文字の大きさや間隔、行の長さ、揃え方などを決めて、文章を読みやすく並べる作業のことで、もともとは本や新聞などの印刷物で使われてきた言葉です。

日本語の文字はほぼすべてが同じ幅の正方形の枠で作られているため、左揃えでも右端がほとんどそろい、両端揃えとの差は小さくなります。

差が出るのは、英単語や数字が混ざったときや、句読点・かっこで行の長さがずれたときです。

左の見本は左揃えで、右端は少しガタつきますが、文字の間隔は均一です。

右の見本は両端揃えで、右端はそろう代わりに、英単語の前後などで間隔が広がることがあります。

日本語はどの文字の間でも改行できますが、英単語は途中で区切らずに、単語ごと次の行へ送られます。
すると、その前の行は右端まで文字が届かずに余白が残り、両端揃えではその余白を行の中の文字や単語の間に割り振って右端まで伸ばすため、すき間が広がるのです。

英語の文章を両端揃えにすると単語の間に大きなすき間ができやすく、MDNでは、この不均一な間隔がディスレクシア(読字に困難がある学習障害)のある人などにとって読みにくさの原因になると説明されています(MDN:text-align)。

単語の間のすき間が行ごとに広かったり狭かったりすると、視線が一定のリズムで進まず、つっかえやすくなります。
すき間が上下の行で縦につながると、文章の中に白い川が流れているように見え、視線がそちらに引っぱられて、どこを読んでいたか見失いやすくなることもあります。

Webアクセシビリティの国際的なガイドラインWCAGでも、最も厳しい等級であるレベルAAAの達成基準で、テキストを両端揃えにしないことが挙げられています(WCAG 2.2 達成基準 1.4.8 視覚的提示(WAIC 日本語訳))。

WCAGは、年齢や障害の有無にかかわらず、誰でもWebの情報を利用しやすくすること(アクセシビリティ)を目的としたガイドラインです。英語などが多く混ざるWebの文章では、こうした理由からも左揃えが選ばれやすくなります。

文字の揃え方の使い分け

ここからは、左揃え・中央揃え・右揃えを、実際にどんな場面で使い分ければよいかを紹介します。

基本は「長い文章は左揃え、短い要素だけ目的に合わせて変える」と考えるとシンプルです。

本文は左揃えを基本にする

Webサイトの本文のように、何行にもわたる文章は左揃えを基本にしましょう。

行の頭がそろっているため、視線を迷わず次の行に戻せて、長い文章でも疲れにくいからです。

日本語の文章なら両端揃えにしても読みやすさは大きく変わりませんが、英単語やURLが多い文章では字間が空きやすいので、Webでは左揃えのほうが扱いやすい場面が多くなります。

中央揃えは短いテキストに使う

中央揃えは、見出しやキャッチコピー、ボタンの文字など、1〜2行程度の短いテキストに使います。

左右対称で整った印象になり、フォーマルさや特別感を出したいときに効果的です。

一方で、長い文章を中央揃えにすると、行の頭がばらばらになって一気に読みにくくなります。

左の見本は案内文をすべて中央揃えにしたもので、2行目以降の読み始めの位置を毎回探す必要があります。

右の見本は短い見出しだけを中央揃えにし、案内文は左揃えにしたもので、整った印象と読みやすさを両立しています。

ボタンの文字を中央揃えにするなど、要素ごとの見せ方はCTAボタンとは?でも紹介しています。

右揃えは数字や日付をそろえるときに使う

右揃えは、価格や数量などの数字をそろえて見せたいときに使います。

数字は桁の位置がそろっていると大小をひと目で比べられるため、行の終わりをそろえる右揃えが向いています。

左の見本は価格が左揃えのため、「480円」と「1,180円」の桁がずれて、金額を比べにくくなっています。

右の見本は価格を右揃えにしたことで、一の位がそろい、金額の差がすぐに分かります。

このとき、行全体を右揃えにしているわけではありません。
1行を「品名」と「価格」の2つの枠に分けて左右の端に並べ、価格の枠にだけ一定の幅と右揃えを指定しています(品名は左揃えのままです)。
CSSでは、たとえば次のように書きます。

.menu-item {
  display: flex;                  /* 品名と価格を横に並べる */
  justify-content: space-between; /* 品名は左端、価格は右端へ */
}

.menu-item .price {
  min-width: 5em;    /* 価格の枠に一定の幅を持たせる */
  text-align: right; /* 枠の中で数字を右にそろえる */
}

このほか、Webページのフッターに置く著作権表記や、書類の日付・署名など、行の終わりに置くのが慣習になっている要素にも右揃えが使われます。

CSSで揃え方を指定する方法

Webサイトでは、CSSのtext-alignというプロパティで文字の揃え方を指定します(MDN:text-align)。

次のコードは、役割ごとに揃え方を変える例です。

.title {
  text-align: center;  /* 中央揃え */
}

.price {
  text-align: right;   /* 右揃え */
}

.body-text {
  text-align: left;    /* 左揃え(横書きの初期状態と同じ) */
}

leftは左揃え、centerは中央揃え、rightは右揃え、justifyは両端揃えを表します。

なお、text-alignは行の中で文字をどこに寄せるかを決めるプロパティで、画像やボックスそのものを中央に配置する方法とは別の仕組みです。

たとえるなら、text-align: centerは「段ボール箱の中に入っている文字を箱の中央に寄せる」指定です。
一方、幅を決めたボックスにmargin-inline: auto(またはmargin: 0 auto)を指定するのは、「段ボール箱そのものを画面の中央に動かす」指定です(margin-inlineについてはレスポンシブタイポグラフィとはで説明しています)。

「text-align: centerを付けたのにボックスが中央に来ない」というときは、動かしたいのが中の文字なのか、箱そのものなのかを確認しましょう。

実践のポイント

文字の揃え方を決めるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 見た目の美しさを優先して、長い本文まで中央揃えにしてしまうことがあります。
  中央揃えは短いテキストだけに使い、3行以上になる文章は左揃えにしましょう。
• 1つのかたまりの中で、行ごとに揃え方がばらばらになっていることがあります。
  見出し・本文・ボタンなど、役割ごとに揃え方のルールを決め、同じ役割の要素は同じ揃え方にしましょう。
• 「ページ全体の揃え方は1つに統一しなければいけない」と考えて、価格表まで左揃えにしてしまうことがあります。
  統一するのは役割ごとのルールで、読ませる部分と見せる部分、数字をそろえる部分で揃え方を変えるのは問題ありません。
• PCでは1行に収まっていた中央揃えの見出しが、スマートフォンでは3行以上に折り返して読みにくくなることがあります。
  スマートフォンでも見出しが短く収まるか、実際の画面で確認しましょう。
  長くなる場合は、スマートフォンでだけ見出しの文字サイズを一回り小さくする(PC・スマホの文字サイズとは)、見出しの言葉を短くする、2行を超えそうな見出しははじめから左揃えにする、といった方法があります。

よくある質問

• Q. 日本語の本文は左揃えと両端揃えのどちらがいい?
  A. どちらでも大きな問題はありません。
  印刷物の本文は両端揃えが一般的で、Webでは英単語やURLが混ざっても字間が乱れにくい左揃えがよく使われます。
  迷ったら左揃えを選び、両端揃えにする場合は英単語の前後に大きなすき間ができていないかを確認しましょう。
• Q. 中央揃えの文章は何行までなら大丈夫?
  A. 決まった行数はありませんが、ひと目で読み切れる1〜2行程度に収めるのが無難です。
  それ以上になる場合は、見出しだけを中央揃えにして本文は左揃えにするなど、役割を分けましょう。
• Q. 揃え方で視線の動きはどう変わる?
  A. 左揃えは行の頭に沿って視線が縦にまっすぐ流れ、中央揃えは中心に視線が集まります。
  ページ全体で視線をどう動かすかについては、視線誘導とは?で解説しています。

まとめ

文字の揃え方には左揃え・中央揃え・右揃え・両端揃えがあり、読みやすさと印象を大きく左右します。

長い文章は左揃え(日本語なら両端揃えも可)、見出しなど短いテキストは中央揃え、価格などの数字は右揃え、というように役割ごとに使い分けるのが基本です。

まずは自分のデザインで中央揃えになっている部分を探し、3行以上の文章があれば左揃えに変えて、読みやすさを比べてみてください。