8種のレイアウトの実画面
以下は、同じプロジェクトのブログトップをレイアウトの設定だけ8通りに切り替えて撮った実際の画面です。記事の中身は変えず、並べ方・画像の使い方・文字の比重だけが変わります。
8種の違い
画面だけでは違いが分かりにくい部分もあるため、8種それぞれの特徴を文章でも並べます。
- ヒーロー＋注目記事: 紹介文の横に最新記事を大きく見せ、下に残りをカードで並べます。
- マガジン: 最新記事を画像と文章を横に並べた大きなカードで見せ、下に3列のカードを並べます。
- リスト: 画像を左に置いた横並びの一覧。記事数が多いときに読みやすい形です。
- ミニマル: 画像を使わず、日付とタイトルだけを並べる文字中心の形です。
- グリッド: 帯状の見出しの下に、全記事を同じ大きさのカードで並べます。
- サイドバー付き: 一覧の横に、サービス紹介・テーマ・最新記事の見出しを置きます。
- タイムライン: 月ごとにまとめて時系列で並べます。更新の積み重ねが伝わる形です。
- ショーケース: 最新5本を横にスクロールする帯で見せ、下に残りをカードで並べます。
| レイアウト | 向いていると考えられる場面 |
|---|---|
| ヒーロー＋注目記事 | 最新記事を目立たせたい、更新頻度が高いブログ |
| マガジン | カバー画像の見栄えを重視する記事が多いブログ |
| リスト | 記事数が多く、一覧性を重視したいブログ |
| ミニマル | 画像を使わず、文章の専門性で読ませたいブログ |
| グリッド | カテゴリを問わず記事を均等に並べたいブログ |
| サイドバー付き | 会社紹介やテーマの案内を常に見せておきたいブログ |
| タイムライン | 月ごとの更新の積み重ねを見せたいブログ |
| ショーケース | 新着5本を目立たせつつ、残りも一覧したいブログ |
既定のレイアウトは「ヒーロー＋注目記事」で、レイアウトを一度も選んでいないプロジェクトはこの見た目でブログトップが表示されます。
画像を横に置く形のレイアウト(リスト・サイドバー付き・タイムラインなど)は、画面の幅が640px以下になると、画像を上にした縦並びに切り替わります。スマートフォンで見たときも、画像とタイトルの対応が崩れないようにする仕組みです。
既定のスクロールアニメーション「フェードアップ」では、表示領域に入ったカードや見出しが少し下から浮き上がりながら現れます。アニメーションを「なし」にすれば、要素は最初から表示された状態のままになります。
レイアウトの決め方
レイアウトは工程5「出力設定」のブログデザインの設定で選び、公開後の見た目だけが変わります。記事の本文や検索エンジン向けの構造化データは変わりません。
保存前は`?layout=`を付けたプレビューで確認できます。保存済みの設定と異なるレイアウトを試している間は、検索エンジンに索引されません。プレビューを閉じて何も保存しなければ、公開中の見た目は変わりません。
レイアウトとは別に、配色は10種(ダーク対応2種)、書体は3種、文字サイズは3段階、角丸の丸み具合は3段階、スクロールに合わせたアニメーションは6種(「なし」を含む)から選べます。同じレイアウトでも、これらの組み合わせで見た目の印象は大きく変わります。
画像を多く使う業種は写真の比重が大きいレイアウト(マガジン・ショーケース・グリッドなど)、文章で専門性を伝えたい業種は文字中心のレイアウト(ミニマル・サイドバー付きなど)が読みやすくなる傾向があります。どちらが正解ということはなく、保存前のプレビューで実際の記事を見ながら選べます。
集客ラクダではどうなるか
レイアウトの選択は ブログのデザイン(レイアウト・配色) で行います。配色・書体・文字サイズ・角丸もあわせてこのページで設定します。
業種やブランドの印象に合わせて、記事を書き直さずに見た目だけを変えられます。レイアウトを迷っている間は、既定の「ヒーロー＋注目記事」のままでも運用を始められます。
よくある質問
レイアウトはあとから変更できますか。
- できます。工程5「出力設定」でいつでも切り替えられ、既存の記事はそのまま新しいレイアウトで表示されます。
レイアウトによって検索順位は変わりますか。
- レイアウトは見た目の並べ方の設定で、記事本文や構造化データは変わらないため、レイアウト自体が検索順位に直接影響することはありません。
レイアウトを保存する前に確認できますか。
- できます。`?layout=`を付けたプレビューで保存前に確認でき、この間の表示は検索エンジンに索引されません。
レイアウトは記事ごとに変えられますか。
- レイアウトはブログ全体(プロジェクト単位)の設定で、記事ごとに個別のレイアウトを持つことはできません。