blog

BLOGブログ

ARCHIVES

かなぴょん

今からできる!老若男女だれからも読んでもらえるWebレイアウト術

0304-1

こんにちは。中西です。

 

気付けばすっかり3月ですね!

年々 時間の流れを早く感じていますが

今一番気になるのは桜の開花情報でしょうか。

満開の桜を見ると 春の気分がぐっと高まりますよね。

待ち遠しい!!

 

今回はメディア事業部さむケンが

日々工夫をこらす エフのオフィシャルサイトを例に挙げながら

デザインにおける読みやすい=読んでもらえるレイアウトのルールをご紹介します。

 

 

人は左から右に視線を動かす

0304-2

何当たり前のこと言ってんだ と思われるかもしれませんが

この当たり前を無視すると とてつもない違和感に襲われます。

上の画想を見て何か違和感、感じませんか?

 

これ、エフのメンバーページからキャプチャして少し加工をしました。

社長、相変わらずイケメンです。

 

ですが。。。

そう!進むと戻るが反対なんです!

(実際のページには入ってないですが、わかりやすくするために入れています)

 

どうしてこのボタンの配置に違和感が湧くかというと・・・

 

 

 

過去は左、未来は右

 

デザインのレイアウトをする上で

左側には 過去やネガティブ、右側には 未来やポジティブ といった意味があります。

 

 

0304-1

最初の家族が仲良く整列している画像。

あれも、真ん中のお父さんとお母さんを中心に そこを現在として考えると

子どもは小さい頃の過去の姿、

おじいちゃんおばあちゃんは これから二人に訪れる未来の姿

ということが すっと入ってきますよね。

 

よく 人間の進化の過程をあらわす図や

企業の成長グラフなども

時系列が左(過去)から右(現在・未来)に配置されていますが

これらは レイアウトにおいて場所の持つ意味を上手に使った表現だそうです。

 

画像とテキストを配置するときは

画像が左で、テキストが右 がストレスなく読めるレイアウトです。

 

0304-3

 

こういう事ですね。

 

 

 

 

縦のレイアウトは上から下

 

縦のレイアウトの場合は上から下に視線を動かします。

これはイメージしやすいですね。

イベントのポスターなども縦長の場合

下から上に見ていくレイアウトの構図はあまりないのではないでしょうか?

 

画像とテキストの配置はどうかというと

0304-4

これです。

フェイスブックやツイッターもそうですが

投稿記事のレイアウトって

画像が上に来て その下に文章がはいりますよね。

 

なぜかというと

人は上にあるものの方を ふわっとしたイメージで捉えがちになるそう。

読ませたい文章を上に配置してしまうと 大切な内容が頭に残らず

何が言いたいのか伝わりにくくなってしまうのです。

 

人の心理がデザインと深いかかわりがあるということは

以前のブログでもご紹介していますが

人の癖や心理を考えながらデザインを考えていくことの大切さを

改めて感じました。

 

 

視線誘導はZとFを意識して!

0304-5

ちなみに 視線の動き方で調べているとよく出てくるのがZ型 と F型。

視線の動きに合わせて 読ませたい、見せたいものを配置しましょうという

視線誘導のパターンです。

どちらの形も

左から右、上から下

このルールがばっちりはまっていますね。

 

 

 

今日ご紹介したデザインのルール、

普通じゃん!と当たり前に感じるかと思いますが

それだけ ルールに基づいてデザインされたものが

たくさん身の回りにあるということですよね。

 

先人たちの作り上げてきた考えられたデザインに

してやられたり、、、という感じです。

 

こうしたルールをポイントとして押さえておくだけでも

お客様により伝わりやすい ページが作成できるかと思いますので

ぜひ、商品ページ作成のレイアウトの参考にしてみてください!

 

 

———————————————————-

今回参考にさせていただいたサイトはこちら

http://wp.yat-net.com/?p=3633

http://07design.net/blog/?p=386

———————————————————-

 

それでは!

 

 

 

 

 

 

この人が書いた記事

かなぴょんの記事をもっと見る

関連する記事