Salesforce Community Cloud コミュニティサイト機能により10分程度でWebサイト(カスタマーサポートサイト)を作ってみた

はじめに
===

本記事は [LIFULL Advent Calendar 2019](https://qiita.com/advent-calendar/2019/lifull3 "LIFULL Advent Calendar 2019") の最終日の記事です。

[株式会社LIFULL](https://lifull.com/ "株式会社LIFULL") でSalesforce等を利用させて頂きながら、SFA/CRMといったビジネス機能やビジネスプラットフォームの開発に取り組んでいる 青木 直之 と申します。
よろしくお願いいたします！

本記事は Salesforce [Community Cloud](https://www.salesforce.com/jp/products/community-cloud/faq/ "Community Cloud") の [コミュニティサイト機能](https://help.salesforce.com/articleView?id=networks_resources.htm&type=5 "コミュニティサイト機能") という機能を利用し、10分程度で簡単なWebサイトを作り、インターネット上に公開するまでの流れをご紹介する記事です。

**Salesforceのコミュニティサイト機能を使用しますと、以下のようにPC/モバイル両方で利用可能なレスポンシブなWebサイトを簡単に作成できます！**

<img width="857" alt="スクリーンショット 2019-12-25 21.09.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/708dad57-9492-1099-998b-4696eead8185.png">

<img width="359" alt="スクリーンショット 2019-12-25 21.54.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/91b367b9-5d4b-efa2-3941-c2cef06d2485.png">

本記事の概要
===

- Salesforceの [コミュニティサイト機能](https://help.salesforce.com/articleView?id=networks_resources.htm&type=5 "コミュニティサイト機能") を利用することで、Salesforceアカウントをお持ちでないユーザ様もご利用いただけるWebサイトを作成可能です。

- 本記事では、ユーザ様向けのカスタマーサポートサイトをテーマとして、コミュニティサイト機能により簡単なWebサイトを作るまでの流れ、コミュニティサイトでどんなことができるか一例をご紹介させていただきます。

本記事で作成するサイト(カスタマーサポートサイト)の背景
===

- ユーザ様のさまざまな課題解決やHappyを目指し、日々さまざまなWebサービスが開発され、運営されていると思います。サービス運営者や開発者のみなさまは日々多くの時間を使い、ご尽力頂いているかと思います！

- ユーザ様にとって、価値のあるより良いサービスに進化させていく為には、サービス運営者としてはWebサービスをローンチして終わりではなく、ユーザ様からのフィードバックやご意見ご要望を頂いて、**「サービスを改善し続けていくこと」**が大切と考えております。

- 例えば、ユーザ様がWebサービスの操作方法をはじめとした、Webサービスに関するさまざまなご意見ご要望を問い合わせることができる問い合わせフォームをご提供したり、よくあるご質問やFAQを掲載した「カスタマーサポートサイト」を準備し、ユーザサポート体制を整えていく事が大切と考えております。

- しかしながら、サービス開発や運営にあたり、人手が不足していたり、開発工数やコストの関係で、カスタマーサポートサイトを作るリソースを準備できない場合も、時にはあるかもしれません。

- そういった場合、**Salesforceのコミュニティサイト機能を利用いただくことで、少ない工数で素早くカスタマーサポートサイトを作るという選択肢もあるかと思いますので、ご紹介いたします。**

本記事でご紹介するカスタマーサポートサイトの機能について
===

本記事では、ユーザ様がサービスの操作方法といったナレッジを検索したり、問い合わせを行える、以下の機能をもったカスタマーサポートサイト作成の流れについて、ご紹介いたします。

- ユーザ様からのよくあるご質問やFAQ等について、ナレッジ記事を作成し、カスタマーサポートサイトに掲載。
- カスタマーサポートサイト上で、ユーザ様がナレッジ記事を検索・閲覧できる。
- カスタマーサポートサイト上で、ユーザ様が簡易なフォームから質問や問い合わせを行うことができる。
- ユーザ様がSalesforceのユーザアカウントを持っていなくても閲覧・利用可能なカスタマーサポートサイトを公開する。
- 作成するカスタマーサポートサイトはPC/モバイル両方で利用可能なレスポンシブサイトとする。
- カスタマーサポートサイトはフルHTTPSとする。

本記事でご紹介しないこと
===

カスタマーサポートに関する以下の部分につきましては、手順や記事内容が膨大になる為、本記事では割愛させて頂きます。

- カスタマーサポートサイト構築に伴う、コミュニティサイトのゲストユーザプロファイルのケース、ナレッジオブジェクト等のアクセス権設計
- コミュニティサイト機能が持つ各機能の詳細なご説明
- カスタマーサポートセンターの業務フロー設計、お問い合わせ受付時のキュー設計、カスタマーサポート組織や人員の体制、運用ノウハウ

まずはコミュニティサイト機能によるWebサイト作成までの流れをシンプルにご説明する為、複雑な設定や詳細な手順の記載は避けて、なるべくシンプルな形でご紹介させて頂きます。

本記事を試した環境
===

本記事のSalesforceコミュニティサイト機能によるカスタマーサポートサイト作成については、「無料」で試せる以下のSalesforce環境を利用して構築しております。

- [Salesforce Developer Edition](https://developer.salesforce.com/signup "Salesforce Developer Edition")

SalesforceのUIとして、以下の2種類がございます。

- [Salesforce Lightning Experience](https://trailhead.salesforce.com/ja/content/learn/modules/lightning-experience-for-salesforce-classic-users "Salesforce Lightning Experience")
- [Salesforce Classic](https://trailhead.salesforce.com/ja/content/learn/trails/getting_started_crm_basics "Salesforce Classic")

コミュニティサイト機能によるカスタマーサポートサイト作成については、Lightningでも作成可能ですが、一部の手順で、Classicを利用します。

本記事では混乱を避ける為、作業の流れは [Salesforce Classic](https://trailhead.salesforce.com/ja/content/learn/trails/getting_started_crm_basics "Salesforce Classic") をベースとして、説明させて頂きます。

Salesforceコミュニティサイトによるカスタマーサポートサイト作成の流れ
===

### (1) Salesforce Developer Editionのアカウントを取得する

Webブラウザから以下のページへアクセスし、Salesforce Developer Editionのアカウントを取得します。

[Salesforce Developer Edition](https://developer.salesforce.com/signup "Salesforce Developer Edition")

### (2) 取得したSalesforce Developer Editionアカウントで、Salesforceへログインする

[Salesforceログイン画面URL](https://login.salesforce.com/ "Salesforceログイン画面URL")

### (3) Salesforceの「設定」画面を開く

Salesforceへログイン後、画面右上の「設定」をクリックします。

<img width="1207" alt="スクリーンショット 2019-12-25 18.53.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/60153438-827b-415a-9dd4-9247bdf4044c.png">

### (4) Salesforceコミュニティサイトの作成画面を開く

「設定」をクリックすると、画面左側に検索テキストボックスが表示されます。
そこに「コミュニティ」と入力しますと、「コミュニティ」という文字列を含む設定メニューが表示されます。

「設定」→「カスタマイズ」→「コミュニティ」の「すべてのコミュニティ」をクリックします。

「新規コミュニティ」をクリックします。

<img width="1229" alt="スクリーンショット 2019-12-25 20.02.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/4cef0756-d704-d3db-9ee8-181d0fc3647d.png">

### (5) コミュニティサイト作成画面「ワークスペース」が表示される。「管理」と「ビルダー」でコミュニティサイトを作成する

<img width="1191" alt="スクリーンショット 2019-12-25 23.31.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/9da095c2-c5f6-c2c5-d7a2-d85e848d7fbb.png">

「ビルダー」ではサイトのデザインやUI設定を行います。
ドラッグ&ドロップでサイトに表示するコンポーネントを配置したり、画像やHTMLを差し込む等、さまざまな設定を行えます。

Salesforceユーザアカウントをお持ちでないユーザ様がアクセス可能なサイトを作るには、左側にあるハンバーガーアイコン下にある「設定」アイコンをクリックします。

<img width="1197" alt="スクリーンショット 2019-12-26 0.58.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/951625af-7229-273e-13c5-0e5762ede2e6.png">

「設定」→「全般」の「公開ユーザがコミュニティサイトにアクセスできます」にチェックをつけます。

<img width="1037" alt="スクリーンショット 2019-12-26 0.58.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/75bd2417-bd57-e5ef-abd4-58205fba361d.png">


### (6) 作成したコミュニティサイト(カスタマーサポートサイト)を公開する

コミュニティサイト作成画面「ワークスペース」の「管理」→「設定」→「コミュニティの有効化」をクリックすると、作成したコミュニティサイトを公開できます。

<img width="1047" alt="スクリーンショット 2019-12-26 2.29.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/40795b56-23ba-0fa4-65a9-9fee1519e76f.png">

なお、公開したサイトは「管理」→「設定」→「無効化」ボタンをクリックすると、サイト公開を停止することができます。

<img width="1056" alt="スクリーンショット 2019-12-26 2.31.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/3f1312ab-f7e8-2c52-6908-ef3641c92a21.png">

Salesforceコミュニティサイト機能により作成したカスタマーサポートサイトの例
===

### (1) ユーザ様にカスタマーサポートサイトへアクセスいただく

簡素なサイトで恐縮ですが、以下はSalesforceコミュニティサイト機能により作成、公開したカスタマーサポートサイトの例です。

例えば、以下のURLでカスタマーサポートサイトを有効化すると、1分も待たず、インターネットからサイトへアクセスできるようになります。

https://**************.ap*.force.com/customersupport/

<img width="1204" alt="スクリーンショット 2019-12-25 19.57.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/c4dcaeaa-0098-8ddf-0de5-7a7c07ce97b7.png">

### (2) ユーザ様にナレッジ記事を検索いただく

例えば、PCという文字列を含むナレッジ記事を検索したい場合、PCと入力して「検索」をクリックします。

<img width="1026" alt="スクリーンショット 2019-12-25 20.06.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/9145d2ba-d22b-8c9b-c5b0-eb7f8685989b.png">

条件にヒットするナレッジ記事が表示されます。

<img width="744" alt="スクリーンショット 2019-12-25 19.58.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/58f3e91b-3a63-adf0-f6dc-97d7e7f521ca.png">

<img width="782" alt="スクリーンショット 2019-12-25 20.11.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/ff2f6e63-b9a7-0fe5-c726-d31117adf044.png">

### (3) ユーザ様からのお問い合わせ

ユーザ様はカスタマーサポートサイト下部にあるフォームから問い合わせを行うこともできます。

<img width="1012" alt="スクリーンショット 2019-12-25 20.15.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/ac17b1c8-0e88-e382-6485-fa2dbddfe9a9.png">

<img width="892" alt="スクリーンショット 2019-12-25 20.20.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/b945124f-a21e-af11-d8ed-81522266edf1.png">

### (4) サービス運営者がユーザ様からのお問い合わせを確認・対応する

前述の問い合わせフォームから登録いただいた問い合わせについては、Salesforceの「ケース」オブジェクトに登録されます。

サービス運営者の方やカスタマーサポート担当の方は「ケース」に登録されたユーザ様からのお問い合わせを確認します。
ユーザ様からのお問い合わせを解決したり、頂いたご意見を参考にしながら、サービス改善に取り組みます。

<img width="1230" alt="スクリーンショット 2019-12-25 20.22.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/33489c8f-959b-2691-7b54-9117516477f5.png">

「ケース」に登録された問い合わせの「詳細」タブをクリックします。
ユーザ様からお問い合わせいただいた情報を確認できます。

<img width="759" alt="スクリーンショット 2019-12-25 20.29.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/ec599619-c141-5f3a-38c3-05272281b537.png">

<img width="1045" alt="スクリーンショット 2019-12-25 20.31.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/f9ded3db-b626-bc46-7106-95b4b10ae4ff.png">

最後に
===

- 本記事で作成したサイト例は簡単なものではありますが、Salesforceコミュニティサイト機能を利用することで、Salesforceアカウントをお持ちでないユーザ様もご利用いただけるWebサイトを作成可能です。

- もし、カスタマーサポートサイトを用意したいと考えているものの、開発工数やリソースがなくてお困りのサービス運営者や開発者の方がいましたら、選択肢の一つとして、「[コミュニティサイト機能](https://help.salesforce.com/articleView?id=networks_resources.htm&type=5 "コミュニティサイト機能")」の利用を考えてみるのも良いのではないでしょうか！

- Community Cloudやコミュニティサイトには、Webサイト作成に役立つさまざまな機能が用意されています。Community Cloudやコミュニティサイトの機能や活用方法を学んでみたい方は、Salesforce社が無料で提供している学習サイト [「Trailhead」](https://trailhead.salesforce.com/ja/content/learn/modules/community_cloud_basics "Trailhead") を利用して、どなたでも無料で学習いただけます。ご興味ありましたら、そちらもご活用頂ければと思います。

- 最後に、今回の記事がみなさまにとって、何らかの参考になれば幸いです。拙い記事をご覧いただき、ありがとうございました！

以上になります。