SWELLを入れたものの、トップページが新着記事の一覧だけで「どこから読めばよいか分からない」状態になっていないでしょうか。
ナマズノートでは、2026年8月21日から22日にかけてトップページを作り直しました。最初は見本画像をCodexで分解して独立HTMLを作り、実際のWordPressへ入れて崩れを確認しながら、最後はGutenbergとSWELLのブロックで直せる固定ページへ移しています。
結論からいうと、固定ページをトップページにする作業は次の流れで進めると安全でした。
安全に作り直した5つの手順
- 読者に見せたい順番を7セクションへ整理する
- Codexへ見た目だけでなく、リンク・編集方法・確認幅も指定する
- 固定ページをSWELL・Gutenbergブロックで組む
- 「設定 → 表示設定」でホームページに指定する
- PC・タブレット・スマートフォンの公開画面を確認する
今回はアクセス数や収益の増減を測る作業ではなく、読者の入口と編集しやすさを直す作業でした。トップページを開いたときに「何のブログか」「次にどの記事を読めばよいか」が分かり、私自身も管理画面から文章や数字を直せる状態になりました。
改修前のトップページで困っていたこと
改修前のトップページを開くと、最初に目に入るのはABLENETの記事と右側のSWELL広告でした。記事そのものは必要でも、AIとSWELLを扱うブログだと伝わる前に、1本の記事とサイドバーへ視線が流れてしまいます。自分で見返しても「ブログを始めたい人は、どこを押せばよいのか」と迷う並びでした。
見本に近づけることを優先して作った旧固定ページID614のカスタムHTML版にも、すぐ限界が出ました。当時は約49KBのHTMLが1ブロックにまとまり、ボタンの文言を1つ変えるだけでも長いコードから場所を探す必要がありました。さらに切り替え途中では、HTML版とブロック版を別URLで公開してしまい、同じ役割のページが一時的に2つ存在しました。
ここで「見本に似ているか」より、「初めて来た人が迷わず、自分でも後から直せるか」を優先することにしました。
- トップページを見れば、ブログの対象読者が分かる
- 初心者が読む順番を選べる
- 記事・実体験レビューへ自然に進める
- 文章や数字をブロックエディターから変更できる
- トップページは1カラム、個別記事のサイドバーは維持する
完成後のトップページは7つの基本セクション
作り直したトップページは、読者が上から順に迷わず進めるよう、次の7セクションに分けました。
| セクション | 読者に伝えること | 主な導線 |
|---|---|---|
| ファーストビュー | AIとSWELLを使った初心者向けブログ | ロードマップ、AI記事作成 |
| 初心者ロードマップ | 開設→執筆→公開の順番 | 3つの実践記事 |
| 悩みから記事を探す | 読者の現在地に合う入口 | 5つの悩み別記事 |
| 実際に使っている環境 | 利用中のサービス・ツール | 実体験記事 |
| おすすめの記事 | 初訪問者に優先して読んでほしい記事 | 4つの重要記事 |
| 運営実験の記録 | 記事数・クリック・PV・確定収益 | 最新の運営レポート |
| ナマズノートについて | 運営方針と失敗も公開する姿勢 | 運営者情報 |
最初にCodexへ見本画像を渡したときは、画像左側の「1〜7」と説明文まで画面部品として再現されました。実際には制作者向けのメモで、ブログ読者には不要です。見た目が近いだけで完成と判断せず、公開画面から番号レールをすべて削除しました。
ブロック版へ移した後には「新着記事」を独立した枠にし、実際に使い始めたObsidianも6つ目の道具として追加しました。HTMLを探し回らず、該当ブロックだけ編集できたことで、作り直した効果をすぐ実感できました。
Codexへ渡した指示
最初の指示では見本の再現に意識が向きすぎて、制作メモまで画面へ入りました。やり直すときは、見た目だけでなく「公開画面に含めないもの」「既存記事の扱い」「後から編集する方法」「確認する画面幅」まで条件に加えました。
SWELLを使ったWordPressブログのトップページを、
初心者が読む順番を理解できるポータル型へ再構成してください。
基本セクション:
1. ファーストビュー
2. 初心者ロードマップ
3. 悩みから記事を探す
4. 実際に使っている環境
5. おすすめの記事
6. 運営実験の記録
7. ナマズノートについて
条件:
- 濃紺、白いカード、薄い背景、細い枠線、弱い影を基本にする
- 左側の「1〜7」は制作メモなので公開UIに含めない
- トップページは1カラム、個別記事のサイドバーは変更しない
- 実在する記事URLと公式ロゴだけを使う
- 月3万円は未達成の目標として表示する
- GutenbergとSWELLの標準ブロックを優先する
- テーマ本体、functions.php、WordPressコアを変更しない
- PC 1440px、タブレット768px、スマホ375〜390pxで確認する
- 横スクロール、画像切れ、リンク切れ、H1重複を確認する1回目の出力で分かったのは、完成画像だけではWordPressで使い続けられるページにならないことです。読者が進む順番、既存URL、後から文章を直す場所、確認する画面幅まで指定すると、修正内容が具体的になりました。
独立HTMLからブロックエディターへ移した流れ
最初はローカルのプロトタイプで見本画像を再現し、そのままカスタムHTMLブロックへ入れました。ローカルでは整って見えたのに、SWELL上で公開画面を開くと、次々に違いが出ました。
- SWELLのメインビジュアルと本文ヒーローが二重表示された
- 旧HTML版の4タブに用意した16枚の記事カードが、タブを切り替えてもすべて並んだ
- JavaScript内の「&」がWordPress保存時に文字参照へ変換された
- 余分な終了タグでサイドバーの配置が崩れた
- 1つの長いHTMLで、部分編集が難しかった
そこで固定ページを作り直し、カスタムHTMLブロックを使わない構成へ移しました。切り替え後は旧HTML版を下書きへ戻し、重複していた公開URLからページが表示されないことも確認しています。
この順番にしたことで、見た目を試す段階と、日常的に更新するWordPress本番を分けられました。
使用したSWELL・Gutenbergブロック
2026年8月22日にカスタムHTMLからブロック版へ移した時点で、実際に使ったブロックは次のとおりです。
| ブロック | 数 | 使用場所 |
|---|---|---|
| メディアとテキスト | 1 | ファーストビュー |
| 見出し | 8 | 7セクションと補助見出し |
| 段落 | 14 | 導入文・補足説明 |
| SWELLボタン | 2 | ヒーローCTA・プロフィール導線 |
| SWELLステップ | 1（3項目） | 初心者ロードマップ |
| SWELLボックスメニュー | 1（5項目） | 悩み別導線 |
| SWELL投稿リスト | 2 | おすすめ・新着／人気記事 |
| SWELLリッチカラム | 2（計9カラム） | 使用環境・運営実績 |
| SWELLふきだし | 1 | 運営者紹介 |
特に役立ったのはSWELL投稿リストです。記事カードを固定HTMLで並べるのではなく、公開日順や指定記事で表示できます。新しい記事を公開するたびに、トップページのカードHTMLを書き換える必要がありません。
ブロックへ移した直後は追加CSSなしで表示しましたが、横長画面でヒーローだけが左へずれ、タブレットではカードの最終行が片側へ寄りました。そこで固定ページの「カスタムCSS & JS」へ、幅・列数・余白・罫線・文字サイズだけを調整するCSSを追加しました。文章・リンク・画像・実績値は、今もブロックから変更できます。
記事本文の装飾方法は、次の記事で実画面を使って紹介しています。
固定ページをフロントページに設定する方法
固定ページを作っただけでは、サイトのトップページにはなりません。WordPress管理画面で次の順に設定します。
- 固定ページを追加：「固定ページ → 固定ページを追加」を開きます。
- 内容を作成：トップページ用の内容をブロックで組み、プレビューします。
- 固定ページを公開：PC・スマートフォンを確認し、問題がなければ固定ページを公開します。
- 表示設定を開く：「設定 → 表示設定」を開きます。
- 固定ページを選択：「ホームページの表示」で「固定ページ」を選びます。
- ホームページを指定：「ホームページ」で公開した固定ページを選びます。
- 保存して公開画面を確認：「変更を保存」を押し、サイトのトップURLで選んだ固定ページが表示されるか確認します。
ナマズノートでは、「ナマズノート｜AIとSWELLでブログを始める」という固定ページをホームページに選びました。
ホームページの変更前に旧ページを削除する必要はありません。新ページの公開画面を確認できるまで、旧ページを下書きやリビジョンとして戻せる状態にしておく方が安全です。
WordPress公式にも、固定ページを公開した後に「設定 → 表示設定」で固定ページを選ぶ手順が案内されています。
PC・タブレット・スマートフォンで修正した場所
PC 1440px
画面幅が1108px以上になると、SWELLのalignwide指定によってヒーローだけが左へ約100pxずれました。テーマ側の幅出しが原因だったため、ページ専用CSSの対象をヒーローに限定し、left、width、transformをリセットしています。
利用環境カードも、見た目はカード全体がリンクに見えるのに、最初は見出し文字しか押せませんでした。リンク範囲をカード全体へ広げ、キーボード操作で位置が分かるようCSSにフォーカス枠を追加しました。
タブレット 768px
ロードマップが2列＋1枚、利用環境が3列＋2枚で左寄せになり、右側に大きな空きができました。640〜959pxの範囲だけグリッドを調整し、ロードマップを3列、利用環境の最終行を中央寄せにしています。
SWELLのカラムに残っていた負の余白も打ち消し、左右端の欠けをなくしました。
スマートフォン 375〜390px
スマートフォンでは、次の点を修正しました。
- ヒーローを「本文 → 画像」の縦並びにする
- CTAを1列・全幅にして押しやすくする
- ロードマップと利用環境カードを1列にする
- 悩み別カードは2列、5枚目だけ全幅にする
- おすすめ記事と実績カードを2列にする
- 画像とロゴを画面幅内に収める
- フッターの余白とプロフィール画像を小さくする
Chromeで1440px、768px、375pxの順に開き直すと、3つの幅すべてで横はみ出しと画像切れがなくなりました。個別記事も開き、トップページ用CSSが混ざらず、記事側のサイドバーが残っていることを確かめました。
Codexだけではうまくいかなかった部分
見本画像を渡した直後は、全体の配置を短時間で作れました。しかしWordPressへ入れると、ヒーローが二重になり、タブの記事が16件すべて表示され、スマートフォンでは画像が消えました。公開画面を見て初めて分かった不具合が多く、生成したコードだけでは完成を判断できませんでした。
| 起きたこと | 原因・判断 | 最終対応 |
|---|---|---|
| 左側の「1〜7」まで再現した | 制作メモと本番UIを区別できなかった | 本番から完全に削除 |
| 旧HTML版の4タブ・16枚が同時表示 | hidden属性よりグリッドCSSが優先された | 非選択タブを明示的に非表示 |
| ヒーローが二重表示 | SWELLのメインビジュアルが追加された | 固定ページ側で1つに整理 |
| ヒーローだけ左へ100pxずれた | SWELLのalignwideが広い画面で有効になった | 対象を限定したCSSで修正 |
| 初回スマホCSSで画像が消えた | メディアとテキストの並び指定が不足 | 画像枠176pxと表示順を指定 |
| 運営実績を完全自動化できない | クリック・PV・収益の認証済みAPIを安全に使えない | 数字だけブロックで更新する構造にした |
Codexを使って一番時間を短縮できたのは、見本画像からセクション構成を起こす作業でした。一方、SWELLのalignwideによるヒーローの左ずれ、WordPress保存時のHTML変換、スマートフォンでの画像消失は、実際の公開画面を開くまで見つけられませんでした。最後はCodexで修正候補を作り、Chromeで左右端を測りながら直しています。
同じ組み合わせを使った率直な感想は、次の記事にもまとめています。
改修前後を比較
| 比較項目 | 改修前 | 改修後 |
|---|---|---|
| 最初に目に入る内容 | 1本の記事とサイドバー | ブログの対象読者と2つのCTA |
| 読者の入口 | 新着・カテゴリー中心 | ロードマップと5つの悩み |
| トップの構成 | 記事一覧中心 | 7つの基本セクション |
| 編集方法 | 長いHTMLでは部分編集が難しい | ブロック単位で編集できる |
| 記事一覧 | 固定カードも使用 | SWELL投稿リストで管理 |
| レスポンシブ確認 | 表示確認が不足 | 1440・768・375pxで確認 |
| サイドバー | トップにも表示 | トップは1カラム、記事は維持 |
| 重複ページ | 一時的に新旧ページが公開 | HTML版を下書き化し解消 |
2026年8月22日にトップページからの主要導線13件を一つずつ開き、404がないことを確認しました。画像も上から下まで読み込み、表示に失敗したものは0件でした。SWELLの更新や記事追加で配置が変わる可能性があるため、新しいカードを増やした後は同じ確認を繰り返します。
SWELLの購入を検討している場合は、トップページ制作だけでなく、実際に約1年使って分かった良かった点と注意点も先に確認してください。
まとめ
SWELLでトップページを固定ページから作るときは、装飾を増やす前に、読者へ見せる順番を決めることが大切です。
実際にHTML版から作り直して残った要点は、次の7つです。
- 7つの基本セクションへ役割を分ける
- 固定ページをSWELL・Gutenbergブロックで作る
- 「設定 → 表示設定」でフロントページに指定する
- ページ専用CSSは必要な範囲だけに限定する
- PC、タブレット、スマートフォンで公開画面を確認する
- Codexの出力だけで完成扱いにせず、SWELL固有の表示を直す
- 旧ページをすぐ削除せず、戻せる状態で切り替える
トップページは一度作って終わりではありません。新しい記事やツールを追加した後も、入口のリンク、投稿リスト、カードの列数、スマートフォン幅を定期的に確認していきます。
コメント