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

関連記事

  1. Web関連

    規制に苦しむ、パチスロ業界の動向について

    パチスロ業界は、時代の流れの影響を受けやすい業界だと言われています。年…

  2. Web関連

    ひと目に触れないクラッキング対策について

    今回はWebサイトのセキュリティについて書きたいと思います。時事ネ…

  3. Web関連

    新米ママをサポートする、子育てIoT新技術

    IoTという言葉が生まれて、国内でも2年ほど前から、様々な企業がこの分…

  4. Web関連

    ストレージ仮想化ってなんですか?

    こんにちはシステムエンジニアの小森です。ある日、誰かが言いました。…

  5. Web関連

    もう利用した?「omni7(オムニセブン)」から学ぶ

    今回のテーマは、オムニチャネルです。 オムニチャネルを簡単に説明すると…

  6. Web関連

    ダンサリ、してますか。

    季節はもう4月。新入社員のみなさん、入社おめでとうございます。今回は…

おすすめ記事

最近の記事

  1. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  2. 人が対応するのが正しいの?DX(デジタルトランスフォーメーシ…
  3. 人間拡張って聞いたことがありますか?デジタル化が背中を押して…
  4. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  5. 【初心者向け】ここに注目!スマートフォン用バナーを作成しよう…

アーカイブ

  1. Web関連

    レスポンシブWebデザイン(RWD)の特徴まとめました
  2. SNS関連

    便利なSNSの陰には危険がいっぱい!?
  3. Web関連

    【ホームページ制作】GUIの歴史を辿ってみた
  4. Web関連

    アンノウンマーケティングで顧客行動をマーケティング利用する
  5. Web関連

    顧客満足度向上ってどうすればいいの?仕事をとおして学んだこと
PAGE TOP