【6日目】デザインにおける視線誘導のお話
余談だけど、今日はすごくいい実体験をしたのでメモ。
朝、お昼のお弁当を買いに行った時の話。
いつも通り「どーれーにーしーよーうーかーな」ってやっていると、
「500kcal以下のお弁当」というシールが目立つところにはられた新商品のお弁当が！
迷わずコレにしよう。と思う反面、”他のお弁当って全部カロリー500キロオーバーだったんだね"と思ったわけですよ。
でもでもー、和風のお弁当とかも合ったよなー。一体カロリーはどれくらいなんだ。
という思いが沸々と湧いてきて、調べましたよ！！
そして判明、500kcal以下のお弁当は前から販売している物にも3種類あるではないですか。
何が言いたいかと言うと、需要にハマったアピールが如何に重要かってことよ！
だって、シールが貼ってあるだけ。ただそれだけで、それを求めてる人はなんの疑いもなく買っちゃうのよ。他にも500kcal以下でもっと安い（そう、値段もやすかった）お弁当があるのにね。
比較ぐらいさせてよ。って思うよね。500kcal以下のお弁当全部にシールを貼ってくれれば、その中で比較できるのに。これぞまさに見事な誘導でした。
では、恒例の復習から、キーワード別デザインの特徴。
内容が多かったので、復習は「かわいい」と「にぎやか」にしようかな。
■かわいいデザインの特徴
・余白多め、重要な文字は大きめ
・かわいいを象徴するパーツを配置
・丸みを強調
・手描きやクレヨンの質感
■にぎやかデザインの特徴
・ところどころにグリットを無視した大胆な配置
・彩度の高めの暖色を中心に、配色はやや多め
・文字のジャンプ率はかなり高めでOK
・背景に大きめのパターンを敷き詰める
では今日のお勉強、視線誘導のお話。
webデザインでよく使用される、ユーザーの視線の動きを予測して、
効果的にコンテンツを配置する代表的なレイアウトの代表的なものを３つまとめてみよう。
■Zパターンレイアウト
左上→右上→左下→右下
紙媒体
■Fパターンレイアウト
左上→右上→左端に一旦戻る→下に移動→また水平移動
■グーテンベルクダイアグラム
左上から右して方向へ、チラチラしながら移動
この法則を踏まえ、効果的にコンテンツを配置すればいい。という単純なことではない。このユーザーの導線を踏まえた上で、コチラ側が見てほしい情報を提案したり、じっくり読んてみたくなるように配置するのが重要。
営業トークとかでもよく言われる、まさに「主導権を持つ」ってことだな！！
参考にしたサイトによくわかる説明があったのでメモメモ。
●動線→お客様の視線の動き
●導線→サイト製作者が動線を踏まえたうえで、お客様を目標に導くように仕掛けを施した動きの線…レイアウト。
もう一つ、配色による視線誘導で面白い記事があった。
それぞれちがった色で横並びのカラムを作成する時の配色の注意点。
（並列情報をさまざまな色で配置する場合）
左に誘目性の高い色を置くと、左から→に視線が流れる。
左から、２つめや3つ目に、この彩度が高く誘目性の高い色を置くとそれより
左側は読み飛ばされてしまう。
コレもメモしておこう。
今日はここまでにしよう。
▼参考にしたサイトたち
webデザインにおける視線誘導のおはなし | 07design.blog
ウェブページを見る目の動きは「F」パターン - GIGAZINE
