# 自分でデザイン：デザイナー

サイドバーの**自分でデザイン**は、スキンを手作りするためのキャンバスです。1色だけのシンプルなものから、何層も重ねた凝ったデザインまで作れます。すべてオフラインで動きます。デザインしたものはほかのスキンと同じように**マイスキン**に保存され、**保存して適用**を押すと、選んだフォルダにそのまま付きます。

![デザイナーの画面。アイコンライブラリの虫を青いフォルダに型押ししたデザインで、横にアイコン検索、下に「保存して適用」がある](https://folderskin.app/docs/images/composer.webp)

## こんなものが作れます

| 作りたいもの | 始め方 | そのあと |
| --- | --- | --- |
| 好きな色1色のフォルダ | **カラー**または**プレーン** | フォルダをクリックして色を選びます。カラーピッカーでは、透明度も含めてどんな色でも選べます |
| ラベル付きのフォルダ（「レシピ」「メモ 2026」など） | **ラベル** | 文字を入力し、フォント、太さ、色を選びます。小さいサイズでは、短い言葉がいちばん読みやすくなります |
| 中身を1つの絵で表すフォルダ | **絵文字** | 絵文字をダブルクリックして入れ替えるか、ピッカーで検索します（「犬」「飛行機」「レシート」） |
| タブそのものに付けるラベル | **タブのラベル** | *配置*の**タブ**ボタンで、どのレイヤーでもタブに置けます |
| 背面と前面で色が違うフォルダ | **ツートーン** | 色の境目は紙のシートの後ろに隠れます |
| 透けるフォルダ | **ガラス**または**色付きガラス** | 背景の不透明度を下げるか、背景を削除すると透明なフォルダになります。残るのは紙とふちだけです |
| 柄のあるフォルダ | **ストライプ**、**ギンガムチェック**、**水玉** | **パターン**で、ストライプから紙吹雪、フィルムグレインまで10種類を追加できます |
| キャプション付きの写真 | **写真** | 最初に画像を選ぶよう求められます。あとからドロップや貼り付けで追加もできます |
| ステッカーやバッジなど、フォルダの形でないもの | **ステッカー** | *自由形アイコン*にすると、デザインがアイコン全体になります |
| 手持ちのスキンに自分なりのひと手間を加えたもの | スキンの⋯メニュー → **デザイナーでリミックス** | スキンが画像レイヤーになり、その上に重ねていけます |
| 以前デザインしたものの手直し | その⋯メニュー → **デザインを編集** | **変更を保存**ならその場で更新し、**新規として保存**なら両方残ります |

## 使い方

**始める**：初めて開いたときと、**新規**を押したときに、スタート地点の一覧が表示されます。どれも普通のデザインなので、固定されている部分はありません。保存していない変更があるときに別のスタート地点を選ぶと、先に確認があります。

**追加する**：フォルダの上のバーから、**テキスト**、**絵文字**、**図形**（角丸の長方形から吹き出しまで13種類）、**画像**（ファイル、自分のスキン、またはフォルダにドロップや貼り付けをした画像）、**パターン**、**カラー**（背景を選択します。背景がなければ追加します）を追加できます。

**配置する**：レイヤーをクリックすると選択されます。選択したレイヤーには薄く色が付き、角と辺にハンドル、上には回転用の丸いハンドルが表示されます。

- ドラッグで移動します。フォルダの中央、タブ、フォルダのふち、ほかのレイヤーにスナップします。⌘（Ctrl）を押しながらなら自由に置けます。
- 角や辺をドラッグするとサイズを変えられます。画像は、角からなら縦横比を保ち、辺からならトリミングになります。テキストと絵文字は常に縦横比を保ちます。
- ⇧を押しながら回転すると15°刻みになり、サイズを変えると図形の縦横比が保たれます。⌥を押しながらだと、中心を基準にサイズが変わります。
- 文字をダブルクリックすると編集でき、絵文字をダブルクリックすると入れ替えられます。
- フォルダそのものをクリックすると、背景が選択されます。

**レイヤー**：右上のリストに、重なり順が上から表示されます。行をドラッグすると順番を入れ替えられ、名前をダブルクリックすると名前を変えられます。目、鍵、ゴミ箱のアイコンで、それぞれレイヤーの非表示、その場への固定、削除ができます。見出しの端にある**すべて削除**でデザインを空にできます。そのときに表示される通知から元に戻せるほか、⌘Zでも戻せます。見出しのボタンは、行のボタンと同じく、ポインタを合わせると表示されます。

**レイヤーと設定**は、それぞれ見出しから開閉できます。間にあるバーをドラッグすると、レイヤーの領域を広げたり狭めたりできます（ダブルクリックで元に戻り、フォーカスがあるときは矢印キーでも動かせます）。最後の状態は、このコンピュータに記憶されます。

**設定**：レイヤーの下には、選択しているレイヤーの設定がすべて、そのレイヤー名の見出しの下にまとめて表示されます。見出しには、重なり順の変更、複製、削除のボタンがあります。

- テキスト：フォント、太さ、揃え、斜体、大文字、サイズ、字間、行の高さ、カーブ（アーチ型またはスマイル型）。
- カラー：単色、線形グラデーション、円形グラデーション。透明度付きで最大4色まで使え、既製のグラデーションもあります。
- 図形：角の丸み、頂点または辺の数、星のへこみの深さ、リングの穴の大きさ。
- 画像：明るさ、コントラスト、彩度、色相、ぼかし、白黒、セピア、階調の反転、角丸。
- すべてのレイヤー：不透明度と、16種類の描画モードから1つ。
- 配置したレイヤーには、影（ネオン風にするなら**グローにする**）とステッカーのふちもあります。ステッカーのふちは、型抜きステッカーのように輪郭に沿って付く縁取りです。

何も選択していないときは、設定で**フォルダに配置**か**自由形アイコン**かを選べます。

**確かめる**：キャンバスの下の**フォルダの骨組み**スイッチで、デザインをフォルダに載せた状態（タブ、紙のシート、ふち付き）と、フォルダのふちだけを重ねた平面の状態を切り替えられます。平面にすると、フォルダに隠れる部分がわかります。自由形アイコンでは、大きさの目安として、うっすらとしたフォルダが後ろに表示されます。その横の4つの丸で、デザインの下地をウィンドウ、明るいデスクトップ、暗いデスクトップ、カラフルな壁紙に切り替えられます。透けるデザインでは、これが大事になります。右側には実際のサイズ（64、32、16ポイント）のアイコンが並ぶので、Finderやエクスプローラーでどう見えるかがわかります。

**保存する**：右上の名前がスキンの名前になります。空欄のままにすると、デザインの最初の言葉が名前になります。**マイスキンに保存**でライブラリに保存し、**保存して適用**なら選んだフォルダにも付けます。保存したあとも開いたままなので、さらに手を加えられます。**変更を保存**で同じスキンをその場で更新し、**新規として保存**で別のスキンとして追加します。保存していないデザインは、アプリのほかの画面を見ている間も保たれ、保存するか置き換えるまでこのコンピュータに残ります。

適用先のフォルダの下にある**内側のN個のフォルダも含める**は、フォルダパネルの**サブフォルダも含める**スイッチと同じものです。どちらかでオンにすると、両方がオンになります。オンの状態で**保存して適用**を押すと、そのフォルダと中のすべてのフォルダにデザインを付けます。10個を超えるときは先に確認します。ボタンには進み具合が表示され、横に**停止**があります。終わると通知で結果を知らせます。途中で止めた場合は**続ける**が、変更できなかったフォルダがある場合は**内訳を見る**が表示され、押すとフォルダパネルのまとめが開きます。

| キー | |
| --- | --- |
| ⌘Z / ⇧⌘Z | 取り消し、やり直し |
| Delete | 選択したレイヤーを削除 |
| ⌘D | 複製 |
| ⌘Cのあと⌘V | コピーして複製を貼り付け。クリップボードに画像があるときの⌘Vは、その画像を追加します |
| 矢印キー、⇧+矢印キー | 1または10ずつ移動 |
| ⌘] / ⌘[ | 前面へ、背面へ（⌥を押すと最前面へ、最背面へ） |
| Esc | 選択を解除 |
| レイヤーのリストで | ↑ ↓で選択、⌥↑ ⌥↓で順番の入れ替え、F2で名前の変更 |

## しくみ

### デザインはアイコン空間に描かれる

デザインは一辺1024単位の正方形のキャンバスで、フォルダのテンプレートを測るのと同じものです（`crates/folderskin-core/src/geometry.rs`）。ある位置に置いたものは、フォルダ上でもその位置に来ます。ファイルから追加したアートワーク（[SKINS.md](https://folderskin.app/ja/docs/skins/)）と違い、カバーフィットもトリミングもありません。ドキュメントは`src/composer/doc.ts`で定義された単純なデータで、変更のたびに新しいドキュメントが作られます。取り消しは、これをさかのぼることで実現しています（`src/composer/history.ts`）。

### 描画の経路はひとつのまま

WebViewが描くのは、ユーザ自身の作品であるテキスト、絵文字、図形、画像、パターンだけです（`src/composer/render.ts`）。そのまわりのフォルダは、Rustのテンプレートが描きます。`composer_template`は、マスターサイズの2048pxでテンプレートを一度だけレンダリングし、デザインを挟み込むためのレイヤーに分けます（`compositor::template_layers`）。

```
top      the front panel's rim light and the shade along its bottom
design   masked by front: the front panel's coverage
middle   the back panel's rim light, the paper sheet and its highlight
design   masked by back: the back panel's coverage, tab included
```

ステージは毎フレームこの4つを重ねます（`src/composer/composite.ts`）。ドラッグ中でも十分に軽い処理です。保存されるアイコンは`compositor::render_master_placed`が描きます。同じテンプレートを同じヘルパーで描き、両方のパネルを、それぞれの位置に置いたデザインで塗ります。テスト`the_layers_stacked_around_a_design_are_the_saved_icon`が、両者の差をチャンネルあたり3段階以内に保っているので、キャンバスには実際に書き込まれるアイコンがそのまま表示されます。5つ目のレイヤー`outline`は、フォルダの見えているふちです。平面表示ではこれに色を付けて表示しますが、アイコンに含まれることはありません。

### 保存

保存するときは、デザインを2048pxでもう一度描いてPNGにエンコードし、小さなJSONヘッダの後ろに生のバイト列として付けて`composer_save`に送ります（`[u32 LE header length][header][PNG]`、`src/composer/body.ts`）。残りはRust側の`src-tauri/src/composer.rs`が行います。

- **フォルダに配置**：デザインからフォルダをレンダリングします。
- **自由形アイコン**：デザインをそのままアイコンにします。完全に透明なものは受け付けません。
- **保存形式**：完成したフォルダ（`kind: "folder"`、`source: "composer"`）として保存します。そのため、適用、サムネイル、共有は、ほかの完成したフォルダとまったく同じように動きます。
- **ドキュメント**：画像の隣に`<stem>.design.json`として保存します。**デザインを編集**は、これを使ってデザインを開き直します。
- **ID**：デザインのPNG、ドキュメント、形から計算したSHA-256です。同じデザインを2回保存しても、スキンは1つです。
- **変更を保存**：インデックスへの1回の書き込みで古いスキンを置き換え、ライブラリ内の位置も保ちます。お気に入りは新しいIDに引き継がれます。

リミックスでは、`composer_skin_image`でスキン自身の画像を読み込みます。

- **アートワーク**は、フォルダ全体を覆う画像になります。
- **完成したフォルダ**は、画像を中に収めた自由形アイコンになります。アプリが適用するときとまったく同じ見た目です。

### コマンド

| コマンド | 入力 | 出力 |
| --- | --- | --- |
| `composer_template` | – | `{size, back, front, middle, top, outline, parts}`：PNGのデータURLとしての各レイヤーと、フォルダの各部分の位置（キャンバス単位） |
| `composer_save` | ヘッダ`{name, tags, shape, design, replaces}`付きの生のボディ | `{skin, replaced}`：保存したスキンと、それが置き換えたデザインのID |
| `composer_preview` | ヘッダ`{shape, sizes}`付きの生のボディ | 各サイズ（16〜512、最大6つ）のアイコンをデータURLで |
| `composer_image` | `path` | `{url, width, height, name, alpha}`：画像ファイル。最大2048pxで、透明部分があればPNG、なければJPEG |
| `composer_skin_image` | `skinId` | 同上。保存済みスキン自身の画像について |
| `composer_design` | `skinId` | デザインのドキュメント。ここで作ったスキンでなければ`null` |

### デザインのドキュメント

```json
{ "version": 1, "shape": "folder", "layers": [ { "kind": "fill", "paint": { "type": "solid", "color": "#3a86ff" }, "opacity": 1, "blend": "normal", "id": "…" } ] }
```

レイヤーは先頭から順に描かれます。

- **キャンバス全体を覆うもの**：`fill`（色またはグラデーション）と`pattern`。
- **配置するもの**：`text`、`emoji`、`shape`、`image`。それぞれ、キャンバス単位の中心座標`x, y`、度単位の`rotation`、反転、省略可能な`shadow`、省略可能なステッカーの`edge`を持ちます。
- **すべてのレイヤー**：`opacity`、`blend`と、省略可能な`name`、`hidden`、`locked`。

色は`#rrggbb`、透ける場合は`#rrggbbaa`で表します。画像はデータURLとしてドキュメントの中に保存されます。ディスクから読み込んだドキュメントは、まず`parseDoc`を通ります。

- 不明なレイヤーは取り除き、64を超えるレイヤーは64に切り詰めます。
- 数値は妥当な範囲に収め、色は正規の形式にそろえます。
- PNG、JPEG、WebP、GIFのデータURLでない画像は取り除きます。
- 新しいバージョンで作られたドキュメントは、誤って読み込まずに拒否します。

### 知っておきたい制限

- **絵文字**は、システムの絵文字フォントで描かれます。macOSではこのフォントがビットマップで、くっきり見えるのは160pxほどまでです。そのため、とても大きな絵文字は、Finderの最大のアイコンサイズでは少しぼやけますが、Finderがふだん表示するサイズならどれでもくっきり見えます。
- **フォント**はスタイルとして用意されていて、それぞれmacOS、Windows、Linuxに付属するフォントを、適したものから順に並べたリストになっています（`src/composer/fonts.ts`）。FolderSkinに同梱しているのはManropeだけです。**お持ちの別のフォント**を選ぶと、インストール済みのフォントファミリーを名前で指定できます。デザインはピクセルとして保存されるので、フォントが必要なのはデザインを作るコンピュータだけです。
- **画像の補正**はピクセルに対して直接行います（`src/composer/imagefx.ts`）。macOS 12のWebViewには、キャンバスのフィルタがないためです。ぼかしはボックスぼかしを3回かけたもので、ガウスぼかしに近い結果になります。
- **下書き**はWebViewのストレージに保存されますが、大きな画像をいくつも使ったデザインでは、容量を超えることがあります。その場合も、下書きはアプリを終了するまでは残ります。

### ブラウザでのプレビュー

普通のブラウザで`pnpm dev`を実行しても、デザイナーが表示されます。フォルダのレイヤーは`docs/images/composer/`にあるPNGで、`cargo run -p folderskin-tools -- composer-layers --out docs/images/composer`で書き出します。`folderskin-tools`のテストが、これらがコンポジターの描くピクセルと同じであることを確認しているので、古いまま残ることはありません。

### テスト

| | |
| --- | --- |
| `folderskin-core`のcompositor | 重ねたレイヤーが保存されるアイコンと一致すること、デザインが描いた位置に来ること、透けるデザインでは紙とふちだけが残ること、アウトラインが見えているふちに沿うこと |
| `src-tauri`のstore | デザインのドキュメントがデザインの隣に保存され、再起動後も残り、デザインを削除すると一緒に消え、クラッシュで取り残されたら片付けられること。デザインに上書き保存しても位置が保たれ、デザインでないスキンへの上書きは拒否されること |
| `src-tauri`のcomposer | ボディの形式、画像のチェック、プレビュー、保存、名前付け、壊れたドキュメント、画像のエンコード。さらに、Tauri自身のIPC（モックランタイム）を通して生のバイト列で送ったデザインが、プレビューされ保存されること |
| フロントエンド（vitest） | ドキュメントの変更と読み戻し、取り消し、移動・サイズ変更・回転・スナップ、テキストのレイアウトとカーブ、図形、色、画像の補正、テンプレート、ボディの形式 |