中央揃えvs左揃え!文字列のデザイン徹底比較!違いは目線と重心。

避けては通れぬ王道の安定感

こんにちは、読むだけでデザインを学べる!デザイン研究所です!

毎日デザインのポイントを解説するインスタアカウントを運営しております。

こちらのブログはインスタ投稿をより深く解説した記事になります!

今日のテーマ:中央揃えの文字配置

意味を持って中央揃えにしていますか?なんとなく中央揃えにしている人要注意!そして基本左揃えと言われてその通りにしている人も要注意!

この記事では中央揃え、そしてそれと比較した左揃えについて深く解説しているのでぜひ記事を読んで意味を持って配置をできるようにしていきましょう!

 

レイアウトに関してのまとめ記事を作りました。具体的なレイアウトのデザイン例が豊富です。ぜひご覧ください!

関連記事

デザインにおけるレイアウトのポイントを知ることで圧倒的に作りやすくなります。今回の記事ではそんなレイアウトに関してのデザインポイントを紹介!どんなデザインにもレイアウトは存在します。そんなレイアウトのよくある[…]

王道の文字列は中央揃えのデザイン!

王道の文字列を使った中央揃えのデザインサンプル

こちらが今回のデザインサンプルです。

王道のレイアウトである中央揃えとなっています!

過去投稿018の解説では基本的に左揃えだと解説しました。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

今回は避けては通れない中央配置のデザインポイント。かなりの安定感を誇る王道のレイアウトであることは間違いありません!

王道の文字列を使った中央揃えのデザイン解説

文章は鉄則の左揃えですが、今回のように文が少ない場合は中央配置・中央揃えで全く問題ありません。

ちなみに復習ですがなぜ基本左揃えなのかは人間の視線の流れによるためです。

中央揃えは長文が読みづらい

ただ中央揃えは王道の安定感であるためにWEBサイトのメインビジュアル、文字要素の少ないポスター、表紙など多く使われています。

小さく余白たっぷりに中央に配置する。これでかなりそれっぽいデザインにはなります。

しかし安定であるがゆえの面白味のなさも確かにあります。なので王道の安定感。ということであくまでも選択肢の1つとして覚えておくのが吉です。

 

気づけばレイアウトに関しても沢山の投稿をしてきました。先ほどの過去投稿018の左揃えに加えて過去投稿044と056の両端揃え、067の上重心、095の対角線など。ぜひ復習がてらご覧ください!

レイアウトに関しての記事一覧はこちら

 

中央揃えのデザインを他にも比較してみよう!

このブログ内にも中央揃えで作っているデザインはかなりあります。

そんなデザインを紹介していくので、そこから中央揃えのパターンを学んでいきましょう!

こちらのデザインでは4つの文章構造が中央揃えになっています。中央揃えにすることで安定感はかなりありますよね。

 

こちらは記載文が少ないから中央揃えにしているという典型的なパターンです。

このようにWEBバナーは記載文が少ないこと多く中央揃えにすることも多いです!

 

記載文が少ない、安定感が欲しい時は中央揃えにしてみる!

基本は左揃えをした上で、これらの時は中央にする選択肢あると良いかと。

WEBデザインのメインビジュアルや、WEBバナー、表紙などを作る時は中央揃えの選択肢はとても参考になるかと思います!

 

こちらの記事ではリスト式の文章を揃える裏技を紹介しているので合わせてご覧下さい。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

デザ研
次の章ではさらに中央揃えについて解説していきます!

 

 

中央揃えvs左揃え!文字列の比較をすると分かるデザインの違い。

基本左揃えっていうけれどいつ中央揃えにすればいい?

中央揃えというのは実は難しいです。というのも綺麗な余白がうまく作れません。

下のデザインは左揃えで作られる綺麗な余白です!

さらに下のデザインをご覧ください。

このように左揃えにすると簡単に綺麗な余白を作ることができます!

しかし中央揃えだとその綺麗な余白は作れないということですね。。。

 

左揃えvs中央揃えの文字列比較!結論は、、、

人間の目線の動きを考えると、左上から右に進み、左下の次の行に動いていきます。

その動きを考えると、目線の戻る位置が左揃えだと一定なので読みやすいわけです!

 

中央揃えに安定感があるのは、例えば積み木を重ねたときに、倒さずに積むには中心に重心を置きますよね?

これが左や右に重心を置くと積み木はたちまち倒れてしまう。

つまり左揃えが良いというのは目線の話で、中央揃えが安定感あるというのは重心の話なんです。

目線を考えると基本左揃え。そして重心を考えると基本中央揃えになるわけです!

 

デザ研
ですが重心より目線の優先順位が高い方が多いので基本左揃えというわけです!

 

 

複数文章の場合は目線の優先度が高く基本左揃えに、記載文少ない時は重心の優先順位が高く基本中央揃えになる

ということですね!これは必ず左!必ず中央!という話ではなく”基本”ですのでそこを意識すると良いです。

左揃え、中央揃えのショートカットキーは?▼
文字を選択した状態でcmd(ctrl)+shift+Lで左揃え、cmd(ctrl)+shift+Cで中央揃えになります。

中央揃えvs左揃え!文字列のデザイン徹底比較

いかがでしたでしょうか?中央揃えについてこれでもかってくらい解説しました。

中央揃えを悪くいってるつもりでなく(むしろ中央揃えで作ってるデザインも多い)、とりあえず中央揃えや、とりあえず左揃えな考えから脱することができると良いですね!

 

ちなみにレイアウトについてのデザイン参考書も読んだことがありますが、、、

今回のようなデザインのレイアウトについてもっと書籍で学びたいのなら「伝わるデザインの基本」がおすすめです!

特に初心者の方にオススメします。ベストセラーだけに他の書籍と比べてかなり分かりやすいのです。

もし初心者を脱出しているのであればレイアウトに関してはこの「レイアウト・デザインの教科書」がオススメです!

created by Rinker
SBクリエイティブ
¥2,530(2020/09/27 09:50:44時点 Amazon調べ-詳細)
・記載文が少ない安定感が欲しい時は王道の中央揃え!
・目線と重心の優先度を考慮して、左か中央かどちらに整列するか考えてみよう

 

 

この投稿をInstagramで見る

 

デザイン研究所(デザ研)1日1投稿(@designkenkyujo)がシェアした投稿


全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。

>インスタでデザインを学ぶ

インスタでデザインを学ぶ

デザインの見る目を養うインスタアカウントを運営中!初心者から脱するデザインのポイントを解説しています。だいたい毎日更新です!

CTR IMG