ノンデザイナーズデザインブックに語られるような、デザインの基本に「整列」があります。
これは、レイアウト上の各要素の端の線（左から右に各文字だと左端が多い）をぴったりそろえて、線を意識させることで視覚的に効果を与えるデザイン手法です。
中央ぞろえを採用しない場合、基本的にはサイト内のすべての要素をそろえることになります。
最近のWebサイトにおける左端ぞろえの例
例えばGuardianの書籍ブログ。
こちらのサイトでは、6本の縦線に沿って各要素がきれいに配置されています。
洗練されていて、美しい印象を与えます。
揃えるときのコツは、ロゴやタイトルなど画面外の要素も一緒にそろえることです。
この場合は、"The Guardian"という文字の右端が写真の右端と揃っています。
シンプルなWebサイトで視覚的効果を確かめよう。
黒と白だけのシンプルなWebサイトで視覚的な効果を確かめましょう。
（画像雑にとったので、画像サイズがそろってないという不手際すみません）
悪い例
ここまでガタガタにすると、もはや見ていて不快ですね。
そろえた例
左端を揃えました。
他の要素が足りないのでまだ洗練された印象は受けませんが、多少きれいになりましたね！
両端ぞろえ、中央ぞろえについて
先ほどのGuadianの例にありましたが、縦のガイドラインは左端の一本だけでないことが多いです。
右端もそろっていたほうがきれいですし、複数の要素をまたいで一本の縦線が見えると美しくなります。
中央ぞろえとの併用について
中央ぞろえの要素と左端ぞろえの要素を併用する場合もあります。
個人的に好きでないので例は出しません。
左端ぞろえで強い印象を出しているのが和らぐため、よほどうまくやらない限りは、グダグダになります。
ロゴの位置について
ロゴの位置はおおよそ３パターンあります。
- 画面左端
- 中央
- 何らかの画面内のガイドラインに合わせて配置
基本的にはこの中だと、画面内のガイドラインに沿わせて配置するのが安定です。
（Guadianのサイトほど高度なロゴ配置をするのは難しいです）
基本的には本文と左のラインをそろえる形になるかと思います。
画面の左端にロゴを置くパターンだと、要素の左端のラインをぶっ壊すことが多いです。
中央ぞろえは昔よく見ましたが、最近のサイトだとあまり見ません。
（おそらく左端揃えの効果を出したいからだと思われます）
揃えるのを崩す場合もある（ただし、線は意識させる）
左端揃えを崩しつつ、線を意識させているサイトできれいな例は、こちらのESTYLEのサイトです。
このサイトでは、左端揃えを意図的に崩す演出をしています。(Who we areのところです）
ただしこの場合でも、左端の線と文字の左端の線、この二本はくっきりと意識できるようになっています。
整列についてまとめ
基本的なことですが、要素の整列はWebデザインを劇的に改善させます。
縦線の見えないサイトはデザイン面でかなり不利になっているように思います。
基本的なことですが、整列についてでした。