独学・フリーランス・在宅・SNS疲れのWebデザイナーに
ビジネスの知識が加われば最強。自分の力で生きていけます。

Webサイトのレイアウト基本パターン図解 目的別・メリット・デメリットまとめ

Webサイトのレイアウト基本パターン図解 目的別・メリット・デメリットまとめ

こんにちは。フクモト学長(@WebcreatorsTips)です。未経験からフリーランス歴15年のWebデザイナーです。スクール運営 8年目になります。
詳しいプロフィールはこちら

Webサイトのレイアウトや情報の配置はWebサイトの目的やターゲットユーザーにより大きく異なります。

Webサイトの目的を果たすために、そして、ターゲットユーザーにとって情報を探しやすいWebサイトにするには、それぞれのレイアウトパターンの種類、特徴を考慮しながら全体のレイアウトを決めていきます。

以下に、それぞれのレイアウトのパターン・特徴・メリット・デメリットをまとめています。

独学Webデザインスクール卒業後の復習用にお役立てください。

レイアウト基本パターン

ここでは、6種類のレイアウトパターンを挙げてみました。
スマートフォン表示の際のレイアウトは一例として紹介しています。

Webサイトのレイアウト基本パターン

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

シングルカラムレイアウトの特徴とメリット・デメリット

シングルカラムは、縦に長いページをスクロールして情報を見せるレイアウトです。
様々なWeb環境で閲覧しやすいことからモバイルファースト時代の標準的なレイアウトとなっています。

シングルカラムに向いているサイト
  • ページ数が少なく、集中してコンテンツを読ませる目的のサイト
  • ランディングページ(LP)・キャンペーンサイトなど
メリット
デメリット
  • メインコンテンツに集中してもらいやすい。
  • レスポンシブに対応しやすい。
  • Webサイト内の他のページへの誘導がしにくい。
  • スマートフォンでは縦に長くなり、スクロール中に現在地がわからなくなる。

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

マルチカラムレイアウトの特徴とメリット・デメリット

【参考サイト】⇒ レシピ検索No.1/料理レシピ載せるなら クックパッド

マルチカラムは、メインコンテンツとサイドバーを横並びに配置するレイアウトです。
ユーザーはサイドバーのナビゲーションやバナーを利用してサイト内の情報を探します。

マルチカラムに向いているサイト
  • ショッピングサイト・ポータルサイト
  • ブログ
メリット
デメリット
  • 多くのページを見てもらいやすい。
  • ユーザーが目的のページを見つけやすい。
  • 情報量が多くなり、ユーザーの目線が散る。
  • レスポンシブ対応に工夫が必要。

サイドバー固定型レイアウト

サイドバー固定型レイアウトの特徴とメリット・デメリット

【参考サイト】⇒ au

サイドバーが固定され常に表示されるタイプ。
スクロールするとメインコンテンツのみが動きます。
スクロールの途中まで固定、ある程度のところからはサイドバーが追随するタイプもあります。

サイドバー固定型に向いているサイト
  • コーポレートサイト
  • ブランディング目的のサイト
メリット
デメリット
  • 誘導したいコンテンツへのリンクを常に表示できる。
  • ユーザーが目的のページを見つけやすい。
  • サイドバーに表示できる情報量が決まってくる。
  • レスポンシブ対応に工夫が必要。

カード型レイアウト

カード型レイアウトの特徴とメリット・デメリット

四角形をページいっぱいに敷き詰めるタイプ。
カード自体がリンクになるのでナビゲーションの役割も果たします。

カード型に向いているサイト
  • ギャラリーサイト
  • ブログ記事一覧ページ
メリット
デメリット
  • 一度に多くの画像を見せることができ、第二階層への誘導がしやすい。
  • ビジュアルでのアピールにより、印象的なデザインを作りやすい。
  • 一度に多くの情報が目に入るため、ユーザーの目線が散る。
  • Webサイトのイメージは画像の質に左右される。

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

フルスクリーン型レイアウトの特徴とメリット・デメリット

フルスクリーン型は、画面全体に画像や動画、タイポグラフィを表示するタイプです。
スクロールしてコンテンツを見せるパターンもあります。 

フルスクリーン型に向いているサイト
  • 情報量が少なく、ビジュアルでアピールするサイト
  • ブランディング目的のサイト
メリット
デメリット
  • ダイナミック・インパクト・リッチな表現が可能。
  • ビジュアルでのアピールにより、印象なデザインを作りやすい。
  • 自己満足のWebサイトになりやすい。
  • ビジュアルの質に左右される。

まとめ

Webレイアウトを決めるポイント
  • Webサイトの目的を果たすにはどのレイアウトが適しているか?
  • ターゲットユーザーにとって情報を探しやすいレイアウトはどれか?
  • 見た目のカッコよさや好みで選ぶのではなく、その特徴とメリット・デメリットを考慮すること。

2021年時点でPinterestでWebレイアウトの傾向を調査すると圧倒的にシングルカラムレイアウトが多い印象です。
様々なWeb環境で閲覧しやすいという点でこのレイアウトが採用されることが多いのでしょう。

初心者の方の練習材料としてもシングルカラムレイアウトがおすすめです。

一番シンプルなシングルカラムレイアウトのデザイン、コーディングからマルチカラム・タイル型・フルスクリーン型等に挑戦し、自分が構築できるレイアウトのバリエーションを作っていきましょう。

すべてできる必要はありません。

得意なレイアウトを持ち、それを軸に仕事として展開していってもよいのです。

Webクリエイターズスクール 学長 フクモトトモコ

【Webクリエイターズスクール】
学長 福本 智子

Webもデザインも未経験からいきなりフリーランス歴15年。
『仕事は自分で創りだす』をモットーに生きてきた50代。
Photoshop・WordPress・Webマーケティングが得意。

独学・Webスクールを卒業したのに仕事に繋げられない学習迷子さん、在宅・フリーランス希望の人を対象に「学んだ事を安定的な収入にする方法」をお伝えしてサポートしています。

関連記事

受講者の声

「動き出せない
あなたの背中を押します!」

組織に依存しない自由な働き方を
手に入れるためのオンラインスクール・オンラインサロンです。

スクール最新情報、フクモト学長の活動はメルマガで配信中~。