Smile Blog

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

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

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

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

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

全体の余白について。

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

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

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

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

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

 

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

最後に

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

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

関連記事

  1. 石田三成CM

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

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

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

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

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

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

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

  6. img1

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

  7. img1

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

  8. friends_obentou_suit

    ランチのインスタント麺からマーケティングを学ぶ

人気記事

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

最近の記事

  1. img2 柿の種より人の心を動かすキャッチコピーを考えてみる(その2)
  2. img_01 西宮の魅力発信
  3. 0831_01 「広告」と「広報」の違い
  4. 4a673b748a84f1f60a5efa69dac4dca8_s 入退場管理システム「スマイルゲート」ご紹介(イベント・セミナー編)
  5. img1 中山寺に行ってきました(※仕事です)
2017年9月
« 8月    
 123
45678910
11121314151617
18192021222324
252627282930  
PAGE TOP