プロダクトツアーで操作を案内する

画面上の項目やボタンを順番に強調し、利用者が操作の流れを理解できる案内を用意できます。

最終更新日：2026年10月31日

プロダクトツアー・操作マニュアルの小目次へ

1. このページで伝える機能

画面上の項目やボタンを順番に強調し、利用者が操作の流れを理解できる案内を用意できます。

2. Wagby11で実現できること

2.1 操作を順番に案内する

日報の検索画面を例にします。ヘッダーの「操作ガイド」から「日報の検索方法」を選ぶと、検索条件、検索操作、結果の確認を順番に案内できます。

通常のステップは「次へ」「前へ」で進み、最後に「完了」を選びます。「中止」で案内を途中終了することもできます。検索のような画面内の操作では、強調したボタンを押すと次へ進む構成にもできます。この場合は「次へ」を表示せず、押す対象を説明します。

ツアーは標準の検索・登録・詳細・更新の、一つの画面内で完結させます。項目、操作、画面領域、タブを対象にでき、対象タブは案内時に開きます。短い項目説明だけならツールチップや説明文を使い、一連の流れを伝えたいときにツアーを使います。

保存・削除・承認など、業務データを変える操作は説明に留め、ツアーの練習として実行させません。ツアーを見せるロールを限定することもできますが、操作そのものの権限は別に設定します。

2.2 表示されない対象のステップを省略する

利用者のロールやデータの状態によって、同じ画面でも表示する項目や操作が変わる場合があります。そのような対象を案内するステップは任意にできます。対象が画面に存在しなければ、そのステップだけを省略し、次の案内へ進みます。ツアー全体の表示ロールを限定する設定とは別の仕組みです。

たとえば詳細画面の承認操作は、承認できる利用者と状態のときだけ表示されます。承認操作の説明を任意ステップにすると、承認操作がない画面ではその説明を省き、ほかの共通の案内を続けられます。承認は説明に留め、ツアーからクリックして実行する構成にはしません。

任意ステップでも対象の描画を一定時間待ち、見つからなければ省略します。任意でないステップは、時間内に対象が見つからないとツアーを終了して継続できないことを案内します。必ず表示される項目にまで任意指定を付けると、項目名の誤りや画面定義の不整合を見逃すため、条件付きで表示する対象だけに使います。対象を持たない開始説明などの中央表示ステップには指定できません。

2.3 ツアーのタイトルと説明を翻訳する

ツアー全体と各ステップのタイトル・説明は、利用者の表示言語に応じて差し替えられます。ツアー定義に記述した文言を標準表示とし、要求されたロケールのメッセージリソースに対応する翻訳があれば、その値を使います。翻訳がなければツアー定義の文言を表示します。

翻訳は、モデルの英語識別名から生成する小文字のエンティティキー、ツアーID、ステップIDを組み合わせたリソースキーで管理します。たとえばMobileReportのsearch-practiceツアー、conditionsステップなら、キーはguide.mobilereport.search-practice.step.conditions.titleです。文言を直すためにツアーIDやステップIDを変えず、同じ案内を安定したIDで管理します。

「次へ」「前へ」「完了」などの共通操作の文言はWeb UIの共通リソースで管理します。ツアーごとの翻訳キーには、その案内のタイトルと説明を用意します。

3. AIへの指示例

最小限の指示例

日報の検索方法を、画面上のツアーで案内してください。

AIは案内する画面、ステップの順番、強調する項目や操作、説明文を類推して補います。単に説明を読むのか、検索ボタンを押して体験するのかを伝えると、進め方も決めやすくなります。

より詳細な指示例

日報MobileReportの検索画面に、手動で始める「日報の検索方法」を用意してください。開始説明、件名欄、検索ボタン、検索結果の順で案内します。検索ボタンのステップでは「検索ボタンを押してください」と表示し、実際のクリックで検索して次へ進みます。他のステップは次へで進みます。独自の画面やJavaScriptを追加せず、標準の操作ガイドを使ってください。
既存の定義・データ・権限を保持し、Wagby11のguide・referenceを確認してください。生成・ビルド後、対象利用者でツアーと操作マニュアルの動作を確認してください。

条件付きステップと翻訳の最小限の指示例

表示されていない操作の説明はツアーから省き、ツアーの説明を英語でも読めるようにしてください。

AIは対象の画面・条件付き操作・翻訳するツアーとステップを既存定義から類推します。常に表示する項目まで任意にするとは限らず、必要な翻訳文も補うため、対象と文言を具体的に伝えます。この短い指示だけで次の詳細例と同じ構成になるとは限りません。

条件付きステップと翻訳のより詳細な指示例

MobileReportの詳細画面に、承認操作approveが表示される場合だけ説明する任意ステップoptional-approveを用意してください。承認は実行させず、次へで進めます。承認操作がない利用者や状態ではこのステップだけを省略し、共通ステップは残してください。
検索画面の既存ツアーsearch-practiceとステップconditionsのIDは保持し、英語のメッセージリソースに翻訳を追加してください。ツアーのタイトルはHow to search daily reports、conditionsのタイトルはFilter by subject、説明はEnter a subject to narrow down the reports.とします。翻訳がない文言はツアー定義の標準表示を使います。
Wagby11のguide・referenceを確認し、既存のモデル・データ・権限を保持してください。生成・ビルド後、対象がある場合とない場合、英語の翻訳表示と翻訳がない場合の標準表示を確認してください。

4. 編集されるAppSchemaの例

以下は関連する定義の抜粋です。構文を覚えなくても、案内する操作・説明文・表示する条件をAIへ伝えられます。

# appschema/MobileReport.yaml のuiへの追加
ui:
  guides:
    $ref: ../guidedefs/MobileReport.yaml

# guidedefs/MobileReport.yaml の例
version: 1
tours:
  - id: search-practice
    revision: 1
    screens: [search]
    title: 日報の検索方法
    activation: { manual: true, automatic: never }
    steps:
      - id: introduction
        title: 日報を検索します
        description: 日付や件名で絞り込み、登録済みの日報を確認できます。
      - id: conditions
        target: { kind: field, id: subject }
        title: 件名で絞り込む
        description: 探したい日報の件名を入力します。空欄でも検索できます。
      - id: execute
        target: { kind: action, id: search }
        title: 検索を実行する
        description: 検索ボタンを押してください。
        advance: target_click
        interaction: allowed
      - id: results
        target: { kind: region, id: search-results }
        title: 検索結果を確認する
        description: 条件に一致した日報が表示されます。

上段はモデルからの明示参照、下段は別ファイルのツアー定義です。ファイルを作るだけでは参照されません。対象は項目名や標準操作のIDで指定し、CSSセレクタやHTMLのIDは指定しません。

条件付きの操作を任意ステップにする

承認操作を提供する詳細画面での追加例です。検索画面用の上のツアーとは別に定義します。optionalはステップの指定で、操作の権限を付与するものではありません。

# 詳細画面のツアーのstepsへ追加する抜粋
- id: optional-approve
  target: { kind: action, id: approve }
  title: 承認操作を確認する
  description: 承認できる利用者と状態のときに表示されます。
  optional: true
  advance: next_button
  interaction: blocked

翻訳リソースの例

上のsearch-practiceツアーに対応する英語ロケールのリソース例です。翻訳文はguidedefsとは別のメッセージリソースへ配置します。

guide.mobilereport.search-practice.title=How to search daily reports
guide.mobilereport.search-practice.step.conditions.title=Filter by subject
guide.mobilereport.search-practice.step.conditions.description=Enter a subject to narrow down the reports.

ツアーの説明はguide.<entity-key>.<tour-id>.description、各ステップはguide.<entity-key>.<tour-id>.step.<step-id>.titleまたは.descriptionで指定します。entity-keyはentity.name_enから生成する小文字のキーです。

5. 参考資料

プロダクトツアー: designer/docs/appschema/html/guide/07-screens/19-product-tour.html
guidedefs（プロダクトツアー定義）: designer/docs/appschema/html/reference/21-product-tour.html