簡単設定
簡単設定は、コードを記述せずに待合室デザイン属性を修正できる直感的なインターフェースを提供します。このドキュメントでは、簡単設定の各設定がプレビューにどのような影響を与えるか、および変更がリアルタイムでどのように反映されるかを説明します。
クイックリファレンス
| 設定 | 影響を受ける要素 | カスタマイズ可能な属性 | 注意事項 |
|---|---|---|---|
| 言語選択 | すべてのテキスト要素 | 言語（韓国語、英語、日本語、スペイン語） | 固定言語、すべてのUIテキストに影響 |
| テーマ選択 | 全体レイアウト | テーマ（通知強調、画像強調） | 構造および要素配置変更 |
| 整列設定 | 主要UI要素 | グリッド位置（9グリッドレイアウト） | デフォルト: 上部中央 |
| 色カスタマイズ（1次） | ラベル、フッターテキスト | 色 | 前の待機人数ラベル、予想待ち時間ラベル、アクセス可能時間ラベル、後ろの待機人数ラベル、警告メッセージ、フッター |
| 色カスタマイズ（2次） | 値、進捗バー | 色 | 前の待機人数数値、プログレスバー色 |
| タイトル | タイトル要素 | テキスト、フォント、フォントサイズ、フォント色、可視性 | 目アイコントグル使用可能 |
| ライブメッセージのプレビュー | ライブメッセージ表示 | フォント、フォントサイズ、フォント色、可視性 | セグメント設定で構成されたコンテンツ |
| 待合室の内容 | 待合室の内容テキスト | テキスト、フォント、フォントサイズ、フォント色、可視性 | 目アイコントグル使用可能 |
| ファビコン | ブラウザタブアイコン | 画像ファイルまたはURL | URLトリガー統合にのみ適用 |
| ウェブページのタイトル | ブラウザタブタイトル | テキスト | URLトリガー統合にのみ適用 |
| 画像 1 | 画像 1領域 | 画像ファイル/URL、色、不透明度、可視性 | テーマに応じた位置 |
| 画像 2 | 画像 2領域 | 画像ファイル/URL、色、不透明度、可視性 | テーマに応じた位置 |
| 画像 3 | 主要UI背景 | 色、不透明度、可視性 | 主要UI要素内背景 |
| 背景画像 | 画面背景 | 画像ファイル/URL、色、不透明度 | 主要UI要素外部領域 |
| 待機進行率 | プログレスバー | トグル（有効化/無効化） | 有効化時プログレスバーに待機進行率を数値で表示 |
| 進入処理の状態 | 進入処理の状態表示 | トグル（有効化/無効化） | 色で区別され、待機時間に応じて3つの状態で表示 |
| 進入状況の案内メッセージ | 案内メッセージ表示 | トグル（有効化/無効化） | 待機進行率と進入処理の状態に応じて案内メッセージ表示 |
| 予想待ち時間 | 待機時間表示 | トグル（有効化/無効化） | 有効化時「00:00:00」形式で表示 |
| アクセス可能時間 | アクセス可能時間表示 | トグル（有効化/無効化） | 待合室に予想アクセス時間を公開 |
| 後ろの待機人数 | 待機列位置表示 | トグル（有効化/無効化） | 有効化時数値表示 |
| 待機キャンセルボタン | 待機キャンセルボタン | トグル、URL、テキスト、フォント色、フォント不透明度、背景色、背景不透明度 | リダイレクト機能のためにURL必要 |
概要
簡単設定を通じて、シンプルなUIコントロールで待合室デザインのさまざまな側面をカスタマイズできます。すべての変更はプレビュー領域に即座に反映され、修正結果をリアルタイムで確認できます。
言語設定
言語選択
待合室インターフェースの言語を構成します。
- 利用可能な言語: 4つの言語がサポートされます：韓国語、英語、日本語、スペイン語
- 固定言語: 固定された編集不可能な言語で、待合室インターフェースのテキスト要素を変更します
- プレビューへの影響: 言語変更はプレビューのすべてのテキスト要素に即座に影響を与えます
テーマおよびレイアウト
テーマ選択
利用可能な待合室テーマから選択します。
- 利用可能なテーマ: 通知強調、画像強調
- プレビューへの影響: テーマ選択はプレビューに表示される全体レイアウトと構造を変更します
- テーマ別機能: 各テーマは要素が表示される方法に影響を与える独自の特性を持ちます
各テーマに関する詳細（特性、使用事例、例を含む）については、テーマドキュメントを参照してください。
整列設定
画面で主要UI要素の位置を構成します。
- 9グリッドレイアウト: 画面が9グリッドレイアウト（3x3）に分割されます
- 位置オプション: 主要UI要素を配置するグリッド位置を選択します
- プレビューへの影響: 位置変更はプレビュー領域で即座に表示されます
色カスタマイズ
2つの色選択器を使用して、さまざまな待合室要素の色を修正します。
最初の色選択器
最初の色選択器は以下の要素に影響を与えます：
- 前の待機人数（テキストラベル）
- 予想待ち時間（テキストラベル、例：「予想待ち時間 1 ~ 5分」）
- アクセス可能時間（テキストラベル、例：「アクセス可能時間 13:34 ~ 13:38」）
- 後ろの待機人数（テキストラベル、例：「後ろの待機人数 241」）
- 警告メッセージ: 「ページを更新、戻る、またはポップアップを閉じて再接続すると、待機時間がリセットされる場合があります。」
- フッターテキスト: "Powered by NetFUNNEL | © STCLab Inc."
2番目の色選択器
2番目の色選択器は以下の要素に影響を与えます：
-
前の待機人数数値: 数値（例：「10,642」）
-
プログレスバー色: プログレスバーの色
-
プレビューへの影響: 色変更はプレビューに即座に反映されます
タイポグラフィ設定
タイトル
待合室タイトルを構成します。
- テキスト入力: タイトルテキストを入力（例：「タイトルを入力してください」）
- フォント選択: 使用するフォントを選択
- フォントサイズ: ピクセル単位でフォントサイズを調整（例：20px）
- フォント色: 色選択器を使用してフォント色を選択
- 可視性トグル: 目アイコン（👁️）ボタンを使用してUIでタイトル要素を表示/非表示
- プレビューへの影響: タイトル変更はプレビュー領域に即座に表示されます
ライブメッセージのプレビュー
ライブメッセージのプレビューセクション表示設定を構成します。
- フォント選択: 使用するフォントを選択
- フォントサイズ: ピクセル単位でフォントサイズを調整（例：14px）
- フォント色: ライブメッセージ表示領域のフォント色を選択
- 可視性トグル: 目アイコン（👁️）ボタンを使用してUIでライブメッセージのプレビュー要素を表示/非表示
- プレビューへの影響: ライブメッセージのプレビュー変更はプレビューにリアルタイムで反映されます
ライブメッセージコンテンツ構成
実際のライブメッセージコンテンツは待合室デザインではなく、セグメントの待合室適用設定で構成されます。基本制御セグメントの場合は待合室適用 - 基本制御セグメントを参照してください。区間制御セグメントの場合は待合室適用 - 区間制御セグメントを参照してください。
待合室の内容
待合室の内容を構成します。
- テキスト入力: 待合室の内容テキストを入力（例：「内容を入力してください」）
- フォント選択: 使用するフォントを選択
- フォントサイズ: ピクセル単位でフォントサイズを調整（例：16px）
- フォント色: 色選択器を使用してフォント色を選択
- 可視性トグル: 目アイコン（👁️）ボタンを使用してUIで待合室の内容要素を表示/非表示
- プレビューへの影響: 待合室の内容変更はプレビューに即座に表示されます
視覚要素
ファビコン
ファビコン（ブラウザタブアイコン）をアップロードして構成します。
- ファイルアップロードオプション:
- ローカルファイルアップロード: ローカルデバイスからファビコン画像ファイルを直接アップロード
- URL入力: 画像URL（http://またはhttps://）を入力してWebから画像をリアルタイムでロード
- 適用時点: 待合室がブラウザで別ページとして開かれるときにファビコンが表示されます（つまり、URLトリガー方法使用時）
- プレビューへの影響: ファビコンがブラウザタブプレビューに表示されます
ファイルアップロードルール
ローカルファイルアップロード:
- 画像をドラッグアンドドロップまたはファイルアップロード
- 最大アップロードサイズ: 2MB
- アップロード可能なファイルタイプ: .jpeg, .jpg, .png, .gif, .svg, .webp
URL入力:
http://またはhttps://で始まる画像URLを入力- ロードをクリックしてURLから画像をロード
- サポート形式: .jpeg, .jpg, .png, .gif, .svg, .webp
- サポート形式でない場合は画像をロードできません
- キャンセルを使用してURL入力をキャンセル
- 保存をクリックして画像を適用
ウェブページのタイトル
ブラウザタブに表示されるウェブページタイトルを構成します。
- テキスト入力: ウェブページタイトルを入力（例：「待合室」）
- 説明: Webブラウザタブに表示されるタイトル
- 適用時点: 待合室がブラウザで別ページとして開かれるときにウェブページタイトルが表示されます（つまり、URLトリガー方法使用時）
- プレビューへの影響: ウェブページタイトルがブラウザタブプレビューに反映されます
画像（画像 1、2、3）
待合室用画像をアップロードして構成します。
- 画像位置: 画像 1、画像 2、画像 3の意味は選択したテーマによって異なります。プレビュー領域を参照して、画像 1と画像 2が表示される位置を確認してください。画像 3は待合室の主要UI要素内の背景色を表します。
- 可視性トグル: 目アイコン（👁️）ボタンを使用してUIで各画像要素を表示/非表示
- 色代替: 画像がアップロードされていない場合、色選択器を使用して単一色を指定できます
- 不透明度: すべての画像と色には透明度を調整する不透明度オプションがあります（例：0%、100%）
- ファイルアップロードオプション:
- ローカルファイルアップロード: ローカルデバイスから画像ファイルを直接アップロード
- URL入力: 画像URL（http://またはhttps://）を入力してWebから画像をリアルタイムでロード
- プレビューへの影響: 画像変更はプレビュー領域で即座に表示されます
ファイルアップロードルール
ローカルファイルアップロード:
- 画像をドラッグアンドドロップまたはファイルアップロード
- 最大アップロードサイズ: 2MB
- アップロード可能なファイルタイプ: .jpeg, .jpg, .png, .gif, .svg, .webp
URL入力:
http://またはhttps://で始まる画像URLを入力- ロードをクリックしてURLから画像をロード
- サポート形式: .jpeg, .jpg, .png, .gif, .svg, .webp
- サポート形式でない場合は画像をロードできません
- キャンセルを使用してURL入力をキャンセル
- 保存をクリックして画像を適用
背景画像
待合室背景を構成します。
- 背景領域: 背景画像は主要UI要素外部領域（全画面背景）に適用されます
- ファイルアップロード: 背景画像ファイルをアップロード
- 色代替: 画像がアップロードされていない場合、背景色を設定（例：#2f3033）
- 不透明度: 不透明度パーセンテージを調整（例：60%）
- プレビューへの影響: 背景変更はプレビューに即座に反映されます
機能オプション
待機進行率
プログレスバーに待機進行率を数値で公開します。
- トグル: 待機進行率表示を有効化/無効化
- 説明: プログレスバーに待機進行率を数値で表示
進入処理の状態
進入処理の状態は色で区別され、待機時間に応じて3つの状態で公開します。
- トグル: 進入処理の状態表示を有効化/無効化
- 説明: 色で区別され、待機時間に応じて3つの状態で表示
進入状況の案内メッセージ
待機進行率と進入処理の状態に応じて案内メッセージが表示され、選択したメッセージは該当状況に合わせて出力されます。
- トグル: 進入状況の案内メッセージ表示を有効化/無効化
- 説明: 待機進行率と進入処理の状態に応じて案内メッセージが表示されます
進入状況の案内メッセージ詳細
進入状況の案内メッセージは、待機進行率に応じて以下の案内メッセージのいずれかが表示されます。
待機進行率90%以上のとき:
- "まもなく入場の順番です。自動的に画面が切り替わります。"
- "進入準備が完了しました。サービスをまもなくご利用いただけます。"
- "しばらくしてから入場します。ページを閉じないでください！"
- "しばらくしてから接続されます。サービス開始まであとわずかです。"
待機列処理が順調なとき:
- "進入処理速度が回復しました。予想より早い入場が可能になる場合があります。"
- "現在システム状態が非常に良好です。待機列が急速に減っています。"
- "ユーザーの迅速な移動により待機順番が急速に減っています。"
- "{n}人が待機列を終了しました。まもなく順番が繰り上がる場合があります。"
待機列処理が通常レベルのとき:
- "現在の順序に従って安定的に進入が進行しています。"
- "現在待機列が順次処理されています。もう少しお待ちください。"
- "待機者が一定に減っています。まもなく順番が近づいています。"
- "アクセスフローが安定的に維持されています。"
待機列処理が遅延しているとき:
- "現在アクセス者が急増し、待機速度がやや遅くなっています。ご了承ください。"
- "サーバー処理速度が低下しており、予想より進入まで時間がかかる場合があります。"
- "進入したユーザーの平均利用時間が長くなり、待機時間も一緒に増えています。"
- "アクセス者が多く、一時的に進入速度が低下しています。"
- "一時的なトラフィック増加により処理速度がやや遅くなる場合があります。"
予想待ち時間
予想待ち時間表示を構成します。
- トグル: 予想待ち時間表示を有効化/無効化
- 説明: 待機ウィンドウに予想待ち時間表示
アクセス可能時間
待合室に予想アクセス時間を公開します。
- トグル: アクセス可能時間表示を有効化/無効化
- 説明: 待合室に予想アクセス時間を公開
後ろの待機人数
待機列位置表示を構成します。
- トグル: 後ろの待機人数表示を有効化/無効化
- 説明: 後ろで待機中のユーザー数を表示
待機キャンセルボタン
待機キャンセルボタンのスタイリングおよび動作を構成します。
- トグル: 待機キャンセルボタンを有効化/無効化
- 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文字未満）
- 一貫性のためにタイトルにブランド名を含めてください
機能オプション
予想待ち時間:
- 待機時間が予測可能で比較的短い場合（< 5分）有効化してください。ユーザーは待機期間に関する透明性を高く評価します
- 非常に長い待機時間や予測不可能なシナリオの場合は、誤った期待を設定しないように無効化することを検討してください
後ろの待機人数:
- ユーザーが待機列での位置を知ることが役立つ場合に有効化してください（例：限定容量イベント、製品リリース）
- 待機列位置が不安を引き起こす可能性がある一般的なトラフィック制御シナリオの場合は無効化することを検討してください
待機キャンセルボタン:
ボタンテキスト推奨事項:
- "待機列を退出"
- "戻る"
- "待機キャンセル"
- "待機列終了"
- "ホームに戻る"
ベストプラクティス:
- URL構成: ユーザーに終了オプションを提供するために、常に意味のあるリダイレクトURL（例：ホームページに戻る、代替ページまたはサポートページ）を提供してください
- スタイリング: ボタンが簡単に見えるがインターフェースを支配しないようにしてください。補助作業であることを示す色（例：グレートーン）を使用してください
- アクセシビリティ: 可読性のためにボタンテキストと背景の間に十分なコントラストを維持してください