サイト構築・運営

ホームページのレイアウトって1列?それとも2列?

ウェブサイト(ホームページ)をつくる時、最初に考えておきたいことで、

これからつくるウェブサイト(ホームページ)は1列?それとも2列?にする?

というのがある。

なた自身の手で構築に取り組む時も、業者さんにお任せしてウェブサイト(ホームページ)の構築に取り組む時も、いまはこのテーマで悩む人が少なくない。

それが、このウェブサイト(ホームページ)は1列?それとも、2列?というテーマだ。

今回は、このテーマでお話を進めていく。

サイドバーを置くか?それとも、1列で見せるか?それ以上か?

あなた自身の手でつくるにしても、業者さんに依頼するにしても、まずはウェブサイト(ホームページ)の全体の枠組み、レイアウトから考えるのが普通だろう。

事業家の方のウェブ活用のお手伝いをしていると、「これから新たにウェブサイト(ホームページ)をつくりたい」という相談をよくいただく。そして、文章や画像などのコンテンツは揃っているから、これからレイアウトを組んで・・・という段階で、“ 全体のレイアウトをどうするか? ”はいつも少し時間をかけて考えるテーマだ。

そして、そんなタイミングでわたしがお伝えしている事柄がある。それが、

ウェブサイト(ホームページ)の設計段階で考えること

ウェブサイト(ホームページ)全体のレイアウトを考える

ウェブサイト(ホームページ)のデザインを考えていくプロセスで、最初に固めておきたいのがウェブサイト(ホームページ)全体を、1列で表現するか?2列で表現するか?あるいは3列以上で表現するか?

ということ。

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

最初に、1列というのは、文章や画像が上から下に流れるように一列で配置されているレイアウトのことで、スマートフォンで、ウェブサイト(ホームページ)を見た時、多くのウェブサイト(ホームページ)はこの1列のレイアウトで表示されている。同じようにパソコンで見た時も同じ1列にする表現方法で、これをシングルカラム(single column)レイアウトという。

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

マルチカラムレイアウト

次に2列というのは、メインとサイドの縦2列にする表現方法で、2カラム(2 columns)または、マルチカラム(multi-column)レイアウトという。

マルチカラム(multi-column)レイアウトは、複数のカラムで構成されたレイアウトという意味で、2列以上のレイアウトでつくられたウェブサイト(ホームページ)のことをいう。

マルチカラムレイアウト

ちなみに、サイドの方には、そのまま名前通りのサイドメニューや新着記事一覧などを設置することが多い。

3列以上のサイトはYahooなどのポータルサイトや画像を多用したサイトなどがある。

3列のマルチカラムレイアウト

世の中のウェブサイト(ホームページ)は何カラムでつくられている?

スマートフォンが登場する前までの主流は2カラムだったが、スマートフォンが登場して、多くの人がスマートフォンでウェブサイトを見るようになってからは、1カラムのサイトもよく見かけるようになった。というのが結論だ。

あとは、インターネット広告などのページ(通称:ランディングページ)は1カラムが多く使われている。

広告ページ(通称:ランディングページ)に1カラムを使う理由としては、上から順番に商品・サービスの良さを伝えていき、最後に申し込みをしてもらえるようないわば、“ストーリー”的な流れを作っているケースが多いからだ。

と、そんな話をしていると、クライアントさんからこんな質問をいただいた。

「わたしが良く見ているサイトはスマートフォンで見ると1列だけど、パソコンで見ると2列で表示されるんですけど…これって…」

レスポンシブウェブサイトデザイン

この場合は、そのサイトはベースが2列(2カラム)で制作されているサイトだ。それで、スマートフォンで見た時には1列(シングルカラム)で表示されるように設計されている。

これを、“レスポンシブウェブサイトデザイン”という。

レスポンシブウェブサイトデザイン

スマートフォンが登場した後の時代に制作された、個人のブログや企業サイトなどの多くはこの“レスポンシブウェブデザイン”の手法を採用しているウェブサイト(ホームページ)が多い。

これは、ウェブサイト(ホームページ)をスマートフォンから見ても、パソコンから見ても内容が見やすいように配慮された設計方法と言える。

そしていまは、ウェブサイト(ホームページ)をスマートフォンから見る人が多いので、スマートフォンから見た時の見た目には特に気を遣う必要がある。

パソコンから見ても見やすく綺麗なレイアウトで、スマートフォンから見ても同じように見やすく綺麗なレイアウトを実装するには、この“レスポンシブウェブサイトデザイン”が使い勝手がいいというわけだ。

いまはスマートフォンからウェブサイト(ホームページ)を見る人が80%以上

そう考えると、ウェブサイト(ホームページ)ってスマートフォンから見た時は1列(シングルカラム)で表示されるので、もう最初っから1列(シングルカラム)で制作すればいいんじゃないの?ということになるが、パソコンあるいはiPadなどのタブレットPCから見る人も一定数いるわけなので、そこは捨てきれないところだろう。

スマートフォンからウェブサイトを見る人が80%以上

なので、今一度、ウェブサイト(ホームページ)全体を1列で表現するか?2列で表現するか?あるいはそれ以上(3列以上)で表現するか?を考えてみたい。

ウェブサイト(ホームページ)全体のカラムは何カラムがいいのか?

わたしの結論から言うと、

サイトに掲載する文章や画像などのコンテンツが少ないうちは1列(シングルカラム)で制作・運営していき、コンテンツ量が増えてサイト内が充実してきたら、2列以上のマルチカラムを検討すればいい。

コンテンツ量が少ないなら、シングルカラム

コンテンツ量が多いなら、マルチカラム

これが多くの事業家の方のウェブサイト(ホームページ)構築を手掛けてアドバイスをして来たわたしが辿り着いたひとつの答えだ。

最初はワンカラム、コンテンツ量が増えてきたらマルチカラム

では、何故?コンテンツが少ないうちは1列(シングルカラム)なの?

それは、1列(シングルカラム)で制作することで、ひとつひとつのコンテンツをちゃんと見て・読んでもらえるように最大限の配慮につながるからだ。

どういうことかと言うと、例えば、1列(シングルカラム)であれば、ウェブサイト(ホームページ)の訪問者はコンテンツを上から下へ、眺めながら、面白い、必要だなと思う箇所はしっかり読み込んでいくことが出来る。

もちろん、途中で読み飛ばされることも多いだろうし、面白くないと思われたら、そこで終わりということだって多々あるだろう。

だけど、これが2列(マルチカラム)以上になれば、一つのコンテンツの隣にサイドバーやバナーなどが表示されるので、訪問者はサイドバーのメニューやバナーなどに目移りしてしまうことが多い。

サイドバーにあるコンテンツに目移りしてしまう

サイドバーにあるコンテンツに目移りしてしまったとしても、ウェブサイト(ホームページ)内に豊富なコンテンツがあれば、ユーザーも見たいと思うコンテンツに出会えて満足してもらえるかもしれないが、ウェブサイト(ホームページ)内のコンテンツ量が少なければ、訪問者が他に見たいと思えるようなコンテンツに出会えずに、あなたのウェブサイト(ホームページ)から離脱してしまう可能性が高くなる。

そうなると、せっかく一つのコンテンツを見てもらう機会が生まれたのに、その訪問者の興味を引いたコンテンツすらも見てもらえずに機会が消滅してしまう。

これが、サイトのコンテンツの量が少ないうちは、サイトは1列(ワンカラム)をお勧めする理由だ。

-サイト構築・運営
-,