WordPressテーマ「SALON」でサイトをつくる手順をまとめています。
WordPressを初めて使う方は、当ページを参考にすれば進めやすいです。
サイトを立ち上げるまでの流れはこのような感じです。
サイト公開は、完成度100%にこだわる必要はありません。まずは全体を形にしてから、各所を見直して改善を続ける流れがおすすめです。必ず改善できる箇所が出てくるからです。
「ネットショップは将来的でいい、まずは店舗サイトをつくりたい」という場合は、以下があればサイトを公開できます。
最低限必要なコンテンツ
・ロゴ画像 or サイト名
・トップページのヘッダー画像または動画 × 1つ
・アバウトページ（サイトの概要 トップページに入れてもOK） × 1枚
WordPress環境の用意
当サイトの取扱説明書（操作マニュアル）では、SALONをインストールしてからの設定手順を解説しています。機能別に確認可能です。
「まだWordPress環境が用意できていない」という方は以下の順番で準備していきましょう。悩む時間を含めるとしても、丸1日あれば準備できるかと思います。
- ドメインを取得
- サーバーを契約
- WordPressのインストール
- テーマのインストール
ドメインの取得
ドメインとはインターネット上の住所です。「salon.com」のようにあなたのサイトの住所（URL）を最初に決めましょう。
サーバーの契約
サーバーとは、インターネット上の土地です。月額数千円程度でレンタルします。
ドメインやサーバーの契約前に、WordPressの操作を試してみたいという方は、ローカル環境でサイトを作成する手もあります。
無料でローカル環境を作成するなら、「Local」というツールが使いやすくておすすめ。
ローカル環境で作成すれば、次のような流れで進めることもできます。
- ローカル環境でWordPressサイトをつくる（無料）
- WordPressテーマ「SALON」（有料）を有効化する
- 必要なページをつくっていく
- ドメイン・サーバーを契約する（有料）
- 本番環境にコピーする（無料）
WordPressの簡単インストール
ほとんどのレンタルサーバーで、WordPressの簡単インストール機能が搭載されています。
下記記事で「エックスサーバー」「さくらレンタルサーバ」のインストール手順を解説しています。
WordPressの簡単インストールの作業自体は、1分ぐらいで終わります。
SSL化
WordPressを無事インストールできたら、SSL化も最初に済ましておきましょう。
SSL化とは
Webサイトとそれを閲覧するユーザーの通信を暗号化する仕組み。単にサイトのセキュリティ強化だけでなく、ユーザーに安心して訪問してもらうためにも必要です。
こちらもサーバー側で設定できますので、サーバー契約時に行なっておくとスムーズです。
テーマのインストール
ご購入済みのテーマファイルは、マイページの「ダウンロードと帳票」からダウンロードできます。
ダウンロードしたテーマファイルを、WordPressの管理画面（ダッシュボード）にログインして、インストールしてください。
【STEP 1】必須設定
まずは、「表示設定」「TCDクラシックエディタプラグインのインストール・有効化」を行います。
設定といっても、表示されるメッセージでボタンをクリックするだけです。
>> テーマの初期設定
余裕があれば、「インストール直後にやっておきたいSEOの設定項目9選」も済ませておくといいでしょう。できるものだけでもOKです。
また、ネットショップを開設するために、WooCommerceプラグインも最初に導入・設定が必要です。下記記事を参考に設定してみてください。
【STEP 2】サイトの基本設定
まずはサイト全体に反映される基本設定を行いましょう。サイトのベースとなるカラー・フォント（字体）などを設定します。上記画像では、アクセントカラーをオレンジに変更しています。それだけでもサイトの雰囲気が変わることがわかります。
設定順の指定はありません。項目名をクリックして詳しい設定方法をご覧ください。
| アクセントカラー | サイト全体で使用するアクセントカラーを設定します。 |
| フォント | サイト全体のフォントタイプやフォントサイズを設定します。 |
| ロゴ | ロゴ（画像もしくはテキスト）を設定します。 |
| アイキャッチ | カーソルを合わせたときの画像アニメーションなどを設定します。 |
| SNS | 記事内のシェアボタンやSNSリンクを設定します。 |
一度仮で設定しておき、最後にサイト全体を確認しながら微調整するのがオススメです。
【STEP 3】下層ページの作成
各投稿タイプ（ページ作成機能）のエディタで「下層ページ」を作成します。WordPressの各投稿タイプとその使い分けについては以下の記事をご覧ください。
↓項目名をクリックすると詳しい設定方法をご覧いただけます。
| ページ作成機能名 | 用途・目的 |
| 投稿 |
ブログ記事の作成 >> エディタの使い方（各投稿タイプ共通） |
| お知らせ | 告知やお知らせを作成したい。 |
| 商品 | 商品を販売したい。 |
| 固定ページ「デフォルト」 （当ぺージ） |
アバウトページや利用規約、プライバシーポリシーページをつくりたい。 |
| 固定ページ「ランディングページ」 | 広告出稿用などにLP（ランディングページ）を作りたい。 |
| 固定ページ「商品ランキングページ」 | 商品ランキングページを作りたい。 |
| 投稿者ページ | 投稿者（ユーザー）ごとの記事一覧ページを作成したい。 |
| 投稿者一覧ページ | 投稿者（ユーザー）の一覧ページを作成したい。 |
はじめからすべて使う必要はなく、後から拡張していけます。用途・目的に合わせて各コンテンツを作成していきましょう。
【STEP 4】トップページ
トップページは「ヘッダーコンテンツ」と「メインコンテンツ」で構成されています。
| ヘッダーコンテンツ | サイトのファーストビューになる部分。画像スライダーやmp4動画を設定可能です。任意でロゴも設置できます。 |
| メインコンテンツ | 下層ページへの導線づくりに最適な13個のコンテンツを用意しました。 |
【STEP 3】で作成した下層ページへの導線を考えて作成します。記事内容が増えてきたらコンテンツを追加・並び替えして拡張していきましょう。
【STEP 5】ヘッダー・フッター
ヘッダーとフッターを設定していきます。トップページと同様、下層ページへの導線をまとめることを意識して作成するとよいでしょう。
メニューの作成
ヘッダーとフッターには「メニュー」を表示できます。外観 > メニューをひらいて、「STEP3」で作成した下層ページへのリンクをメニュー項目として登録します。
「WordPressのナビゲーションメニューの設定方法」も参考にご覧ください。
メニューを設定できる箇所はこちらです。
| グローバルメニュー | PC時のヘッダーに表示されます。 |
| ドロワーメニュー（モバイル専用） | スマホ時のドロワーメニュー内で表示されます。 |
| ドロワーメニュー下部1・2（モバイル専用） | ドロワーメニューの下部に左右に並べて表示されます。 |
| フッターメニュー1・2 | フッターに2段で表示されます。 |
メニュー項目は、多すぎても少なすぎても良くないです。デザインが崩れないか、見せたいページにアクセスしやすいかを考えながら設定するのがおすすめです。
メニューの数によって、次のように設定してみてください。
- 少ない場合は、メニューに登録できる下層ページを充実させる。
- 多い場合は、サブメニューで階層化して整理する。
設定方法は、「メニューの階層化を行う」を参考にご覧ください。
ヘッダー・フッター
メニューを登録できたら、ヘッダー・フッターに関する設定を行います。
↓項目名をクリックして設定方法を確認してください。
それぞれ設定時のコツがあります。ロゴのサイズ感、メニュー項目の多さ、文字量のバランスなど。下記記事も参考に設定してみてください。
>> ヘッダーバーでやってはいけないこと5選
>> フッターの役割、やってはいけないこと
【STEP 6】その他の設定
ここからの設定は必須ではありませんが、よりハイレベルなサイトを目指す場合にはぜひご活用いただきたい機能です。
| 設定・オプション名 | 用途・目的 |
| ウィジェット | サイドバーに「ウィジェット」を表示できます。 >> WordPressのウィジェットの使い方 |
| 汎用クラス | 余白・改行位置等の細部の微調整 |
| SEO | metaタグ・OGPの設定 |
| 404・検索結果ページ | 404・検索結果ページのカスタマイズ |
| 保護ページ | パスワードつき保護ページのカスタマイズ |
| ロード画面 | ページ読み込み中のロード画面設定 |
| カスタムCSS | CSSを用いた調整、トラッキングタグ埋め込み |
中でも「ウィジェット」は、各記事への導線となるコンテンツです。下層ページが充実してきたら、サイト内の回遊率を上げるためにも積極的に登録しておきましょう。広告スペースとしても活用できます。
>> SALONのオリジナルウィジェット
【完成！】定期的な更新を継続しよう
サイト完成です。お疲れ様でした！
初めてサイトを制作する際は、以下を参考にしてみてください。後からいくらでも拡張できるので、まずは小さく始めて全体像を形にすることが重要です。
- ロゴ（もしくはサイト名）の見え方が綺麗か確認する。
- ヘッダー・フッターのメニュー（ラベル・数）を整える。
- サイト内導線を増やす（特にトップページ・ウィジェット）。
さらに完成度を高めるためには、当デモサイトを参考に調整してみてください。下層ページを追加して導線を設けることで、サイトが拡張されていきます。
たとえば、次のような「各所の編集・追加・並び替えを見直す作業」を、1週間のルーティンに含めるのも有効です。
- 大事な情報は見やすい位置に配置されているか。
- 不足している情報を無いか。
- 文章は読みやすく、わかりやすいか。
- 追加できるコンテンツは無いか。
- 掲載している情報が古くないか。
項目ごとに設定方法を確認したい方は、「取扱説明書」からご覧ください。
効果的なサイト運営には、常に愛着をもって改善を続けることが大事です。それが結果的に長期的なSEO（検索エンジン最適化）や、AIO（AI最適化）にも活きてきます。
TCDが長期間のサイト運営で培ったSEOに関する知識はこちらからご覧ください。
