Design Journey

One soul One love One heart

最近のwebサイトレイアウトパターン

150913

スマートフォンやタブレットの登場で、さまざまデバイスからwebサイトを見る人が増えました。今後のwebサイトの制作には、マルチなデバイスに対応したレイアウト設計を考慮することが必要になります。

今回は、最近多くのwebサイトで利用されいるレイアウトパターンを4つ紹介します。

マルチカラムレイアウト

以前からあったパターンで、内容を載せるメインカラムと、ナビゲーションや他の情報を掲載する左右の1カラムまたは2カラムの合計2カラム以上で構成されています。
情報がグルーピングされることによって、情報量が多いサイトでも見やすく掲載されるようになります。
しかし、どうしても横長になってしまうので、スマートフォンで見ると文字が小さくなりすぎて視認性が悪くなってしまう懸念点があり、マルチカラムレイアウトを採用する場合は、PCやタブレットを前提したデザインであること、またスマートフォンからの閲覧も考えられる場合は、レスポンシブデザインにするか、スマートフォン用に別作成するかなど、注意点もあります。

 

150913_1

このレイアウトに向いているサイト

ポータルサイト、SNS、ブログ、ニュースサイト、ショッピングサイトなど(コンテンツが多いもの)

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

1カラムで各コンテンツを縦に並べていくレイアウトパターンです。
ゆったりとしたコンテンツ幅が確保できるので、自由度が高く、スマートフォンやタブレットなど横幅が変わってしまった場合もそれにあわせて表示され、マルチデバイスに対応できるのが大きな利点です。
縦方向にコンテンツが並んでいるため、1つ1つ商品の使い方や魅力などを説明していくサイトに最適です。
注意点としては、ページが縦に長くなってしまうので、ナビゲーションを固定で設置するなどして、ユーザーが行きたいページに簡単に移動できるようストレスの感じない導線設計が必要です。

150913_2

このレイアウトに向いているサイト

ランディングページ、ブログ、商品紹介サイト、キャンペーンサイトなど

Masonryレイアウト

ブロック状のコンテンツを縦横に積んでいく、インパクトのあるレイアウトパターン。
ウインドウサイズにあわせて、横に並んでいるコンテンツの表示数を変えられるので幅広いサイズのデバイスに対応できます。
また、オートロードなどによって無限スクロールで表示ができるので、スマートフォンでもストレスなくずっと見続けることが可能です。
注意点は、基本的に各コンテンツは読むことなくサラっと流れてしまうので、何かを読ませたいサイトには不向き。
画像などの目を引くものが表示されるサイトに向いているレイアウトです。

150913_3

このレイアウトに向いているサイト

画像検索サイトなど

フルスクリーンレイアウト

フルスクリーンで1コンテンツを表示するレイアウトパターン。
通常の画面スクロールではなく、スクロールでコンテンツを切り替えるなど動的に遷移させることによって、ユーザーに新鮮な体験をさせることができます。
HTML5のvideo要素やcanvas要素の登場により、Flash時代よりも派手な演出を表現することができます。
注意点は、1画面に表示できるコンテンツ量が限られているので、スクリーンサイズを考慮した作成が必要なこと、古いブラウザの対応が難しい点、UIの問題点などが挙げられます。ユーザーにわかりにくいページの遷移方法では、最初のインパクトだけで直帰率が大幅にあがってしまいます。演出に凝るあまり、ユーザーを惑わせてストレスのかかるサイトになるのは避けたいですね。

150913_4

このレイアウトに向いているサイト

キャンペーンサイトなど

まとめ

たかがレイアウトですが、webサイトのタイプによって適しているものとそうでないものがあります。
それぞれのメリットデメリットを知り正しい選択をして、せっかくのコンテンツを無駄にしないようにしたいですね!

シェアする
コメントする

コメントを残す