「この部分をこう直して下さい」という指示書を作るの、地味に面倒ではないでしょうか？
スクリーンショット画像に対して
- 番号振る
- 下に説明を書く
- レイアウト整える
この一連の作業を効率化するサイトを作成しました。
サイトならば 訪れるだけ で使用できます。
Chrome 拡張も作成しました。
Chrome 拡張ならば、現在開いているサイトの見た目に対して指示書作成を開始できます。
できること
- フルページスクリーンショット(Chrome 拡張)
- 現在の画面内容でスクリーンショット(Chrome 拡張)
- クリックで番号付きマーカー設置
- ドラッグで移動
- 線の向き変更（回転）
- Deleteで削除
- 説明文の入力
- 自動保存（IndexedDB）
- JSONエクスポート / インポート
- 効率的に指示書画像を生成（PNG）
出力イメージ
上：番号付きスクリーンショット
下：①〜の説明一覧
上で場所を確認 → 下で内容を読む、という構成です。
↑ Chrome 拡張版(サイト版と比べてスクリーンショットを簡単に撮れます)
↓ サイト版(手元に説明を挿入するための画像が必要です)
説明文を横に詰めるレイアウト
従来の「縦に1個ずつ並ぶ」形式ではなく、
- 横に最大3個並べる
- 各行に対して各ブロックの高さを揃える
例：
3行 / 1行 / 4行
のような場合、4行以外は「現在一番下に余白がある列」になります。
仕様
スクリーンショット
- フルページ対応（自動スクロール合成）
- 横幅1920pxに正規化
マーカー操作
- クリックで番号追加
- ドラッグで移動
- ハンドルで回転
- Deleteキーで削除
入力
- 右の説明入力欄
保存
- 自動保存（IndexedDB）
- 前回の状態から再開可能
エクスポート
- Ctrl + S でJSON保存
- インポートで復元可能
出力
- PNG画像生成
- 上：注釈付き画像
- 下：①〜説明一覧（横3列レイアウト）
インストール手順
-
リポジトリをダウンロードまたはclone
https://github.com/uni928/site_instruction_maker -
Chromeで以下を開く
chrome://extensions/ -
右上の「デベロッパーモード」をON
-
「パッケージ化されていない拡張機能を読み込む」
-
フォルダを選択
これで使えるようになります。
使い方
① スクリーンショット
拡張を起動 → 「撮影」ボタン
→ フルページを自動でキャプチャ
② 番号を置く
画像をクリック
→ 丸付き番号が出現
③ 調整
- ドラッグ → 移動
- 線の先をドラッグ → 回転
- Delete → 削除
④ 説明を書く
数字を配置した分だけ、右の説明記述欄が増えているため、各番号に対して入力作業を行う。
⑤ 保存 / 再開
- 自動保存される
- 「前回から再開」で復元
- JSONエクスポート / インポートも可能
⑥ 出力
「出力」ボタンでPNG生成
- 上：番号付き画像
- 下：①〜説明
そのまま指示書として使えます。
まとめ
指示書作成の
- スクショ
- 番号付け
- 説明整理
を一気に効率化したツールです。
このツールで皆さんの作業が少しでも楽になったならば嬉しいです。
閲覧ありがとうございました。
ソース