SWELLで固定ページ型トップページを作る方法|実際に作った構成も紹介

SWELLで固定ページ型トップページを作る方法

WordPressブログを作ると、最初はトップページに新着記事がそのまま並ぶ形になっていることが多いです。

日記ブログならそれでも問題ありません。

でも、収益化を目指すブログや、メディアらしく見せたいブログでは、トップページを少し設計したほうが使いやすくなります。

今回のコレやすブログでは、SWELLを使ってトップページを固定ページ型にしました。

この記事では、固定ページ型トップページにした理由と、実際に作った構成を初心者向けにまとめます。

目次

固定ページ型トップページとは

固定ページ型トップページとは、トップページに特定の固定ページを表示する方法です。

通常のブログ型トップページでは、新着記事が自動で上から並びます。

一方で、固定ページ型にすると、トップページの内容を自分で設計できます。

たとえば、次のような要素を自由に配置できます。

  • サイトのコンセプト
  • カテゴリ一覧
  • プロフィール
  • 最新記事
  • おすすめ記事
  • おすすめツール
  • お問い合わせ導線

ブログの目的がはっきりしている場合は、固定ページ型のほうが読者に伝わりやすいです。

私が固定ページ型にした理由

コレやすブログは、ただの日記ブログではなく、AI、デザイン、Web制作のノウハウを発信する収益メディアとして育てる予定です。

そのため、トップページでは次のことを伝えたいと考えました。

  • 何を発信しているブログなのか
  • どのカテゴリから読めばよいか
  • 運営者はどんな人か
  • 最新記事はどこから読めるか
  • どんなツールを紹介していくか

新着記事だけを並べると、ブログの全体像が少し伝わりにくくなります。

そこで、最初にサイトの世界観と導線を作れる固定ページ型にしました。

SWELLはブロックエディターとの相性がよいので、固定ページ型トップページも作りやすいと感じました。

実際に作ったトップページ構成

今回のトップページでは、次の6つのセクションを作りました。

  1. ヒーローエリア
  2. カテゴリ一覧
  3. このサイトで学べること
  4. 運営者紹介
  5. 最新記事
  6. おすすめツール

最初から複雑にしすぎると管理が大変です。

まずは、読者が迷わず記事にたどり着けることを優先しました。

デザインも、黒、白、オレンジを基調にして、ブログ全体の雰囲気をそろえています。

ヒーローエリアでサイトの方向性を伝える

トップページの一番上には、ヒーローエリアを作りました。

ここでは、ブログのキャッチコピーを大きく出しています。

コレやすブログでは、次のようにしました。

AIを使いこなし、クリエイターの仕事をもっと楽しく。

その下に、デザイン、動画編集、Web制作で実際に試したことを発信していると説明しています。

ヒーローエリアは、初めて来た読者が最初に見る場所です。

ここで何のブログかわからないと、すぐに離脱される可能性があります。

なので、かっこよさよりも「何を発信しているか」が伝わることを優先しました。

カテゴリ一覧で記事を探しやすくする

次に、カテゴリ一覧を置きました。

コレやすブログでは、次の6カテゴリを表示しています。

  • AI活用
  • Illustrator
  • Photoshop
  • 動画編集
  • Web制作
  • 副業

記事数が少ない段階でも、カテゴリを見せておくとブログの方向性が伝わりやすくなります。

また、今後記事が増えたときに、読者が興味のあるテーマへ移動しやすくなります。

カテゴリは増やしすぎるとわかりにくくなるので、最初は6つくらいに絞りました。

このサイトで学べることを入れる

カテゴリ一覧のあとには、「このサイトで学べること」というセクションを入れました。

ここでは、ブログのテーマを大きく3つに整理しています。

  • AI活用
  • デザイン
  • Web制作

カテゴリよりも少し広い視点で、「このブログは何に役立つのか」を伝える場所です。

初心者向けのブログでは、読者が自分に関係あるサイトかどうかをすぐ判断できることが大切です。

そのため、専門用語を詰め込みすぎず、わかりやすい言葉でまとめました。

運営者紹介への導線を入れる

トップページには、運営者紹介への導線も入れました。

ブログで収益化を目指す場合、記事の内容だけでなく「誰が書いているか」も大事です。

特に、AIやデザイン、Web制作のような実践系の記事では、書き手の経験が信頼につながります。

コレやすブログでは、簡単なプロフィール文と、プロフィールページへのリンクを置きました。

詳しい経歴や考え方は、プロフィールページで読んでもらう形にしています。

トップページでは、長く書きすぎず、まずは人柄が伝わる程度で十分だと思います。

最新記事を自動表示する

トップページには、最新記事も表示しています。

ここは手動で毎回更新するのではなく、最新記事ブロックを使って自動表示にしました。

記事を書くたびにトップページを手作業で直すのは大変です。

SWELLとWordPressのブロックを使えば、最新記事を自動で並べることができます。

コレやすブログでは、最新記事を6件表示する設定にしています。

トップページを固定ページ型にしても、最新記事への導線は必ず入れておいたほうがよいです。

おすすめツール導線を作る

最後に、おすすめツールのセクションを入れました。

現時点では、次のツール名を表示しています。

  • ChatGPT
  • Claude
  • Adobe
  • Canva
  • SWELL
  • Xserver

まだ紹介記事や比較記事が少ないので、最初はツール名だけにしています。

今後、それぞれのレビュー記事や使い方記事を書いたら、内部リンクやアフィリエイトリンクを追加していく予定です。

収益化ブログでは、最初から売り込みを強くしすぎるよりも、まずは記事を増やして自然な導線を作るほうがよいと考えています。

SWELLで作るときに気をつけたこと

SWELLで固定ページ型トップページを作るときに気をつけたのは、作り込みすぎないことです。

最初から完璧なトップページを目指すと、記事を書く時間がなくなります。

私が意識したのは、次の3つです。

  • 最初に必要な導線だけ置く
  • デザインの色を増やしすぎない
  • あとから記事数に合わせて改善する

トップページは一度作って終わりではありません。

記事が増えたら、おすすめ記事、人気記事、ツール紹介、プロフィール導線などを少しずつ調整していけば大丈夫です。

まとめ

SWELLで固定ページ型トップページを作ると、ブログの目的や導線を自分で設計しやすくなります。

コレやすブログでは、ヒーロー、カテゴリ一覧、このサイトで学べること、運営者紹介、最新記事、おすすめツールの6セクションで構成しました。

新着記事だけのトップページよりも、何を発信しているブログなのかが伝わりやすくなったと感じています。

最初から完璧に作る必要はありません。

まずは読者が迷わず記事にたどり着ける状態を作り、記事を増やしながら改善していきましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次