スクリーンお絵描き＆スクショアプリ

概要

画面上に直接お絵描きができ、同時にスクリーンショットも撮影できるElectronアプリです。プレゼンテーションや説明資料の作成時に、素早く視覚的な注釈を加えることができます。

主な機能

1. お絵描き機能

• ショートカットキー起動：設定可能なグローバルホットキーで即座に起動
• 透明オーバーレイ：既存の画面の上に透明なレイヤーを表示
• 描画ツール：
  • ペンツール（自由描画）
  • 図形ツール（矢印、四角、円など）
  • テキストツール
  • 消しゴムツール
• カラーパレット：豊富な色選択と透明度調整
• 線の太さ調整：細かい注釈から目立つマーキングまで対応

2. スクリーンショット機能

• 範囲選択撮影：マウスドラッグで撮影範囲を指定
• 全画面撮影：ワンクリックで全画面をキャプチャ
• ウィンドウ撮影：特定のウィンドウのみを撮影
• 描画込み保存：お絵描きした注釈とともに保存

3. 便利な機能

• ショートカットキー設定：全機能にカスタマイズ可能なショートカット
• 履歴管理：元に戻す/やり直し機能
• 保存形式選択：PNG/JPEG/WebP形式に対応
• クリップボード連携：撮影後自動的にクリップボードにコピー
• フローティングツールバー：常に表示されるコンパクトなツールバー

技術スタック

• Electron: デスクトップアプリケーションフレームワーク
• Node.js: バックエンドロジック
• HTML5 Canvas: 描画機能の実装
• electron-screenshot: スクリーンショット機能
• global-shortcut: グローバルショートカットの管理

使用シーン

1. プレゼンテーション

   • スライドに直接注釈を追加
   • 重要なポイントをハイライト

2. チュートリアル作成

   • 操作手順を視覚的に説明
   • スクリーンショットに説明を追加

3. バグレポート

   • 問題箇所を直接マーキング
   • 再現手順を視覚的に記録

4. デザインレビュー

   • UI/UXの改善点を直接指摘
   • レイアウトの修正案を提示

開発計画

1. Phase 1: 基本機能実装

   • Electronアプリケーションの基本構造構築
   • 透明オーバーレイの実装
   • 基本的な描画機能

2. Phase 2: スクリーンショット機能

   • 範囲選択、全画面、ウィンドウ撮影
   • 描画との統合
   • 保存機能

3. Phase 3: UI/UX改善

   • ツールバーデザイン
   • ショートカットキー設定画面
   • 設定の永続化

4. Phase 4: 高度な機能

   • 図形認識（手書きの円を整った円に変換）
   • レイヤー管理
   • 描画アニメーション記録

類似アプリとの差別化

• 軽量性：必要最小限の機能に絞り、高速起動を実現
• ショートカット特化：キーボードのみで全操作が可能
• シンプルなUI：直感的で学習コストが低い
• プライバシー重視：オフライン完結、データは外部送信しない