1起動と画面構成
index.html をブラウザで開くだけで起動。サーバー不要、完全オフライン動作。
| エリア | 役割 |
|---|---|
| トップバー | ツール選択、キャンバスサイズ、Undo/Redo、インポート/エクスポート |
| アートボードバー | アートボードの切替・追加・削除・リネーム |
| 左パネル | Layers（レイヤー一覧）と Assets（画像アセット）を切替 |
| キャンバス | メイン編集エリア。ズーム・パンに対応 |
| 右パネル | 選択中要素のプロパティ編集。未選択時はキャンバス背景を編集 |
2描画ツール
ツールバーからツールを選んでキャンバスをクリックすると要素が作成される。
Rectangle R
矩形を作成。角丸(radius)設定可能。
Ellipse O
円・楕円を作成。
Triangle
三角形。clip-pathで描画。
Trapezoid
台形。clip-pathで描画。
Text T
テキスト要素を作成。即座に編集モードに入る。
Image I
画像をアップロードして配置。ドラッグ&ドロップも可。
3選択・移動・変形
Select ツール (V) でキャンバス上の要素を操作する。
要素をクリックすると選択され、青い枠と8つのリサイズハンドルが表示される。
選択中の要素をドラッグすると移動。スナップガイドが自動表示され、他要素やキャンバス中心に吸着する。
四隅・辺のハンドルをドラッグしてサイズ変更。
要素上部の丸いハンドルをドラッグして回転。Shift を押しながらで15°単位にスナップ。
Shift+クリックで追加選択。空白をドラッグでマーキー選択。⌘A で全選択。
4テキスト編集
テキスト要素はダブルクリックで編集モードに入る。
| プロパティ | 説明 |
|---|---|
| Font Family | 9書体から選択（Sans / Serif / Mono / Helvetica / Impact / Comic / Noto Sans JP / Zen Kaku Gothic / M PLUS Rounded） |
| Font Size / Weight | サイズと太さを数値で指定 |
| Italic | イタリック切替 |
| Text Align | 左揃え / 中央 / 右揃え |
| Vertical Align | 上 / 中央 / 下 |
| Color | 単色またはグラデーション |
| Background Band | テキスト背景帯。色・X/Yパディング設定可能 |
5画像の配置と調整
3つの方法で画像をキャンバスに配置できる。
I キーまたはボタンをクリックしてファイル選択ダイアログを開く。
左パネルの「Assets」タブから登録済み画像をワンクリックで配置。
Finderやデスクトップから画像ファイルをキャンバスに直接ドロップ。
| 機能 | 説明 |
|---|---|
| Crop Shape | 矩形 / 楕円 / 三角形 / 台形でクロップ |
| Corner Radius | 矩形クロップ時の角丸 |
| Zoom & Position | 画像のスケール・X/Yオフセットで構図調整 |
| Color Adjust | 明るさ / コントラスト / 彩度 / 色相 / ぼかし |
| Replace | 画像差し替え（サイズ・位置はそのまま） |
6プロパティパネル
右パネルで選択中要素のあらゆる属性を編集できる。
| 項目 | 説明 |
|---|---|
| X / Y | キャンバス上の座標 |
| W / H | 幅 / 高さ（ピクセル） |
| ° (Rotation) | 回転角度。ハンドルまたは数値入力 |
塗り（Fill / Color）
すべての塗りは Solid（単色） と Gradient（線形グラデーション） を切替可能。グラデーションは2色と角度を指定。8方向のプリセットボタンですぐに角度を設定できる。
未選択時
何も選択していない場合、プロパティパネルはキャンバス背景の色を編集するUIになる。
7レイヤー管理
左パネルの「Layers」タブで要素の重ね順・表示・ロックを管理する。
| 操作 | 説明 |
|---|---|
| ▲ / ▼ | 要素の重ね順を上下移動 |
| ◼ / ◻ | 表示 / 非表示の切替。非表示の要素はキャンバスに描画されず、PNG書き出しにも含まれない |
| 🔓 / 🔒 | ロック / アンロック。ロック中の要素はドラッグ移動・リサイズ不可（選択は可能） |
| クリック | 要素を選択 |
| Shift+クリック | 複数選択に追加/除外 |
8アートボード
複数のアートボードを作成して、異なるデザインバリエーションを並行作成できる。
アートボードバーの「+」ボタンで新しいアートボードを追加。
タブをクリックしてアクティブなアートボードを切替。各アートボードは独立した要素・背景・サイズを持つ。
タブ内の名前をダブルクリックして変更。
タブ右の「×」で削除（最低1つは残る）。
キャンバスサイズ
| プリセット | サイズ |
|---|---|
| Full HD | 1920 × 1080 |
| HD | 1280 × 720 |
| OGP | 1200 × 630 |
| Square | 1080 × 1080 |
| Mobile | 375 × 600 |
| Custom | W / H を自由入力 |
9テンプレート
「Templates」ボタンでモーダルを開き、プリセットレイアウトをワンクリック適用。
Mono / Ocean / Sunset / Forest / Lavender / Noir の6パレットからトーンを選ぶ。
15種のレイアウトからサムネイルをクリック。既存要素がある場合は確認ダイアログが表示される。
テンプレート適用後、テキストや色を自由に編集して仕上げる。
10書き出しとインポート
作成したデザインを様々な形式で書き出せる。
PNG ダウンロード
「PNG」ボタンでアートボードをフル解像度のPNG画像としてダウンロード。非表示要素は含まれない。
HTML / CSS
スタンドアロンHTMLファイルとして書き出し。ブラウザで開ける再現性の高い出力。
SVG
ベクター形式SVGとして書き出し。拡大しても劣化しない。
Markdown Prompt
AI画像生成ツール向けの構図記述プロンプトとして書き出し。
インポート
「Import」ボタンから .md / .html / .txt ファイルを読み込み、テキスト・レイアウトを自動復元できる。
自動保存
編集内容は localStorage に自動保存 される。ブラウザを閉じても、次回アクセス時に作業が復元される。
11ショートカット一覧
アプリ内で ? キーを押しても表示できる。
| キー | 動作 |
|---|---|
| V | 選択ツール |
| R | 矩形 |
| O | 楕円 |
| T | テキスト |
| I | 画像アップロード |
| キー | 動作 |
|---|---|
| ⌘ C | コピー |
| ⌘ X | カット |
| ⌘ V | ペースト |
| ⌘ D | 複製（20pxオフセット） |
| ⌘ A | 全選択 |
| Del / ⌫ | 選択要素を削除 |
| Esc | 選択解除 |
| キー | 動作 |
|---|---|
| ⌘ Z | Undo |
| ⌘ ⇧ Z | Redo |
| ⌘ + | ズームイン |
| ⌘ - | ズームアウト |
| ⌘ 0 | ズームフィット |
| ? | ショートカット一覧 |
| 操作 | 動作 |
|---|---|
| 右クリック | コンテキストメニュー（複製/前面背面/ロック/削除） |
| ダブルクリック | テキスト編集モード |
| Shift+クリック | 複数選択に追加/除外 |
| 空白ドラッグ | マーキー選択 |
| ⌘+スクロール | ズーム |
| 画像ドロップ | 外部からキャンバスに画像を配置 |
12Tips
知っておくと便利なテクニック集。