Smile Blog

スマイルヴィジョンスタッフが運営する広報ブログ

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

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

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

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

全体の余白について。

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

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

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

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

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

 

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

最後に

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

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. kokuyo_1

    働き方セミナーに参加してきました

  2. 1025_1

    IT経営フォーラム2017 in 神戸

  3. img1

    中山寺に行ってきました(※仕事です)

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

  5. 1018_1

    大阪勧業展 2017 イベントレポート

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

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

  7. img1

    MG研修 at スマイルヴィジョン

  8. 「いま、ふたたびの奈良へ。」より

    スランプ脱出法 - 「そうだ奈良行こう。」~長谷寺編~

人気記事

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

最近の記事

  1. RoastBeefMAZESOBA 肉々しい社長ランチ会(1月)
  2. S__4505603-1024x768 コワーキングを経営する事になった話2-料金を考える
  3. 1490862068447-1-1024x768 コワーキングを経営する事になった話1-名前を決めました
  4. NsNb7ndCeV3FkP61515754521_1515756417 【WordPress】MW WP Formを使用したお問い合わせフォームの作成
  5. db43c292d744f2ab9bcec5c9e2012172_m 【WordPress】プラグインの使い方(インストール・有効化・停止・削除)
2018年2月
« 1月    
 1234
567891011
12131415161718
19202122232425
262728  
PAGE TOP