初心者向け!WordPressサイトのトップページを自由にデザインする方法

SWELLロゴ

WordPressを始めたばかりの方へ

この記事を読めば、こんな未来が待ってます
  • 「ブログじゃないみたい!」な、おしゃれなトップページを自由に作れるようになる

投稿記事を書いていくうちに、
「ブログのトップページって、記事がずらりと並ぶだけなの?」
「もっとブログじゃないみたいに」
「まるで会社やお店のサイトみたいにオシャレに作りたい」って思ったことありませんか?

ざしきねこ

ボクも思ってた!好きなデザインにしたいのに、管理画面からだとスライダーやピックアップバナーしか変更できないよね・・・

この記事では、そんな私みたいな初心者の方に向けて、
自由なトップページを作るための設定方法をわかりやすく解説します!

目次

「ブログじゃないみたい」って?トップページを自由にデザインするメリット

初期のトップページ

WordPressのトップページは、初期設定だと最新のブログ記事がずらっと並ぶ「ブログ形式」になっていますよね。
(イメージは下記:本サイトの初期のトップページです)

旧ざしきねこTOPページ

メインビジュアルの下に投稿記事がずらっと並んでいく。
アレンジできるところは、メインビジュアルの差し替えや、ピックアップバナーの追加程度だけ。
これだとちょっと、物足りないですよね。

でも例えば私が使っている、デザインテーマ『SWELL』のデモサイトを見ていると、
もっと自由なデザインが豊富です。(下記画像はSWELL公式サイトTOP 2025年7月時点)

SWELL公式サイト
ざしきねこ

とても同じツールを使っているとは思えないね!

WordPressテーマ「SWELL」公式サイトはこちら >

『固定ページ』を使えば自由なトップページが作れる

デモサイトのような、自由なデザインのトップページは、以外と簡単に作れるんです。
作り方次第で、ブログサイトじゃないみたいな、会社やお店のサイトのようなトップページも作れますよ!

トップページは、Webサイトの「顔」。

ここを自由にデザインしていくことで、訪問者が一番最初に目にするトップページを、
あなたのサイトのコンセプトや一番伝えたいことをアピールする場にできます。

その方法が、『固定ページ』を使う方法
ここからは、固定ページについて解説していきますね。

ざしきねこ

なんでも最初の印象が大事だよね

知っておこう!WordPressの「投稿」と「固定ページ」って何が違うの?

さて、まずはトップページを自由にデザインするために、
WordPressの基本的なページの種類の違いを知っておきましょう。

●投稿

日々更新するブログ記事やお知らせ記事。
時系列で新しいものが上に表示される記事のこと。
「日記」や「最新情報」に向いています。

●固定ページ

内容があまり変わらない「独立したページ」のこと。
「プロフィール」「お問い合わせ」「サービス案内」など、
特定の情報を独立して見せたいページのことです。
ブログ記事のように時系列で並ぶことはありません。

今回、この『固定ページ』をトップページに設定することで、自由なデザインを実現していきます!

誰でもできる!固定ページをトップページにする具体的な設定手順

さあ、実際に設定してみましょう!たったの3ステップで完了します。

STEP1:トップページとなる固定ページを作る

  • WordPress管理画面にログイン
  • 左メニューの「固定ページ」から「固定ページを追加」をクリック
WordPressの固定ページをTOPページとして設定する方法1
  1. 新しいページのタイトルを「ホーム」や「トップページ」など、自分がわかりやすい名前に設定します。
WordPressの固定ページをTOPページとして設定する方法2
  1. そのまま「公開」ボタンを押して公開。その他の設定は何も触らなくてOK!

STEP2:WordPressの「表示設定」でトップページを指定する

STEP1ではまず固定ページを作りました。
ここからのSTEP2では、先ほど作った固定ページをトップページとして設定します。

  1. 外観メニューの中の「カスタマイズ」をクリック
WordPressの固定ページをTOPページとして設定する方法3
  1. WordPress設定をクリック
WordPressの固定ページをTOPページとして設定する方法4
  1. 「ホームページ設定」をクリック
WordPressの固定ページをTOPページとして設定する方法5
  1. ホームページのプルダウンから、STEP1で自分が設定した固定ページを選択
    (STEP1でタイトルに入力したテキストがプルダウで選べるようになっています)
WordPressの固定ページをTOPページとして設定する方法6
  1. 「公開」ボタンを押して公開。

こうすることで、初期設定のトップページではなく、
自由にデザインできる『固定ページ』があなたのサイトのトップページとして設定されました。

もっとおしゃれに!トップページを自由にデザインするヒント

ここまでで、固定ページをトップページとして設定することはできましたが、
ここから自由にトップページをデザインしていきます!

設定した固定ページは、WordPressのブロックエディターで自由に編集できるんです。

トップページとして設定した固定ページを編集する

ではここから、自由にトップページをデザインしていきましょう!

まずはWordPressの「固定ページ」メニューから、「固定ページ一覧」を開きます
その中に先ほど自分が設定したトップページがあります。
そのページを編集していきましょう。

編集方法は簡単です!通常の投稿と同じように、ブロックを選んで配置していくだけ。
ここでは一例としていくつかの使えるブロックを紹介します。

トップページで使えるブロック例

前述の通り、私はWordPressテーマ『SWELL』を使っています。
ご利用のテーマによって、選べるブロックに違いがある点にご注意ください。

WordPressテーマは、無料のものから有料のものまで数多くのテーマが選べますが、
SWELLのような高機能テーマを使っていれば、さらに簡単に魅力的なデザインにできますよ!

SWELLにご興味があればぜひチェックしてみてください↓

WordPressテーマ「SWELL」公式サイトはこちら >

フルワイドブロック

フルワイドブロックは、画面の横幅いっぱいに背景色・背景画像を敷くことができるブロックです。

※イメージは画像をクリックしてください

WordPress SWELLテーマのフルワイドブロック

ブラウザのサイズに合わせて、このブロックは左右サイズを自動で調整してくれるので、
背景として活用範囲がかなり広いです。

もちろん、中に別のブロックを設定したり、色を変更したり、画像を設定することも可能ですので、
コンテンツの区切りやグループ分けとして使いやすいですね!

投稿リスト

このブロックは、新着記事やピックアップ記事を見せたい場合に役立つ鉄板ブロックです。(イメージは下記)

WordPressの投稿リストブロック

表示記事数や「もっと見る」ボタンのカスタマイズも簡単。
オリジナルのアイコンを直前のブロックに画像設定するなどして、自分らしくアレンジすることもできますよ!

ざしきねこ

デフォルトの記事一覧とは一味違った仕上がりになるね

ほかにもこんなコンテンツを入れてみよう

  • サイトのコンセプトが伝わるメインビジュアルやキャッチコピー
  • 読者に読んでほしいおすすめ記事やカテゴリへのリンク
  • あなたの紹介(プロフィール)やお問い合わせへの案内
  • 最新のブログ記事を表示するブロックなど

これらを組み合わせて、あなたのサイトらしい「顔」を作り込んでいきましょう。

まとめ:あなたのサイトの「顔」で、訪問者の心を掴もう!

WordPressの標準機能を使えば、誰でも簡単に「ブログじゃないみたい」なトップページを作れます。

この『働き方デザインLab』のトップページも、まだまだこれから作り込んでいく途中です。
初めは、思うようなレイアウトを、どう作っていけばいいのか暗中模索な状態でしたが、
この方法でトップページを作り始めてからは、トップページを作ることが、とても楽しくなってきました!

ここまで読んでくださった皆さんも、ぜひ試してみてくださいね。

ざしきねこ

一人だと孤独だから・・・誰か一緒に頑張ろう?!

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