nandemon/image-editor

Image Editor - ユーザーマニュアル

プロフェッショナルな画像編集ツール。Canvaライクな直感的UIで、画像の編集・加工・デザインが可能です。

📄 ライセンス

MIT License

Copyright (c) 2024 nanndemoworks-arch

🎨 作成した画像について

このツールで作成した画像は完全にあなたのものです。

• —✅ 商用利用OK（販売、広告、SNSなど）
• —✅ 著作権はあなたに帰属
• —✅ クレジット表記不要（してくれたら嬉しいけど）

💻 ソフトウェアについて

このツール自体はMITライセンスの下で提供されています。

• —✅ 個人利用・商用利用OK
• —✅ 改変・再配布OK
• —✅ ただし著作権表示は保持してください

詳細は LICENSE ファイルをご覧ください。

🎉 使い方

友達や同僚に自由にシェアしてください！ 作った画像で商売しても、SNSに投稿しても、何でもOKです。

📑 目次

1. 1.基本操作
2. 2.ページ管理
3. 3.レイヤー管理
4. 4.テキスト編集
5. 5.画像編集
6. 6.エクスポート
7. 7.キーボードショートカット
8. 8.Tips & Tricks

🎯 基本操作

起動方法

1. 1.ブラウザで index.html を開く
2. 2.または Hugging Face Space でアクセス

画面構成

┌─────────────────────────────────────────────┐
│  ヘッダー（元に戻す/やり直し/ダウンロード） │
├──────┬────────────────────────┬─────────────┤
│ページ│                        │  デザイン   │
│パネル│   キャンバスエリア     │  パネル     │
│      │                        │             │
│      │                        │  レイヤー   │
│      │                        │  パネル     │
└──────┴────────────────────────┴─────────────┘

最初のステップ

1. 1.「🖼️ 画像追加」ボタンをクリック
2. 2.画像ファイルを選択
3. 3.キャンバス上でドラッグして配置
4. 4.リサイズハンドルでサイズ調整

📐 ページ管理

ページの追加

• —左パネル上部の「➕」ボタンをクリック

ページの切り替え

• —左パネルのページサムネイルをクリック

ページ名の編集

1. 1.ページサムネイル内のページ名をダブルクリック
2. 2.新しい名前を入力
3. 3.Enterキーで確定
4. 4.Escapeキーでキャンセル

💡 ヒント: ページ名はダウンロード時のファイル名になります

ページの並び替え

1. 1.ページサムネイルにマウスをホバー
2. 2.▲ボタン：上に移動
3. 3.▼ボタン：下に移動

ページの複製

1. 1.ページサムネイルにマウスをホバー
2. 2.左上の 📋 ボタンをクリック
3. 3.すべてのレイヤーとページ名が複製されます

ページの削除

1. 1.ページサムネイルにマウスをホバー
2. 2.右上の × ボタンをクリック

⚠️ 注意: 最後の1ページは削除できません

キャンバスサイズ変更

1. 1.右パネルの「📐 キャンバスサイズ」セクション
2. 2.幅と高さを入力
3. 3.または「⇄」ボタンで縦横を入れ替え
4. 4.「📏 サイズ変更」ボタンで適用

プリセットサイズ

• —Instagram: 1080×1080
• —X/Twitter: 1200×675
• —YouTube: 1920×1080
• —Story: 1080×1920

🗂️ レイヤー管理

レイヤーの選択

• —キャンバス上でクリック
• —または右パネルの「レイヤー」タブから選択

複数選択

• —Shift + クリック: キャンバス上で複数選択
• —Ctrl/Cmd + クリック: レイヤーパネルで複数選択

レイヤーの移動

• —ドラッグして移動
• —グループ化されたレイヤーは一緒に移動

レイヤーのリサイズ

1. 1.レイヤーを選択
2. 2.四隅・辺のハンドルをドラッグ
3. 3.Shift + ドラッグ: 縦横比を維持

レイヤーの回転

1. 1.レイヤーを選択
2. 2.右上の ↻ ハンドルをドラッグ

レイヤーの複製

• —方法1: レイヤーパネルの 📋 ボタン
• —方法2: Ctrl/Cmd + D
• —方法3: 右クリックメニュー → 「📋 複製」

レイヤーの削除

• —方法1: レイヤーパネルの 🗑️ ボタン
• —方法2: Delete または Backspace キー
• —方法3: 右クリックメニュー → 「🗑️ 削除」

レイヤーのグループ化

1. 1.複数のレイヤーを選択（Shift+クリック）
2. 2.キャンバス上部のツールバーで 📁 グループ化
3. 3.またはレイヤーパネルの 📁 グループ化 ボタン

グループの特徴:

• —グループ内のレイヤーは一緒に移動
• —グループを展開/折りたたみ可能
• —グループごとロック/非表示可能

グループ解除

1. 1.グループを選択
2. 2.レイヤーパネルの 📂 ボタン

レイヤーの整列・分散

1. 1.2つ以上のレイヤーを選択
2. 2.キャンバス上部にツールバーが表示
3. 3.整列ボタンをクリック：
4. 4.⬅️: 左揃え
5. 5.↔️: 水平中央揃え
6. 6.➡️: 右揃え
7. 7.⬆️: 上揃え
8. 8.↕️: 垂直中央揃え
9. 9.⬇️: 下揃え
10. 10.⬌: 水平分散（3つ以上）
11. 11.⬍: 垂直分散（3つ以上）

レイヤーの重なり順

• —右クリック → 「⬆️ 最前面へ」
• —右クリック → 「⬇️ 最背面へ」

レイヤーのロック

1. 1.レイヤーパネルの 🔒 ボタン
2. 2.または右クリック → 「🔒 ロック/解除」

ロックされたレイヤー:

• —移動・リサイズ不可
• —削除は可能

レイヤーの表示/非表示

1. 1.レイヤーパネルの 👁️ ボタン
2. 2.または右クリック → 「👁️ 表示/非表示」

✏️ テキスト編集

テキストの追加

1. 1.右パネルの「✏️ テキスト追加」
2. 2.「テキストを追加」ボタンをクリック
3. 3.キャンバス上にテキストレイヤーが作成される

テキストの編集

1. 1.テキストレイヤーをダブルクリック
2. 2.テキストを入力
3. 3.Enterキーで確定
4. 4.Escapeキーでキャンセル

フォントサイズ

• —方法1: Ctrl/Cmd + ↑↓ キー
• —方法2: 右パネルに表示される現在のサイズを確認

テキストスタイル

右クリックメニューまたはテキスト編集時のUI:

• —太字: Ctrl/Cmd + B
• —斜体: Ctrl/Cmd + I
• —色: カラーピッカーで選択

テキスト配置

• —左揃え
• —中央揃え
• —右揃え

テキスト背景

1. 1.テキストレイヤーを選択
2. 2.背景色を設定
3. 3.パディング調整
4. 4.角丸設定

テキストシャドウ

1. 1.シャドウを有効化
2. 2.X/Yオフセット調整
3. 3.ぼかし調整
4. 4.シャドウ色選択

テキストストローク（縁取り）

1. 1.ストロークを有効化
2. 2.線の太さ調整
3. 3.ストローク色選択

🎨 画像編集

画像の追加

• —方法1: ヘッダーの「🖼️ 画像追加」
• —方法2: キャンバス中央にドラッグ&ドロップ

画像フィルター

画像レイヤーを選択すると右パネルに表示:

1. 1.明るさ (0-200%)
2. 2.100%が標準
3. 3.0%で真っ黒、200%で超明るい

1. 1.コントラスト (0-200%)
2. 2.100%が標準
3. 3.高いほど明暗差が大きい

1. 1.彩度 (0-200%)
2. 2.100%が標準
3. 3.0%でモノクロ、200%で超鮮やか

1. 1.ぼかし (0-20px)
2. 2.0pxでクリア
3. 3.高いほどぼける

1. 1.色相回転 (0-360°)
2. 2.色を回転させる
3. 3.180°で補色

1. 1.グレースケール (0-100%)
2. 2.0%でカラー
3. 3.100%で完全モノクロ

1. 1.セピア (0-100%)
2. 2.古い写真風
3. 3.100%で完全セピア

リセット: 「リセット」ボタンで全フィルターをクリア

画像の反転

画像レイヤーを選択すると右パネルに表示:

• —↔️ 水平反転: 左右反転
• —↕️ 垂直反転: 上下反転

両方同時に適用も可能

不透明度

すべてのレイヤー（画像・テキスト）で使用可能:

1. 1.レイヤーを選択
2. 2.右パネルの「不透明度」スライダー
3. 3.0%（完全透明）〜100%（完全不透明）

💾 エクスポート

エクスポート手順

1. 1.ヘッダーの「💾 ダウンロード」ボタン
2. 2.フォーマットを選択
3. 3.品質を調整（JPG/WebPのみ）
4. 4.「エクスポート」ボタン

フォーマット

PNG

• —特徴: 透明背景対応、高品質
• —用途: 透明背景が必要な場合
• —ファイルサイズ: 大きい

JPG

• —特徴: 高圧縮、品質調整可能
• —用途: 写真、SNS投稿
• —ファイルサイズ: 小さい
• —品質: 50-100%で調整可能

WebP

• —特徴: 高圧縮、高品質
• —用途: Web用、最新ブラウザ
• —ファイルサイズ: JPGより小さい
• —品質: 50-100%で調整可能

SVG

• —特徴: ベクター形式（PNG埋め込み）
• —用途: 拡大縮小が必要な場合

BMP

• —特徴: 無圧縮、最高品質
• —用途: 編集を続ける場合
• —ファイルサイズ: 非常に大きい

ファイル名

• —ページ名が自動的にファイル名になります
• —例: ページ名「サムネイル」→ サムネイル.png

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

基本操作

グループ操作

テキスト編集

選択

その他

💡 Tips & Tricks

スナップ機能

レイヤーを移動すると自動的にスナップ:

• —キャンバス中央
• —他のレイヤーの端
• —均等な間隔

ズーム

• —画面下部のズームコントロール
• —- / + ボタンで調整
• —⊡ ボタンでフィット

効率的なワークフロー

1. 1.テンプレートとして保存
2. 2.よく使うサイズ・レイアウトを保存
3. 3.次回は複製から開始

1. 1.グループを活用
2. 2.関連するレイヤーをグループ化
3. 3.一括で移動・編集

1. 1.キーボードショートカット
2. 2.Ctrl+D で素早く複製
3. 3.Ctrl+Z/Y で試行錯誤

1. 1.整列ツール
2. 2.複数要素を選択して一発で整列
3. 3.デザインの統一感を出す

1. 1.ページ名を設定
2. 2.ダウンロード前にページ名を編集
3. 3.ファイル名で内容が分かるように

よくある質問

Q: レイヤーが動かない A: ロックされている可能性があります。レイヤーパネルで🔒を確認してください。

Q: グループ化できない A: 2つ以上のレイヤーを選択してください（Shift+クリック）。

Q: テキストが編集できない A: テキストレイヤーをダブルクリックしてください。

Q: フィルターが適用されない A: フィルターは画像レイヤーのみ対応です。テキストレイヤーには適用できません。

Q: エクスポートした画像が荒い A: JPG/WebPの場合は品質を上げてください。または PNG 形式を使用してください。

Q: 透明背景にしたい A: キャンバスサイズ設定で「透明な背景」をチェックし、PNG形式でエクスポートしてください。

🛠️ 技術仕様

対応ブラウザ

• —Chrome 90+
• —Firefox 88+
• —Safari 14+
• —Edge 90+

対応画像フォーマット

• —入力: PNG, JPG, JPEG, WebP, GIF
• —出力: PNG, JPG, WebP, SVG, BMP

制限事項

• —画像サイズ: 推奨 10000×10000px まで
• —レイヤー数: 制限なし（ブラウザのメモリに依存）
• —Undo/Redo: 最大50ステップ

動作環境

• —Pure HTML/CSS/JavaScript
• —インターネット接続不要
• —依存関係なし

📄 ライセンス

Private - Portfolio Project

🔗 リンク

• —GitHub: https://github.com/nanndemoworks-arch/image-editor
• —Hugging Face Space: https://huggingface.co/spaces/nanndemoworks-arch/image-editor

📮 サポート

質問や不具合報告は GitHub の Issues までお願いします。

最終更新: 2024年12月11日 バージョン: 1.0.0