SWELLでは、トップページにも記事と同じようにサイドバーを表示できます。新着記事、プロフィール、カテゴリを置けるため便利ですが、ナマズノートではトップページだけを1カラムへ変更しました。
理由は、画面を広く見せるためではありません。初めて来た人へ「ブログ開設 → AIで記事作成 → SWELLで公開」という読む順番を伝えるには、本文とサイドバーで視線を分けない方がよいと判断したためです。
トップページは1カラム、個別記事はサイドバー付きに分けました。サイト全体からサイドバーをなくしたのではなく、ページの役割に合わせて表示を変えています。
改修前は、入口より情報一覧に近かった
改修前のトップページには記事一覧や案内がありましたが、「何のブログか」「どこから読むか」「次に何を選ぶか」が一続きになっていませんでした。
サイドバーは常連の読者がカテゴリや人気記事を探すには便利です。一方、初訪問の読者には、メイン本文とサイドバーのどちらから見ればよいかを判断させることになります。
ナマズノートでは公開記事が増え、ConoHa WING、SWELL、AI記事作成、運営記録という役割が分かれてきました。記事一覧を見せるだけでは、初心者向けの読む順番を伝えにくくなっていました。
完成後は7つの入口を縦につないだ
トップページは固定ページで作り、次の7セクションを上から順に並べています。
- AIとSWELLでブログを公開する方針
- 初心者ロードマップ
- 悩みから記事を探す入口
- 実際に使っている環境
- おすすめ記事
- 新着記事と運営実験の記録
- 運営者について
最初の画面ではブログの対象を伝え、その下で3段階のロードマップを見せます。すぐに読みたい記事が決まっていない人には悩み別の入口、使用中のサービスを確認したい人には実体験記事への入口を置きました。
SWELLの固定ページ設定とブロック構成は、制作記録で画面付きで紹介しています。
1カラムにして良かったこと
読む順番を一つにできた
PCでは左に本文、右にサイドバーがあると、上から下へ進む途中で人気記事やカテゴリへ視線が移ります。1カラムでは、ファーストビューからロードマップ、悩み別の順番を崩さずに置けました。
すべての人が上から順に読むわけではありません。それでも、サイト側が「最初はここ、その次はここ」と優先順位を示せるようになりました。
カードの説明文を短くしすぎずに済んだ
3列や5列のカードは、サイドバー分だけ横幅が狭くなると、見出しが不自然に改行されます。1カラムにして本文幅を確保すると、カード内へ「何が分かる記事か」を一文で書けました。
リンク名も「詳しくはこちら」ではなく、「ConoHa WINGでWordPressを始める手順」のように、移動後の内容が分かる文にしています。
収益記事へ急に飛ばさず、判断記事を挟めた
トップページから直接広告リンクを並べるのではなく、ConoHa WINGとSWELLの実体験レビューへ進むカードを設置しました。
読者は、使った感想、注意点、向く人・向かない人を読んでから公式サイトへ進めます。トップページを販売ページにせず、記事を選ぶ案内ページとして保てました。
1カラムにしたことだけで、広告クリックや収益が増えたとは判断していません。改修後の期間が短く、旧構成との同条件比較もしていないためです。確認できたのは、表示崩れとリンク切れがなく、導線を一列に整理できたことまでです。
スマートフォンでは元から1列でも確認が必要だった
スマートフォンではサイドバーが本文下へ移動するテーマが多く、PCほど1カラム化の差が見えません。しかし、PC用に作った3列・5列カードがそのまま縮むと、文字切れや横スクロールが起きます。
2026年8月22日の公開後確認では、375〜390px相当で次を見ました。
- 横スクロールが出ない
- 見出しとボタンの文字が切れない
- 画像がカード幅からはみ出さない
- 5項目の悩み別カードが適切に折り返す
- ファーストビューが長くなりすぎない
- 主要な内部リンク13件が404にならない
PCの余白をそのまま残すと、スマートフォンではセクション同士が離れすぎます。SWELLのブロック余白を使い、追加CSSを増やす前に各ブロックのスマートフォン設定を確認しました。
外して分かったデメリット
人気記事やプロフィールが常に見えるわけではない
サイドバーがあると、記事を読んでいる途中でも人気記事やプロフィールを見つけられます。1カラムのトップページでは、該当セクションまでスクロールしなければ表示されません。
そのため、重要な記事は「おすすめ記事」と「初心者ロードマップ」へ重ねて置き、運営者情報はページ末に残しました。同じリンクを無制限に増やすのではなく、役割の違う入口から必要な記事へつなげています。
記事数が少ないと空間だけ広く見える
1カラムは使える横幅が増えますが、記事カードや説明が少ないと間延びします。記事が数本しかない段階なら、通常の記事一覧の方が更新状況を伝えやすい場合があります。
固定ページの更新が必要になる
投稿一覧だけのトップページは、新記事を公開すると自動で増えます。固定ページで作ると、おすすめ記事や運営実績など、人が選んだ部分は定期的な更新が必要です。
ナマズノートでは「新着記事」は投稿リストで自動更新し、「おすすめ記事」は初訪問者に読んでほしい記事を選び直す役割に分けています。
1カラムが向いているサイト
- 読者に見せたい開始地点が決まっている
- ロードマップやサービス比較など順番のある導線を作りたい
- トップページを固定ページで管理できる
- PCとスマートフォンの両方を確認できる
- 記事ページには必要に応じてサイドバーを残したい
特に、複数の記事を順番に読んでもらうサイトでは、1カラムの入口が使いやすいと感じました。
1カラムが向いていないサイト
- 新着記事を時系列で見せることが最優先
- サイドバー広告やウィジェットが主要な導線
- トップページを定期更新する時間がない
- カードへ載せる記事がまだ少ない
- PCでもカテゴリ一覧を常に表示したい
見た目の流行だけで1カラムへ変更すると、以前使えていたサイドバー導線を失います。先にトップページの役割を一文で決め、残す情報と外す情報を分ける必要があります。
まとめ｜トップは案内、記事は探索に分けた
ナマズノートは、トップページを「初めて来た人の案内」、個別記事を「読みながら次を探す場所」と分けました。そのため、トップだけ1カラム、記事はサイドバー付きにしています。
- 初訪問者へ読む順番を示せる
- カード内の説明を読みやすくできる
- 直接広告へ飛ばさず実体験記事を挟める
- 人気記事やプロフィールの常時表示は弱くなる
- 固定ページのおすすめ枠は定期更新が必要
SWELLを約1年使ったうえで感じた利点と、設定項目の多さを含む注意点は使用レビューにまとめています。
コメント