ここではSWELLを使ってブログやホームページの作り方を解説していきます。
先に結論を一言でまとめると、Swellの基本ステップさえ押さえれば、ひとつのWordPressサイトの中で「ブログ」と「ホームページ」を両方まとめて作ることができます。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
Swellブログの作り方とホームページ作成の全体像を整理しよう
ここからは、これからやることの全体像を先にざっくりつかんでおきます。先の流れが見えているだけで、途中で不安になりにくくなります。
Swellブログとホームページを作る5ステップ
全体の流れは、大きく分けて次の5ステップです。
| ステップ | 内容 | 主にやること |
|---|---|---|
| 1 | 事前準備 | サーバー契約、ドメイン取得、WordPressインストール |
| 2 | Swell導入 | Swellの購入、テーマのインストールと有効化 |
| 3 | Swellブログの初期設定 | パーマリンク、サイト情報、メニューなどの設定 |
| 4 | ホームページ型トップを作る | 固定ページでサイト型トップページを作成し、表示設定を切り替える |
| 5 | コンテンツ作成と運用 | ブログ記事、サービスページ、お問い合わせページなどを整える |
この記事は、この5ステップに沿って、Swellブログの作り方とSwellでホームページを作る手順の両方を順番に見ていきます。
Swellブログの作り方STEP1：事前準備と環境づくり
まずは土台づくりです。ここが整っていないと、あとからやり直しになってしまうので、焦らず一つずつ進めていきましょう。
レンタルサーバーとドメインを選ぶ
Swellブログも、Swellで作ったホームページも、ベースになるのはレンタルサーバーと独自ドメインです。サーバーは「土地と建物」、ドメインは「住所」というイメージで考えると分かりやすいです。
| 種類 | 向いている人 | ポイント |
|---|---|---|
| 大手レンタルサーバー | 迷ったら無難な選択をしたい人 | WordPressとの相性が良く、Swellユーザーの利用者も多く情報を探しやすい |
| コスパ重視サーバー | できるだけ低コストで始めたい人 | 料金は安いが、表示速度やサポート内容は事前にチェックしておくと安心 |
| WordPress特化プラン | ブログ以外は特に使わない人 | WordPress簡単インストール機能付きで、初めての人でも設定しやすい |
独自ドメインは「example.com」のようなサイトのURLになる部分です。
- 覚えやすい
- 短めで入力しやすい
- サイトの内容と大きくずれない
このあたりを意識して決めておくと、あとから名刺などに印刷しても違和感が少なくなります。
Swell本体を購入してダウンロードする
サーバーとドメインの契約が終わったら、次はSwell本体を公式サイトから購入します。流れはそれほど難しくありません。
- Swell公式サイトでアカウントを作成してテーマを購入する
- 会員ページから「親テーマ」と「子テーマ」のファイルをダウンロードする
- 購入者限定のマニュアルやサポートページの場所をざっと確認しておく
Swellは一度購入すれば、自分名義の複数サイトで使っていけるライセンスになっています。最初はブログだけだったとしても、あとから別のホームページを作りたくなったときにも、そのまま活用できます。
WordPressにSwellをインストールする
続いて、WordPressの管理画面にログインして、Swellテーマをインストールしていきます。
- 「外観」→「テーマ」→「新規追加」→「テーマのアップロード」から親テーマのzipファイルをアップロードする
- 同じ手順でもう一度、子テーマのzipファイルをアップロードする
- 子テーマを有効化して、カスタマイズ内容を子テーマ側に保存していく
その後、会員サイトで取得したライセンスキーをSwellの設定画面に入力しておくと、ダッシュボードからテーマの更新ができるようになります。ここまで進めば、Swellブログを始めるための準備としてはかなり良いところまで来ています。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
Swellブログの作り方STEP2：初期設定とデザイン
次のステップでは、WordPress本体とSwell側の初期設定を整えていきます。ここをしっかりやっておくと、あとからのトラブルややり直しがぐっと減ります。
ブログ運営で押さえておきたい初期設定
WordPressをインストールした直後の状態は、ブログ運営を始めるには少し使いにくい設定になっていることが多いです。最低限、次のような項目は見直しておくと安心です。
| 項目 | 設定場所 | ポイント |
|---|---|---|
| サイトタイトル | 設定 → 一般 | ブログ名や屋号など、何のサイトか一目で分かる名前にする |
| キャッチフレーズ | 設定 → 一般 | 空欄でも問題ないが、簡単な説明文があると訪問者に親切 |
| パーマリンク | 設定 → パーマリンク | 「投稿名」にしてURLをシンプルかつ分かりやすくする |
| プロフィール | ユーザー → プロフィール | 運営者情報を書いておくと、信頼感につながる |
とくにパーマリンクはあとから変えるとURLが変わってしまうため、検索評価やSNSのリンクが無駄になりかねません。最初に「投稿名」にしておくのがおすすめです。
Swellでブログデザインを整えるコツ
Swellブログの作り方の中でも、気分が上がるのがデザインをいじるタイミングです。ただ、いきなり細部まで作り込もうとすると時間がいくらあっても足りません。まずは大枠だけ整えるイメージで進めましょう。
- 「外観」→「カスタマイズ」から、サイト全体のカラーとフォントをざっくり決める
- ヘッダーメニューに「ブログ」「プロフィール」「お問い合わせ」などのリンクを置く
- サイドバーにプロフィール、カテゴリー一覧、検索窓を配置する
ロゴやアイキャッチ画像は、最初から完璧でなくても大丈夫です。私も最初はテキストロゴだけでスタートしましたが、記事が増えてきたタイミングで少しずつ整えていきました。動きながらブラッシュアップするくらいの気持ちでOKです。
Swellでホームページを作るSTEP3：サイト型トップページを作る
次は、Swellでホームページらしい見た目にするための「サイト型トップページ」の作り方です。ブログ用トップページとの違いや切り替え方をおさえておくと、後の運用も楽になります。
ブログ型トップとホームページ型トップの違い
WordPressを入れた直後は、トップページに最新記事がずらっと並ぶ「ブログ型トップページ」になっています。一方、ホームページとして見せたい場合は、固定ページを使って「サイト型トップページ」を作るのが定番です。
| 種類 | 見た目 | 向いているケース |
|---|---|---|
| ブログ型トップ | 新着記事が縦に並ぶレイアウト | 趣味ブログ、日記、雑記ブログなど |
| ホームページ型トップ | ヘッダー画像やサービス紹介が並ぶ構成 | 店舗サイト、フリーランス、企業サイトなど |
Swellでホームページとして使う場合は、固定ページでトップページ用のレイアウトを作り、「表示設定」でトップに表示するのが基本の流れになります。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
固定ページでホームページ型トップを作る手順
サイト型トップページを作るときの大まかな流れは次の通りです。
- 「固定ページ」で「トップページ用」のページを新規作成する
- Swellのブロック（カラム、ボックス、ボタンなど）を使ってレイアウトを組む
- 「設定」→「表示設定」で「ホームページの表示」を「固定ページ」に切り替える
- ホームページに先ほど作ったトップページを、投稿ページにはブログ一覧用ページを指定する
こうすることで、トップページにはホームページ型のデザインが表示され、ブログ記事は「ブログ」ページに一覧でまとまります。Swellブログの作り方とSwellでホームページを作る方法を両立させるうえでも、とても大事なポイントです。
ホームページに必要なページ構成を決める
ホームページ型にするときは、「初めて来た人が不安なく問い合わせできるか」を基準にページ構成を考えると決めやすくなります。
| ページ名 | 役割 | ポイント |
|---|---|---|
| トップページ | 全体の入口 | 何をしている人・会社かを一目で伝える |
| サービス・メニュー | 提供内容の説明 | 料金やプラン、強みを分かりやすく整理する |
| プロフィール・会社概要 | 運営者情報 | 経歴や想いを書いて信頼感を出す |
| 実績・お客様の声 | 過去の事例・評価 | 写真や具体的な数値があるとなお良い |
| ブログ・お知らせ | 最新情報や記事 | 専門性や活動内容を伝える場所として活用する |
| お問い合わせ | 連絡窓口 | フォームと連絡先、返信目安などをまとめておく |
【稼げるキーワード教えます】
▼ ▼ ▼
これらのページを一つずつ固定ページで作り、ヘッダーメニューからすぐに飛べるようにしておくと、見た目も使い勝手もぐっと「ちゃんとしたサイト」に近づきます。
Swellブログとホームページをおしゃれに見せるデザインのコツ
ここからは、Swellブログの作り方とSwellでホームページを作るときの両方に使える、デザイン面のちょっとしたコツを紹介します。色やフォント、プラグインの考え方など、細かいようで印象が大きく変わる部分です。
業種別に考える色とフォントの決め方
Swellはカラーパレットやフォントを細かく設定できますが、最初からこだわり過ぎると決まらなくなります。ざっくり業種別にイメージして決めると、スムーズに形にしやすいです。
| サイトのタイプ | ベースカラーの例 | フォントイメージ |
|---|---|---|
| 個人ブログ | 白＋淡いブルーやピンク | 丸みがあり読みやすい日本語フォント |
| フリーランス・クリエイター | 白＋黒＋アクセントカラー1色 | すっきりしたゴシック系フォント |
| 店舗・サロン | 白＋ベージュ系＋ワンポイントカラー | 柔らかめのゴシックまたは明朝体系 |
| BtoB企業サイト | 白＋ネイビー＋グレー | 落ち着いた印象のゴシック系フォント |
色は「ベースカラー」「メインカラー」「アクセントカラー」の3つに絞ると、Swellブログもホームページもごちゃごちゃしにくくなります。私もこの3色ルールで決めておくようにしていて、迷ったときは写真の色味に合わせて少しだけ調整するくらいにしています。
必要最低限のプラグイン構成を意識する
Swellはテーマ側にかなり多くの機能が入っているので、プラグインを入れすぎると逆にサイトが重く感じられることがあります。SwellブログやSwellで作ったホームページでは、次のような考え方で「必要最低限」に絞るのがちょうど良いと感じています。
- お問い合わせフォーム用に、シンプルなフォーム系プラグインを1つ入れる
- SEO周りは、Swellの機能で足りない部分だけを補うイメージで軽めのプラグインを選ぶ
- 写真が多いサイトなら、画像圧縮系のプラグインを1つ導入してサイズを自動調整する
目次や吹き出し、ボタンなど、ブログに欲しい機能はもともとSwell側にたくさん用意されています。「よく分からないけれど評判だから」という理由でむやみにプラグインを増やさず、必要になったタイミングで少しずつ足していくくらいがちょうど良いと思います。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
Swellブログの作り方とホームページ化を同時に進める考え方
ここからは、ブログ部分とホームページ部分をどう組み合わせていくかという、全体の戦略的な話です。作業の順番を決めておくと、途中で迷いにくくなります。
先にホームページの枠を作ってからブログを書く
私のおすすめは、先にホームページとして最低限必要なページの「枠」を作ってしまい、そのうえでブログ記事を書き始めるやり方です。
- トップページ（ホームページ型）をざっくり完成させて公開する
- サービスページ、プロフィール、お問い合わせページをひと通り用意しておく
- そのあとで、ブログカテゴリーを決めて記事を書いていく
こうしておくと、ブログから訪れた人が「この人は何をしているのか」「どんなサービスを提供しているのか」をすぐに理解できます。Swellブログで集めたアクセスを、Swellホームページ側の問い合わせや仕事の相談につなげやすくなります。
ブログとホームページの役割を分けて考える
同じSwellサイトの中でも、「ホームページ部分」と「ブログ部分」で役割を分けて考えると、コンテンツの優先順位がはっきりしてきます。
| エリア | 主な役割 | コンテンツのイメージ |
|---|---|---|
| ホームページ部分 | 信頼感を伝え、問い合わせにつなげる | サービス説明、プロフィール、実績、お客様の声など |
| ブログ部分 | 検索からの集客、専門性のアピール | ノウハウ記事、事例紹介、コラム、ニュース的な内容など |
ブログ記事を書くときは、「最終的にどのページに誘導したいか」を先に決めておくと、内部リンクの貼り方やボタンの置き方も自然と決まってきます。Swellブログの作り方とSwellで作るホームページのゴールをそろえておくイメージです。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
よくある質問
最後に、SwellブログやSwellホームページの作り方について、よく聞かれる質問に答えておきます。
Q1. 無料ブログではなくSwellブログの作り方を選ぶメリットはありますか？
A. 無料ブログは初期費用がかからず手軽ですが、そのぶんデザインの自由度や細かいカスタマイズには制限があります。Swellブログの作り方を選ぶと、WordPressと組み合わせることでデザインやレイアウトの自由度が高まり、広告やアフィリエイトの貼り方も自分でコントロールしやすくなります。
さらに、同じサイトの中にホームページ的なページ構成も作れるので、趣味ブログとしてスタートしても、あとから仕事の窓口として使うこともできます。
Q2. Swellでホームページを作るのは、制作会社に頼まず一人でも本当にできますか？
A. デザイン専用ソフトの知識がなくても、Swellのブロックエディターを使えば、一人でも十分に形にできます。私も最初はまったくの独学でしたが、Swellの公式マニュアルや先輩ブロガーの解説記事を参考にしながら進めることで、サイト型トップページやサービスページを自作できました。
もちろん、時間をお金で買いたい場合は制作会社に依頼するのも一つの選択肢です。ただ、一度自分で作ってみると、更新や修正が必要になったときにも怖くなくなるので、まずは触ってみることをおすすめします。
Q3. 先にブログだけ作って、あとからホームページとして整えても大丈夫ですか？
A. まったく問題ありません。最初はSwellブログの作り方を優先して記事を書き、アクセスが少しずつ集まってきたタイミングでホームページ型トップページを追加する人も多いです。その場合でも、固定ページでトップページ用のレイアウトを作り、「表示設定」で切り替えるという基本の流れは同じです。
ブログからホームページ化していくイメージで少しずつ整えていけばいいので、「最初から完璧なホームページにしなきゃ」と構えすぎなくて大丈夫です。
まとめ：Swellブログとホームページ作りは一気通貫で進めよう
この記事のポイントを振り返ります
- Swellの基本ステップを押さえれば、ブログとホームページを同じWordPressサイトで両立できる
- まずはサーバー契約、ドメイン取得、Swellインストールまでの事前準備をしっかり終わらせる
- ブログ型トップからホームページ型トップへは、固定ページと表示設定の組み合わせで切り替えられる
- 色やフォント、プラグインは「シンプル＆必要最低限」を意識するとデザインがまとまりやすい
- ホームページ部分は信頼感、ブログ部分は集客と専門性アップという役割分担で考える
今日からの最初の一歩としては、「サーバーとドメインを契約して、Swellをインストールし、固定ページでトップページ用の土台を1枚作ること」をおすすめします。そこまでできれば、あとはこの記事を見返しながら、一つずつページと記事を増やしていくだけです。
Swellブログの作り方とSwellでホームページを作る流れの両方を楽しみながら、自分だけのサイトを育てていきましょう。
★初心者さん必見★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
記事を読んだらコチラ
▼ ▼ ▼
