Blogical

AWS/Salesforceを中心に様々な情報を配信していきます(/・ω・)/

Salesforceでブランドサイト構築 - Experience Cloud(2) - Communityの基本設定

日頃よりお世話になっております。

ロジカル・アーツ株式会社のSE 輪島 幸治です。

SalesforceにExperience Cloudという企業のブランドサイトを構築できる機能があるのでご紹介させて頂きます。 *1

Experience Cloudの2本目の記事です。

この記事では、Communityの基本設定について記載させて頂きます。

前回までの記事

Salesforceでブランドサイト構築 - Experience Cloud(1) - 初期設定 - Blogical

注意事項

  • Experience Cloudの記事は機能を紹介するのが目的です。
  • パートナー企業のみに提供されているパッケージを使用しています。 (記事を読んでも、パートナー企業向けコンテンツを使用しているので、一般企業のエンジニアの方は検証はできません。)
  • Experience Cloudの検証は、Trailheadのトレイルにある関連モジュールなどを使用して、検証して下さい。

設定手順

言語を日本語に変更

1.エクスペリエンスビルダーにて、画面左側にある歯車アイコンをクリックします。

f:id:logicalarts:20211223172732p:plain
図1

2.設定メニューが表示されましたら[言語]をクリックします。

f:id:logicalarts:20211223172737p:plain
図2

3.エクスペリエンスビルダーの言語の設定画面にある"デフォルトサイト言語"をEnglish(US)から日本語に変更して、[言語を追加]を押下します。

f:id:logicalarts:20211223172742p:plain
図3

f:id:logicalarts:20220112145759p:plain
図4

4.言語を追加の画面になりますので、英語を追加します。使用可能な言語からサイト言語に英語(US)を移動させて、[保存]を押下します。

f:id:logicalarts:20211223172753p:plain
図5

f:id:logicalarts:20211223172758p:plain
図6

5.言語変更後は、右上の[×]アイコンをクリックして画面を閉じます。

f:id:logicalarts:20211223172805p:plain
図7

テーマを設定

1.次に、画面左側にあるペンのアイコンをクリックして、テーマのメニューを開きます。

f:id:logicalarts:20211223172814p:plain
図8

2.メニューが表示されましたら、"テーマを変更"をクリックします。

f:id:logicalarts:20211223172820p:plain
図9

3.[テーマを有効化]を押下します。

f:id:logicalarts:20211223172840p:plain
図10

4.テーマを変更すると、表示されていたExperience Cloudのデザインが変更されます。

f:id:logicalarts:20211223172846p:plain
図11

5.次に、ヘッダーで使用している会社のロゴを変更します。テーマの設定画面から、[画像]をクリックします。

f:id:logicalarts:20211223172849p:plain
図12

6.ヘッダーで使用しているアイコンが表示されますので、会社のロゴをクリックします。

f:id:logicalarts:20211223172855p:plain
図13

7.画像を選択の画面が表示されますので、[画像をアップロード]のボタンを押下します。

f:id:logicalarts:20211223172901p:plain
図14

8.ファイルの選択画面が表示されますので、アップロードしたいロゴを選択します。

f:id:logicalarts:20211223172907p:plain
図15

9.ファイルがアップロードされ、新しいロゴマークに変更されます。

f:id:logicalarts:20211223172912p:plain
図16

f:id:logicalarts:20211223172918p:plain
図17

f:id:logicalarts:20211223172922p:plain
図18

10.次に、テーマの設定メニューにある[色]をクリックします。

f:id:logicalarts:20211223172929p:plain
図19

11."アクションの色"にある色をクリックして、変更したい色を設定すると、画面上の色が変化することを確認します。

f:id:logicalarts:20211223172935p:plain
図20

f:id:logicalarts:20211223172944p:plain
図21

12.テーマの設定後、画面左上にある"Home"をクリックします。

f:id:logicalarts:20220112154833p:plain
図22

13.ページ設定が表示されますので、[ページのバリエーション]をクリックします。

f:id:logicalarts:20211223172950p:plain
図23

14.[新しいページのバリエーション]を押下します。

f:id:logicalarts:20211223172956p:plain
図24

15.新しいページのバリエーション画面が表示されましたら、[新しい空白のページ]を押下します。

f:id:logicalarts:20211223173002p:plain
図25

16.柔軟なレイアウトを選択して、[次へ]を押下します。

f:id:logicalarts:20220112153143p:plain
図26

17.新しいページのバリエーションにて、名前にNewHomeと入力して、[作成]を押下します。

f:id:logicalarts:20211223173012p:plain
図27

18.ガイダンスによる各セクションの説明が表示されるので、[次へ]を押下してステップ完了まで進めます。

f:id:logicalarts:20211223173018p:plain
図28

f:id:logicalarts:20211223173024p:plain
図29

f:id:logicalarts:20211223173048p:plain
図30

19.ガイダンスが完了いたしましたら、画面左上にある[Home]をクリックします。

f:id:logicalarts:20211223173052p:plain
図31

20."Home"の左にある"..."のリンクをクリックします。

f:id:logicalarts:20211223173058p:plain
図32

21.ページのバリエーションが表示されましたら、作成したNewHomeにある[▼]をクリックて、[デフォルトに設定]をクリックします。

f:id:logicalarts:20211223173104p:plain
図33

f:id:logicalarts:20211223173110p:plain
図34

22.設定を変更しましたら、[×]を押下して、ページ設定の画面を閉じます。

f:id:logicalarts:20211223173116p:plain
図35

23.再度、テーマの設定を行うために画面左側にあるペンのボタンをクリックします。

f:id:logicalarts:20211223173121p:plain
図36

24."ヒーローを表示"、"最大ページ幅を設定"をクリックしてチェックを外します。

f:id:logicalarts:20211223173127p:plain
図37

25.[×]を押下して、テーマの設定画面を閉じます。

f:id:logicalarts:20211223173133p:plain
図38

メインコンテンツとフッター作成

1.画面上にコンポーネントを配置するために、画面左側にあるイナズマアイコンをクリックします。

f:id:logicalarts:20211223173138p:plain
図39

2.[リッチコンテンツエディア]をドラッグ&ドロップでページに配置させます。

f:id:logicalarts:20211223173143p:plain
図40

3.ガイダンスが表示されたら、[×]をクリックして閉じます。

f:id:logicalarts:20211223173148p:plain
図41

4.リッチコンテンツエディアを配置するとテキストを編集できるようになるので、テキストをブランドサイトに表示したいテキストに置き換えます。

f:id:logicalarts:20211223173153p:plain
図42

f:id:logicalarts:20211223173202p:plain
図43

5.同様に、フッダーにリッチコンテンツエディアをドラッグ&ドロップして配置させます。

f:id:logicalarts:20211223173207p:plain
図44

f:id:logicalarts:20211223173212p:plain
図45

f:id:logicalarts:20211223173218p:plain
図46

6.フッダーを編集して、ブランドサイトのフッダーを作成します。

f:id:logicalarts:20211223173221p:plain
図47

Communityの基本設定については、以上です。 次は、Salesforce CMSのセットアップについてご紹介させて頂きたいと思います。

よろしくお願いいたします。

弊社について

・ロジカル・アーツ株式会社 - AppExchange

appexchangejp.salesforce.com

弊社の特長

Salesforce導入コンサルティングサービス (SalesCloud/ServiceCloud/CommunityCloud/AppCloud/Pardot/Einstein Analytics/EinsteinChatBot)

Salesforceへの機能移行、データ移行サービス、サポートサービス  新規はもちろん、既存システムを活用・併用しながらのSalesforce運用も支援いたします。

・カスタムアプリケーション開発  弊社のサービスのひとつである、派遣業務にて、Salesforceを活用しております。

*1:Experience Cloud関連のコンテンツですが、私が画面スクリーンショットを取得したり 、補足説明を記載させて頂いているのですが、弊社、技術部のエンジニアチーム協力のもと作成をさせて頂いております。