---
title: "カスタムコードを使ってウェブ体験用のコンテンツを作成する"
slug: "create-content-for-a-web-experience-using-custom-code"
abstract: "カスタムコードを使ってウェブ体験用のコンテンツを作成する方法を詳しく説明しています。"
---
# カスタムコードを使ってウェブ体験用のコンテンツを作成する

ウェブ体験にパーソナライズを適用するには、カスタム[HTML](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiences/introduction-to-web-experiences-in-sitecore-personalize/create-a-web-experience/use-html-in-a-web-experience.html "Use HTML in a web experience")、[CSS、](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiences/introduction-to-web-experiences-in-sitecore-personalize/create-a-web-experience/use-css-in-a-web-experience.html "Use CSS in a web experience")[またはJavaScript](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiences/introduction-to-web-experiences-in-sitecore-personalize/create-a-web-experience/use-javascript-in-a-web-experience.html "Use JavaScript in a web experience")を使ってバリアントを作成できます。Sitecore Personalizeウェブ体験[を実行する](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/using-client-side-javascript-in-personalization/using-client-side-javascript-in-personalization.html "Using client-side JavaScript in personalization")と、バリアントで設定された任意のHTML、CSS、またはJavaScriptを実行します。

パーソナライズを機能させるためには、ゲストデータを組織のウェブサイトに渡す必要があります。これにはゲストの名前、所在地、ロイヤルティ番号などの詳細が含まれます。これらの情報はサーバーサイドデータと呼ばれます。円滑化させるために、[FreeMarkerを使ってAPIリクエスト](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiments-in-sitecore-personalize/introduction-to-web-experiments-in-sitecore-personalize/compose-the-api-request-for-a-web-experiment/compose-the-api-request-for-a-web-experiment.html "Compose the API request for a web experiment") を作成し、関連するHTML、CSS、またはJavaScriptコードで参照する必要があります。

カスタムコードを使ってウェブ体験を作成するには:

1.  **エクスペリエンス**タイルで「**バリアントを作成**」をクリックします。
2.  **テンプレート選択**ペインで「**テンプレートを作成**」をクリックします。
3.  コードエディターでは、該当する [HTML](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiences/introduction-to-web-experiences-in-sitecore-personalize/create-a-web-experience/use-html-in-a-web-experience.html "Use HTML in a web experience")、 [CSS](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiences/introduction-to-web-experiences-in-sitecore-personalize/create-a-web-experience/use-css-in-a-web-experience.html "Use CSS in a web experience")、 [またはJavaScript](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiences/introduction-to-web-experiences-in-sitecore-personalize/create-a-web-experience/use-javascript-in-a-web-experience.html "Use JavaScript in a web experience") タブにカスタムコードを使います。
4.  [FreeMarkerを使ってAPIリクエストを作成します。](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiments-in-sitecore-personalize/introduction-to-web-experiments-in-sitecore-personalize/compose-the-api-request-for-a-web-experiment/compose-the-api-request-for-a-web-experiment.html "Compose the API request for a web experiment")
5.  **「保存**」をクリックします。
6.  コードエディタを閉じるには ![back.png](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/back.png) をクリックしてください。