2019.12.20 2023.01.31

サポートページを作ってブランド価値＋ユーザーの満足度を高めよう！

石山芳和

こんにちは、Amazon最大化コンサルタントの専門家、石山です。

他の記事で、ドメインとサーバーの契約方法について
詳しくまとめました。

あわせて読みたい

自分だけのメルアドが持てる！サーバーとドメインの契約方法まとめ

その記事でも書きましたが、ドメインとサーバーを契約することで、
あなただけのメールアドレスを持つだけでなく、
ユーザーの満足度向上につながるサポートページも持つことができます。

今回は「サポートページを作ってブランド価値＋ユーザーの満足度を高めよう！」と題し、サポートページを持つことの意味と、その作り方について解説していきます。

↓↓↓↓最新情報を取る場合はこちら↓↓↓↓↓

サポートページを作ることの意味

そもそもサポートページがなんなのかというと、こういうイメージです。

Amazonで販売するなら基本的な顧客対応はやってくれますが、
こういうページがあると無いとでは、
与える印象がまったく違います。

フリーのメールアドレスより、
オリジナルドメインのメールアドレスの方が良いですし、
問い合わせとして伝えるのであればこういったページがある方が
ユーザーの満足度は高まりますし、ブランドとしての価値も高まります。

ブランド登録の時のブランドサイトにする場合には、
サポートページと別に商品ページも必要ですが、
先にページを作っておくのは決してマイナスにはなりません。

サポートページを作るにあたって

サポートページの作り方は色々あり、サポートサイトとして単体のページだけ作るようなやり方もありますが、今回はワードプレスというフリーのブログシステムを導入し、その中にサポートページを作るという流れです。

ステップとしては、

１、ワードプレス導入

２、プラグイン導入

３、サポートページ作成

という3ステップになります。

１、ワードプレス導入

ワードプレス（WordPress）とは？

フリーのブログシステムとは書きましたが、カスタマイズは自由自在です。

ワードプレスには「テーマ」と「プラグイン」というものが存在し、これらを使うことによってブログはもちろん、ネットショップや法人のサイトなどを作ることも可能なんです。

無料ブログではせいぜい背景を少し変えるとか、サイドバーの配置を変える程度のカスタマイズしかできないでしょうが、ワードプレスはあなた独自のカスタマイズを随所にできますし、しかも無料なんですよ。

この辺りを詳しく書くと長くなリ過ぎますので、今は「そういうものなんだ」という知識程度に留めておいてください。

ただ、あなたが実際にネットショップを持つのであれば、役に立つことは間違いありません。

そしてワードプレスをオススメする理由はカスタマイズのしやすさの他に、

・世界の四分の一のサイトはワードプレスで作られている

・Googleがワードプレスでのサイト作りを推奨している

などのことも挙げられます。

ワードプレスの導入方法

「でも、設定とかめんどくさそう」

「サイト作りの知識とか全然ないんですが？」

という意見があるかもしれませんが、導入そのものはエックスサーバーであれば驚くほど簡単です。

ただそこからのカスタマイズは多少の知識が必要になりますが、それでもイチからサイトを作るのに比べれば格段に楽です。

そして、先ほど書いた通り世界の四分の一のサイトがワードプレスで作られていることもあり、カスタマイズの方法について解説しているサイトも数多くありますので、ググれば悩みを解決できることがほとんどです。

エックスサーバーの契約や操作については、冒頭ご紹介したこちらの記事を参考にしてみてください。

今回はエックスサーバーの契約と、ドメインは取得済みという前提でお話しさせていただきます。

まずはエックスサーバーのサーバーパネルにログインし、次に「自動インストール」をクリック。

ワードプレスを導入するドメインの「選択する」をクリック。

「プログラムのインストール」をクリックし、

「WordPress日本語版」の「インストール設定」をクリック。

するとログイン情報などを入力する画面に進みます。

「インストールURL」は未記入でOKですし、ここで記載する情報は後で変更できますので、あまり深く考えなくても大丈夫です。

必要な情報の入力が終わったら、「インストール（確認）」をクリック。

入力した情報を確認して特に問題なければ「インストール（確定）」をクリック。

これでワードプレスの導入完了です。

ワードプレスの管理画面である「ダッシュボード」には、

http://あなたのドメイン名/wp-admin/

からアクセスしますので、お気に入りに入れておきましょう。

そして先ほど決めたIDとパスワードは、そのダッシュボードにログインするために必要になりますので、どこかに控えておいてください。

２、プラグイン導入

次はプラグインという拡張機能の導入です。

お問い合わせフォームを手軽に作れる、「Contact Form 7」というプラグインを導入します。

先ほどお気に入りに入れていただいた「ダッシュボード」にまずはログインします。

ダッシュボードはこのような画面の構成になっています。

左の項目の「プラグイン」→「新規追加」をクリックし、

右上の検索バーに「contactform7」と入力します。

※スペースが入るとうまく検索結果に出ません

検索結果で右下辺りにこのようなプラグインがありますので、「今すぐインストール」をクリック。

すると「インストール中」に切り替わり、

しばらくしたら「有効化」と表示されるので、そこでクリック。

有効化が完了すると、左に「お問い合わせ」という項目が新しく追加されます。

これでプラグインの導入は完了です。

３、サポートページ作成

次はサポートページ作成ですが、具体的には、

・コンタクトフォームを作成

・固定ページに貼り付けてフロントに設定

という工程があります。

「Contact Form 7」でコンタクトフォームを作成

コンタクトフォームの作成方法は、「ダッシュボード」の「お問い合わせ」→「新規追加」をクリック。

するとコンタクトフォームの作成画面になります。

まずはコンタクトフォームの名前を入力しておきましょう。名前はなんでも構いません。

そしてコンタクトフォーム作成にあたっては、「フォーム」と「メール」のタブで設定が必要です。

「フォーム」タブ

サポートページの項目は自由に決めていただいてOKですが、主には「テキスト」「ラジオボタン」「ファイル」を追加することになると思います。

ただここで追加できるのは「タグ」のみ。タグは下記の例でいうと、赤字部分にあたります。

<label> お名前 (必須)
[text* your-name] </label>

追加する場合項目の名称はあなた自身で作成し、他の項目と同じように<label></label>というタグや改行を加えましょう。

タグを作る時に多少の設定が必要ですので、設定が必要な項目には画像に注釈を入れます。注釈がない項目は、特にいじらなくてOKです。

テキスト

%e3%82%b0%e3%83%a9%e3%83%95%e3%82%a3%e3%83%83%e3%82%af%e3%82%b91

ラジオボタン

ファイル

%e3%82%b0%e3%83%a9%e3%83%95%e3%82%a3%e3%83%83%e3%82%af%e3%82%b94

設定した後に「タグを挿入」をクリックすれば、フォームに追加できます。

サンプル

一応ここでは、私が作ったサンプルのフォームを載せておきます。

購入サイト (必須)
[radio radio-43 default:1 “アマゾン” “楽天” “ヤフー” “その他”]

<label>注文番号または受注番号（必須）
[text* text-874]</label>

<label> お名前 (必須)
[text* your-name] </label>

<label> メールアドレス (必須)
[email* your-email] </label>

<label> お問い合わせ内容をご記入ください
[textarea your-message] </label>

不具合・問題点のある画像があればアップロードをお願いします
[file file-418]
[file file-419]
[file file-420]

<label>備考
[text text-875]</label>

ご希望の対応
[radio radio-44 default:1 “交換” “返金”]

[submit “送信”]

タグもそのまま使えるとは思いますが、場合によっては作り直しが必要です。

「メール」タブ

「メールタグ」を追記する

次に「メール」タブです。

デフォルトのタイトルやメール文面はこんな感じですが、このままだとあなたのところには、[your-message]しか届きませんので、書き換える必要があります。

「フォーム」で設定したタグは上にまとめて載っていますので、これを「メッセージ本文」に追記すればOKです。

どれが何かわからない場合には「フォーム」タブでチェックしてください。

ただ、「ファイル」については本文に追記しても意味がなく、その下の「ファイル添付」への追記が必要です。

サンプル

メールのサンプルです。

「題名」は割愛しますが、わかりやすいものを入れておいた方が良いと思います。

差出人: [your-name] <[your-email]>
題名: [your-subject]

購入サイト
[radio-43]

注文番号または受注番号
[text-874]

お名前
[your-name]

メールアドレス
[your-email]

お問い合わせ内容
[your-message]

備考
[text-875]

ご希望の対応
[radio-44]

保存を忘れずに

「フォーム」タブと「メール」タブの編集が終わったら、最後に「保存」をクリック。

するとフォームのショートコードが表示されますので、これをどこかにコピーしておいてください。

固定ページに貼り付けてフロントに設定

固定ページへの貼り付け

次に固定ページへの追加ですが、「ダッシュボード」の「固定ページ」→「新規追加」をクリックし、

まずは固定ページのタイトルを入力しましょう。特にタイトルの形式は問いません。

次に「パーマリンク」の右の編集をクリックし、

「support」に書き換えて、「OK」をクリック。

※ここもsupport以外でもOKです。

本文にはフォームへの入力依頼と、個人情報に関する文面を追記して、先ほどコピーしたショートコードをペーストした後に「公開」をクリックすれば、サポートページの完成です。

「ページを表示」をクリックすれば、

実際のページが見られます。

フロントページへの設定

今の状態でも、「あなたのドメイン/support/」（support以外ならその単語）にアクセスすればOKなんですが、トップページはまだ何もいじっていませんので、アクセスしたらすぐにサポートページが表示されるように設定します。

ここは、既にある程度ブランドのページができているのであれば設定は不要です。

フロントページへの設定は「ダッシュボード」で「設定」→「表示設定」をクリック。

そして「固定ページ」を選択し、

「フロントページ」の右の▼をクリックして、あなたが作成した問い合わせフォームを選びます。

そして「変更を保存」をクリックすれば、あなたのドメインにアクセスしたらすぐにサポートページが表示されます。

補足

ワードプレスのデフォルトのテーマだと、サイドバーに「ウィジェット」と呼ばれるものが配置されています。

赤枠の部分がウィジェットですね。

正直見栄えがあまり良くはないので、これを削除する方法についても解説します。

気にならない方や、既にある程度ページができていて、サポートサイトを作ることが目的であれば、読み飛ばしてもらって構いません。

これを削除する方法は、「ダッシュボード」で「外観」→「ウィジェット」をクリック。

するとサイドバーに配置されているウィジェットが表示されますので、

これを全て左にドラッグ・アンド・ドロップすれば、

サイトもこのようにスッキリしました。

サポートページの作り方については以上です。

おまけ

最後におまけとして、「Contact Form DB」というプラグインをご紹介します。

これを使うことで、お問い合わせフォームに入力された情報を
CSVやエクセルファイルなどで一括で取り出せます。

プラグインの入手についてはContact Form 7と同じように「ダッシュボード」の「プラグイン」→「新規追加」をクリックし、検索バーに「contact form DB」と入力すると、おそらく検索結果の一番に出てきますので、「今すぐインストール」をクリック。

その後もContact Form 7と同様有効化すればOKで、使うためには特に設定は不要です。

データの取り出し方は、プラグインを有効化すると「Contact Form DB」という項目が追加されますのでクリック。

「フォームを選択」というバーをクリックするとフォームが一覧で表示されますので、

データを取り出したいフォームを選択すると、このようにまずは一覧で表示されます。

データを取り出すためには、デフォルトで「Excel.xlsx」になっているバーをクリックしてデータを選択し、「エクスポート」をクリックすれば取り出せます。

まとめ（30秒で読みたい方はこちら）

・サポートページで顧客満足度、ブランド価値向上
・今回ご紹介するのは、下記3ステップで作る方法
　１、ワードプレス導入
　２、プラグイン導入
　３、サポートページ作成
・ワードプレスは世界の四分の一のサイトで使われ、Googleも推奨
・エックスサーバーであれば自動インストール可能
・プラグイン＝拡張機能。「Contact Form 7」を使用
・サポートページはフォームを作って固定ページに貼る
・サポートページを作った後、フロントページへの設定が必要