WordPressテーマ「QUALIA」でサイトをつくる手順をまとめています。
サイトを立ち上げるまでの流れは、次の8ステップです。
はじめてサイトを作る方でも手順通りに進めていくことでサイトを公開できます。
「QUALIA」をヨガやピラティススタジオなどのサイトに利用される場合、次のコンテンツを作成するとサイト公開できます。
最低限必要なコンテンツ
・ロゴ画像 or サイト名
・トップページのヘッダー画像または動画 × 1つ
・プログラムページ（サービスを紹介するぺージ） × 1枚
・アクセスページ（アバウトぺージに入れてもOK） × 1枚
立ち上げ当初はコンテンツが少なくとも、あとから充実させていけばいいです。
【STEP 1】WordPressの導入
WordPressでサイトをつくるには、住所（ドメイン）・土地（サーバー）が必要です。
以下の順番で進めていきましょう。初めての方で悩む時間を含めるとしても、1日あれば準備できるはずです。
- ドメインを取得
- サーバーを契約
サーバーを契約すると、WordPressのインストールは簡単に行えます。
STEP 1-1. ドメインの取得
ドメインとはインターネット上の住所です。「test-site.com」のようにあなたのサイトの住所を最初に決めましょう。
STEP 1-2. サーバーの契約
サーバーとは、インターネット上の土地です。月額数千円程度でレンタルするのが一般的です。
WordPressの簡単インストール
ほとんどのレンタルサーバーで、WordPressの簡単インストール機能が搭載されています。
下記記事では、簡単インストールの手順を解説していますので参考にご覧ください。
WordPressの簡単インストールの作業自体は、1分ぐらいで終わります。
SSL化
WordPressを無事インストールできたら、SSL化という作業も最初に済ましておきましょう。
SSL化とは
サイトのセキュリティ強化、ユーザーに安心して訪問してもらうために必要です。
こちらもサーバー側で設定できますので、サーバーを契約時に行なっておくとスムーズです。詳しい手順はこちらで解説していますので、参考にご覧ください。
【STEP 2】初期設定
WordPressのインストールが終わり、管理画面（ダッシュボード）にログインしたら、次の3つの作業を行います。ほんの数分で終わります。
- テーマのインストール
- 表示設定（ボタンを押すだけ）
- プラグイン「TCDクラシックエディタ」のインストール
WordPressテーマ「QUALIA」を有効化すると、以下のメッセージが表示されます。「TCDクラシックエディタ」プラグインをインストールして、有効化まで済ませておきましょう。
ここまでは「QUALIA」をお使いいただくために必須となる設定です。
余裕があれば、次の記事で紹介しているような設定も済ませておくといいでしょう。できるものだけでもOKです。
【STEP 3】サイトの基本設定
続いて、サイト全体に反映される基本設定を行いましょう。サイトのベースとなるカラー・フォント（字体）などを設定します。上記は、アクセントカラーを変更したサンプルです。当デモサイトと比較すると、雰囲気が変わることがわかります。
設定順の指定はありません。項目名をクリックして詳しい設定方法をご覧ください。
| アクセントカラー | サイト全体で使用するアクセントカラーを設定します。 |
| フォント | サイト全体のフォントタイプやフォントサイズを設定します。 |
| ロゴ | ロゴ（画像もしくはテキスト）を設定します。 |
| アイキャッチ | カーソルを合わせたときの画像アニメーションなどを設定します。 |
| SNS | SNSシェアボタンや、フッターのSNSリンクを設定します。 |
これらは一度仮で設定しておいて、最後にサイト全体を確認しながら微調整するのがオススメです。
【STEP 4】下層ページ
下層ページは、各投稿タイプ（ページ作成機能）のエディタで作成します。WordPressの各投稿タイプとその使い分けについては以下の記事をご覧ください。
QUALIAでは、次のページ作成機能を用意しました。
↓設定方法は、項目名をクリックしてご覧いただけます。
| ページ作成機能名 | 用途・目的 |
| 投稿 |
ブログやコラムなど、集客用の記事を書きたい。 >> エディタの使い方（各投稿タイプ共通） |
| お知らせ | 最新情報などを告知したい。 |
| プログラム | プログラム（サービス）を紹介したい。 |
| よくある質問 | よくある質問・FAQを作りたい。 |
| 固定ページ「デフォルト」 （当ぺージ） |
特商ぺージなどシンプルな固定ページを作りたい。 |
| 固定ページ「ランディングページ」 | 広告出稿用のLPを作りたい。 |
用途・目的に合わせて設定しましょう。すべて使う必要はありません。スクールなどの施設サイトであれば、プログラム（サービス）ページとアクセスぺージだけでも作成しておくとよいでしょう。もちろん後から拡張可能です。
【STEP 5】トップページ
トップページは、ヘッダーコンテンツ・3列バナー・メインコンテンツで構成されています。
| ヘッダーコンテンツ | サイトのファーストビューになる部分。画像か動画をセットできます。非表示でも使えます。 |
| 3列バナー | 画像とテキストを設定してバナーを表示できます。 |
| メインコンテンツ | 導線づくりに最適なコンテンツを用意しました。 |
【STEP 4】で作成した下層ページへの導線を考えて作成しましょう。デザインされたコンテンツも画像やテキストを入れるだけで設定できます。画像は多めに用意しておくといいですね。追加や並び替えも簡単に行えます。
【STEP 6】メニュー
作成した下層ページを「メニュー」として登録してヘッダーやフッターに表示させましょう。上記はヘッダーにメニューを表示した例です。
外観 > メニューから登録できます。
メニューの詳しい設定方法はこちらの記事を参考にご覧ください。
メニュー項目は、多すぎても少なすぎても良くないです。
・少ない場合は、メニューに登録できる下層ページを充実させる。
・多い場合は、子メニューで階層化したりメガメニューを活用して整理する。
そうすることで、訪問者に親切なだけでなくサイトのクオリティがアップします。
【STEP 7】ヘッダー・フッター
【STEP 6】でメニューを登録できたら、ヘッダー・フッターに関する設定を行います。
↓項目名をクリックして設定方法を確認してください。
それぞれ設定時のコツがあります。ロゴのサイズ感、メニュー項目の多さ、文字量のバランスなど。下記記事も参考に設定してみてください。
>> ヘッダーバーでやってはいけないこと5選
>> フッターの役割、やってはいけないこと
【STEP 8】ウィジェット
投稿・お知らせ・固定ページのサイドバーとフッターに、外観 > ウィジェットで設定した「ウィジェット」を表示できます。
>> WordPressのウィジェットの使い方を詳しく見る。
WordPressにはあらかじめ複数のウィジェットが搭載されていますが、QUALIAオリジナルのウィジェットを用意しています。こちらの記事も参考にご覧ください。
ウィジェットは、各記事への導線となる重要なコンテンツです。下層ページが充実してきたら、サイト内の回遊率を上げるためにも積極的に登録しておきましょう。広告を表示するスペースとしても活用できます。
【完成！】定期的な更新を継続しよう
お疲れ様でした！
初めてサイトを制作する際は、以下を参考にしてみてください。後からいくらでも拡張できるので、まずは小さく始めて全体像を形にすることが重要です。
- ロゴ（もしくはサイト名）の見え方が綺麗か確認する。
- ABOUTページやアクセスぺージを確認する。
- ヘッダーメニューのリンク先、項目数を整える。
さらに完成度を高めるためには、当デモサイトを参考に調整してみてください。下層ページを追加して導線を設けることで、サイトが拡張されていきます。
デモサイトや完成したサイトを見直して、追加できるコンテンツは無いか、不足している情報を無いか自ら巡回してみましょう。気付いたことを変更したり、定期的に更新することで「活きたウェブサイト」になりクオリティも上がっていきます。
項目ごとに設定方法を確認したい方は、「設定マニュアル」からご覧ください。
高度な設定
よりハイレベルなサイトを目指す場合は次の機能もぜひご活用ください。
| 設定・オプション名 | 用途・目的 |
| 料金表・バナー | サイト内各所で呼び出せる「料金表」「バナー」「テキストとボタン」 |
| 汎用クラス | 余白・改行位置等の細部の微調整 |
| SEO | metaタグ・OGPの設定 |
| 404・検索結果ページ | 404・検索結果ページのカスタマイズ |
| 保護ページ | パスワードつき保護ページのカスタマイズ |
| ロード画面 | ページ読み込み中のロード画面設定 |
| カスタムCSS・スクリプト | CSSを用いた調整、トラッキングタグ埋め込み |
| ユーザープロフィール | ユーザー（サイト運営者）プロフィールの登録・公開 |
| ユーザー一覧ページ | ユーザー（サイト運営者）プロフィールの一覧表示 |
| 子テーマ | テーマファイルをカスタマイズされる方向けに、子テーマを配布しています。 |
長期的かつ本格的なサイト運営にはSEOの知識も必要になってきます。TCDが15年間のサイト運営で培ったSEOに関する知識はこちらからご覧ください。