ブログ記事一覧のレイアウトまとめその１

公開日:2021 4/8

Wordpressテーマ作り講座でコンテンツを入れ替える仕組みを作ったので、次は中身のコンテンツを差し替えたり好きなレイアウトに選択できるようにしたいです。

まずはブログにはどういった形があるのかを理解しておいたほうがいいですね。

出来ればいろんなレイアウトがあれば望ましいですが、すべて実装するのは骨が折れるのでよくあるブログの記事リスレイアウトに絞ってまとめてみます。

まとめその１と銘打ってますが、２回目やるかは未定です（笑）

１カラムスタンダードタイプ

１カラムはメインブロックを最大まで使えるので、大きくサムネイルを見せたり、記事の途中まで文章を表示したり、サムネを左にして概要を右に乗せるタイプにしたり様々なタイプにできます。

やはりサムネを大きく使えるので記事にしっかりと関係のある画像を使うタイプのブログなら相乗効果を発揮して記事が読まれやすくなります。

雑記系のブログのサムネって基本的にそれらしいサムネをつけていて記事とは基本関係ない言わばちょっと添えるレタスみたいな位置づけです。

全くまではなくて栄養はないけど食物繊維は取れる。それならとれたほうがいいよねって感じで雑記ブログのサムネは存在してます（笑）

一方記事と密接するようなサムネの場合、小さいより大きいほうがいいですよね。

ゲームニュースとか芸能関係のブログとかビジュアルで引っ張ってくるタイプのブログに向いています。

サムネを大きく表示させられるのはもちろん、１カラムだと記事の本文を途中まで読ませることができるので文章力の高い人には効果的なレイアウトになります。

ブログ記事というのは最初のキャッチーな文章でユーザーを掴めたら勝ちなので２カラム以上ではやりづらいサムネ＋タイトル＋文章という構成をとりやすくなります。

１カラム以外デコレをやってしまうとレイアウトが崩れたり、見た目が悪くなってしまうのもあるため、文章を途中まで読ませたい場合は１カラムを選択するのもありじゃないでしょうか。

目に入ってくる記事が少ないので、訪れた人が興味を持つ記事があったとしてもそこにたどり着くまでの確率が低くなってしまい離脱率は上昇する気がします。

後はサムネセンスのない人にもオススメ出来ません。

サムネが悪いと自分にはどうでもいい記事なんだって思ってすぐに下に流れていきます。

せっかくサムネを大きく使えるのにそこが無駄になってしまったら１カラムにしているメリットをすべて捨てているようなものです。

逆にどういうサムネがクリックされやすいんだろうという実験もできるのでサムネセンスを磨くにはある意味良いかもしれません。

最近のブログはこの２～４カラムの記事一覧が多いんじゃないでしょうか。

まとめブログとか雑記ブログによくありがちな記事レイアウトですし、恐らく大体のブログテーマはこのレイアウトを取り入れています。

閲覧の８０％以上はスマホになってしまった現代では、レスポンシブが基本になっているので横幅が最大まで広いときは４カラム、縮まると３～２カラム、スマホだと１カラムになるということができます。

ブログテーマを作るときはデフォルトのカラムとしてはこのタイプのカラムは必ず実装しておいたほうがいいということになります。

1カラムと違って文章を途中まで読ませることは難しいというか、載せることは難しいのでタイトルとサムネ勝負になってしまうことに注意してください。

やはり記事を沢山見せられるのがメリットじゃないでしょうか。

１カラムよりはブログの滞在時間を長くできるのですが、タイトルとサムネの選び方が悪くても１カラムよりは目に入ってくる記事が多いためユーザー側としては１カラムよりも気に入る記事を見つける可能性が高くなります。

タイトルの長さによってレイアウトが若干くずれたりしてしまったりするので、文字数の最大を決めておいてそのレイアウトに統一するように作る必要があります。

タイトルは最長でも32文字で収めておくのがいいので、そこに合うように設定しましょう。