自分で更新できるトップページを作りたい方へ。SWELLでトップページを作る5つの手順

「初期設定はなんとか終わった。でも、トップページを前にすると手が止まる…」

ココナラでホームページ制作のご相談を受けていると、SWELLで自作を始めた方から、こうしたお声をよくいただきます。

トップページは、ホームページの顔です。

だからこそ「ちゃんとしたものを作らなきゃ」と思って、なかなか最初の一歩が出ないんですよね。

今回は、プロのようなデザインを目指す話ではありません。

SWELLで、自分で更新しやすいトップページを作るための手順を、準備から順番にまとめました（2026年11月時点のSWELLの機能をもとにしています）。

■作りはじめる前に：載せる内容を先に決める

いきなり管理画面を開く前に、トップページに載せる内容を紙やメモに書き出しておきます。

教室やお店なら、上から順にこんな流れがおすすめです。

1. 何の教室・お店か、ひと言で（キャッチコピー）

2. 選ばれる理由・特徴を3つ

3. コースやメニューの紹介

4. お客さまや生徒さんの声

5. よくある質問

6. アクセス・お問い合わせ

中身が先、デザインはあと。これだけで、作業中に迷う時間がかなり減ります。

■手順1. トップページ用の固定ページを作る

SWELLでは、トップページを固定ページで作る方法がおすすめです。

ブロックエディターで自由に組み立てられて、あとから文章や写真を入れ替えるのも簡単です。

管理画面の「固定ページ」→「新規追加」で、「ホーム」などの名前でページを作ります。

中身はまだ空っぽでも大丈夫。先に「トップページにする」設定まで済ませてしまいましょう。

■手順2. 作ったページをトップページに設定する

「設定」→「表示設定」を開き、「ホームページの表示」で固定ページを選び、さきほど作ったページを指定します。

（「外観」→「カスタマイズ」の「ホームページ設定」からも同じ設定ができます）

これで、サイトのトップを開くと、そのページが表示されるようになります。

■手順3. メインビジュアルを設定する

メインビジュアルは、トップページを開いたときに最初に目に入る大きな画像のエリアです。

「外観」→「カスタマイズ」の「トップページ」の中にある「メインビジュアル」で設定します。

・画像は1枚でも、スライドで切り替えることもできます

・画像の上に、キャッチコピーやボタンを重ねられます

迷ったら、教室やお店の雰囲気が伝わる写真1枚＋ひと言のキャッチコピーから始めるのがおすすめです。

スライドは、写真がそろってからでも遅くありません。

■手順4. ブロックで中身を組み立てる

固定ページの編集画面で、書き出した内容を上から順に入れていきます。

SWELLには、トップページ作りに便利なブロックがたくさんあります。

・フルワイド：画面の横幅いっぱいに背景色をつけて、区切りを作れます

・リッチカラム：特徴3つやコースを、横に並べて見せられます（スマホでは縦に並びます）

・ボタン：「体験を申し込む」「お問い合わせ」などの入口を目立たせます

・FAQ：よくある質問を、質問と答えのセットで並べられます

・ステップ：申し込みから当日までの流れを、順番に見せられます

最初から全部使う必要はありません。

「フルワイドで区切る → 中にリッチカラムやテキストを入れる」の組み合わせだけでも、トップページらしい形になります。

■手順5. スマホで確認する

パソコンで形ができたら、必ずスマホでも確認します。

・最初の画面で、何の教室・お店かわかるか

・リッチカラムが縦に並んだとき、読みにくくなっていないか

・ボタンが指で押しやすいか

編集画面のプレビューでスマホ表示に切り替えられますが、実際に自分のスマホで開いて確かめるのがいちばん確実です。

■更新しやすくしておくコツ

トップページは、作って終わりではなく、少しずつ育てていく場所です。

・お知らせやブログの新着を表示しておくと、更新していることが伝わります

・料金など変わりやすい情報は、トップには目安だけ書き、詳しくは専用のページへ

・写真の差し替え方や、ブロックの使い方を、自分用にメモしておく

■ここまでは自分で、ここからは相談してもいい

手順1〜5は、時間をかければ自分で十分できる範囲です。

一方で、

・キャッチコピーや特徴の言葉が決まらない

・写真の選び方・見せ方に自信がない

・全体のデザインをそろえたいけれど、どこを直せばいいかわからない

というところは、ひとりで悩むと時間がかかりやすい部分です。

「中身は自分で考えて、見せ方だけ相談する」といった分け方もあります。

■確認メモ

・トップページに載せる内容を、上から順に書き出した

・トップページ用の固定ページを作り、「ホームページの表示」で設定した

・メインビジュアルに、写真とひと言のキャッチコピーを入れた

・スマホで開いて、最初の画面で何のサイトかわかる

・「体験を申し込む」「お問い合わせ」などのボタンが見つけやすい

この手順どおりに作れば、すぐにプロのような仕上がりになる、というわけではありません。

それでも、自分で直せる形でトップページを作っておけば、あとから何度でも良くしていけます。

まず今日は、トップページに載せたい内容を、上から順に6行で書き出すことから始めてみてください。

■ご相談について

ココナラで、SWELLを使ったホームページ制作を承っています。

「中身は決まったけれど、トップページの形にするところで手が止まっている」

「トップページだけはプロに整えてほしい。そのあとの更新は自分でしたい」

という方には、WordPressの初期設定からトップページの作成までを代行するサービスをご用意しています。ご自身で更新できるよう、マニュアルもお付けしています。

サービスページの「見積り・仕様の相談」から、お気軽にメッセージくださいね。