最近、ワンカラムレイアウトのHPデザインが増えましたね…。の巻

学生の皆様、ご卒業おめでとうございます。

今回から記事を書くことになったスタッフの1人、kishiです。

 

先週突然、社長から「今度、WEBlueのブログ始めるから隔週で記事書いてね~」と言われ、

ブルーな私。

隔週も何を書けば良いのだーー!

と、ロートルな脳みそを再起動…。

WEBLUE 周南市 ホームページ制作

 

その時です。

「あ、そういえばこの間、カラムの話になったじゃん」

と、スタッフ。

ブログの神の降臨です。

 

そういや、社長が言っていました。

WEBlue ウェブル - 周南市 ホームページ制作

社長

サイドバーがあるデザインって最近少なくなったね。ワンカラムデザインのサイトが増えた。

 

 

そうなんです。近頃は本当にワンカラムレイアウトが主流になり、サイドバーのあるデザインあまりを見かけません。

なぜなのでしょう?

ワンカラムのホームページデザイン

そもそも、カラム (column)とはなんでしょうか?

 

カラムとは行列で表現される表の「列」「段組み」のことです。

サイドバーはこのカラムのメニューの部分に作られます。

ワンカラムレイアウトデザイン 2カラムレイアウト 3カラムレイアウト WEBLue ホームページ制作

部屋を仕切るパーテーションのようなものです。

各役割で仕切られた部屋のイメージ。

二つに仕切られていたら2カラムレイアウト。三つに仕切られていたら3カラムレイアウト。

仕切りを取っぱらってワンフロアで使用しているのが1(ワン)カラムレイアウトです。

(シングルカラムレイアウトとも言う。)

 

少し前までは2カラムレイアウトのデザインが主流でした。なぜ、ワンカラムレイアウトへと移行していったのでしょう?

スマホファーストのWebデザイン

それは、スマホの台頭とレスポンシブデザインの普及です。

 

多くの人がスマホでサイトを閲覧するようになり、今まではPCでの閲覧が前提でされてきたWeb制作が、徐々にスマホを前提としたものに変わりました。

 

以前は「PC版で見る」「スマホ版で見る」と二通り制作し、閲覧時に選択してもらうデザインが主流でしたが、レスポンシブデザイン※の普及で、画面サイズに依存しないwebサイトを制作できるようになりました。

※「レスポンシブデザイン」とはデバイスのディスプレイ幅に素早く反応して、見やすい表示に自動で切り替わる仕組みを持つデザインのことです。

 

そこで採用されるのがワンカラムレイアウトです。

周南市 ホームページ制作 WEBlue アナザーウェイ 制作事例

ディスプレイの幅が変わってもデザインの差が出にくいワンカラムレイアウト

同じサイトをスマホで見ても、タブレットで見ても、PCで見ても、デザインの差を抑えるのが得意なのがワンカラムレイアウトのデザイン。

徐々に勢力を伸ばしていきました。

 

※ワンカラムレイアウトの例です。スッキリと見やすい画面なので、訴求ポイントが伝わりやすくなります。

ワンカラムレイアウトのメリット

最近はコンテンツをページ毎に分割するのではなく1ページにまとめるほうが好まれるようです。

たくさんのページに分けてリンククリックで遷移するより、1ページに集約されている情報をスクロールするほうが閲覧しやすいようですね。

ワンカラムレイアウトはサイドバーに目移りすることがないので、コンテンツや訴求ポイントに視線を集中させ、最後まで読んでもらえる確率が増えます。

メリットはひとつのコンテンツへの集中力と言えるでしょう。

 

ただ、縦に情報を積み上げていくだけでは単調になりがちなので、ディスプレイのサイズを最大限に活用しちゃいましょう。

画面いっぱいの美しい写真や大胆な余白スペースなどでリズムをつけて閲覧者の視線をコントロールする工夫も必要ですね。

 

WEBlueスタッフは記憶と記録に残るホームページ制作を心がけて、日々精進いたします(^^♪

 

周南市 ホームページ制作 WEBlue

 

 

次回の記事は

次回のWEBlueブログは「SEO対策のお話」です。お楽しみに~。

 

 

INFORMATION

周南市でホームページ制作ならWEBlue!

WEBlueではホームページ制作事業には少ないシステム開発会社がホームページを制作いたします。
希望通りのホームページを制作するのはもちろん、
お客様に合ったホームページの活用法やSEO対策、ホームページデザインを一緒につくりあげます。

お困りごとはございませんか?

WEBlueまでお気軽にお問合せください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA