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