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

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

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

・全体の余白が詰まっていないか。
・写真の配置が視線の流れを妨げないか。
・色の彩度と明度は適切か。

全体の余白について。

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

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

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

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

ベタ塗りの背景を付ける時など、彩度が高すぎたり、明度が低すぎるとブロックごとに壁ができてしまいます。
意図的に分ける狙いがあれば問題ありませんが、ストレスなく閲覧できるように全体のバランスのチェックを心掛けましょう。

 

全てのデザインに上記のチェックが当てはまるわけではありませんが、
スムーズに閲覧する上での障害はなるべく無くしていく方が、親切な作りのデザインと言えるでしょう。

最後に

美しいデザインとユーザーが見やすいデザインを制作するために、
デザイナーには自分のルールを決めておき、提案できる力が必要となってきました。

私も自信をもって提案できるように、これからも勉強してまいります!

関連記事

  1. ランディングページで大切なこと。

  2. 納品ミスを防ぐ「クリエイティブチェック」について

  3. 石田三成CM

    話題沸騰!石田三成CM続編公開!

  4. 改めて、CSSについて調べました。

  5. ひょうご就職サミット2018

    今年も開催!! 集まれ!未来の幹部候補! 合同企業説明会迫る!

人気記事

  1. 安い!美味い! 【大阪天満・天神橋筋商店街の食レポ】
  2. mv
  3. タイ料理「天満3パクチー」
  4. 新入社員研修「伝える+伝わるセミナー」
  5. 2017年スタートアップトレンド (アメリカ版)
  6. blog03760x370
  7. 大阪天満天神橋筋商店街がっつりBEEF_KINGOFSTEAK
  8. クリアボタン
  9. IMG_6697

最近の記事

  1. 大内氏セミナー 「テレビ活用」7つの成功ルール 出版記念セミナーに行ってきました
  2. mv_puzzle 【作ってみた】jQuery UI sortable でデジタルパズル
  3. 0I9A6577ISUMI_TP_V 一人でも楽しめる!GWの過ごし方5選!!
  4. e3651f3e-ca5a-4f0a-8ccb-9b3ffec3c2f3 スマイルヴィジョン5月会社見学説明会のお知らせ
  5. ひょうご就職サミット2018 今年も開催!! 集まれ!未来の幹部候補! 合同企業説明会迫る!
2017年5月
« 4月    
1234567
891011121314
15161718192021
22232425262728
293031  
PAGE TOP