nandemon/image-editor

1---2title: Image Editor3emoji: 🎨4colorFrom: purple5colorTo: pink6sdk: static7pinned: false8---9 10# Image Editor - ユーザーマニュアル11 12プロフェッショナルな画像編集ツール。Canvaライクな直感的UIで、画像の編集・加工・デザインが可能です。13 14---15 16## 📄 ライセンス17 18MIT License19 20Copyright (c) 2024 nanndemoworks-arch21 22### 🎨 作成した画像について23**このツールで作成した画像は完全にあなたのものです。**24- ✅ 商用利用OK（販売、広告、SNSなど）25- ✅ 著作権はあなたに帰属26- ✅ クレジット表記不要（してくれたら嬉しいけど）27 28### 💻 ソフトウェアについて29このツール自体はMITライセンスの下で提供されています。30- ✅ 個人利用・商用利用OK31- ✅ 改変・再配布OK32- ✅ ただし著作権表示は保持してください33 34詳細は [LICENSE](LICENSE) ファイルをご覧ください。35 36---37 38### 🎉 使い方39友達や同僚に自由にシェアしてください！40作った画像で商売しても、SNSに投稿しても、何でもOKです。41 42---43 44## 📑 目次45 461. [基本操作](#基本操作)472. [ページ管理](#ページ管理)483. [レイヤー管理](#レイヤー管理)494. [テキスト編集](#テキスト編集)505. [画像編集](#画像編集)516. [エクスポート](#エクスポート)527. [キーボードショートカット](#キーボードショートカット)538. [Tips & Tricks](#tips--tricks)54 55---56 57## 🎯 基本操作58 59### 起動方法601. ブラウザで `index.html` を開く612. または Hugging Face Space でアクセス62 63### 画面構成64```65┌─────────────────────────────────────────────┐66│  ヘッダー（元に戻す/やり直し/ダウンロード） │67├──────┬────────────────────────┬─────────────┤68│ページ│                        │  デザイン   │69│パネル│   キャンバスエリア     │  パネル     │70│      │                        │             │71│      │                        │  レイヤー   │72│      │                        │  パネル     │73└──────┴────────────────────────┴─────────────┘74```75 76### 最初のステップ771. 「🖼️ 画像追加」ボタンをクリック782. 画像ファイルを選択793. キャンバス上でドラッグして配置804. リサイズハンドルでサイズ調整81 82---83 84## 📐 ページ管理85 86### ページの追加87- 左パネル上部の「➕」ボタンをクリック88 89### ページの切り替え90- 左パネルのページサムネイルをクリック91 92### ページ名の編集931. ページサムネイル内のページ名を**ダブルクリック**942. 新しい名前を入力953. **Enter**キーで確定964. **Escape**キーでキャンセル97 98💡 **ヒント**: ページ名はダウンロード時のファイル名になります99 100### ページの並び替え1011. ページサムネイルにマウスをホバー1022. **▲**ボタン：上に移動1033. **▼**ボタン：下に移動104 105### ページの複製1061. ページサムネイルにマウスをホバー1072. 左上の **📋** ボタンをクリック1083. すべてのレイヤーとページ名が複製されます109 110### ページの削除1111. ページサムネイルにマウスをホバー1122. 右上の **×** ボタンをクリック113 114⚠️ **注意**: 最後の1ページは削除できません115 116### キャンバスサイズ変更1171. 右パネルの「📐 キャンバスサイズ」セクション1182. 幅と高さを入力1193. または「⇄」ボタンで縦横を入れ替え1204. 「📏 サイズ変更」ボタンで適用121 122#### プリセットサイズ123- **Instagram**: 1080×1080124- **X/Twitter**: 1200×675125- **YouTube**: 1920×1080126- **Story**: 1080×1920127 128---129 130## 🗂️ レイヤー管理131 132### レイヤーの選択133- キャンバス上でクリック134- または右パネルの「レイヤー」タブから選択135 136### 複数選択137- **Shift + クリック**: キャンバス上で複数選択138- **Ctrl/Cmd + クリック**: レイヤーパネルで複数選択139 140### レイヤーの移動141- ドラッグして移動142- グループ化されたレイヤーは一緒に移動143 144### レイヤーのリサイズ1451. レイヤーを選択1462. 四隅・辺のハンドルをドラッグ1473. **Shift + ドラッグ**: 縦横比を維持148 149### レイヤーの回転1501. レイヤーを選択1512. 右上の **↻** ハンドルをドラッグ152 153### レイヤーの複製154- **方法1**: レイヤーパネルの **📋** ボタン155- **方法2**: **Ctrl/Cmd + D**156- **方法3**: 右クリックメニュー → 「📋 複製」157 158### レイヤーの削除159- **方法1**: レイヤーパネルの **🗑️** ボタン160- **方法2**: **Delete** または **Backspace** キー161- **方法3**: 右クリックメニュー → 「🗑️ 削除」162 163### レイヤーのグループ化1641. 複数のレイヤーを選択（Shift+クリック）1652. キャンバス上部のツールバーで **📁 グループ化**1663. またはレイヤーパネルの **📁 グループ化** ボタン167 168**グループの特徴**:169- グループ内のレイヤーは一緒に移動170- グループを展開/折りたたみ可能171- グループごとロック/非表示可能172 173### グループ解除1741. グループを選択1752. レイヤーパネルの **📂** ボタン176 177### レイヤーの整列・分散1781. 2つ以上のレイヤーを選択1792. キャンバス上部にツールバーが表示1803. 整列ボタンをクリック：181   - **⬅️**: 左揃え182   - **↔️**: 水平中央揃え183   - **➡️**: 右揃え184   - **⬆️**: 上揃え185   - **↕️**: 垂直中央揃え186   - **⬇️**: 下揃え187   - **⬌**: 水平分散（3つ以上）188   - **⬍**: 垂直分散（3つ以上）189 190### レイヤーの重なり順191- **右クリック** → 「⬆️ 最前面へ」192- **右クリック** → 「⬇️ 最背面へ」193 194### レイヤーのロック1951. レイヤーパネルの **🔒** ボタン1962. または右クリック → 「🔒 ロック/解除」197 198ロックされたレイヤー:199- 移動・リサイズ不可200- 削除は可能201 202### レイヤーの表示/非表示2031. レイヤーパネルの **👁️** ボタン2042. または右クリック → 「👁️ 表示/非表示」205 206---207 208## ✏️ テキスト編集209 210### テキストの追加2111. 右パネルの「✏️ テキスト追加」2122. 「テキストを追加」ボタンをクリック2133. キャンバス上にテキストレイヤーが作成される214 215### テキストの編集2161. テキストレイヤーを**ダブルクリック**2172. テキストを入力2183. **Enter**キーで確定2194. **Escape**キーでキャンセル220 221### フォントサイズ222- **方法1**: **Ctrl/Cmd + ↑↓** キー223- **方法2**: 右パネルに表示される現在のサイズを確認224 225### テキストスタイル226右クリックメニューまたはテキスト編集時のUI:227- **太字**: Ctrl/Cmd + B228- **斜体**: Ctrl/Cmd + I229- **色**: カラーピッカーで選択230 231### テキスト配置232- **左揃え**233- **中央揃え**234- **右揃え**235 236### テキスト背景2371. テキストレイヤーを選択2382. 背景色を設定2393. パディング調整2404. 角丸設定241 242### テキストシャドウ2431. シャドウを有効化2442. X/Yオフセット調整2453. ぼかし調整2464. シャドウ色選択247 248### テキストストローク（縁取り）2491. ストロークを有効化2502. 線の太さ調整2513. ストローク色選択252 253---254 255## 🎨 画像編集256 257### 画像の追加258- **方法1**: ヘッダーの「🖼️ 画像追加」259- **方法2**: キャンバス中央にドラッグ&ドロップ260 261### 画像フィルター262画像レイヤーを選択すると右パネルに表示:263 2641. **明るさ** (0-200%)265   - 100%が標準266   - 0%で真っ黒、200%で超明るい267 2682. **コントラスト** (0-200%)269   - 100%が標準270   - 高いほど明暗差が大きい271 2723. **彩度** (0-200%)273   - 100%が標準274   - 0%でモノクロ、200%で超鮮やか275 2764. **ぼかし** (0-20px)277   - 0pxでクリア278   - 高いほどぼける279 2805. **色相回転** (0-360°)281   - 色を回転させる282   - 180°で補色283 2846. **グレースケール** (0-100%)285   - 0%でカラー286   - 100%で完全モノクロ287 2887. **セピア** (0-100%)289   - 古い写真風290   - 100%で完全セピア291 292**リセット**: 「リセット」ボタンで全フィルターをクリア293 294### 画像の反転295画像レイヤーを選択すると右パネルに表示:296- **↔️ 水平反転**: 左右反転297- **↕️ 垂直反転**: 上下反転298 299両方同時に適用も可能300 301### 不透明度302すべてのレイヤー（画像・テキスト）で使用可能:3031. レイヤーを選択3042. 右パネルの「不透明度」スライダー3053. 0%（完全透明）〜100%（完全不透明）306 307---308 309## 💾 エクスポート310 311### エクスポート手順3121. ヘッダーの「💾 ダウンロード」ボタン3132. フォーマットを選択3143. 品質を調整（JPG/WebPのみ）3154. 「エクスポート」ボタン316 317### フォーマット318 319#### PNG320- **特徴**: 透明背景対応、高品質321- **用途**: 透明背景が必要な場合322- **ファイルサイズ**: 大きい323 324#### JPG325- **特徴**: 高圧縮、品質調整可能326- **用途**: 写真、SNS投稿327- **ファイルサイズ**: 小さい328- **品質**: 50-100%で調整可能329 330#### WebP331- **特徴**: 高圧縮、高品質332- **用途**: Web用、最新ブラウザ333- **ファイルサイズ**: JPGより小さい334- **品質**: 50-100%で調整可能335 336#### SVG337- **特徴**: ベクター形式（PNG埋め込み）338- **用途**: 拡大縮小が必要な場合339 340#### BMP341- **特徴**: 無圧縮、最高品質342- **用途**: 編集を続ける場合343- **ファイルサイズ**: 非常に大きい344 345### ファイル名346- ページ名が自動的にファイル名になります347- 例: ページ名「サムネイル」→ `サムネイル.png`348 349---350 351## ⌨️ キーボードショートカット352 353### 基本操作354| ショートカット | 動作 |355|--------------|------|356| `Ctrl/Cmd + Z` | 元に戻す |357| `Ctrl/Cmd + Y` | やり直し |358| `Ctrl/Cmd + D` | レイヤー複製 |359| `Delete` / `Backspace` | レイヤー削除 |360| `Escape` | 選択解除 |361 362### グループ操作363| ショートカット | 動作 |364|--------------|------|365| `Ctrl/Cmd + G` | グループ化 |366| `Ctrl/Cmd + Shift + G` | グループ解除 |367 368### テキスト編集369| ショートカット | 動作 |370|--------------|------|371| `Ctrl/Cmd + B` | 太字 |372| `Ctrl/Cmd + I` | 斜体 |373| `Ctrl/Cmd + ↑` | フォントサイズ拡大 |374| `Ctrl/Cmd + ↓` | フォントサイズ縮小 |375 376### 選択377| ショートカット | 動作 |378|--------------|------|379| `Shift + クリック` | 複数選択（キャンバス） |380| `Ctrl/Cmd + クリック` | 複数選択（レイヤーパネル） |381 382### その他383| ショートカット | 動作 |384|--------------|------|385| `右クリック` | コンテキストメニュー |386| `ダブルクリック` | テキスト編集 / ページ名編集 |387 388---389 390## 💡 Tips & Tricks391 392### スナップ機能393レイヤーを移動すると自動的にスナップ:394- キャンバス中央395- 他のレイヤーの端396- 均等な間隔397 398### ズーム399- 画面下部のズームコントロール400- `-` / `+` ボタンで調整401- `⊡` ボタンでフィット402 403### 効率的なワークフロー404 4051. **テンプレートとして保存**406   - よく使うサイズ・レイアウトを保存407   - 次回は複製から開始408 4092. **グループを活用**410   - 関連するレイヤーをグループ化411   - 一括で移動・編集412 4133. **キーボードショートカット**414   - Ctrl+D で素早く複製415   - Ctrl+Z/Y で試行錯誤416 4174. **整列ツール**418   - 複数要素を選択して一発で整列419   - デザインの統一感を出す420 4215. **ページ名を設定**422   - ダウンロード前にページ名を編集423   - ファイル名で内容が分かるように424 425### よくある質問426 427**Q: レイヤーが動かない**  428A: ロックされている可能性があります。レイヤーパネルで🔒を確認してください。429 430**Q: グループ化できない**  431A: 2つ以上のレイヤーを選択してください（Shift+クリック）。432 433**Q: テキストが編集できない**  434A: テキストレイヤーを**ダブルクリック**してください。435 436**Q: フィルターが適用されない**  437A: フィルターは画像レイヤーのみ対応です。テキストレイヤーには適用できません。438 439**Q: エクスポートした画像が荒い**  440A: JPG/WebPの場合は品質を上げてください。または PNG 形式を使用してください。441 442**Q: 透明背景にしたい**  443A: キャンバスサイズ設定で「透明な背景」をチェックし、PNG形式でエクスポートしてください。444 445---446 447## 🛠️ 技術仕様448 449### 対応ブラウザ450- Chrome 90+451- Firefox 88+452- Safari 14+453- Edge 90+454 455### 対応画像フォーマット456- **入力**: PNG, JPG, JPEG, WebP, GIF457- **出力**: PNG, JPG, WebP, SVG, BMP458 459### 制限事項460- 画像サイズ: 推奨 10000×10000px まで461- レイヤー数: 制限なし（ブラウザのメモリに依存）462- Undo/Redo: 最大50ステップ463 464### 動作環境465- Pure HTML/CSS/JavaScript466- インターネット接続不要467- 依存関係なし468 469---470 471## 📄 ライセンス472 473Private - Portfolio Project474 475---476 477## 🔗 リンク478 479- **GitHub**: https://github.com/nanndemoworks-arch/image-editor480- **Hugging Face Space**: https://huggingface.co/spaces/nanndemoworks-arch/image-editor481 482---483 484## 📮 サポート485 486質問や不具合報告は GitHub の Issues までお願いします。487 488---489 490**最終更新**: 2024年12月11日491**バージョン**: 1.0.0492