【 HP制作】レイアウト構造を少し変えるだけでWebコンテンツは見違える！

私たちは、普段生活する中で様々なWebサイトを目にしています。
そしてそのサイトを見て思う事は、個性あふれるサイトがありまたデザインも多種多様であるという事です。
しかしこの多く見えるデザインに着目してみると、幾つかのパターンに分類する事が可能です。
そこで今回、web制作初心者に必見の見やすく使いやすいレイアウト構造を観点に、様々なレイアウト手法を紹介します。

レイアウトとは

web制作を行う際に重要となるレイアウトですが、この意味を理解していないと良い物を作る事が出来ません。
レイアウトとは、デザイン、建築設計、インテリアなど何をどのように配置するかを決める事です。
そのためこのレイアウトひとつでイメージが大きく変わってしまうので、検討は充分に行う必要があります。
極端な話、レイアウトさえ固まってしまえば、あとはこれに合わせてパーツを組み合わせるだけです。
これはWebサイトでも同じ事が言えます。
Webサイトでは、各コンテンツの配置が重要となり、この配置によって使いやすさ、見やすさが変わります。

視線による導線設計

人間はドキュメントを見る際の習性として、3つの行動パターンが存在します。
1つ目は、斜め読みです。
人は、左上から右下へ視線を動かすのが一般的なので、一番最初に目に飛び込んでくる左上に、サイトで注目させたい事を配置するようにすると良いです。
例えば、会社ロゴなどがこれに該当します。
2つ目は、Z型です。
人は、左から右、そして下へZの形になるように視線を動かす習性があります。
3つ目は、F型です。
人は、左上から左下にかけて重点的に見る習性があります。
これらを総合的に纏めると、人は左部分に視線が集中する事が解ります。
そのため大切な情報は出来るだけ、左に配置すると効果が大きくなると言えそうです。
このように人間の習性を上手く活かしたレイアウトを目指すことがベストです。

余白スペースの有効利用

情報が多くなるとついつい実施してしまうのが、余白を空けずにびっしりと記載してしまう事です。
しかしこの使い方は逆効果で、情報ばかりで余白がないサイトは、ストレスになるばかりか、コンテンツを何処まで読んだかも解らなくなる結果となります。
そのため、関連性のあるもの同士は寄せ、関連性が全くないものは離すなどの工夫をすると、より見やすいレイアウトになります。

見やすい構造

コンテンツは、どのような情報を掲載するかによってターゲットが変わりますので、情報の整理は必要不可欠です。
もしも大量の情報を載せなければならない場合は、ターゲットとなるユーザによって掲載順番を考えることも必要です。
Webサイトには、コンテンツの掲載順番という明確なルールはありませんが、ユーザが何を求めているかは重要な要素です。
それに基づき、プライオリティが高いものから順に掲載させるレイアウトとする事で必然的に見やすい構造となります。
以下にそれぞれのレイアウトについて紹介します。

シングルカラムレイアウト

このレイアウトは、上から下に1列に並べるので、ユーザの視点の流れをコントロールしやすく、コンテンツ内の内容に集中させる事が出来ます。
またディスプレイの横幅に合わせてコンテンツの幅を変えやすくするメリットもあり、メンテナンスもしやすい特徴があります。
最近では、コーポレートサイトやキャンペーンサイトなど様々なwebサイトで活用されている人気の高いレイアウトとなります。

マルチカラムレイアウト

大きいメインコンテンツと小さいサブコンテンツに分けて、2列または3列で分割して配置するレイアウトです。
サブコンテンツには、メニューやバナーも置く事も出来るので、他ページへのアクセスがある場合に利用すると便利です。
このレイアウトは、昔から多くのサイトで使用されており、主にコンテンツの多いECサイトなどで大活躍しています。

カード型レイアウト

画面いっぱいにカードを綺麗に並べたように配置するレイアウトです。
人間は、左上から右下へ視線を動かす習性があるので、この習性を活かしたレイアウトです。
コンテンツを一覧にして多くの項目を配置する事が出来るので、ニュースサイトや商品を取り扱うECサイトで多く利用されています。
カードの形を変えたり、カードごとに大きさを変更すると、見栄えや雰囲気、使いやすさ、見やすさが大きく変わる特徴があります。

固定サイドナビゲーションレイアウト

メインとサブで二分して、左右どちらかのサイドに収容するレイアウトです。
一般的な使い方としてメインコンテンツには、ディスプレイの横幅に合わせて自由に伸縮出来るようにします。
そしてサイドのナビゲーションは、ディスプレイ上に固定して、スクロールを追従することでサイト内の回遊させて機能させます。
商品の詳細説明などを行う際に活用出来るレイアウトです。

まとめ

今回、幾つかレイアウトを紹介しましたが、他にも良いレイアウトは沢山あります。
Web製作者は、内容、目的、ターゲットとなるユーザを良く分析して、それぞれの特徴から効果的なレイアウトを選択する必要があります。
レイアウト一つ異なるだけで見た目が大きく変わるのがレイアウト設計です。
そのためWeb制作のプロに相談・依頼をすると、より効果的なコンテンツの作製が出来ます。