【WEBデザインを独学で学ぶ】整列の原則を学ぼう!

どーも。学長です。

先日に続いて、今日もレイアウトの基礎を話したいと思います。

 

【WEBデザインを独学で学ぶ】

整列の原則を学ぼう!

 

サイトは見栄えがいいのに越したことはありません。

いくら内容がよくても、画像の場所や文字の配列がバラバラだといざユーザーが訪問しても、

見ずらいことを理由に記事を読んでくれません。

 

 

今回は、整列について学びたいと思います。

それでは授業を始めます。

 

整列の原則とは?

各要素の位置の大きさ、色、形状などを揃えることを「整列の原則」と言います。

整列の原則を使うことで、先日話した近接の原則と同様に訪問ユーザーにとって、

サイトが理解しやすい構成になります。

 

 

近接の原則で情報のグループ化と関連化を行った後は、さらにユーザにとって、

印象の良いサイトにするために、各要素を揃える作業をしましょう。

 

揃えることは大事

揃えることは非常に簡単です。

注意しなくてはいけないのは、ただ揃えるだけでは意味がないです。

各要素の関連をを視覚化するよう注意が必要です。

 

揃え

 

要素を揃える方法には「左揃え」「センター揃え」「右揃え」の3種類があります。

揃え方によって、サイトの印象が非常に大きく変わってきます。

目的に応じて、揃えるようにしましょう。

 

 

注意しなくてはいけないのはセンター揃えを使う場合、

一見綺麗に揃っているかのように感じますが、全ての要素がセンターに揃ってしまうので、

要素の視点(左端)が不揃いになってしまいます。

よって、視線が不規則になってしまい、閲覧性が下がってしまいます。

 

 

またセンター揃えは文字が多いページに使ってしまうと、大変読みにくいページになります。

センター揃えを使う場合は、その点に注意して使うようにしましょう。

 

見えない力線を使う!

各要素をセンスよく見栄えが良いように配列させるには、

視線の基準となる、「見えない力線」を意識していかないといけません。

 

soroe

 

例えば「写真画像とテキストの上辺」、「タイトル文字と本文テキストの頭」、

「関連性の高い写真の大きさ」などの端を揃えたり、色も揃えるようにしましょう。

 

 

この見えない力線を使うことで、単に見栄えが良くなるだけではなく、

各要素に対する秩序をもたらし、ユーザーにとって情報を理解しやすいサイトになります。

「センター揃え」の場合、見えない力線は使う事ができないので注意が必要です。

ページを作るときは、必ずユーザー目線に立って作っていくように心がけましょう。

 

 

さて今日の授業はここまでです!

不明な点などありましたら、学長まで連絡ください!

 

ABOUTこの記事をかいた人

1979年生まれ群馬県在住のグラフィックデザイナー兼ウェブデザイナー。 2014年からデザイン情報発信サイト『デザガク』を開設。 主にクチコミとウェブからの集客で受注し、一切営業しないスタイルを貫いている。 制作実績では3,000万円以上稼ぐアフィリエイターのLP、数千万の売り上げを達成した教材LP、さらに、メジャー格闘技団体「RIZIN」のスポンサーポスターや、ブランディングデザインにおいても好評を得ている。 公益社団法人日本グラフィックデザイナー協会(JAGDA)正会員。