アクセストリガー

アクセストリガー

ブログを3カラムでレイアウトするメリットとデメリット

ブログを3カラムでレイアウトするメリットとデメリット

今回はテーマのカラムについてのお話ですが、ほぼ全部入り状態であると言ってもいい3カラムのテーマをお使いの方はどれくらいいるのでしょうか!?

昨今はシンプルに1カラムのワイドなコンテンツで公開しているブログなども見かけるようになりました。

私が今回オススメする3カラムのテーマは、どちらかというと少数派です。

先にお話した1カラムのテーマも小数派ではありますが、その使い方こそテーマを活かすために重要なポイントだと思います!

カラムの違いによるメリット・デメリット

1カラムのメリット・デメリット

018262

メリット

  • 一本の道であるページに書かれた内容を集中して読むことが出来る。
  • 幅を広めにとることでできるので文字を大きめにして読みやすくできる。
  • サイドバーがないため、メイン以外にクリックして離脱する確率が減る。

デメリット

  • 情報量が少なく質素
  • 仮にサイドバーがある場合と同じ情報を1カラムに詰め込むと縦に長くなり読むほうも疲れる。

このように1カラムのテーマあるいは1カラムでページを作成する場合のメリット・デメリットがあります。

作りたいサイトの情報量や内容等に応じてシンプルに使いたい・魅せたいといった場合に威力を発揮できそうです!

2カラム左サイドバーのメリット・デメリット

左サイドバー

メリット

  • 左側から読もうとする人間の特性にとって注目を集めやすい位置にサイドバーがある。

デメリット

  • メインの文章より左サイドバーが目立つので文章への注目度が下がる

左サイドバーに関してざっくりとメリット・デメリットを紹介しましたが、右サイドバーではこのパターンと逆の傾向があると言えます。

2カラム右サイドバーのメリット・デメリット

右サイドバー

 

メリット

  • 左側から読もうとする人間の特性にとってメインコンテンツである文章が先に注目を集めやすい。

デメリット

  • 右サイドバーはメインコンテンツの文章を読みながらスクロールが完了し、注目されないまま読み終えてしまう。

必ずしも注目を集めやすいのが左とは言い切れませんが、読み込もうとする過程で無意識に左から右へといった方向で目線移動が行われるといったことは参考にしておくべきです。

そして、ページ全体を読み込むのに左から右へと目線移動がおきても下方へスクロールする必要が出てくるので、一旦左へ目線が移動してから再度右へ移動するためZ型の目線移動が起きるようです。

このような目線移動を分析し、広告配置に対して言及しているページもよく見かけます。

Z型あるいはF型に移動される目線に対して、有効な位置に広告を配置してその収益性を高めようとする考え方です。

サイトを見るのは基本的に人間ですので、そのような人間の特性を意識してサイト作りを行う事はごく自然なことであるのでぜひ参考にしたい情報です。

もちろんbotもページを見に訪れますが、サイトのクロールのためであったりとその目的が違います・・・。

あくまで人間様とロボット様ではその対応は違うところにあります。

ロボット様はカラムの構造よりは、サイトマップやコードなど普段見ないデーターなども参考にしますので、対応は別のところに存在します。

3カラムの可能性!

3カラムをお勧めします

今回はZ型あるいはF型といった目線移動を意識してのページ作りをする上でお勧めしたいのが3カラムの配置パターンです。

つまり人間様向けコンテンツを作成する上での構造は3カラムを使いたいです。

以前このような投稿を行いました。

この投稿以降に時々右サイドに戻してみたりもしましたが、やはり左サイドを使いたいといった気持は消えませんでした。

しかし右サイドバーにだってメリットはあるものです。

当時採用していたテーマがSimplicityであったため、Webサイト作りの初心者である私にとって他のテーマに手出しする余裕もなく、使いやすいSimplicityを使い続けてきました。

途中Simplicityに子テーマとして3カラムVersionが公開されましたが、レスポンシブが非対応であるといったことでスマホなどで小さく表示されてしまう事が嫌で採用を見送ってきました。

以下はSimplicity3カラムVersionの注意点です。

  • Simplicity201401004以降のSimplicityをインストールしてある必要があります。
  • 3カラム子テーマは完全にノーサポートです。
  • カスタマイズなどは、各自でお願いします。
  • 横幅は広いけどレスポンシブ表示されません。
  • モバイル表示もされません。
  • テーマカスタマイザーからの設定が正常に反映されない可能性があります。
  • レスポンシブ表示させたい場合は、自前でスタイルシートを編集してください。
  • 幅変更をしたい場合も自前で行ってください。

作者 わいひらさんのSimplicity公式ページより引用

しかしながら、テーマをデバイスで切り替えるという方法を知って以降は、非レスポンシィブデザインであるテーマに挑戦することが可能となりました。

1つの例ではありますが、PC表示用にSimplicity3カラムVersionを適応し、スマホ向けに2カラム版の通常のSimplicityを適応させるといったことは簡単に可能です!

それは、次の投稿をした頃に私にとって確信できた瞬間でした。

デバイスごとにテーマを完全に切り替えることが出来るAny Mobile Theme Switcher

おかえりなさい @okaerinasainet です。以前モバイルとPCのテーマの使い分けをする際に次のような方法をご紹介しました。は合計5つのデバイスごとにテーマを出し分け出来る素晴らしいプラグインですが、1つ難点…

3カラムサイドバーのメリット・デメリット

最後になりましたが、3カラムサイドバーを採用する上でのメリット・デメリットをご紹介します。

メリット

  • 左にも右にもサイドバーがあるので、コンテンツの魅せたい強弱を使い分けてそれぞれのサイドに配置できる。
  • 片方のみを追尾型ウィジェットにする等の2カラムではできない技も可能!
  • 圧倒的情報量を掲載する事が可能。大型サイトだって作れちゃう!

デメリット

いえいえ3カラムのデメリットに関して特にはございません!

右にも左にも情報があってうざい??そんなことはありません。

目障りにならないように右と左で情報の使い分けというか棲み分けを行う事で、デザインとして美しくなじませましょう!

そこを考えるのも3カラムを適応させて初めて味わえる楽しみですよ!一度やってみてください!楽しいですから!

ごちゃごちゃするのが嫌なら片方をシンプルにしておけばいいのですから、あちらこちらに読み手の注意が散漫にらないように配置するのも醍醐味です。

1つだけ私には関係ないですが、デメリットして気をつけたいのは、私のようにプラグインでデバイス別にテーマの使い分け(Simplicity3カラムと2カラムVersion)をしているのではなく、テーマ自体がレスポンシィブデザインをサポートしているなら、やはり3カラム分のコンテンツ全てをモバイルで表示させるには、縦長になってしまいます。

そのためすべて読み切ろうとする場合、読み手に取って長いといった印象を抱く可能性があります。

ターゲット設定によっては情報量の調節が必要かもしれません。

以上、

「ブログを3カラムでレイアウトするメリットとデメリット」というお話でした!

今回のお話はもちろん個人的な感想ですが参考になりましたら幸いです!


LEAVE A REPLY

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Return Top