web制作初心者必見!│Web制作会社のレイアウト構造関連コラム

Columnコラム

Web制作

web制作初心者必見!見やすいレイアウト構造

web制作初心者必見!見やすいレイアウト構造

2016/03/22
このエントリーをはてなブックマークに追加

Webサイトには、見やすく使いやすいレイアウトは無くてはならないものです。
ユーザビリティの悪いサイトでは、お問い合わせも増えません。
そのため昨今では、UI/UXデザイナーという職種も出てきています。
ちなみにですが、弊社にはIAデザイナーという画面設計をするスペシャリストがいます。

今回は、Web制作の初心者に向けて、見やすく使いやすいレイアウト作成のポイントについてご紹介します。

f-fujiwara201602191.jpg

レイアウトの意味

まず始めに、レイアウトについて知っておきましょう。

"レイアウト(英語: layout, lay-out)とは、デザイン(紙、ウェブ等)、建築設計、インテリア(展示会場・展覧会場設計、ショールーム設計などを含む)、書籍・雑誌・新聞などの編集等々において、何をどこにどのように配置(割り付け)するかということ、また、そのような配置(割り付け)をする行為も意味する。" ※wikipedia(https://ja.wikipedia.org/wiki/レイアウト)参照

Webサイトでも、各コンテンツの配置が重要になります。

配置によって、使いやすさ、見やすさも大きく変わってきます。

見やすい配置にするためには

見やすい配置にするには、情報の「整理」が必要になります。
「会社情報」「事業紹介」「お知らせ」「製品情報」など、大量の情報を載せなければならない場合だと、ターゲットユーザーによって、掲載の順番を考えることも必要になってきます。
それでは、ポイントを一つ一つ見ていきましょう。

情報にプライオリティをつける

上記でも軽く書きましたが、大量の情報を載せなければならない時には、順番付けをする必要があります。
「Webサイトには、コンテンツの掲載順番はこれ!」というものはありません。
Webサイトを作るにあたり、必ずターゲットユーザーや目的、最終的なゴールを決めます。
それに基づき、プライオリティが高いものから順に掲載させていきます。

例えば、
商品を扱っており、売上を伸ばしたいのであれば、商品の紹介をする必要があります。
自社を知ってもらいたいのであれば、事業案内を載せる必要があります。

このように、Webサイトの目的に応じて、プライオリティをつけることで、より伝わりやすくなります。

視線による導線設計

f-fujiwara201602192.jpg

ドキュメントを見る人の目線には3つパターンが有ります。

1つ目は、「斜め読み」。
人は、左上から右下へと視線を動かすことが一般的とされています。
そのため、大抵のサイトには左上にロゴがありますよね。
一番最初にロゴが入ることで、このページはこのロゴ(会社)なんだと認識させることが出来ます。

2つ目は、「Z型」。
これは、その名の通り、Zの形のように視線を動かします。
3つ目でも同じことがいえますが、人の視線が多く集まる範囲でもあります。

3つ目は、「F型」。
グローバルナビゲーションの下に、メインビジュアルを配置することで、F型に誘導することが出来ます。
この視線の場合、左上から左下にかけて大切な情報を載せることで、より効果的になります。

これらの目線を総合的に見ると、やはり左上部分に視線が集中しやすいです。
そのため、大切な情報はこちらに置くとより効果的に見せることができます。

ナビゲーションの掲載位置

ナビゲーションの掲載位置はサイトによってバラバラですよね。
ヘッダーの下にあるのが一般的ですが、サイドにもナビゲーションがある場合もあります。
どのナビゲーションがどう効果的なのかをまとめてみました。

ナビゲーションには、基本的に3パターンがあります。


1つ目は、「上部(ヘッダー下)にあるナビゲーション」。
こちらは、一般的な形でヘッダーの下に横一列に表示されているナビゲーションです。
掲載コンテンツが少なく、階層も浅いWebサイトの場合に適しています。


2つ目は、「サイドにあるナビゲーション」。
こちらは、サイド部分にあるナビゲーションです。
掲載コンテンツが多いですが、階層が浅いWebサイトに適しています。


3つ目は、「逆L字型のナビゲーション」。
こちらは、1つ目と2つ目を合わせたナビゲーションです。
掲載コンテンツが多く、階層も深いWebサイトに適していると言えます。

余白スペースの活用

情報が多かったり内容が詰まっているサイトを作りたいと思い、余白を空けずにびっしりとやりがちな方もいるのではないでしょうか。
しかし、それは逆効果です。
情報を詰めすぎて、余白がない場合、見づらくてストレスになったり、どのコンテンツ内容がどこまでつながっているのかなどわからなくなるためです。


関連性のあるコンテンツ同士は寄せてわかりやすくし、関連性が全く無い場合は、逆に離す必要があります。
そうすることで、より見やすいレイアウトになります。

まとめ

昨今では、様々なレイアウト手法で表現されているWebサイトがたくさんあります。
レイアウトの手法が多くあることで、表現方法も広がり、良いのですが、一方で見た目の部分だけが重要視されてしまうと、見やすさや使いやすさという最も重要な部分がなくなってしまいます。
見た目も重要ですが、ユーザーの立場になって表現することも大切だということを意識して制作しましょう。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作

text_totop