creatersnest

自然な視線導線を生みだすレイアウト、「Z」と「F」の活用例まとめ


「Zの法則」「Fの法則」という言葉をご存知でしょうか?
ウェブサイトや紙媒体を閲覧する際、人の視線はアルファベットの「Z」または「F」の字に沿ったように動きます。
そのため、「Z」や「F」の字に沿った導線でコンテンツを配置する手法が、コーポレートサイトやECサイトを中心に取り入れられています。
そんな「Zの法則」「Fの法則」を効果的に活用したデザインのサイトをご紹介します。

Zの法則

日経電子版 広報部

http://pr.nikkei.com/

メインビジュアル横に申込ボタンを配置して、効果的に誘導しています。

 

NAVITIME

http://www.navitime.co.jp/

検索フォームのすぐ隣に広告を配置しています。

 

Perfume Official Site

http://www.perfume-web.jp/

告知やSNSなど、アピールポイントを自然な流れで配置しています。

 

大阪ステーションシティ

http://osakastationcity.com/

横並びバナーリストが特徴的な導線配置です。

 

ねこのきもち

http://pet.benesse.ne.jp/cat.html

今月号への誘導ボタンをメインビジュアル横に設置しています。

 

よなよなの里

http://yonasato.com/ec/

会員限定商品など目を引くポイントを右側に配置しています。

 

ファンケルオンライン

http://www.fancl.co.jp/

よく使用されるログイン・会員登録フォームへのリンクを右側に配置しています。

 

らくらく水の宅配便

http://www.mizutaku.net/

こちらもログイン・会員登録へのリンクを右側に配置しています。

 

カエルパルコ

http://kaeru.parco.jp/

こちらはバナーや店舗情報などを左に配置しているパターンです。

 

COMPEDIA

http://compedia.jp/

3カラムレイアウトで特色の違う内容を配置しメリハリをつけています。

 

Fの法則

YouTube

https://www.youtube.com

ナビゲーションから各カテゴリが綺麗なFの字状に配置されています。

 

ベルメゾンネット

http://www.bellemaison.jp/

左上にまとまったナビゲーションが特徴的なレイアウトです。

 

森永乳業株式会社

http://www.morinagamilk.co.jp/

1カラム部分は背景色を変えてあるので見やすいデザインになっています。

 

BEAMSオフィシャルサイト

http://www.beams.co.jp/

左サイドに固定のナビゲーションが特徴的な導線配置です。

 

セレッソ大阪公式オンラインショップ

http://shop.cerezo-osaka.jp/

こちらも左サイドの固定ナビゲーションです。

 

ピーチ・ジョン

http://www.peachjohn.co.jp/

左上の目立つ位置にバナーを設置しています。

 

セレクトスクエア

http://www.selectsquare.com/

検索フォームを左側に配置しています。

 

minne

https://minne.com/

こちらもカテゴリ検索が左側に配置されています。

 

THE PUBLIC × VOYAGER ぼくらの時代のデザインと技術 – プロジェクト | 2.5D

http://2-5-d.jp/thepublic/

左サイドエリアにもコンテンツを配置しています。

 

インテリアの街

http://happy-room.net/

画像を左に配置してF字導線を作っています。

 

さいごに

こちらに紹介したサイト以外にも様々なサイトで「Zの法則」「Fの法則」が取り入れられています。
レイアウトを考える際には、ぜひ参考にしてみてはいかがでしょうか。
見た目の雰囲気だけではなく、視線導線などユーザーにとって効果的な見せ方まで考えてデザインできるとよいですね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


habutako

未経験で入社したWEB制作会社で、マークアップエンジニアとして2年間の修行を積む。現在フリーランス。 ウェブデザイナーと動物ボランティアという2足のわらじを履いて、パソコンとアニマルシェルターと愛猫の間を行き来する毎日。

Next ArticleWordPressをインストールしたらまず最初にしておくべき設定