其の12 左揃え、中央揃え、右揃えを適切に使い分ける | デザインってオモシロイ -MdN Design Interactive-

其の12 左揃え、中央揃え、右揃えを適切に使い分ける

2024.4.26 FRI

【サイトリニューアル!】新サイトはこちらMdNについて
タイトル画像

レベル初級其の12

左揃え、中央揃え、右揃えを適切に使い分ける


Webサイトにテキストなどの要素を配置する際の整列には、「左揃え」、「中央揃え」、「右揃え」がある。ページ上のすべての要素がこれらのうちの、どれかひとつのみで配置されていると、いずれのパターンでも見づらく、何となくバランスの悪いものになる。これら3つを上手に使い分けることで、見やすいWebサイトになるのだ。

  • 左揃え: 文字のレイアウトでは基本となり、かつ多用されるのが左揃えである。多くの場合ユーザーの視線移動は左から始まるので、左側が揃っていると見やすさや安心感が出てくるのだ。 また、文字だけに関わらず画像やナビゲーション、そのほかの要素も左端が揃っているように注意しよう【1】。
  • 中央揃え: テキストの始点が左端で揃っていないと視線移動の負担が大きくなり、読みづらくなってしまう。文章の内容を読ませたいコンテンツで、文字を中央揃えにしてしまうと非常に読みづらい【2】。 そのため、特別な意図もなく中央揃えを使用すると、ただ単にバランスの悪いサイトになる可能性がある。視線を集めたい場合や、区切り、アクセントをつけたいときなどに使用するとよい。
  • 右揃え :右揃えを使用する部分はWebサイトでは少ないであろう。通常、視線は左から右へ流れるので、右側が最後に視覚に入る。また、ユーザーの閲覧環境によっては、右側の一部はスクロールしないと見えないといったことも起こりうる。以上の点から、重要性の低いもの(フッター部分のコピーライト)などに使用するとよい。

左揃えのテキスト例
【1】基本は左揃え

中央揃えのテキスト例
【2】文字を中央揃えにすると視線移動の負担が大きく、見ていて疲れてしまう

お作法一覧へ
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在