使い方ガイド
ImageOverlayTool は、複数の画像を重ね合わせて比較・調整するためのデスクトップアプリケーションです。 開発者の画像検証作業や、デザインの比較調整をサポートします。
1. インストール
ダウンロード
Microsoft Store から入手するか、GitHub Releases から最新版をダウンロードしてください。
- Windows:
.exeまたは.zipファイル - Linux:
.AppImageまたは.debファイル
動作要件
- Windows 10 以降 / Linux (Ubuntu 20.04+)
2. 基本操作
画像の読み込み
画像を読み込む方法は4つあります。
- ファイルダイアログから追加: メニューから「画像設定」を選択（または
Ctrl+I）し、画像設定ウィンドウの「追加」ボタンからファイルを選択します。 - ドラッグ＆ドロップ: 画像ファイルをメインウィンドウまたは画像設定ウィンドウにドラッグ＆ドロップして追加できます。
- クリップボードから貼り付け:
Ctrl+Vでクリップボードの画像をペーストできます（一時キャッシュ画像として追加されます）。 - コマンドライン(CLI)からの起動: ターミナル等からコマンドライン引数を渡して、起動と同時に画像を読み込むことができます。詳しくは コマンドライン(CLI)連携ガイド を参照してください。
画像の操作
- 移動: 画像をドラッグして位置を調整します。
- 変形: 四隅のアンカーポイントをドラッグして、パースペクティブ補正（自由変形）が可能です。
- ズーム: マウスホイールでステージ全体の拡大・縮小ができます。
画面フィット
メニューの「画面フィット」（Ctrl+F）で、選択中の画像をウィンドウサイズに合わせて表示できます。
3. 画像設定ウィンドウ
メニューの「画像設定」（Ctrl+I）または FAB メニューの設定ボタンから開きます。
画像一覧と並び替え
- 読み込んだ画像の一覧が表示されます。
- 各画像のドラッグハンドル（☰）を掴んでドラッグ＆ドロップすることで、レイヤーの並び順を変更できます。
- 画像をクリックすると選択状態になり、メインウィンドウ上で強調表示されます。
透過度
スライダーで各画像の透明度（0〜100%）を調整します。複数画像の重ね合わせ時に前面画像を半透明にすることで、背面画像との比較が容易になります。
拡大縮小
スライダーで画像の表示倍率を調整します。
回転
スライダーまたは数値入力で画像の回転角度を指定します。
変形リセット
「変形リセット」ボタンで、画像の位置・変形・回転をすべて初期状態に戻します。
画像フィルタ
「フィルタ」ボタンからポップオーバーで以下のフィルタを適用できます。
- 2値化: 画像を白黒の2値に変換します。しきい値スライダー（0〜255）で境界を調整できます。
- HSV調整: 色相（H: -180〜+180）、彩度（S: -100〜+100）、明度（V: -100〜+100）をスライダーで個別に調整できます。
表示/非表示とロック
- 表示/非表示（👁アイコン）: 画像の表示/非表示を切り替えます。非表示にしてもレイヤーリストには残ります。
- ロック（🔒アイコン）: 画像をロックすると、キャンバス上で移動や変形ができなくなります。誤操作の防止に便利です。
欠落画像の再リンク
既存プロジェクトを開いた際に画像ファイルが見つからない場合、リストに警告が表示されます。「再リンク」ボタンで別のファイルを指定して差し替えることができます。
クリップボード画像の保存
クリップボードからペーストされた画像（キャッシュ画像）は、「名前を付けて保存」ボタンで通常のファイルとして保存できます。
4. プロジェクト管理
作業状態を .iot 形式のプロジェクトファイルとして保存・読み込みできます。
| 操作 | メニュー | ショートカット |
|---|---|---|
| 新規プロジェクト | メニュー > 新規プロジェクト | Ctrl+N |
| プロジェクトを開く | メニュー > プロジェクトを開く | Ctrl+O |
| プロジェクトを保存 | メニュー > プロジェクトを保存 | Ctrl+S |
| 名前を付けて保存 | メニュー > 名前を付けて保存 | Ctrl+Shift+S |
プロジェクトファイルには、画像パス、配置情報、変形状態、フィルタ設定、レイヤー順序などが保存されます。
5. 画像エクスポートとキャプチャ
キャプチャ
メニューの「キャプチャ」（Ctrl+Shift+C）で、デスクトップの背景を撮影して画像として取り込めます。
画像エクスポート
メニューの「画像エクスポート」（Ctrl+E）で、キャンバスの現在の状態を画像ファイルとして書き出します。
エクスポート時に背景色を含めるかどうかを選択できます。
6. 寸法線機能
メニューの「寸法線設定」（Ctrl+D）または FAB メニューから寸法線設定ウィンドウを開きます。
キャンバス上に寸法線を描画し、解像度係数を考慮した実寸法表示が可能です。
7. 表示カスタマイズ
背景色/スタイルの変更
メニューの「背景スタイル」（Ctrl+B）または FAB メニューの背景スタイルボタンから、キャンバスの背景色を変更できます。カラーピッカーから自由に色を選択でき、よく使う色はプリセットとして保存・管理が可能です。
常に手前に表示
メニューの「常に手前に表示」または FAB メニューから切り替えます。 このモードがONの間だけ、クリック透過モードを操作できます。
クリックスルーモード
メニューの「クリックスルーモード」（Ctrl+Shift+M）または FAB メニューから切り替えます。
「常に手前に表示」がONのときのみ有効化できます。
グローバルショートカット Ctrl+Shift+M を使う場合は、OFF状態からでも「常に手前に表示」を自動でONにして透過モードへ入れます。
このモードを有効にすると、キャンバス部分のクリックが下のウィンドウに透過します（メニューバーやFABボタンは引き続き操作可能）。
有効時はメニューバーに黄色いインジケーターが表示されます。
8. FABメニュー
画面右下にフローティングアクションボタン（+ ボタン）があります。
クリックすると以下のショートカットボタンが展開されます。
| ボタン | 機能 |
|---|---|
| 画像設定 | 画像設定ウィンドウを開く |
| 寸法線 | 寸法線設定ウィンドウを開く |
| 背景スタイル | 背景色の変更 |
| 常に手前 | 常に手前に表示の切替 |
| クリックスルー | クリックスルーモードの切替 |
| キャプチャ | 背景キャプチャ |
| エクスポート | 画像エクスポート |
9. 設定
メニューの「設定」（Ctrl+,）から設定ダイアログを開きます。
- 言語: 日本語 / 英語を切り替えます。
- ログレベル: アプリケーションログの詳細度を設定します。
- 設定のエクスポート/インポート: アプリの設定を JSON ファイルとして書き出し・読み込みできます。
ウィンドウサイズ、表示位置、背景色、プリセットカラー、言語設定などは自動的に保存され、次回起動時に復元されます。
10. キーボードショートカット一覧
| ショートカット | 動作 |
|---|---|
Ctrl+N | 新規プロジェクト |
Ctrl+O | プロジェクトを開く |
Ctrl+S | プロジェクトを保存 |
Ctrl+Shift+S | 名前を付けて保存 |
Ctrl+I | 画像設定ウィンドウを開く |
Ctrl+F | 画面フィット |
Ctrl+V | クリップボードから画像を貼り付け |
Ctrl+Shift+C | キャプチャ |
Ctrl+E | 画像エクスポート |
Ctrl+D | 寸法線設定ウィンドウを開く |
Ctrl+B | 背景スタイル変更 |
Ctrl+Shift+T | 常に手前に表示の切替 |
Ctrl+Shift+M | クリックスルーモードの切替（必要時は常に手前を自動ON） |
Ctrl+Z | 元に戻す |
Ctrl+Shift+Z / Ctrl+Y | やり直し |
Ctrl+, | 設定ダイアログを開く |
Ctrl+Shift+L | ログのエクスポート |
Ctrl+Q | アプリを終了 |
11. トラブルシューティング
ログの取得
問題が発生した場合は、メニューの「ログ出力」（Ctrl+Shift+L）からログファイルをエクスポートして、サポートへの報告に添付してください。
お問い合わせ
ご不明な点は GitHub Issue またはメール（yhmr.develop@gmail.com）までお寄せください。