デザインが窮屈に感じたら!ページ全体の流れ感を意識する。 | DXシステム開発・WEB制作 SmileVision|大阪のWEBシステム開発 SmileVision

社員ブログ デザインが窮屈に感じたら!ページ全体の流れ感を意識する。

2年目社員の ふじわらです。
今日は私がweb制作をする中で意識している「デザインの流れ感」について触れたいと思います。

webサイトの閲覧では上から下に、また左から右に視線が誘導されるため、その流れを止めてしまうと情報の整理がつかず、ユーザーの離脱率が高くなる恐れがあります。
そこで、見やすく整理されたデザインにするため、全体に以下のチェックを行っております。
・全体の余白が詰まっていないか。
・写真の配置が視線の流れを妨げないか。
・色の彩度と明度は適切か。

全体の余白について。

ここでは要素と要素の間隔というより、背景の余白が適切に取れているかを確認します。
人の視線は近くにあるものに自然と寄るため、関連性の強いものとの余白は狭め、「ユーザーの視線の流れをコントロールする」余白を確保するようにします。

写真の配置が視線の流れを妨げないか。

被写体のポーズや構図によってユーザーの視点が変化していきます。
素材が適切でも写真自体の余白が十分取れていなければ、窮屈な印象が生まれてしまいます。写真の中でも汚れや服のしわなどで、見せたい部分を妨げるような情報は見えないようにブラッシュアップが必要です。

色の彩度と明度について。

ベタ塗りの背景を付ける時など、彩度が高すぎたり、明度が低すぎるとブロックごとに壁ができてしまいます。
意図的に分ける狙いがあれば問題ありませんが、ストレスなく閲覧できるように全体のバランスのチェックを心掛けましょう。
 
全てのデザインに上記のチェックが当てはまるわけではありませんが、
スムーズに閲覧する上での障害はなるべく無くしていく方が、親切な作りのデザインと言えるでしょう。

最後に

美しいデザインとユーザーが見やすいデザインを制作するために、
デザイナーには自分のルールを決めておき、提案できる力が必要となってきました。
私も自信をもって提案できるように、これからも勉強してまいります!