Webサイトのデザイン考察
デザインをどうするか
Webサイト制作におけるレイアウトでの留意点を考察する。
配置
コンテンツを配置する際の基本は、縦の順序と横の順序に対する考慮である。縦に関しては、より重要度の高いコンテンツが上になり、横に関しては、左側がより重要度が高くなる(人間の視線の動き方に起因する)。この点に留意しhtmlを書く必要があり、また記述順序はSEOに影響を与える点も考慮する。
余白
文字の多いコンテンツでは、行間をどれくらい取るかで読みやすさが変わってくる。一般的に、line-heightが150～160%だと読みやすいとされる。また、コンテンツ同士の距離は、閲覧者に対し大きな意味を持つ。似たようなコンテンツは近くに配置し、異なる意味合いのコンテンツは余白を大きくすると、意味を捉えやすくなる。ページ全体で統一感のある余白の取り方をすることで、安心感を与えられる。
デザイン4原則
一般的なサイト制作では、下記の4つの原則を意識してデザインを行なう。
- 整列原則：左揃えが基本。中央揃えは格式ある伝統的なもののみに使う。右寄せは署名など、極めて稀。
- 近接の原則：関連性の高いものは近づけ、そうでないものは遠ざける。
- 対比の原則：色彩や大きさに強弱を付け、意味を持たせる。
- 反復の原則：同じ順序で並べ、統一感や安心感を与える。
色の配分
色数は3色が基本。2色や4色もあるが、多すぎるとデザインが難しくなる。
- 25% メインカラー：そのサイトの特色を打ち出すメインの色。これを決めた上で下記を勘案する。
- 70% ベースカラー：明るすぎると字が読みにくい。無彩色(モノトーンまたは薄い茶色)がよいとされる。メインカラーの明度を上げた色が良好。
- 5%アクセントカラー：色相環においてメインカラーから最も離れた色を使うと鮮やかになる
色相が同じでトーンは違う、あるいはトーンが同じで色相が違う色を同じ配分で置く。
感想
自分はデザイン系への関心が低く、今まで作ってきたサイトもデザイン面で突出したものはない。しかし、サイト制作においてデザインは必ずついて回る。基本だけでも把握しておかないと、評価軸を持ち得ない。
デザインは見栄えの良さだけの問題ではなく、可読性や機能に対しても支配的である。理論だけではなかなか身に付かないので、今後も様々なサイトを目にし、考察を続けることでスキルアップを目指したい。
