インタラクティブ手順書メーカー

スクリーンショットからクリックできる手順書を作り、単独の HTML に書き出します。

画像を追加し、説明を書いてクリック位置を指定します。確認後 HTML をダウンロードするか、プロジェクトを保存して後で編集します。

0 / 0マーカーをドラッグするか矢印キーで移動します。

画像を追加して始めるか、サンプルを試してください。

数字のマーカーをクリックして次へ進みます。

保存するまで変更はこのタブだけに残ります。
使用方法

インタラクティブ手順書メーカー

スクリーンショットからクリックできる手順書を作り、単独の HTML に書き出します。

使い方

  1. 次の項目から元データを指定します:スクリーンショットを追加。
  2. 設定する項目:手順書のタイトル / 手順のタイトル / 操作説明 / 水平位置 % / 垂直位置 %。下の説明を参照し、目的に合う選択肢を選んでください。
  3. 実行する操作:プレビュー。コピー、ダウンロード、ほかの用途への使用前に結果を確認します。
  4. 画像を追加し、説明を書いてクリック位置を指定します。確認後 HTML をダウンロードするか、プロジェクトを保存して後で編集します。

設定の選び方

項目変更される内容
水平位置 %HTMLを共有する前に全ステップをプレビューし、マーカーをクリックしてください。位置がずれていたら、そのスクリーンショット上の割合を調整します。閲覧用HTMLに加え、編集できるプロジェクトも保存してください。
HTML をダウンロード / プロジェクトを保存最大 20 手順。PNG、JPEG、WebP は 1 枚 8 MB、合計 40 MB、1600 万画素、各辺 8192 ピクセルまで。アニメーション不可。プロジェクトは 58 MB まで。録画、自動手順検出、自動翻訳はありません。

入力例と期待される結果

JSON の三段階サンプルを試してください。データの読み込み、整形、結果のコピーです。HTML に画像がすべて入り、オフラインで使えます。

うまく動かないとき

  • 最大 20 手順。PNG、JPEG、WebP は 1 枚 8 MB、合計 40 MB、1600 万画素、各辺 8192 ピクセルまで。アニメーション不可。プロジェクトは 58 MB まで。録画、自動手順検出、自動翻訳はありません。
  • HTMLを共有する前に全ステップをプレビューし、マーカーをクリックしてください。位置がずれていたら、そのスクリーンショット上の割合を調整します。閲覧用HTMLに加え、編集できるプロジェクトも保存してください。
  • 画像が拒否されたら、ファイル容量だけでなくデコード後のピクセル寸法も確認してください。元のアプリから対応する静止画を書き出し、画素数を減らして再試行します。拡張子を変えるだけでは形式は変換されません。

制限とキャンセル

最大 20 手順。PNG、JPEG、WebP は 1 枚 8 MB、合計 40 MB、1600 万画素、各辺 8192 ピクセルまで。アニメーション不可。プロジェクトは 58 MB まで。録画、自動手順検出、自動翻訳はありません。