Web関連

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

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

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

レイアウトの意味

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

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

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

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

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

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

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

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

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

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

視線による導線設計

 

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

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

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

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

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

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

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

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

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

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

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

余白スペースの活用

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

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

まとめ

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

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

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

関連するサービス

ホームページ制作

ただ面白いだけではない…ゲーミフィケーションを活用したアプリ前のページ

海外ニーズが高まるネット通販次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. 新しい販売形態であるDtoCについて考えてみる
  3. AIに求められているものは、実は意外な物だった
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    Web制作工程におけるジオターゲティング(Geo Targeting)について考えてみる

    目次- 顧客セグメント(エリア別)を考える- ジオ(エリア)別…

  2. Web関連

    【デザイナー必見!】日本語Webフォントをダウンロードできるサイトまとめ

    皆さんはデザインにおいてフォントがどれぐらい重要か意識したことあります…

  3. Web関連

    その言葉、大丈夫?間違いやすい日本語9選

    人とコミュニケーションをとるとき、自分の話している言葉がうまく伝わらな…

  4. Web関連

    【バズるコラム】10年間記事を書き続けた無名ブロガーの「読まれるコラムを書きたい」

    なんとかサービスを認知させたい。購入させたい。ダウンロ…

  5. Web関連

    ショッピングカートシステムのまとめ

    ECサイト構築で必ずと言っていいほど使われるショッピングカートシステム…

  6. Web関連

    Webシステムを安く、早く、便利に使えるASPサービス

    こんにちは!IAの中條です!インターネットの普及により、世の中便利な技…

おすすめ記事

最近の記事

  1. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  2. 約1年間のウィズコロナ生活で大きく変わったもの
  3. スマートストアにより、小売業は激変する
  4. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  5. AI技術の普及により移動も安全に

アーカイブ

  1. Web関連

    正しいcanonical属性活用でGoogle評価を最適化!
  2. Web関連

    海外ニーズが高まるネット通販
  3. Web関連

    若い者には負けないぞ!Webでおじいちゃんたちが大活躍!
  4. Web関連

    騙されるな!ネットのデマで人が死ぬ時代。デマに振り回されないために
  5. Web関連

    エクセル管理はもうやめよう!プロジェクト管理ツール「Backlog(バックログ)…
PAGE TOP