Web関連

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

0

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

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

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

関連するサービス

ホームページ制作

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    採用希望者数を増加させたい

    自社のリクルートサイトを最大限に活用し、多くの人材を獲得総合求人サ…

  2. Web関連

    デジタルマーケティングのインターネット広告について

    最近いろんなところで聞こえるようになってきたデジタルマーケティングはた…

  3. Web関連

    市から配信されるメールシステム

    いきなりですが、みなさんに質問がございます!住んでいる市の情報がメール…

  4. Web関連

    ホームページ制作会社も注目するLINE公式アカウントがおもしろい!

    みなさんLINEは利用していますか?今や友人や家族とのコミュニケーショ…

  5. Web関連

    趣味で生活!!youtuberという職業

    休日に料理をしようとチャーシューを作ったIAの加藤です。…

  6. Web関連

    売れるECサイトをつくるためには天気を見よう!

    ECサイトの売り上げを上げるための方法について触れていきたいと思います…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    ECサイトの売上を向上させたい 第1回目
  2. Web関連

    果たしてDMPの導入は本当に敷居が高いのか?
  3. AIさくらさん

    自然災害から人を守るさくらさん
  4. Web関連

    乗り換えるか迷う!「格安SIM」「格安スマホ」の基礎知識
  5. Web関連

    3DギャラリーFlash
PAGE TOP