Podcast: Embed
Webで購読する Apple Podcasts | Spotify | Amazon Music | Pandora | RSS | More
ラウンドナップWebコンサルティングの中山陽平です。
自社のホームページを見て、「何となく分かりづらい。でも、どこを直せばよいのか分からない」と感じることはありませんか。自分でページやバナーを作っていると、情報は入っているはずなのに、どうもしっくりこないことがあります。
そんなときに見ていただきたいのが、視線の流れです。私はもともとDTPやWebのデザインをしていましたが、どこに目が留まり、その次にどこを見るかを意識すると、見直す箇所を見つけやすくなります。
まず、ページを開いたときにどこへ目が行くか確かめる
情報を上から順に置けば、その順番で読んでもらえるとは限りません。写真や色の強い部分に先に目が行くこともあれば、途中にある線で読む流れが止まってしまうこともあります。
試しに、ページを表示した状態で一度目を閉じて、もう一度開いてみてください。その瞬間、最初にどこを見たでしょうか。そこから次にどこへ目が動いたでしょうか。二、三回やってみると、自分が目を向けやすい場所に気づくことがあります。
ここで確かめたいのは、伝えたい順番と、実際に目が向く順番が合っているかです。最も読んでほしいメッセージよりも、別の飾りや写真にばかり目が行くのであれば、配置を見直す手掛かりになります。
ただ、自分は内容を知っていますから、これだけで初めて訪れる方の見方まで分かるわけではありません。まず自分で違和感を探すための方法として使っていただければと思います。
写真や文字の配置で、次に読む場所へつなげる
例えば、人の顔が写っている写真です。誰かが横を向いていると、その人が見ている先が気になりませんか。ページの中でも、写真の人物が向いている方向に、読んでほしいメッセージを置くという考え方ができます。
逆に、人物がページの外側を向いていて、メッセージが反対側にあると、写真と文字がうまくつながらないこともあります。同じ写真、同じ文章でも、組み合わせ方によって見え方は変わるんですね。
文字のそろえ方も見てみてください。中央ぞろえにした場合と、左にそろえた場合では、次の行へ目を移す感覚が違います。フォントや色も含めて、一つ一つの部品を目立たせるだけでなく、その先の情報へ自然に目が進むかを見ることが大事です。
どちらの配置がいつでも正しい、という話ではありません。実際のページで比べながら、読んでほしい内容に目が向くかを確かめていきましょう。
区切り線や色の強い部分で、読む流れを止めていないか
分かりやすく区切ろうと思って入れたものが、かえって流れを止めることもあります。白い背景の中に太い黒い横線を引くと、そこが強い区切りに見えて、「この下にはもう続きがないのかな」と感じられる場合があります。
情報を分けることは必要です。ただ、下にも読んでほしい内容があるなら、線を薄いグレーにしたり、点線にしたりすることで、つながりを保ちやすくなることもあります。
濃い色の背景に白い文字を載せた部分も、同じように見直してみてください。目立たせたつもりでも、画像や広告のように見えて、本文として読まれずに飛ばされることがあります。
目立っていることと、読まれていることは同じではありません。強く見せた部分に本当に目が留まるのか、その後の文章まで読み進められるのか。色や線を変える前後で、ページ全体の流れを見ていただきたいと思います。
自分で整えたら、第三者がどこで迷うかを見る
こうした確認は、デザイナーに作ってもらったページを自分たちで更新するときにも使えます。まず土台をきちんと作ってもらい、その上に情報を足す際に、視線の流れが崩れていないかを見るわけです。
そして、一通りできたら第三者にも見てもらってください。「ここでページが終わったと思った」「この部分は広告だと思って読まなかった」。こういう反応は、自分だけではなかなか気づけません。
私自身、デザインをしていたときに、見てもらった方の一言で「そうか、そこがそう見えるのか」と気づいたことがあります。作っている側には当たり前でも、見る側には違って見えるんですね。
制作会社へ相談するときも、「何となく分かりづらい」から一歩進んで、どこで目が止まり、何を見落としたかを伝えると、話が具体的になります。自分で解決までしようとしなくても、違和感の場所が分かれば相談しやすくなります。
見栄えだけでなく、必要な情報が届くかで判断する
きれいに整っているページが、どんな会社にも、お客さんにも合うとは限りません。少し手作りの感じがあるほうが、その会社らしさや人の雰囲気を伝えやすい場合もあります。
ですから、視線の流れを確認するときも、見た目を洗練させることだけを目的にしないでください。自社のお客さんが、知りたい情報に気づき、内容を理解できるか。そこに戻って考えることが大切です。
「何を、どの順番で読んでほしいか」を決めてから、今のページを見直してみましょう。その順番と実際の見え方にずれがあれば、写真の向き、文字の配置、線や背景色など、どこを調整すればよさそうかが見えてきます。
難しいデザインの理論を一度に覚える必要はありません。まずは自社のページを一つ開いて、最初にどこへ目が行くかを確かめるところから始めていただければと思います。
Podcast: Embed
Webで購読する Apple Podcasts | Spotify | Amazon Music | Pandora | RSS | More
配信スタンド
- Apple iTunes 公式ストア Podcast（おすすめ）
https://itunes.apple.com/jp/podcast/zhong-shan-yang-pingno-non/id750899892 - GooglePodcast
http://bit.ly/google-podcast-jp - Spotify
https://open.spotify.com/show/0K4rlDgsDCWM6lV2CJj4Mj - Amazon Music
Amazon Podcasts
■Podcast /Webinar への質問は
こちらのフォームへどうぞ。
https://forms.gle/Lvy4nVauyJ2SRhJM7
運営・進行
株式会社ラウンドナップ（ラウンドナップWebコンサルティング）
代表取締役・コンサルタント 中山陽平
Webサイト：https://roundup-inc.co.jp/
