操作手順書って、たいてい「スクショ＋説明文」でできています。
でも、静止画と文章だけだと、実際の操作の流れは意外とイメージしにくいものです。
Opus 4.8を触っていて、なんとなくシミュレーション系の精度が上がっている感触がありました。だったら、画像付きの作業手順書を渡せば、その操作を画面そのまま再現するHTMLベースのアプリが作れるんじゃないか？ と思って試してみたら、結構精度の高い「動く手順書」ができたので紹介します。
題材にした手順書
今回は、シンプルなシステムユーザのパスワード変更手順を例にしてみました。
実際に作ったWordの手順書（スクリーンショット付き）はこんな感じです。
元のWord手順書を見る（クリックで展開）
ごく普通の、スクショと説明文を並べただけの手順書です。これを「画面の上で実際に操作している映像」として見せられたら、ぐっと分かりやすくなるはずです。
できあがったもの
実際にできたものがこちらです。
- 動かしている様子（デモ動画）
- 実物（ブラウザでそのまま触れます→自動再生ボタンを押す）
実際に使った指示文（全文）
やったことは「docxを添付して、下の指示文を貼る」だけです。指示文はそのままコピペで使えます。
添付したWord手順書（SAP GUI / SU01 パスワードリセット）をもとに、「実際にSAP GUIを操作している映像」のように見られるインタラクティブ手順書アプリを、単一のHTMLファイル（HTML+CSS+JavaScript内包・サーバ不要・ダブルクリックで動く）で作ってください。
## 元データの扱い
- 添付docxに埋め込まれた実SAP GUIスクリーンショット画像を、加工せずそのまま各ステップの背景に使う（忠実性最優先。SAP画面をHTMLで作り直さない）。
- 各Stepの「操作」「確認ポイント」本文、手順サマリ表、作業後チェックリストは原文どおり正確に転記する（要約・改変・創作しない）。
## デザイン方針（全体の外観）
- ライトテーマ × アクセンチュア公式風。ビジネスでそのまま使える洗練された質感にする。
- 配色: ホワイト基調（背景はオフホワイト #f6f6f9、カードは白）、文字はオフブラック（#1b1b24 等。純黒は使わない）。アクセントはアクセンチュア・パープル #A100FF を1色だけ、ソリッドで控えめに（active状態・主ボタン・アイコン等）。紫の大面積グラデーションは使わない（安っぽく見えるため）。WCAG AA のコントラストを確保。
- レイアウト: 左サイドバー（ブランド名＋ステップツリー）＋右メイン（再生エリア＋操作/確認テキスト＋資料）。余白を十分に取り、グリッドを揃える。影は硬い線でなく淡いソフトシャドウ。
- フォントは外部読込なしのシステムフォント（日本語=Hiragino/Yu Gothic/Meiryo系、英数=システムサンセリフ、データ部=等幅）。Arial/Inter/Roboto等の既定フォント直書きは避ける。
## 動き（映像感）
- 各スクショ画像の上にオーバーレイを重ねてアニメ: カーソル移動 → クリック波紋 → 操作対象（コマンド欄・User欄・アイコン・ダイアログ・ステータスバー等）を赤色枠でハイライト（赤で統一・淡い点滅）→ タイピング風キャレットで入力 → 次画面へ遷移。
- 入力中のキャレット「|」は、いま操作中の1欄だけに表示する（実フォームのフォーカス挙動。複数欄に残さない。次の欄に移ったら前の欄のキャレットは消す）。
- 入力する文字は、画像内のSAPフォームの枠サイズ・行高に合わせた小さめ・等幅で描画し、枠からはみ出さない。
- 操作対象の座標は画像を見て推定し、ステップ配列のデータとして分離（後から微調整しやすく）。画像は%基準配置で、拡大縮小してもオーバーレイ・入力文字・赤枠がずれないようにする。
- テンポはゆっくりめ（読み手が追える速さ）。操作と操作の間に短い「間」を入れ、ステップ完了後も少し待ってから次へ進む。
## 字幕（操作ナレーション）— YouTube字幕スタイル
- 1操作ごとに、いま行っている操作の説明文を画面内に字幕として表示し、操作進行に合わせて切り替える（例:「コマンド欄に SU01 と入力します」）。
- 見た目はYouTube字幕風: 黒の半透明ボックス（rgba(8,8,10,.85)程度）＋白文字・中央寄せ・読みやすい大きめ（約17px）、ボックスは内容にフィットさせ（横幅を内容に合わせ、左右に無駄な余白を作らない／最大幅は画面の約88%・660px程度）。位置は画像下部からやや上（下端から1割ほど上）に置き、ステータスバー等と重ならないように。
- 改行を自然に: 行を無理に均等化する text-wrap:balance は使わず、line-break:strict で禁則処理を効かせる。「Client / User / …」のような場合は行頭が「/」で始まらないよう、スラッシュ前の空白をノーブレークにする等の処理を入れる。
- iOS/iPad（WebKit）での残像対策: 字幕切替時、トランジションを一旦切って旧テキストを opacity0 で即時に消去（DOMから除去）してから新テキストを差し替え、改めてフェードインさせる。これをしないと旧字幕が残って重なる。
## 操作UI
- 画面左側に全ステップのツリー（Step1〜6）を常時表示。クリックでそのステップを頭から再生し、現在ステップをハイライト。進捗ドット（●●●○○○ Step n/6）も表示。
- 再生コントロール: 自動再生 ▶ / 一時停止 ⏸ / 前へ ◀ / 次へ ▶ / 速度切替（x0.4・x0.5・x0.7・x1・x2、初期値はx0.5のゆっくり）。自動再生は各ステップ完了後に自動で次へ進み、最後で停止。キーボード（Space=再生/停止、←→=前後）にも対応。
- 画面右側に、そのステップの「操作手順」「確認ポイント」原文を併記。前提条件・手順サマリ表・作業後チェックリストはタブ等でまとめて閲覧可能に。
- 細部の演出として、再生コントロールにカーソル近接で連続スケールするmacOS Dock風の反応を控えめに付ける（hoverのON/OFFでなく距離に応じて変化）。prefers-reduced-motion 時は各種アニメを抑制。
## 画面サイズ
- SAPGUI画面（再生エリア）はビューポート高さに収める（画像の高さを最大60vh・680px程度に制限し、画面全体が一目で見えるように）。幅基準＋アスペクト比固定で表示し、オーバーレイ座標が画像とピクセル一致する方式にすること（高さ制限のために画像とオーバーレイがズレないよう注意）。
## 構成（全6ステップ）
1. SAP Logon Padで対象システム選択
2. ログオン画面で Client / User / Password / Language 入力
3. SAP Easy Access のコマンド欄に SU01 入力
4. User Maintenance初期画面で対象ユーザID入力＋パスワード変更アイコン
5. Change Passwordダイアログで初期PWを2回入力＋緑チェック
6. ステータスバーで完了メッセージ確認
## 制約
- パスワード等の入力デモ値はダミー（伏字/マスク表示）にする。
- 外部CDN・外部フォント・ネット依存なし。Vanilla JS + CSSアニメで完結。レスポンシブ対応。
- いきなり全実装せず、まず構成（画像枚数・座標の取り方・ステップ配列のデータ設計・アニメ方式）を一度示してから実装する。
## 完成条件
- HTMLを開くと6ステップが実スクショ上で「操作映像」として再生され、自動再生・一時停止・前後送り・速度・進捗がすべて動く。
- docx本文が漏れなく反映され、座標が暫定の箇所は「要調整」と明示。
一発で完璧とはいかなかったので、入力文字の大きさや字幕まわり、テーマの色などは多少修正をしています。
とはいえ、調整はぜんぶ会話ベースで「ここをこうして」と頼めばすぐ反映されるので、そこまで手間ではなかったです。何回かやり取りして、できあがったのが先ほどのアプリです。
いいところ
作ってみて、いいなと思ったのはこのあたりです。
- 手順書にある画像（スクショ）を、そのまま動く操作手順アプリに組み込めるのが便利。新しく画面を描き起こすわけではないので、見た目が本物と完全に一致する
- HTML 1枚で完結するので配布が楽。
- 外部依存なしなのでオフラインでも動く
まとめ
画像付きのdocxを渡して指示文を1枚貼るだけで、文字と画像の手順書が「動く手順書」に変換できました。
これがもっと手軽になれば、手順書の作り方そのものが変わっていくのかもしれませんねー。
アクセンチュア株式会社に所属する社員有志による運営です。アクセンチュアの社員による様々な発信をまとめています。なお、投稿内容は社員個人の見解であり、所属する組織を代表するものではありません。
Discussion