---
title: "ウェブテンプレートを作成しましょう"
slug: "create-a-web-template"
abstract: "HTML、CSS、JS、FreeMarkerをSitecore Personalizeで使ったウェブテンプレートを作成し、動的なカスタマイズでマーケターの体験を向上させます。"
---
# ウェブテンプレートを作成しましょう

技術チームのメンバーはHTML、CSS、JavaScript、FreeMarkerを使ってウェブテンプレートを作成できます。

オプション [で、](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/developer-center/web-templates/create-a-web-template/create-a-form-for-a-web-template.html "Create a form for a web template")マーケターがフォームを記入し、マーケターがフォームを記入する際にプレビューをレンダリングすることもできます。

ウェブテンプレートをマーケターに提供する準備ができたら、ステータスを公開中に変更してください。マーケターがウェブテンプレートに基づいてウェブの実験や体験を作成すると、さらなるカスタマイズを適用するためのフォームが表示されます。

*User*、*Developer*、*Admin*またはSitecore Cloud Portalの役割を持つチームメンバーはウェブテンプレートを作成できます。

ウェブテンプレートを作成するには:

1.  ナビゲーションメニューで「 **開発者センター** 」> **ウェブテンプレート**をクリックしてください。
    
2.  **ウェブテンプレート**ページで「**作成**」をクリックします。
    
3.  「 **テンプレートの名前** 」欄にウェブテンプレートの直感的な名前を入力してください。入力すると、テンプレートの名前が**ID**フィールドに表示されます。
    
4.  **作成**をクリックします。テンプレートエディターは、以下の画像のようにHTML、CSS、JavaScript、FreeMarkerを使ってカスタマイズできるように表示されます。
    
    ![Configuring HTML in a web template.](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/DevCenterWebtemplate.png)
    
5.  ウェブテンプレートの構造と内容を定義するには、**HTML**、**CSS**、**JavaScript**、**API**タブを使ってカスタムコードを追加し、APIレスポンスを設定してください。
    
    Sitecore Personalizeがウェブ実験や体験のために [バリアントを実行する](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/using-client-side-javascript-in-personalization.html "Using client-side JavaScript in personalization") 際、そのバリアントで設定された任意のHTML、CSS、またはJavaScriptを実行します。パーソナライズを成功させるためには、バリアントはゲストデータを組織のウェブサイトに渡さなければなりません。例えば、ゲストの名前、所在地、ロイヤルティ番号などです。この情報はサーバーサイドデータと呼ばれます。円滑化させるために、FreeMarkerを使ってAPI応答を作成し、関連する[HTML](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiments-in-sitecore-personalize/introduction-to-web-experiments-in-sitecore-personalize/create-a-web-experiment/use-html-in-a-web-experiment.html "Use HTML in a web experiment")、[CSS](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiments-in-sitecore-personalize/introduction-to-web-experiments-in-sitecore-personalize/create-a-web-experiment/use-css-in-a-web-experiment.html "Use CSS in a web experiment")、[またはJavaScript](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiments-in-sitecore-personalize/introduction-to-web-experiments-in-sitecore-personalize/create-a-web-experiment/use-javascript-in-a-web-experiment.html "Use JavaScript in a web experiment")タブで参照してください。
    
6.  右側ペインの **設定** タブをクリックして、以下の設定をしてください:
    
    -   **説明**:ウェブテンプレートの説明を入力します。
    -   **タイル画像**: ![Edit icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/CDP_webtemp_pencilicon.png) アイコンをクリックすると、ウェブテンプレートの種類を表す画像を選択します。この画像を見るのはSitecore CDPユーザーだけです。
    -   **エクスペリエンスでプレビューをレンダリング**する:このチェックボックスを選択して、ユーザーがフォームを入力する際にウェブ実験や体験のプレビューをレンダリングします。公開前にウェブ体験が正常にレンダリングされるかどうかテストすることをお勧めします。 handlebars ループを使うより高度なウェブテンプレートにはこのオプションを使用しないでください。ウェブ実験や体験はフォームが完成してもレンダリングされません。コードのコンパイルが完了するまで待たなければならないためです。
7.  **「保存**」をクリックします。
    
8.  ウェブテンプレートを公開するには、トグルスイッチをクリックしてテンプレートを*Published*状態に設定します。これにより、ユーザーがウェブテンプレートを使って新しい体験や体験バリアントを作成する際に利用可能になります。