MENU
ご入会はこちらです 詳しくはこちら

【Vol.1】WordPressとSWELLで始めるホームページ制作 〜基本設定と導入〜

  • URLをコピーしました!
【Vol.1】WordPressとSWELLで始めるホームページ制作 〜基本設定と導入〜

WordPressとSWELLって何が違うの?

「WordPressとSWELL、どちらを使えばいいの?」と疑問を持つ方は多いです。実はこの2つは役割がまったく異なります

WordPressはウェブサイトを動かすエンジン(CMS)、SWELLはそのWordPress上で動くテーマ(外見と機能のセット)です。車で例えるなら、WordPressが車本体でSWELLが内装・エクステリアパッケージです。

WordPressとSWELLの関係図 🖥 レンタルサーバー (エックスサーバー / ConoHa WING など) ⚙️ WordPress(CMS・エンジン) 記事管理・ユーザー管理・プラグインなどの機能を提供 🎨 SWELL(テーマ・デザイン) デザイン・表示速度最適化・ブロックエディタ対応

図1:3層構造で理解するWordPress × SWELL

💡 POINT
SWELLはWordPressがないと動きません。まずWordPressをセットアップし、そこにSWELLを「着せる」イメージです。

全体の流れを図解で確認

「何から始めればいいの?」という疑問に答えるため、まず全体像を確認しましょう。制作の流れは大きく4ステップです。

ホームページ制作の4ステップフロー Step 1 サーバー契約 Step 2 WordPress導入 Step 3 SWELL導入 Step 4 初期設定

図2:制作の全体フロー(この記事ではStep1〜4をすべて解説)

Step 1 レンタルサーバーを選ぶ

WordPressを動かすには、インターネット上にデータを保存・公開するためのレンタルサーバーが必要です。数あるサービスの中で、初心者に特におすすめなのがエックスサーバーです。

⭐ おすすめ:エックスサーバー
国内シェアNo.1クラスの老舗レンタルサーバー。24時間365日のサポート体制業界トップレベルの安定性・速度が特徴です。WordPressの自動インストール機能も充実しており、初心者でも迷わずセットアップできます。
サービス名 月額目安 WP自動インストール おすすめ
エックスサーバー推奨 990円〜 ✔ あり ⭐⭐⭐⭐⭐
ConoHa WING 880円〜 ✔ あり ⭐⭐⭐⭐
さくらのレンタルサーバ 524円〜 △ 手動 ⭐⭐⭐

エックスサーバーが初心者に向いている3つの理由

1

サポートが充実している

電話・メール・チャットによる24時間365日対応のサポートを提供。困ったときにすぐ相談できる安心感は初心者に大きなメリットです。

2

国内最大級の利用実績・信頼度

2003年のサービス開始から20年以上の実績を持ち、250万件以上のサイトで利用されています。老舗ならではの安定性と信頼度はトップクラスです。

3

WordPressの導入がとにかく簡単

管理パネルから数クリックでWordPressを自動インストール可能。ドメイン・SSL・メールアドレスもまとめて設定でき、技術的な知識がなくてもスムーズに始められます。

Step 2 WordPressをインストール

エックスサーバーを例に、WordPressをインストールする手順を確認しましょう。管理パネル「サーバーパネル」から、わずか数ステップで完了します。

エックスサーバーでWordPressをインストールする手順 ① エックスサーバーに登録・ログイン メールアドレスとパスワードを設定 ② プランを選択 スタンダードプラン(月990円〜)がおすすめ ③ ドメインを取得・設定 例:yoursite.com(永久無料ドメインあり) ④ WordPress自動インストールを実行 サーバーパネル →「WordPress簡単インストール」 ⑤ 完了!管理画面にログイン yoursite.com/wp-admin でアクセス

図3:エックスサーバーでのWordPressインストール手順

⚠️ 注意
インストール時に設定した WordPressのユーザー名・パスワード は必ず安全な場所にメモしてください。後から変更は可能ですが、紛失するとログインできなくなります。

Step 3 SWELLを導入する

SWELLは有料テーマ(17,600円 / 買い切り)です。一度購入すれば複数サイトで使用でき、アップデートも無料で受け続けられます。

1

SWELL公式サイトで購入

クレジットカードで購入。購入後すぐにZIPファイルをダウンロードできます。

2

WordPress管理画面 → 外観 → テーマ → 新規追加

「ファイルをアップロード」からダウンロードしたZIPを選択してインストールします。

3

「有効化」をクリック

テーマが切り替わります。同時に子テーマ「SWELL Child」もインストール・有効化しておくと安心です。

4

SWELLユーザー認証を完了

管理画面上部に表示される案内に従って、購入時のメールアドレスで認証を行います。完了するとアップデートが受け取れるようになります。

Step 4 初期設定を済ませる

SWELLが有効になったら、公開前に必ず行っておくべき初期設定があります。以下を順番に確認しましょう。

初期設定チェックリスト6項目 ✅ 初期設定チェックリスト ① パーマリンク設定 設定 → パーマリンク → 「投稿名」を選択して保存 ② SSL(https)設定 設定 → 一般 → サイトURLをhttps://に変更して保存 ③ サイトタイトル・キャッチフレーズ 設定 → 一般 → サイト名とキャッチフレーズを入力 ④ タイムゾーンを東京に設定 設定 → 一般 → タイムゾーン → 「東京」を選択 ⑤ コメント機能をオフに 設定 → ディスカッション → コメントの投稿を許可のチェックを外す ⑥ SEOプラグイン(All in One SEO など)を導入

図4:公開前に必ずやっておきたい初期設定6項目

パーマリンクは最初に設定する

パーマリンクとは記事のURL構造のこと。後から変更するとSEOに影響するため、サイト公開前に必ず「投稿名」に設定しておきましょう。設定場所は設定 → パーマリンクです。

SWELLのカスタマイザーで色・フォントを調整

SWELLはWordPress標準の「カスタマイザー」から、テーマカラー・フォント・ヘッダースタイルなどをビジュアルで変更できます。まずはサイト全体のベースカラーとロゴを設定するところから始めましょう。

✅ TIP
カスタマイザーは「外観 → カスタマイズ」から開けます。変更内容はリアルタイムでプレビューできるので、コードを書かなくても直感的にデザインを調整できます。

次回予告

Vol.1ではサーバー契約〜SWELLの初期設定まで解説しました。次回Vol.2では、SWELLのデザインカスタマイズを詳しく掘り下げます。ヘッダー・フッター・サイドバーの構成、カラーパレットの作り方、フォントの選び方など、「自分らしいデザイン」に仕上げるための具体的な手順をお届けします。

📚 シリーズ構成

  • Vol.1 基本設定と導入 ← 今ここ
  • Vol.2 デザインカスタマイズ徹底ガイド
  • Vol.3 固定ページとトップページの作り方
  • Vol.4 SEO対策とパフォーマンス最適化
  • Vol.5 お問い合わせ・SNS連携と公開準備
シェアをお願いいたします!
  • URLをコピーしました!
  • URLをコピーしました!
目次