用語集

ウェブデザインにおける導線の種類とその効果

用語集

ウェブデザインにおける導線とはWEBサイトへの訪問者をリンクやボタン、バナーなどのゴールに誘導するために描く線のこと。

この記事ではWEBサイトで使われるウェブデザインにおける導線の種類や効果についてもお話します。

まずはマーケ部の活動について知ってください!
マーケ部ではWEBで集客にするために必要なサービスを展開しています!
出来るだけ多くの企業に利用してほしいとの想いから、提供するサービスの価格はどのサービスも他社と比較して安く設定しています!
マーケ部のホームページ制作
「Locasite(ロカサイト)」はホームページ制作サービスです。低価格・高品質を第一に考え
企業・店舗・LP・ECのWEBサイトを
ご予算に合わせ最適なプランでご提案致します!
マーケ部のInstagramコンサル・運用代行
「Locasite Instagram」はInstagramコンサルティング・運用代行サービスです。
このサービスは「WEBサイトへの集客もやってほしい!」というお客様の声から生まれました。
現役のInstagram運用担当者が集客に結び付きやすいアカウント設計から運用方法まで
しっかりとコンサルティングします!

ウェブデザインにおける導線の種類

ウェブデザインにおける導線で有名なパターンが3種類あります。

Zパターンレイアウト


ZパターンレイアウトはWEBサイトの左上から右上、左下、右下とアルファベットのZを描くような導線であることからその名前がつけられています。

その他にもZパターンレイアウトから派生したものとしてZパターンレイアウトを何度も繰り返すジグザグパターンレイアウトやZを描かない三角形パターンも存在します。

ジグザグパターンレイアウト

三角形パターンレイアウト

WEBサイトのデザインで多く利用されるのはジグザグパターンレイアウトでしょう。

見てほしい要素を左上か右上に配置と効果的です。

Fパターンレイアウト


FパターンレイアウトはWEBサイトの左上から右上、その後また左端に戻り少し下がってまた右へというのを繰り返すため、Fの様な形を描くことからその名前が付けられています。

ポータルサイトで使われることが多いのがこのFパターンレイアウトです。

基本的には流し見が前提となるため、企業のホームページではこのFパターンレイアウトが採用されることは少ないです。

グーテンベルグダイアグラム


グーテンベルグダイアグラムはヨハネス・グーテンベルグによって提唱されたため、その名前がつけられています。

均一に配置された文章を見るときに左上から右下に視線が移動します。

そのため、WEBサイトを4分割した際に左上が一番重要なエリアで次に右下が重要なエリア、逆に右上、左下のエリアはあまり注目されないエリアとなります。

そもそも海外の印刷物で使われることの多いものであり、日本のWEBサイトではグーテンベルグダイアグラムが使われることは少ないです。

ウェブデザインにおける導線の効果


ウェブデザインにおいて導線は人間でいうところの骨格と同じで必ず決めておかねばならない部分です。

導線の定まっていないWEBサイトは煩雑なデザインとなっていることがほとんどです。
ウェブデザインにおける導線の種類でお話ししたような導線のパターンを知っておくことで、ウェブデザインの煩雑化を避けることができます。
また、ユーザーに対し適格にサービスを訴求することも可能となるため、その効果は大きいと言えるでしょう。

最後に

ここまでウェブデザインにおける導線の意味とその効果についてお話してきました。
今回、例に使わせていただいたYAHOO!JAPANのページはまさにZパターンとFパターンの合わせ技といった導線設計となっています。

導線をしっかりと設計することで売り上げに大きく差が出ます。

家を建てる時に建築士にお願いするのと一緒で、ウェブデザインはプロに頼むのが一番と言って間違いないでしょう。

マーケ部の運営会社ではLocasiteというホームページ制作サービスを提供しています。
もし、ウェブデザインに不安を覚えたらに不安があればいつでもお問い合わせフォームからご相談ください。

タイトルとURLをコピーしました