---
title: "ウェブテンプレートデザインのベストプラクティス"
slug: "web-template-design-best-practices"
abstract: "体験や実験におけるデザインのベストプラクティスを活用し、ウェブエンゲージメントを最適化しましょう。アラートバーやコーナーポップアップなど、最小限の妨害を伴わないテンプレートを使いましょう。"
---
# ウェブテンプレートデザインのベストプラクティス

ウェブテンプレートはウェブサイトのインタラクティビティを高め、コンバージョン率を向上させ、ユーザーが体験や実験で特定のコンテンツに集中できるようにします。適切に設計されれば、ウェブテンプレートはユーザーのエンゲージメントを高め、プロモーション、購読、メール登録、その他の行動喚起(CTA)要素に注目を集めることができます。

ベストプラクティスに従うことで、視覚と機能でユーザーを惹きつけるウェブ体験や実験を作り出しつつ、関連コンテンツやオファーのタイムリーな配信を確実にできます。

特にモバイルユーザーにとってユーザー体験を妨げないため、最初のページのポップアップ、ウェブページの大部分を隠すデザイン、予想されるコンテンツ表示を妨げるインタースティシャルは避けることを推奨します。

ここに、Sitecore Personalize実験や体験で使えるウェブテンプレートをいくつかご紹介します。デザインの推奨事項や確立されたベストプラクティスも含まれています。

-   **Alert bar** - ウェブサイトの上部または下部に配置できるバーで、セールの告知、新製品のプロモーション、重要なメッセージの表示に最適です。
    
    -   中断レベル - 1(非常に低い)
    -   画像サイズ - 画像なし
    -   タイミング - ウェブサイトやページへの入った時、一定のスクロール後、またはアクションによってトリガーされる
    -   CTA - リダイレクト
-   **Corner pop-up** - ウェブサイト右下に表示される画像とCTAが記載されたカード。このポップアップが開いている間も閲覧を続けられます。
    
    モバイル体験では、短くも情報量のあるコピーを使用し、フォントは小さいものを選び、画像は避け、コントロールは少なくとも44平方ピクセルの大きさにしてタップしやすく、画面スペースを節約しましょう。
    
    -   混乱レベル - 4(高)
    -   画像サイズ - 位置の最大50%
    -   タイミング - ウェブサイトやページへの入った時、一定のスクロール後、またはアクションによってトリガーされる
    -   CTA - リダイレクト
    -   ヘッダー推奨文字数の最大 - 20
    -   体型最大推奨文字数 - 30
    -   CTA推奨最大文字数 - 10
-   **メールキャプチャバー** - メールアドレスを収集するための、最小限の侵入性の上下バーです。
    
    -   中断レベル - 1(非常に低い)
    -   画像サイズ - 画像なし
    -   タイミング - ウェブサイトやページへの入った時、一定のスクロール後、またはアクションによってトリガーされる
    -   CTA - データ要求
-   **メールキャプチャコーナー** - メールアドレスを集めるためのコーナーポップアップです。このポップアップが開いている間も閲覧を続けられます。
    
    モバイル体験では、不要な画面スクロールを防ぐために最大2つの入力フィールドのみを使用してください。
    
    -   混乱レベル - 4(高)
    -   画像サイズ - 場所の30%
    -   タイミング - ウェブサイトやページへの入った時、一定のスクロール後、またはアクションによってトリガーされる
    -   CTA - データ要求
    -   ヘッダー推奨文字数の最大 - 20
    -   体型最大推奨キャラクター - 20
    -   CTA推奨最大文字数 - 10
-   **Inactive tab** - プロモーションや特別メッセージでユーザーをページに引き戻すための点滅するブラウザタブ。
    
    -   混乱レベル - 2(低)
    -   画像サイズ - 画像なし
    -   タイミング - 別のタブでブラウジングしているとき
    -   CTA - 情報提供
-   **Notifications widget** - ページの隅に配置されたスライド式通知型ウィジェット。ユーザーの注意を引くためのティーザーを生成します。
    
    モバイル体験では、このウィジェットは画面の上または下隅に配置され、ユーザーのクリックで起動します。
    
    -   混乱レベル - 3(中程度)
    -   画像サイズ - 小さなアイコンまたは画像
    -   タイミング - 一定のスクロール後やアクションによってトリガーされる
    -   CTA - 情報提供
    -   体型最大推奨キャラクター - 20
-   **Pop-up takeover** - ユーザーが手動で閉じるまで画面に残るアサーティブ型ポップアップ。
    
    -   混乱レベル - 5(非常に高い)
    -   画像サイズ - 柔軟な
    -   タイミング - ウェブサイトやページへの入り時、スクロールの一定時点後、アクションでトリガーされる、終了直前、または別のタブを閲覧している時
    -   CTA - リダイレクトまたはデータ要求
-   **Side bar** - 通常、画像、テキスト、CTAを含む右アンカーの垂直パネル。
    
    -   混乱レベル - 4(高)
    -   画像サイズ - 位置の最大60%
    -   タイミング - ウェブサイトやページへの入った時、一定のスクロール後、またはアクションによってトリガーされる
    -   CTA - リダイレクトまたはデータ要求
-   **Tooltip** - ウェブページの要素や特徴を説明またはハイライトするコンテキストポップアップテキスト。
    
    -   混乱レベル - 3(中程度)
    -   画像サイズ - 画像なし
    -   タイミング - アクションによってトリガーされる
    -   CTA - 情報提供または誘導