グラレコメーカー - Graphic Recording Maker

簡易スケッチを作成し、生成AIで清書するためのグラフィックレコーディング作成支援ツール。

基本機能

描画ツール

ツール	説明	操作
ブラシ	フリーハンド描画	ドラッグで描画
直線/矢印	直線または矢印を描画	右クリックで切替、ドラッグで描画
矩形	枠線または塗りつぶし矩形	右クリックで切替、ドラッグで描画
テキスト	文字入力	クリックで配置、入力後ドラッグで移動可
番号スタンプ	①②③...の連番スタンプ	クリックで配置、自動インクリメント
モザイク	選択範囲をピクセル化	ドラッグで範囲選択

編集ツール

ツール	説明	操作
カラー	描画色の変更	クリックでカラーピッカー表示
元に戻す	直前の操作を取消	クリック または Ctrl+Z
やり直し	取消した操作を復元	クリック または Ctrl+Y
貼り付け	クリップボードから画像挿入	クリック または Ctrl+V

画像貼り付け機能

1. Ctrl+V またはツールクリックで画像を読み込み
2. マウス移動でプレビュー位置を調整
3. クリックで仮配置（リサイズハンドル表示）
4. 角をドラッグしてサイズ調整（アスペクト比維持）
5. 中央をドラッグして位置調整
6. ダブルクリック または Enter で確定
7. Escape でキャンセル

出力ツール

ツール	説明
保存	PNG形式でダウンロード
コピー	クリップボードにコピー

キーボードショートカット

• Ctrl+Z - 元に戻す
• Ctrl+Y - やり直し
• Ctrl+V - クリップボードから貼り付け
• Enter - 画像配置確定
• Escape - 操作キャンセル

使い方（グラレコワークフロー）

1. キャプチャ: 拡張機能アイコンをクリックしてページをキャプチャ、または白紙から開始
2. スケッチ: ブラシ、図形、テキスト、番号スタンプで簡易的なグラレコを作成
3. コピー: 完成したスケッチをクリップボードにコピー
4. AI清書: 生成AI（ChatGPT、Claude等）に画像を貼り付け、清書を依頼

---

今後の開発方針

目的: グラレコで「伝えたいこと」をより明確に表現できるようにする

視覚的階層の表現強化

• 線の太さ調整: 重要度に応じた強弱をつけられるようにする
• 囲み・強調: 要素のグルーピングや重要ポイントの視覚的強調
• コネクタ線: 要素間の関係性を示す接続線（因果、流れ、対比）

情報構造の可視化

• フレーム/エリア分割: 話題・セクションごとの領域分け
• タイムライン表現: 時系列の流れを示すガイド
• 階層インデント: 親子関係・詳細度を視覚的に表現

描画の質向上

• スムージング: 手描き線の自動補正（ガタつき軽減）
• 図形スナップ: 矩形・直線の角度補正（水平/垂直/45度）
• 整列ガイド: 要素配置時のスマートガイド表示

ワークフロー効率化

• クイックカラー: グラレコでよく使う色（3〜5色）のワンタップ切替
• 直前ツール復帰: 一時操作後に元のツールへ自動復帰
• キーボードショートカット拡充: ツール切替の高速化

AI連携（清書支援）

• ワンクリック清書: 作成したスケッチをAI APIで清書画像に変換
• スタイル指定: 清書時のビジュアルスタイル選択（ビジネス/カジュアル/手描き風）

---

技術情報

• プラットフォーム: Chrome Extension (Manifest V3)
• フレームワーク: MooTools
• 描画: HTML5 Canvas API
• アイコン: インラインSVG（Featherアイコンスタイル）

ライセンス

MIT License