WEBデザインをグッと良くするコツと考え方（デザインの重心編：その2）

前回の「デザインの重心編：その1」ではデザインのバランスが崩れて見える原因の１つとして「重心」についてお話ししました。

しかし、実際自分のデザインの重心がとれているかどうかを確認するには経験や知識も必要なのですぐには難しいところもあります。

ですので、今回は実際の素敵なデザインを元に実際どのように重心をとっているのかを具体的に見ていきたいと思います。

それでは早速見ていきましょう。

ベクスト株式会社

f:id:sutanto1983:20191129100141p:plain

階段状にすることで項目ごとにステップを踏み進んでいくということを視覚的に訴求できるデザインです。
また、右肩上がりのイメージは日本人に馴染みがあり「成長していく」という部分とも相性がいいですね。

階段状のレイアウトは左上のスペースができるので、そこを埋めることでグッと安定感が増します。
これは階段状のレイアウトの角度が急なほど効果を発揮します。

階段状の起伏あるレイアウトに水平な背景色を敷きまとめてしまうことで「水平」という印象が強くなり安定感のある印象になります。

ちょっと話がそれますが、見出しの下のリード文が少し背景にかかっているのもポイントです。
背景色を敷くことで見出しコンテンツが分離し関連性が薄れてしまう為、少し引っ掛けることで関連性があるということが印象付けられます。

ミュージッククリエイターマガジン BIG UP!zine

f:id:sutanto1983:20191224143438p:plain

右側だけに強めの色で背景色を敷き記事も少し見切れるようにすることでスライドの方向性を自然に強調できるデザインです。

このようなデザインの場合、見出しを真ん中に配置したとすると「見出し」「左側の背景の切れ目」「一番左の記事」と階段状になりガタついて見てしまうので、左揃えにした方がまとまりがよくなるのはもちろん横への広がりも印象づけられるのでスライドするコンテンツとも相性がいいです。

ただスペースがあるから配置してあるわけではなく、見出しが左揃えのであるからこそそこからまっすぐ自然な視線移動で目に入る機能面も考慮した配置です。

今回紹介はしませんでしたが、このサイトではコンテンツ始まりで左側だけに強めの色で背景色敷いています。サイトデザイン全体で見ると「上部で背景色を左側」「下部で背景色を左側」と左右バランス良く配置しているのも重心が取れて見えるポイントの１つだと言えます。

横浜スポーツタウンアクセラレータ

f:id:sutanto1983:20191224151302p:plain

今主流のあえて崩すブロークングリットレイアウトのデザインです。
適度な違和感を与えることでワクワクするような印象を与えられます。

片側のデザインだけ見ると整列されていない為崩れた印象になりますが、レイアウトを上下逆にし、右側に配置することで対称性が生まれ動きのある印象を保ちつつ左右バランスの取れたデザインになっています。
このように崩したレイアウトは揃えるところも作っておかないとただバラバラ印象になるので注意が必要です。