メインコンテンツまでスキップ
バージョン: 4.6.1

簡単設定

簡単設定は、コードを記述せずに事前待合室デザイン属性を修正できる直感的なインターフェースを提供します。このドキュメントでは、簡単設定の各設定がプレビューにどのような影響を与えるか、および変更がリアルタイムでどのように反映されるかを説明します。

クイックリファレンス​

設定影響を受ける要素カスタマイズ可能な属性注意事項
言語選択すべてのテキスト要素言語（韓国語、英語、日本語、スペイン語）固定言語、すべてのUIテキストに影響
テーマ選択全体レイアウトテーマ構造および要素配置変更
整列設定主要UI要素グリッド位置（9グリッドレイアウト）デフォルト: 上部中央
色カスタマイズ（1次）フッターテキスト色フッター
色カスタマイズ（2次）イベント時間色日付および時間表示
タイトルタイトル要素テキスト、フォント、フォントサイズ、フォント色、可視性目アイコントグル使用可能
ライブメッセージのプレビューライブメッセージ表示フォント、フォントサイズ、フォント色、可視性セグメント設定で構成されたコンテンツ
待合室の内容待合室の内容テキストテキスト、フォント、フォントサイズ、フォント色、可視性目アイコントグル使用可能
ファビコンブラウザタブアイコン画像ファイルまたはURLURLトリガー統合にのみ適用
ウェブページのタイトルブラウザタブタイトルテキストURLトリガー統合にのみ適用
画像 1画像 1領域画像ファイル/URL、色、不透明度、可視性テーマに応じた位置
画像 2画像 2領域画像ファイル/URL、色、不透明度、可視性テーマに応じた位置
画像 3主要UI背景色、不透明度、可視性主要UI要素内背景
背景画像画面背景画像ファイル/URL、色、不透明度主要UI要素外部領域
タイマートグルタイマー表示トグル（有効化/無効化）有効化時カウントダウンタイマー表示
待機キャンセルボタン待機キャンセルボタントグル、URL、テキスト、フォント色、フォント不透明度、背景色、背景不透明度リダイレクト機能のためにURL必要

概要​

簡単設定を通じて、シンプルなUIコントロールで事前待合室デザインのさまざまな側面をカスタマイズできます。すべての変更はプレビュー領域に即座に反映され、修正結果をリアルタイムで確認できます。

言語設定​

言語選択​

事前待合室インターフェースの言語を構成します。

  • 利用可能な言語: 4つの言語がサポートされます：韓国語、英語、日本語、スペイン語
  • 固定言語: 固定された編集不可能な言語で、事前待合室インターフェースのテキスト要素を変更します
  • プレビューへの影響: 言語変更はプレビューのすべてのテキスト要素に即座に影響を与えます

テーマおよびレイアウト​

テーマ選択​

利用可能な事前待合室テーマから選択します。

  • 利用可能なテーマ: さまざまなテーマが提供されます
  • プレビューへの影響: テーマ選択はプレビューに表示される全体レイアウトと構造を変更します
  • テーマ別機能: 各テーマは要素が表示される方法に影響を与える独自の特性を持ちます

整列設定​

画面で主要UI要素の位置を構成します。

  • 9グリッドレイアウト: 画面が9グリッドレイアウト（3x3）に分割されます
  • 位置オプション: 主要UI要素を配置するグリッド位置を選択します
  • プレビューへの影響: 位置変更はプレビュー領域で即座に表示されます

色カスタマイズ​

2つの色選択器を使用して、さまざまな事前待合室要素の色を修正します。

最初の色選択器​

最初の色選択器は以下の要素に影響を与えます：

  • フッターテキスト: "Powered by NetFUNNEL | © STCLab Inc."

2番目の色選択器​

2番目の色選択器は以下の要素に影響を与えます：

  • イベント時間: 日付および時間表示

  • プレビューへの影響: 色変更はプレビューに即座に反映されます

タイポグラフィ設定​

タイトル​

事前待合室タイトルを構成します。

  • テキスト入力: タイトルテキストを入力（例：「タイトルを入力してください」）
  • フォント: 利用可能なオプションからフォントを選択
  • フォントサイズ: ピクセル単位でフォントサイズを調整（例：20px）
  • フォント色: 色選択器を使用してフォント色を選択
  • 可視性トグル: 目アイコン（👁️）ボタンを使用してUIでタイトル要素を表示/非表示
  • プレビューへの影響: タイトル変更はプレビュー領域に即座に表示されます

ライブメッセージのプレビュー​

ライブメッセージのプレビューセクション表示設定を構成します。

  • フォント: 利用可能なオプションからフォントを選択
  • フォントサイズ: ピクセル単位でフォントサイズを調整（例：14px）
  • フォント色: ライブメッセージ表示領域のフォント色を選択
  • 可視性トグル: 目アイコン（👁️）ボタンを使用してUIでライブメッセージのプレビュー要素を表示/非表示
  • プレビューへの影響: ライブメッセージのプレビュー変更はプレビューにリアルタイムで反映されます
ライブメッセージコンテンツ構成

実際のライブメッセージコンテンツは待合室デザインではなく、セグメントの待合室適用設定で構成されます。基本制御セグメントの場合は待合室適用 - 基本制御セグメントを参照してください。区間制御セグメントの場合は待合室適用 - 区間制御セグメントを参照してください。

待合室の内容​

事前待合室の内容を構成します。

  • テキスト入力: 待合室の内容テキストを入力（例：「内容を入力してください」）
  • フォント: 利用可能なオプションからフォントを選択
  • フォントサイズ: ピクセル単位でフォントサイズを調整（例：16px）
  • フォント色: 色選択器を使用してフォント色を選択
  • 可視性トグル: 目アイコン（👁️）ボタンを使用してUIで待合室の内容要素を表示/非表示
  • プレビューへの影響: 待合室の内容変更はプレビューに即座に表示されます

視覚要素​

ファビコン​

ファビコン（ブラウザタブアイコン）をアップロードして構成します。

  • ファイルアップロードオプション:
  • 適用時点: 待合室がブラウザで別ページとして開かれるときにファビコンが表示されます（つまり、URLトリガー方法使用時）
  • プレビューへの影響: ファビコンがブラウザタブプレビューに表示されます

ファイルアップロードルール​

ローカルファイルアップロード:

  • 画像をドラッグアンドドロップまたはファイルアップロード
  • 最大アップロードサイズ: 2MB
  • アップロード可能なファイルタイプ: .jpeg, .jpg, .png, .gif, .svg, .ico

URL入力:

  • http://またはhttps://で始まる画像URLを入力
  • ロードをクリックしてURLから画像をロード
  • サポート形式: .jpeg, .jpg, .png, .gif, .svg, .ico
  • サポート形式でない場合は画像をロードできません
  • キャンセルを使用してURL入力をキャンセル
  • 保存をクリックして画像を適用
URLトリガー方法

URLトリガー方法に関する情報については、統合方法概要およびURLトリガー方法ドキュメントを参照してください。

ウェブページのタイトル​

ブラウザタブに表示されるウェブページタイトルを構成します。

  • テキスト入力: ウェブページタイトルを入力（例：「待合室」）
  • 説明: Webブラウザタブに表示されるタイトル
  • 適用時点: 待合室がブラウザで別ページとして開かれるときにウェブページタイトルが表示されます（つまり、URLトリガー方法使用時）
  • プレビューへの影響: ウェブページタイトルがブラウザタブプレビューに反映されます
URLトリガー方法

URLトリガー方法に関する情報については、統合方法概要およびURLトリガー方法ドキュメントを参照してください。

画像（画像 1、2、3）​

事前待合室用画像をアップロードして構成します。

  • 画像位置: 画像 1、画像 2、画像 3の意味は選択したテーマによって異なります。プレビュー領域を参照して、画像 1と画像 2が表示される位置を確認してください。画像 3は事前待合室の主要UI要素内の背景色を表します。
  • 可視性トグル: 目アイコン（👁️）ボタンを使用してUIで各画像要素を表示/非表示
  • 色代替: 画像がアップロードされていない場合、色選択器を使用して単一色を指定できます
  • 不透明度: すべての画像と色には透明度を調整する不透明度オプションがあります（例：0%、100%）
  • ファイルアップロードオプション:
  • プレビューへの影響: 画像変更はプレビュー領域で即座に表示されます

ファイルアップロードルール​

ローカルファイルアップロード:

  • 画像をドラッグアンドドロップまたはファイルアップロード
  • 最大アップロードサイズ: 2MB
  • アップロード可能なファイルタイプ: .jpeg, .jpg, .png, .gif, .svg, .webp

URL入力:

  • http://またはhttps://で始まる画像URLを入力
  • ロードをクリックしてURLから画像をロード
  • サポート形式: .jpeg, .jpg, .png, .gif, .svg, .webp
  • サポート形式でない場合は画像をロードできません
  • キャンセルを使用してURL入力をキャンセル
  • 保存をクリックして画像を適用

背景画像​

事前待合室背景を構成します。

  • 背景領域: 背景画像は主要UI要素外部領域（全画面背景）に適用されます
  • ファイルアップロード: 背景画像ファイルをアップロード
  • 色代替: 画像がアップロードされていない場合、背景色を設定（例：#2f3033）
  • 不透明度: 不透明度パーセンテージを調整（例：60%）
  • プレビューへの影響: 背景変更はプレビューに即座に反映されます

機能オプション​

タイマートグル​

タイマー表示を構成します。

  • トグル: タイマー表示を有効化/無効化
  • 説明: イベント開始まで日、時間、分、秒を表示するカウントダウンタイマー表示
  • プレビューへの影響: 有効化されるとカウントダウン値を表示するタイマーがプレビューに表示されます

待機キャンセルボタン​

待機キャンセルボタンのスタイリングおよび動作を構成します。

  • トグル: 待機キャンセルボタンを有効化/無効化
  • URL構成: リダイレクトURLを設定（http://またはhttps://で始まる必要がある）
    • URLが入力された場合: 待機キャンセルボタンをクリックすると、指定されたURLにリダイレクトされます
    • URLが入力されていない場合: エージェントタイプに応じてボタンが表示されないか、指定された操作を実行します
  • ボタンテキスト: ボタンテキストを入力（例：「閉じる」）
  • フォント色: 色選択器を使用してフォント色を選択（例：#7f8083）
  • フォント不透明度: フォント不透明度パーセンテージを調整（例：100%）
  • ボタン背景色: 色選択器を使用してボタン背景色を選択（例：#edeef1）
  • ボタン不透明度: ボタン背景不透明度パーセンテージを調整（例：100%）
  • プレビューへの影響: ボタンが構成された設定でプレビューに表示され、すべてのスタイリング変更が即座に反映されます

ベストプラクティス​

言語設定​

  • ターゲット顧客に合わせる: 主要ユーザーベースと一致する言語を選択してください。国際ユーザーを対象とする場合は、さまざまな言語に対して複数の事前待合室デザインを作成することを検討してください。
  • 一貫性: 選択した言語がメインWebサイトまたはアプリケーションで使用される言語と一致し、シームレスなユーザー体験を提供するようにしてください。
多言語サービス

サービスが多言語サポートを提供し、ユーザー基本設定に応じて異なる言語で事前待合室を表示する必要がある場合、簡単設定モードは単一言語設定のみをサポートします。ユーザーロケールに応じて動的言語切り替えを実装するには、エディタモードを使用してプログラミング方式でロケール変更ロジックを実装する必要があります。実装詳細についてはエディタを参照してください。

レイアウト​

  • 整列設定: デフォルトの整列は上部中央です。整列選択に関する特定のベストプラクティスはありません。プレビューを確認してレイアウトがどのように表示されるかを確認し、デザイン基本設定に応じて整列を調整してください。

色カスタマイズ​

コントラストおよび可読性:

  • アクセシビリティのために、テキスト色と背景色の間に十分なコントラストを確保してください（WCAG AA標準：一般テキストの場合4.5:1、大きなテキストの場合3:1）
  • さまざまな照明条件ですべてのテキストが読めるように、プレビューで色の組み合わせをテストしてください

ブランド一貫性:

  • ブランドアイデンティティを維持するために、最初の色選択器（フッターに影響）にブランドの主要色を使用してください
  • 視覚的階層を作成するために、2番目の色選択器（イベント時間に影響）に補完色または強調色を使用してください

視覚的階層:

  • 重要な情報（イベント時間）により暗い色またはより飽和度の高い色を使用してください
  • 補助情報（フッターテキスト）により明るい色または飽和度の低い色を使用してください

タイポグラフィ設定​

タイトル:

推奨メッセージ:

  • "イベント開始予定"
  • "お待ちください"
  • "もうすぐです"
  • "お待ちいただきありがとうございます"
  • "体験を準備しています"

ベストプラクティス:

  • すべての画面サイズでよく表示されるようにタイトルを簡潔に保ってください（理想的には5-10語）
  • 最適な可読性のために20px-32pxの間のフォントサイズを使用してください（強調の場合28px+、コンパクトデザインの場合20-24px）
  • タイトル色が背景画像または色とよくコントラストするようにしてください

待合室の内容:

推奨メッセージ:

  • "イベントを準備している間、お待ちください。自動的にリダイレクトされます。"
  • "現在トラフィックが多いです。お待ちいただきありがとうございます。"
  • "位置を確保しています。このページに留まってください。"
  • "特別なものを準備しています。お待ちください。"
  • "もうすぐです！体験を設定しています。"

ベストプラクティス:

  • ユーザーを圧倒しないように待合室の内容を1-2文に保ってください
  • 本文テキストの可読性のために14px-18pxの間のフォントサイズを使用してください

ライブメッセージのプレビュー:

  • セグメントのライブメッセージコンテンツとフォントサイズおよび色を調整して一貫性を確保してください
  • 背景に対して目立つが読める色を使用してください

視覚要素​

画像（画像 1、2、3）:

  • ファイルサイズ最適化: ロード時間を短縮するために、アップロード前に画像を圧縮してください（500KB未満を目標）
  • 画像サイズ: 選択したテーマに適したアスペクト比を持つ画像を使用してください。正しい表示を確認するためにプレビューでテストしてください
  • 色代替: 常にデザインを補完する色代替を設定してください（画像ロード中または画像ロード失敗時に表示される）
  • 不透明度設定: テキストコンテンツを圧倒しない微妙なオーバーレイを作成するために不透明度（60-80%）を使用してください

背景画像:

  • 主要UI要素と注意を引かない微妙な背景画像を選択してください
  • テキスト可読性のために背景画像により低い不透明度（40-60%）を使用してください
  • パフォーマンス向上のために複雑な画像の代わりにグラデーションまたはパターン背景を使用することを検討してください
  • 十分なコントラストを確保するために、主要UI要素と一緒に背景画像を常にテストしてください

ファビコンおよびウェブページタイトル:

  • 事前待合室が新しいタブで開かれるときに即座に認識できるようにブランドのファビコンを使用してください
  • ブラウザタブでの切り詰めを防ぐためにウェブページタイトルを簡潔に保ってください（60文字未満）
  • 一貫性のためにタイトルにブランド名を含めてください

機能オプション​

タイマートグル:

  • イベント開始時間までのカウントダウンを表示する場合は有効化してください
  • タイマーはイベントが開始されるまで日、時間、分、秒を表示します
  • タイマースタイリングが背景に対して明確で読めるようにしてください

待機キャンセルボタン:

ボタンテキスト推奨事項:

  • "退出"
  • "戻る"
  • "閉じる"
  • "終了"
  • "ホームに戻る"

ベストプラクティス:

  • URL構成: ユーザーに終了オプションを提供するために、常に意味のあるリダイレクトURL（例：ホームページに戻る、代替ページまたはサポートページ）を提供してください
  • スタイリング: ボタンが簡単に見えるがインターフェースを支配しないようにしてください。補助作業であることを示す色（例：グレートーン）を使用してください
  • アクセシビリティ: 可読性のためにボタンテキストと背景の間に十分なコントラストを維持してください