お電話
ホームページのご相談・お見積り

スタッフブログ

サイトの目的に応じて、適切なレイアウトを考える。

2019/05/07 デザイン

ドコドアでは、サービスの向上・品質の均一化のため、ディレクション・デザイン・コーディングなどの役割に合わせて考えられた【ガイドライン】に基づいてWebサイトを制作しています。

今回のブログでは、その内容を一部抜粋した形でご紹介させていただきます。

Webサイトにおけるレイアウトとは

Webデザインにおいてのレイアウトとは、「情報を視覚化する作業」のことをいいます。

具体的にはWebサイト上に掲載する写真や画像、文字などのさまざまな構成要素に視覚的表現を取り入れることです。視覚的表現を取り入れると、単に並べただけでは伝えきれない、Webサイトに含まれる多くの情報・目的を素早く、かつ的確にユーザーに伝えることができます。

Webページを構成する要素


Webページは主に、4つの領域から構成されています。

  1. ヘッダー領域
  2. ナビゲーション領域
  3. コンテンツ領域
  4. フッター領域

以下、4つの領域の概要です。

  1. ヘッダー : サイト自身を象徴するロゴや検索フォームなどが配置されます。
  2. ナビゲーション : 目的のページに移動しやすいよう他のページのリンクが配置されます。
  3. コンテンツ : サイトの主軸となる部分です。
  4. フッター : ナビゲーションや会社情報・アクセスマップなどが配置されます。

基本レイアウトパターン

Webサイトの基本形である代表的なレイアウトパターンを紹介します。

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

サイトコンテンツを設けず、1つのカラムを縦に並べていくレイアウトです。
スマートフォンやタブレットの横幅を考慮したレスポンシブWebデザインとの相性も良く、スクロールを重視することによって生まれたレイアウトとも言えます。

2)マルチカラムレイアウト

ページを複数の列に分割して配置するレイアウト。
メニューとメインコンテンツに分割する2カラムや、バナーエリアなどを設けた3カラムが代表的です。シングルカラムが主流になりつつある近年においても、実用性が高い事から多くのWebサイトに活用されています。

3)グリッド型レイアウト

カードを並べたかのように特徴的で、1つのページではなく小さな情報の集合体といった方が分かりやすいレイアウト。レスポンシブwebデザインと相性が良く、画像を多く見せる事が可能な為、ECサイトやSNSなどで力を発揮します。

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

イメージ写真や動画をブラウザの幅いっぱいに映し出したデザインのレイアウト。写真のギャラリーサイトやブランドイメージを前面に出したい各種プロダクトの紹介ページに使われるケースが多いです。

スクロールビュー重視の考え方

現在はスマートフォンの普及率の増加により、スクロールビューが重視されています。

これまでのWebサイトではファーストビューに必要な情報を詰め込むという事が基本であり、ファーストビューに必要な情報がないと感じたユーザーは、サイトを離脱してしまうと言われてきました。しかし、近年SNSなどの浸透により、ユーザーは画面スクロールに対する抵抗感がなくなり、Webサイトが表示されたらとりあえず下にスクロールする人が劇的に増えています。

求められるWebサイトの在り方

以上、Webサイトのレイアウトについてご紹介しました。

ここで挙げた4つのパターン以外にも様々なレイアウトを見かけることがありますが、いずれにしても作るサイトの目的に応じた適切なレイアウトを考え、ユーザーに情報を届けることが大切です。
Webサイトは印刷物などのグラフィックデザインと異なり更新性の高さ、情報の即時性などからトレンドの移り変わりが早いため、トレンドを抑えつつ、使いやすさを重視したデザインを提案しましょう。

トレンドを取り入れたデザインがターゲット層に合わない場合は、あえてトレンドを無視することもあります。Webサイトのデザインではターゲット層を考慮しながら流行の表現をうまく取り入れることで、ユーザーに新鮮な印象を持ってもらえるレイアウトにまとめていきましょう。

川田 奈々子が書いた記事

新着情報

スタッフブログ