簡単設定
簡単設定は、コードを記述せずにブロックルームデザイン属性を修正できる直感的なインターフェースを提供します。このドキュメントでは、簡単設定の各設定がプレビューにどのような影響を与えるか、および変更がリアルタイムでどのように反映されるかを説明します。
クイックリファレンス
| 設定 | 影響を受ける要素 | カスタマイズ可能な属性 | 注意事項 |
|---|---|---|---|
| 言語選択 | すべてのテキスト要素 | 言語（韓国語、英語、日本語、スペイン語） | 固定言語、すべてのUIテキストに影響 |
| テーマ選択 | 全体レイアウト | テーマ | 構造および要素配置変更 |
| 整列設定 | 主要UI要素 | グリッド位置（9グリッドレイアウト） | デフォルト: 上部中央 |
| 色カスタマイズ | フッターテキスト | 色 | フッター |
| タイトル | タイトル要素 | テキスト、フォント、フォントサイズ、フォント色、可視性 | 目アイコントグル使用可能 |
| 内容 | 内容テキスト | テキスト、フォント、フォントサイズ、フォント色、可視性 | 目アイコントグル使用可能 |
| ファビコン | ブラウザタブアイコン | 画像ファイルまたはURL | URLトリガー統合にのみ適用 |
| ウェブページのタイトル | ブラウザタブタイトル | テキスト | URLトリガー統合にのみ適用 |
| 画像 1 | 画像 1領域 | 画像ファイル/URL、色、不透明度、可視性 | テーマに応じた位置 |
| 画像 2 | 画像 2領域 | 画像ファイル/URL、色、不透明度、可視性 | テーマに応じた位置 |
| 画像 3 | 主要UI背景 | 色、不透明度、可視性 | 主要UI要素内背景 |
| 背景画像 | 画面背景 | 画像ファイル/URL、色、不透明度 | 主要UI要素外部領域 |
| 待機キャンセルボタン | 待機キャンセルボタン | トグル、URL、テキスト、フォント色、フォント不透明度、背景色、背景不透明度 | リダイレクト機能のためにURL必要 |
概要
簡単設定を通じて、シンプルなUIコントロールでブロックルームデザインのさまざまな側面をカスタマイズできます。すべての変更はプレビュー領域に即座に反映され、修正結果をリアルタイムで確認できます。
言語設定
言語選択
ブロックルームインターフェースの言語を構成します。
- 利用可能な言語: 4つの言語がサポートされます：韓国語、英語、日本語、スペイン語
- 固定言語: 固定された編集不可能な言語で、ブロックルームインターフェースのテキスト要素を変更します
テーマおよびレイアウト
テーマ選択
利用可能なブロックルームテーマから選択します。
- 利用可能なテーマ: さまざまなテーマが提供されます
- テーマ別機能: 各テーマは要素が表示される方法に影響を与える独自の特性を持ちます
整列設定
画面で主要UI要素の位置を構成します。
- 9グリッドレイアウト: 画面が9グリッドレイアウト（3x3）に分割されます
- 位置オプション: 主要UI要素を配置するグリッド位置を選択します
色カスタマイズ
色選択器を使用して、さまざまなブロックルーム要素の色を修正します。
色選択器は以下の要素に影響を与えます：
- フッターテキスト: "Powered by NetFUNNEL | © STCLab Inc."
タイポグラフィ設定
タイトル
ブロックルームタイトルを構成します。
- テキスト入力: タイトルテキストを入力（例：「タイトルを入力してください」）
- フォント: 利用可能なオプションからフォントを選択
- フォントサイズ: ピクセル単位でフォントサイズを調整（例：20px）
- フォント色: 色選択器を使用してフォント色を選択
- 可視性トグル: 目アイコン（👁️）ボタンを使用してUIでタイトル要素を表示/非表示
内容
ブロックルーム内容を構成します。
- テキスト入力: 内容テキストを入力（例：「内容を入力してください」）
- フォント: 利用可能なオプションからフォントを選択
- フォントサイズ: ピクセル単位でフォントサイズを調整（例：16px）
- フォント色: 色選択器を使用してフォント色を選択
- 可視性トグル: 目アイコン（👁️）ボタンを使用してUIで内容要素を表示/非表示
視覚要素
ファビコン
ファビコン（ブラウザタブアイコン）をアップロードして構成します。
- ファイルアップロードオプション:
- ローカルファイルアップロード: ローカルデバイスからファビコン画像ファイルを直接アップロード
- URL入力: 画像URL（http://またはhttps://）を入力してWebから画像をリアルタイムでロード
- 適用時点: 待合室がブラウザで別ページとして開かれるときにファビコンが表示されます（つまり、URLトリガー方法使用時）
ファイルアップロードルール
ローカルファイルアップロード:
- 画像をドラッグアンドドロップまたはファイルアップロード
- 最大アップロードサイズ: 2MB
- アップロード可能なファイルタイプ: .jpeg, .jpg, .png, .gif, .svg, .ico
URL入力:
http://またはhttps://で始まる画像URLを入力- ロードをクリックしてURLから画像をロード
- サポート形式: .jpeg, .jpg, .png, .gif, .svg, .ico
- サポート形式でない場合は画像をロードできません
- キャンセルを使用して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%）
機能オプション
待機キャンセルボタン
待機キャンセルボタンのスタイリングおよび動作を構成します。
- トグル: 待機キャンセルボタンを有効化/無効化
- URL構成: リダイレクトURLを設定（http://またはhttps://で始まる必要がある）
- URLが入力された場合: ユーザーが待機キャンセルボタンをクリックすると、指定されたURLに移動します
- URLが入力されていない場合: エージェントタイプに応じてボタンが表示されないか、指定された操作を実行します
- ボタンテキスト: ボタンテキストを入力（例：「閉じる」）
- フォント色: 色選択器を使用してフォント色を選択（例：#7f8083）
- フォント不透明度: フォント不透明度パーセンテージを調整（例：100%）
- ボタン背景色: 色選択器を使用してボタン背景色を選択（例：#edeef1）
- ボタン不透明度: ボタン背景不透明度パーセンテージを調整（例：100%）
ベストプラクティス
言語設定
- ターゲット顧客に合わせる: 主要ユーザーベースと一致する言語を選択してください。国際ユーザーを対象とする場合は、さまざまな言語に対して複数のブロックルームデザインを作成することを検討してください。
- 一貫性: 選択した言語がメインWebサイトまたはアプリケーションで使用される言語と一致し、シームレスなユーザー体験を提供するようにしてください。
多言語サービス
サービスが多言語サポートを提供し、ユーザー基本設定に応じて異なる言語でブロックルームを表示する必要がある場合、簡単設定モードは単一言語設定のみをサポートします。ユーザーロケールに応じて動的言語切り替えを実装するには、エディタモードを使用してプログラミング方式でロケール変更ロジックを実装する必要があります。
レイアウト
- 整列設定: デフォルトの整列は上部中央です。整列選択に関する特定のベストプラクティスはありません。プレビューを確認してレイアウトがどのように表示されるかを確認し、デザイン基本設定に応じて整列を調整してください。
色カスタマイズ
コントラストおよび可読性:
- アクセシビリティのために、テキスト色と背景色の間に十分なコントラストを確保してください（WCAG AA標準：一般テキストの場合4.5:1、大きなテキストの場合3:1）
- さまざまな照明条件ですべてのテキストが読めるように、プレビューで色の組み合わせをテストしてください
- 色選択器はフッターテキストに影響を与えるため、この要素が背景に対して読めるようにしてください
ブランド一貫性:
- ブランドアイデンティティを維持するために、色選択器（フッターに影響）にブランドの主要色を使用してください
視覚的階層:
- 主要コンテンツとの視覚的階層を維持するために、補助情報（フッターテキスト）により明るい色または飽和度の低い色を使用してください
タイポグラフィ設定
タイトル:
推奨メッセージ:
- "アクセス拒否"
- "アクセス制限"
- "このページは使用できません"
- "アクセスブロック"
- "不正アクセス"
ベストプラクティス:
- すべての画面サイズでよく表示されるようにタイトルを簡潔に保ってください（理想的には5-10語）
- 最適な可読性のために20px-32pxの間のフォントサイズを使用してください（強調の場合28px+、コンパクトデザインの場合20-24px）
- タイトル色が背景画像または色とよくコントラストするようにしてください
- ブロック状態を伝えるために明確で直接的な言語を使用してください
内容:
推奨メッセージ:
- "このページにアクセスする権限がありません。エラーだと思われる場合は、サポートチームにお問い合わせください。"
- "このコンテンツへのアクセスが制限されています。アクセス権限を確認してください。"
- "このページは、お住まいの地域またはアカウントタイプでは使用できません。"
- "アクセスがブロックされました。サポートが必要な場合は、管理者にお問い合わせください。"
- "このコンテンツを表示する権限がありません。"
ベストプラクティス:
- ユーザーを圧倒しないように内容を1-2文に保ってください
- 本文テキストの可読性のために14px-18pxの間のフォントサイズを使用してください
- ユーザーが次に何をすべきかについて明確なガイダンスを提供してください（サポートチームへの問い合わせ、権限確認など）
- アクセスをブロックする際も、専門的で尊重する言語を使用してください
視覚要素
画像（画像 1、2、3）:
- ファイルサイズ最適化: ロード時間を短縮するために、アップロード前に画像を圧縮してください（500KB未満を目標）
- 画像サイズ: 選択したテーマに適したアスペクト比を持つ画像を使用してください。正しい表示を確認するためにプレビューでテストしてください
- 色代替: 常にデザインを補完する色代替を設定してください（画像ロード中または画像ロード失敗時に表示される）
- 不透明度設定: テキストコンテンツを圧倒しない微妙なオーバーレイを作成するために不透明度（60-80%）を使用してください
- 適切な画像: ブロックルームの目的に適した画像を使用してください（例：警告アイコン、セキュリティ関連画像）
背景画像:
- 主要UI要素と注意を引かない微妙な背景画像を選択してください
- テキスト可読性のために背景画像により低い不透明度（40-60%）を使用してください
- パフォーマンス向上のために複雑な画像の代わりにグラデーションまたはパターン背景を使用することを検討してください
- 十分なコントラストを確保するために、主要UI要素と一緒に背景画像を常にテストしてください
ファビコンおよびウェブページタイトル:
- ブロックルームが新しいタブで開かれるときに即座に認識できるようにブランドのファビコンを使用してください
- ブラウザタブでの切り詰めを防ぐためにウェブページタイトルを簡潔に保ってください（60文字未満）
- 一貫性のためにタイトルにブランド名を含めてください
機能オプション
待機キャンセルボタン:
ボタンテキスト推奨事項:
- "閉じる"
- "戻る"
- "ホームに戻る"
- "終了"
- "サポートチームにお問い合わせ"
ベストプラクティス:
- URL構成: ユーザーに終了オプションを提供するために、常に意味のあるリダイレクトURL（例：ホームページに戻る、サポートページまたはログインページ）を提供してください
- スタイリング: ボタンが簡単に見えるがインターフェースを支配しないようにしてください。補助作業であることを示す色（例：グレートーン）を使用してください
- アクセシビリティ: 可読性のためにボタンテキストと背景の間に十分なコントラストを維持してください
- ユーザー体験: 合法的なアクセス要求がある可能性のあるユーザーのための明確なパスを提供してください（例：サポートまたはログインページにリダイレクト）