最近のWebサイトにおける左端ぞろえの例

例えばGuardianの書籍ブログ。
こちらのサイトでは、6本の縦線に沿って各要素がきれいに配置されています。
洗練されていて、美しい印象を与えます。

揃えるときのコツは、ロゴやタイトルなど画面外の要素も一緒にそろえることです。
この場合は、"The Guardian"という文字の右端が写真の右端と揃っています。

シンプルなWebサイトで視覚的効果を確かめよう。

黒と白だけのシンプルなWebサイトで視覚的な効果を確かめましょう。
（画像雑にとったので、画像サイズがそろってないという不手際すみません）

ここまでガタガタにすると、もはや見ていて不快ですね。

左端を揃えました。
他の要素が足りないのでまだ洗練された印象は受けませんが、多少きれいになりましたね！

先ほどのGuadianの例にありましたが、縦のガイドラインは左端の一本だけでないことが多いです。
右端もそろっていたほうがきれいですし、複数の要素をまたいで一本の縦線が見えると美しくなります。

中央ぞろえの要素と左端ぞろえの要素を併用する場合もあります。
個人的に好きでないので例は出しません。

左端ぞろえで強い印象を出しているのが和らぐため、よほどうまくやらない限りは、グダグダになります。

ロゴの位置はおおよそ３パターンあります。

基本的にはこの中だと、画面内のガイドラインに沿わせて配置するのが安定です。
（Guadianのサイトほど高度なロゴ配置をするのは難しいです）

基本的には本文と左のラインをそろえる形になるかと思います。
画面の左端にロゴを置くパターンだと、要素の左端のラインをぶっ壊すことが多いです。
中央ぞろえは昔よく見ましたが、最近のサイトだとあまり見ません。
（おそらく左端揃えの効果を出したいからだと思われます）

左端揃えを崩しつつ、線を意識させているサイトできれいな例は、こちらのESTYLEのサイトです。
このサイトでは、左端揃えを意図的に崩す演出をしています。(Who we areのところです）

ただしこの場合でも、左端の線と文字の左端の線、この二本はくっきりと意識できるようになっています。

基本的なことですが、要素の整列はWebデザインを劇的に改善させます。
縦線の見えないサイトはデザイン面でかなり不利になっているように思います。

基本的なことですが、整列についてでした。