美容室、ネイル・エステサロンなどのHPをWordPressで自作する方法

そんな疑問に答えます。

美容院・ネイル・エステのHPをWordPressで自作する方法

外注せずにWordPress を使ってホームページを自作する方法を初心者向けに解説します。

まずは全体の流れです。

全体の流れ

ホームページを自作する場合にかかる費用については次の記事で解説しています。

ドメイン・レンタルサーバーを申し込む 

レンタルサーバーの申し込みは次の記事をご覧ください。

サイトが表示されるのを待つ 

反映にかかる時間は2、3時間程度です 。それ以上かかる場合もあります 。

WordPress テーマを有効化する 

「WordPressテーマ」はいわゆるデザインテンプレートのことです。

おすすめテーマSWELLを例に、 設定方法を解説します 。

他のテーマでも やるべきことは同じですが、 管理画面や機能が異なる場合があります 。

WordPress テーマの選び方は次の記事で解説しています。

WordPressの基本設定をする

次の設定を行います 。

サイトのタイトルを設定する

設定 → 一般 、「サイトのタイトル」に 店舗名を入力します 。

画面の下にスクロールして「変更を保存」をクリックします 。

サイトのタイトルは、ロゴ画像が未設定の場合に表示されます。

サイトのタイトルはいつでも変更できます。

パーマリンクの設定

パーマリンクとはページのURLのことです。

「設定」→「パーマリンク」と進み、「投稿名」を選択し設定を保存しましょう。

未設定の場合、自動的に割り振られた英数文字がURLになります。

SEO的に好ましくないのパーマリンクの設定は必ず行いましょう。

ページを作る 

表示する各ページを作成するステップです。

今回は以下のページを作ります 。

どんなページを作ったらよいかわからない場合は次の記事を参考にしてください 。

トップページを作る

トップページはその名の通りホームページの最初に表示されるページです。ホームページの訪問者が一番最初に見るページなので印象が良くなるように綺麗に仕上げましょう。

固定ページ →新規追加の順に進みます。

ページ上部の「タイトルを追加」にこのページのタイトルを入力します。

トップページなのでそのまま「トップページ」と入力します。

「ブロックを選択するには「/」を入力」と表示されている部分がコンテツエリアです。この中に入力したものがHPに表示されます。

コンテンツの入力はいったん割愛します。

画面右上の「公開」をクリックしましょう。

ページのステータスは2種類

状態	説明
公開	HPに表示する場合のオプションです。 いったん公開したものを、非公開に変更することもできます。
下書き	作成中のページを保存する場合の設定です。 任意のタイミングで公開に変更できます。

作成したページをトップページに指定する作業です。

「設定」→「表示設定」と進み、ホームページの表示で「固定ページ」を選択。

ホームページで、作成したページ（トップページ）を指定。

ページ下部の「変更を保存」をクリック。

お知らせ一覧ページを作る 

お知らせ一覧ページはスタッフブログや店舗からのお知らせを表示するページです。

WordPressで作ったサイトを例にすると以下のページのように、記事の一覧が表示されます。

固定ページ→新規追加

ページ上部の「タイトルを追加」にこのページのタイトルを入力します。

今回は「お知らせ」と入力します。

公開をクリックして設定を保存します。

作成したページに記事を表示する作業です。

「設定」→「表示設定」と進み、ホームページの表示で「固定ページ」を選択。

投稿ページで、作成したページ（お知らせ）を指定。

ページ下部の「変更を保存」をクリック。

お問い合わせページを作る

電話番号や問い合わせフォームを表示するページです 。予約受付ページとして使用しても構いません。

「固定ページ」→「新規追加」と進みます。

ページ上部の「タイトルを追加」にこのページのタイトルを入力します。

今回は「お問い合わせ」と入力します。

公開をクリックして設定を保存します。

その他のページの作り方

トップページ、お知らせ、お問い合わせページのページ作成方法を紹介しました。同じ手順でページを追加作成することができます。紹介したコンテンツ以外を作成したい場合は自由にページを作成しましょう。

レイアウト設定をする 

サイト全体のレイアウトを調整するステップです。

ヘッダーの設定をする 

ヘッダーはページ上部のパーツのことです 。 主に以下のパーツを表示するのがメインの役割です。

ロゴ画像の設定方法

「外観」→「カスタマイズ」と進みます。

「ヘッダーロゴの設定」でロゴ画像の設定からロゴ画像をアップロード。

「公開」をクリックし、設定を保存します。

表示する画像サイズは、PC上でのサイズとスマホ用のサイズを別々に指定可できます。

ロゴ画像を未設定の場合は、サイト名が表示されます。

グローバルナビ（メニュー）の設定方法

ページ上部に表示する各ページへの導線です。

「外観」→「メニュー」と進みます。

新しいメニューを作成します。

メニュー名に任意の名前をつけます。今回は「グロナビ」です。

左側の「メニュー項目を追加」から、グローバルナビに表示したいページを選びます。

メニュー設定で作成したグローバルナビの表示位置を指定します。

面倒な作業が苦手なら、「グローバルナビ」と「スマホ開閉メニュー内」にチェックを入れておきましょう。これだけでPCとスマホのメニューが表示されます。

「メニューを保存」をクリックし、設定を保存します。

メインビジュアルの設定をする 

メインビジュアルはトップページに表示される画像です。サイトの印象を決める大事な画像なのでしっかり選びましょう。

設定できるオプションの一例 

個人的には動画が一番インパクトがあるのでおすすめです 。

スマートフォンで撮影した動画をメインビジュアルに指定することもできます。

メインビジュアルにどうかを指定する場合の注意点 

動画のファイルサイズが大きくなりすぎると再生に時間がかかります。 ファイルサイズが大きくなりすぎないように注意しましょう 。

動画のファイルサイズが大きくなる原因 

動画が読み込まれる前に表示される画像を設定することもできます。メインビジュアルに動画を設定する場合は画像を合わせて設定しましょう。

サイドバーの設定をする

新着情報など、サイドバーに表示する要素を指定するステップです。

「外観」→「ウィジェット」。

左側に表示されているのがサイドバーに設置可能なパーツ一覧です。

任意のパーツを選択し、右側の共通サイドバーに移動しましょう。

ウィジェット	説明
共通サイドバー	全ページに表示されます。
トップページ専用サイドバー	トップページのみ表示されます。
追尾サイドバー	全ページに表示されます。 画面を下にスクロールしても、サイドバーに固定され表示されます。

サイドバーを非表示に設定をする

サイドバーはPCやタブレット端末でアクセスしたさいに、画面の左右どちらかに表示されるパーツです。

サイドバーは全体で非表示にすることができます。ページ単位で非表示にするといった設定も可能です。

サイドバーをサイト全体で非表示にする設定

サイドバーは、未設定の場合に表示される仕様です。サイト全体で非表示にするには次の設定を行います。

「外観」→「カスタマイズ」→「サイドバー」と進みます。

全てのチェックを外します。

「公開」をクリックし、設定を保存します。

特定のページだけサイドバーを非表示にする設定

サイドバーを非表示にしたいページの編集画面を開きます。

主に以下のパーツを表示するのがメインの役割です。

左側のオプションで固定ページを選びます。

画面を下にスクロールします 。

サイドバーのオプションで「非表示」を選択します。

「更新」 をクリックし設定を保存します。

フッターの設定をする 

フッターはページの一番下に表示されるパーツのことです。

スマートフォンサイトの設定をする 

スマートフォンで見た場合のデザインを調整するステップです。

プラグインの設定 

テーマにない機能を補完してくれるのがプラグインの役割です 。プラグインは無料で利用できるものと、有料タイプがあります。今回は無料で使える便利なプラグインだけを紹介します 。

SEOプラグインの設定

SEOは（Search Engine optimization）の略称です。検索エンジンにサイトの情報を効率的に伝えるためにプラグインを活用しましょう。

SEO SIMPLE PACKは、SWELLの開発者さんが無料公開しているプラグインです。

SEOのプラグインは海外のものが多く出回っていますが、HP作成には不必ずしも必要な機能でない搭載されており持て余すことになります。

SEO SIMPLE PACKは必要最低限の機能が含まれており、管理画面も日本語なので初心者でも扱える作りになっています。

問い合わせフォームプラグインの設定 

問い合わせフォームは必須ではありません。

メールでのやり取りが苦手な人で、電話だけで応対したい人はこのステップは不要です。

セキュリティプラグインの設定 

サイトへの不正アクセス、改ざんなどを防止するための作業です。

OGPプラグインの設定 

TwitterやFacebookなどのSNSで、HPのURLがシェアされた時の情報を調整する機能です。

OGPの設定は、SEOで解説したSEO SIMPLE PACKプラグインがそのまま使えます。別途プラグインの追加は不要です。

自分が SNS を使っていない場合でも設定をしておきましょう。

ツールの設定 

ホームページが完成したらツールの設定をしましょう。

Google アナリティクスの設定 

Google アナリティクスはアクセス記録を解析するツールです 。その名の通り Google が提供しているツールで、誰でも無料で利用できます 。

単純なアクセス数だけではなく検索に使われたキーワードや人気のあるページなどを把握することが可能になります 。

アクセス数は記録するのが目的ではなくサイトの改善に活用できます 。Google アナリティクスの利用には Google アカウントが必要です。

Google アカウントは無料で作成できます。アカウントを持っていない場合は次の URL から Google アカウント作成しましょう。

Google アカウント公式ページ

サーチコンソールの設定 

サーチコンソールは Google が提供している無料のツールです 。

サイトのエラーやウイルス感染、検索エンジンへの登録状況などを確認することができます。

サーチコンソールを利用するには Google アカウントが必要です。Google アカウント自体無料なので、アカウント作成後サーチコンソールの設定を行いましょ。

サーチコンソール

まとめ

WordPressで美容室、ネイル・エステサロンなど、美容系のHPを自作する方法について解説しました。

ぜひWordPressでHPの自作にチャレンジしてみてください