【基礎解説】Webサイトのページを構成する「カラムレイアウト」とは

1. 【カラムレイアウト】とは「情報の伝え方」である

まずはじめに「カラムレイアウトとは」からお教えします。

カラムレイアウトとは、レイアウトの段組みを指す言葉であり、Webサイトページの情報をどう整列させて表示させるかを意味します。

その整列を縦に１列に表示することを「１カラムレイアウト」といい、２列に表示することを「２カラムレイアウト」といい、同じように３列で表示することを「３カラムレイアウト」といいます。

どのカラムレイアウトのタイプにもメリット・デメリットがあり、使いどころも違います。

選ぶポイントとしては「ユーザーに何を優先的に見せ、かつどれが最も見やすくできるか」であり、カラムレイアウトは「情報の伝え方」を担っています。

「情報の伝え方」を間違えればぼやっとしたWebサイトになり、アピールしたいことや伝えたい情報が効果的に伝わりません。

要するに「不親切なWebサイト」となり、ユーザーの興味を引くことは難しくなります。

このような理由で、カラムレイアウトはユーザーに的確に情報を伝える手段として、とても大切な要素となります。

カラムレイアウト、すなわちユーザーへの情報のアプローチの仕方を１番最初に決めておくと、ページの情報配置（デザイン）も決めやすくて効率的でもあります。

逆にいえば、途中で変更するとすべて作り直しになることもありますので、しっかりと固めておきましょう！

作り直しになると開発期間が伸びますので、外注の場合はそのぶん費用が上乗せになります。そうならないように、レイアウト決めの段階で確固たるものにしておきましょうね！

ウエノ

では次に、それぞれのカラムレイアウトについてメリット・デメリット、そしてどのようなレイアウトを組むときに選ぶべきかをお話しします。

2. 【カラムレイアウト】の全集中タイプ「１カラムレイアウト」

「１カラムレイアウト」は、シンプルに縦に1列にして表示させたレイアウトです。

このウエノロジーブログもスマートフォンで表示したときは「１カラムレイアウト」表示を採用しています。

じつはどこのサイトでも、スマートフォンでは必ずと言っていいほどこの「１カラムレイアウト」が使われています。

小さな画面幅で最も見やすいのは、やはりこの縦１列表示である「１カラムレイアウト」だからです。

パソコンで画面が大きくなったとしても、シンプルで見やすさが変わらないのも特徴です。

このタイプは企業サイトから個人サイトまで幅広く使用されているタイプで、サブコンテンツとしていつでも画面右または左に企業情報やサイト運営者情報を表示しないのであれば、この「１カラムレイアウト」を選ぶと良いでしょう。

メリットとしては、ユーザーをメインコンテンツに全集中させられることです。

メインコンテンツ以外の情報を表示しないことで、ユーザーの視点をメインコンテンツだけに意図的に絞ることができるのが最大のメリットとなります。

とにかくメインコンテンツを見てほしい場合におすすめのカラムレイアウトです。

目移りさせずにしっかりとメインコンテンツを見てもらいたい場合に効果が高いです。何よりも事業紹介や、目玉商品を知ってもらうことが最優先ですからね！

ウエノ

デメリットは、サブコンテンツがないのでリンクが貼れずサイト内回遊率が上がりにくい、広告を入れにくい、コンテンツは下にずっと続いていくので、スクロールしてもらえないと提供したい情報を見てもらえないことです。

ということで、メインコンテンツに全集中させたい人におすすめなのが「１カラムレイアウト」となります。

3. 【カラムレイアウト】の要領良くタイプ「２カラムレイアウト」

「２カラムレイアウト」は、縦２列に幅広のメインコンテンツと、やや狭めのサブコンテンツを表示させたレイアウトです。

メインコンテンツにそのページの本文を表示し、サブコンテンツに企業情報やサイト運営者情報、広告、サイト内リンク、ショッピングカート、特に見てもらいたい（アピールしたい）コンテンツなどを要領良く表示したい人におすすめです。

こちらも企業・個人問わず幅広く使用されているタイプで、特にEC（通販）サイトやブログサイトに多いです。

サブコンテンツを使用したい場合はこの「２カラムレイアウト」を選ぶのが良いですね。

サブコンテンツは画面右でも左でも問題ないですが、人間の視点は左から右に移動するので左にあるコンテンツから見ます。

ですので、左により見せたいほうのコンテンツを表示させるのが妥当です。

メリットは、その汎用性の高さです。

メインコンテンツとサブコンテンツに切り分けることで、伝えたい情報を分離してスッキリと表示させることができます。

見やすさを保ちつつ、情報も多めに提供できるのが最大のメリットです。

メインコンテンツでそのページの本文を表示し、サブコンテンツでサイト内リンクを活用することでサイト内回遊率を上げられるだけでなく、離脱率の低減にもなるので上手く使いましょう。

デメリットは、メインコンテンツからサブコンテンツに目移りしてしまうので、本当に伝えたいことが伝わらないときがあることです。

また、サブコンテンツに力を入れすぎると、うるさくなりがちなので要注意です。

ユーザーは広告や自己主張の強いコンテンツを嫌いますので、アピールは程々にしましょう。自己主張が強くても、興味を引きやすい面白そうな広告であればクリックされやすいので、逆にそれを狙うのもアリです。

ウエノ

ということで、メインコンテンツとサブコンテンツを要領良く使いたい人におすすめなのが「２カラムレイアウト」です。

4. 【カラムレイアウト】のあれもこれもタイプ「３カラムレイアウト」

「３カラムレイアウト」は縦３列のレイアウトであり、真ん中にメインコンテンツ、両脇にサブコンテンツ、真ん中にメインコンテンツを表示させたレイアウトです。

とにかく１画面に多くの情報をギュッと凝縮させられるので、あれもこれも表示させたい人におすすめのレイアウトです。

ニュースサイトやyahooなどのポータルサイトなど、「情報をたくさん用意しておくから好きなところをクリックしてね」という方式にピッタリなレイアウトです。

メリットは、１画面にその潤沢な情報をたくさん詰め込めることです。

ユーザーがスクロールしなくてもある程度の情報を一気に見せることができます。

サブコンテンツが２つもあるので、上手く活用すればサイト内回遊率向上に大いに役立ってくれるでしょう。

デメリットは、情報量が多すぎてユーザーが迷子になりやすいことです。

そのためにもサブコンテンツを上手く活用して導線をしっかりと設計しましょう。

また、どこが大事な部分かわかりづらいので、ユーザーに気づいてもらうためにも何かしらの工夫が必要になってきます。

5. 【カラムレイアウト】はデバイスによって変えるべき

インターネットで調べものをするとき、使用するデバイスはスマートフォン、タブレット、パソコンなど、ユーザーによって違いますよね。

それぞれのデバイスでは画面幅が違い、例えばパソコンでは３カラムレイアウトで表示していても、スマートフォンでそのまま３カラムレイアウトで表示したらとてもではありませんが見づらくて仕方がありません。

字が小さすぎて読めませんし、そのためにいちいち拡大するのも面倒ですよね。

ですのでデバイスの画面幅によってカラムレイアウトを変えましょう。

これを実現するのは「レスポンシブWebデザイン」という技術であり、表示するデバイスの画面幅によって表示する内容を切り変えることができます。

例えば、「パソコンでは３カラムレイアウトでスマートフォンでは１カラムレイアウトにする」といったようなことが可能なのです。

通常、スマートフォンは画面幅が狭いので１カラムレイアウトで表示するのが一般的であり、タブレットやパソコンではある程度画面幅に余裕がでてくるので、２カラムレイアウトや３カラムレイアウトに変更するというやり方が主流です。

２カラムレイアウトや３カラムレイアウトを使用するサイトは、ほぼこの方法で設定しています。

ちなみに、例えば２カラムレイアウトで表示していたサブコンテンツは、１カラムレイアウトにしたときにどこに表示するのかというと、メインコンテンツの下です。

よくブログあたりで見かけると思うのですが、スマートフォンで見たときにまずはブログのメインコンテンツが表示されて、それが終わると「この記事を書いた人」のように執筆者情報がありますよね。

ユーザーに届けたい情報の優先順位を考えると、この順番で表示するのが最適ですのでこのようになります。

これがレスポンシブWewbデザインですね。デバイスの画面幅によって１カラムレイアウトと２カラムレイアウトを切り替えています。

もっと詳しく知りたい方はこちらをどうぞ。

2022-11-30

【基礎解説】表示領域によってデザインを切り替える「レスポンシブWebデザイン」とは

Web

みなさんはスマートフォンやパソコンなど、サイズ感のまったく異なるデバイスで同じサイトを見たことはありますか？デザインが変わりましたよね。これをレスポンシブWebデザインといいます。レスポンシブWebデザインについてのもっと詳しい解説や、適応させるときに考えるべき項目を３つお教えします。

読みに行く

Webサイトを制作する側としても、Webサイトを閲覧するユーザー側としても、見やすく機能的である方が良いので、画面幅に関係なく１カラムレイアウトでない場合はデバイスによってカラムレイアウトを切り変えましょう。

どのデバイスからカラムレイアウトを変更するかについては、これといった決まりはありません。完全にみなさん次第ですので、コンテンツの魅せ方や内容と相談して決めましょう。

ウエノ

6. 【まとめ】適切なカラムレイアウトを選び、機能的なWebサイトを作りましょう

カラムレイアウトは情報の伝え方を担う大切な機能であり、見やすく機能的なWebサイトを作るうえでは欠かせないものです。

どのタイプのカラムレイアウトを選ぶかは作りたいWebサイトに依存するので、まずは何を表示させたいのかを書き出してみましょう。

表示させたいものが決まれば、次はユーザーにどのようにアプローチしていくのかを考えます。

そのアプローチの仕方こそがカラムレイアウトです。

「ユーザーが見やすいように、かつ情報を受け取りやすいようにするにはどのカラムレイアウトが最適か」

それをコンセプトに選択すると良いでしょう。

それぞれのタイプのカラムレイアウトの特徴を活かして、機能的で素敵なWebサイトを作り上げましょうね！

また、Webサイトがどう顧客獲得に繋がるかを解説しているブログも書いています。

これからWebサイトを立ち上げる人は必見ですよ！

2022-11-21

【初心者向け】Webサイトが顧客獲得に繋がる仕組みを解説

Web

Webサイトはただ作っただけでは顧客を獲得できません。顧客を呼び込むにはWebサイトの作り方にポイントがあります。そのポイントについて解説します。これからWebサイトを立ち上げようと考えている方は必見です。

読みに行く

このブログがみなさまのお役に立てれば幸いです。

最後まで、ご閲覧いただきありがとうございました。

2022-11-26