Smile Blog

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

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

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

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

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

全体の余白について。

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

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

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

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

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

 

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

最後に

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

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

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

関連記事

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

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

  3. img1

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

  4. J18ZCO3IPA

    ビジネスバッグは最後のオシャレ

  5. 0824_1

    ランチ交流会 At ONZORO’s BIERRÖSTEREI

  6. 1025_1

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

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

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

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

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

人気記事

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

最近の記事

  1. tukutte09 【作ってみた】本型収納箱「BOOKBOX」でアクセサリーボックス
  2. S__16556226 ITよろず相談会開催!ROUGH LABO扇町
  3. 1025_1 IT経営フォーラム2017 in 神戸
  4. 1018_1 大阪勧業展 2017 イベントレポート
  5. 1369e8024cf51a6585381076715a38e6_m EFO(エントリーフォーム最適化)とは?郵便番号から住所を自動入力させて使いやす…
2017年11月
« 10月    
 12345
6789101112
13141516171819
20212223242526
27282930  
PAGE TOP