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

関連記事

  1. Web関連

    数年後には常識!?開発を変える『APIエコノミー』とは

    最近案件でもAPIを使用して開発をすることが本当に多くなりました。一か…

  2. Web関連

    MAツールでまだ接点のない見込み客にアプローチ!?

    MAツールを勉強していると、日本人には常識の観点から作れなかったツール…

  3. Web関連

    基本中の基本!webで行う品質を上げるための対策3か条!

    Webサイトのデザインを制作しているとよくあるのですが、いかにカッコイ…

  4. Web関連

    もはやモノだけではない!話題のシェアリングエコノミーまとめ

    「シェアハウス」や「シェアオフィス」が流行り始めてから、シェアという言…

  5. Web関連

    「ビデオコンテンツ」が主流!デジタルマーケティングの今を見る

    みなさんはテレビはよく見られますか?私はよく見る方ではありますが、…

  6. Web関連

    短時間でクオリティが上がる、Webデザインのテクニック

    こんにちは。育児に家事に大忙しのディレクター、望月です。W…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    ニックネームで人気者になろう。
  2. AI関連

    AIがアンチエイジング市場に大きなビジネスチャンスを生む
  3. Web関連

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

    ちょっとした工夫で変わる?!webサイト制作でも役立つ室内撮影時のライティング方…
  5. AI関連

    【人工知能(AI)×インバウンド】人工知能によるホテル業界のインバウンド対策
PAGE TOP