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

Web

みなさんこんにちは!

「Webサイトエンジニア」×「臨床検査技師」のハイブリットおじさんこと、ウエノです。

今回はWebサイトまわりの知識である「カラムレイアウト」について解説します。

みなさんも調べものをしているとき、いくつかのWebサイト、たとえば僕のようなブログサイトを見てまわりますよね。

スマートフォンではわかりづらいですが、じつはWebサイトのページレイアウトには大きく分けて3タイプに分類できるのです。

スマートフォンでよく見るメインコンテンツを1列に列挙していくタイプや、メインコンテンツに本文を載せてその左右どちらかに著者情報などのサブコンテンツを表示するタイプなど、サイトによって違います。

これを「カラムレイアウト」といいます。

Webサイトのレイアウトを決めるときに、1番最初に決めるのがこの「カラムレイアウト」であり、「カラムレイアウト」の正しい知識を持っていれば、Webサイトを「機能的なWebサイト」にすることができます。

なぜなら、ユーザーに優先度の高い情報から意図的に届けることができ、なおかつ導線設計もしっかりと行えるからです。

ユーザーにとても優しいですよね。

このブログでは「カラムレイアウトとは」からはじまり、そのタイプを3つ紹介して、それぞれについてのおすすめの使い方やメリット・デメリットを解説します。

このブログを読み終えると、みんなさんに合った的確なカラムレイアウトを選ぶことができ、機能的なWebサイトを作れるようになります

誰もが自分のWebサイトを持ち、これまで培ってきた知識をブログで発信することによって情報共有が盛んな世界を目指している僕としては、ぜひみなさんにもそのような知識を持っていてほしいです。

ということで、最後まで読んでカラムレイアウトについてしっかりマスターしていってくださいね。

ではどうぞっ!

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

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

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

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

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

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

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

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

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

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

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

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

ウエノアイコン

ウエノ

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

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

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

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

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

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

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

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

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

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

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

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

ウエノアイコン

ウエノ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ウエノアイコン

ウエノ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web

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

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

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

ウエノアイコン

ウエノ

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

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

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

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

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

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

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

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

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

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

Web

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

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

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

関連ブログのご案内

Web

アコーディオン機能を使えばQ&Aのような全員が全員見なくても良い回答部分を隠すことができる、Webサイトにおいてとても便利な機能です。設置するとそんなテキストだらけになりがちなの部分をスッキリさせることができるのが特徴です。今回のブログでは、このアコーディオン機能についての概要、メリット、デメリット、実装時のコツを解説します。

Web

Webサイトで定番となりました「スライダー機能」について解説します。スライダー機能とは時間ごとに次々と画像をスライドする機能であり、その見た目のカッコよさや複数の画像をまとめて配置できるなどの特徴から定評のある機能です。しかし大きなデメリットもあります。基礎的な知識からデメリットとなる実装時に気を付けたいポイントなどを詳しく解説します。

Web

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

TOPへ戻る