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

WordPressを始めたばかりの方へ

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

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

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

初期のトップページ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• WordPress管理画面にログイン
• 左メニューの「固定ページ」から「固定ページを追加」をクリック

3. 新しいページのタイトルを「ホーム」や「トップページ」など、自分がわかりやすい名前に設定します。

4. そのまま「公開」ボタンを押して公開。その他の設定は何も触らなくてOK！

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

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

5. 外観メニューの中の「カスタマイズ」をクリック

6. WordPress設定をクリック

7. 「ホームページ設定」をクリック

8. ホームページのプルダウンから、STEP1で自分が設定した固定ページを選択（STEP1でタイトルに入力したテキストがプルダウで選べるようになっています）

9. 「公開」ボタンを押して公開。

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

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

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

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

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

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

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

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

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

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

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

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

フルワイドブロック

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

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

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

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

投稿リスト

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

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

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

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

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

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

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

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

ここまで読んでくださった皆さんも、あなたらしいサイトの「顔」を作って、ぜひ一緒にサイトを成長させていきましょう！