# 画像がフォルダアイコンになるまで

スキンはどれも1枚の画像です。自分で追加したもの、AIモデルが描いたもの、コミュニティパックに入っているもの、のいずれかです。FolderSkinはこれを2つの方法のどちらかでフォルダアイコンにします。単体ではよく見える画像でも、フォルダに載せるとうまくいかないことがあります。このページでは、FolderSkinがどう判断するか、フォルダが画像にどう作用するか、そしてパックで共有する前に画像をチェックする方法を説明します（[PACKS.md](https://folderskin.app/ja/docs/packs/)）。

エージェントに作業を任せたい場合は、[.claude/skills/folderskin-skins/SKILL.md](https://github.com/prajwal-svm/folderskin/blob/main/.claude/skills/folderskin-skins/SKILL.md)が、Claude Codeにパック作りの手順を案内します。

## アートワークか、完成したフォルダか

FolderSkinは、画像の周囲を見て判断します。

- **完成したフォルダ**：本当に透明な背景か、単色のマゼンタ`#FF00FF`の上にあります。マゼンタは切り取られ、画像はフォルダの部分に合わせて余白が詰められ、描かれたとおりにそのままアイコンになります。アイコンに収まるよう拡大縮小して中央に置くだけで、切り取られることはありません。[PROMPTS.md](https://folderskin.app/ja/docs/prompts/)のプロンプトで画像モデルが描くのが、これです。
- **それ以外はすべてアートワーク**：写真、絵画、模様など。FolderSkinはこれを自分のフォルダテンプレートにはめ込むので、ほかのすべてのスキンと同じタブ、紙、輪郭になります。

マゼンタは、単色の`#FF00FF`か、それにごく近い色でなければなりません。そのため、マゼンタの紙の上で撮った商品写真や、鮮やかなピンクの夕焼けは、普通の画像として扱われます。正確なルールは[ARCHITECTURE.md](https://github.com/prajwal-svm/folderskin/blob/main/docs/ARCHITECTURE.md#artwork-or-a-finished-folder)にあります。このページの残りは、アートワークについての説明です。

## セーフエリア

コンポジターは、1024 × 1024のアイコンキャンバス上の2つの長方形に、同じ画像をカバーフィットで収めます（定数は[crates/folderskin-core/src/geometry.rs](https://github.com/prajwal-svm/folderskin/blob/main/crates/folderskin-core/src/geometry.rs)にあります）。

- **背面パネル**：タブのある部分で、yが36.5から973.5までの範囲です。縦横比が1024 × 958の画像にとても近いので、ここには*高さ全体*が表示され、左右はそれぞれ18pxほど（1.8%）削られます。
- **前面パネル**：紙を覆う部分で、yが160.5から973.5までの範囲、角の半径は55pxです。画像より横長なので、画像はパネルの幅に合わせて拡大縮小され、高さの中央約87%が残ります。上から約6%、下からも同じくらいが切り取られます。

1024 × 958の画像を横の帯に分けて見ると、次のようになります（同じ縦横比なら、サイズが違っても同じ割合です）。2つのパネルが同じ画像の重なり合う部分を表示するので、帯どうしも重なっています。背面パネルは高さ全体を、前面パネルは中央部分を表示します。

| 行（958行中） | 高さに占める割合 | 表示される場所 |
|---|---|---|
| 0〜62 | 上から6.5% | タブの中 |
| 62〜127 | 次の6.7% | 前面パネルより上にある背面パネルの帯。紙のシートの横 |
| 60〜898 | 中央の約87% | 前面パネル。みんなが実際に目にする部分 |
| 898〜958 | 下の6.3% | 切り取られる |

ここから2つのルールが導かれます。

1. **上部12%には大事なものを置かない**。この部分はタブと、前面パネルの上の細い帯です。そこに顔や地平線やロゴがあると、紙のシートで2つに分断されてしまいます。
2. **主題は中央に置く**。前面パネルは上下から約60pxずつ削られ、1024pxのとき角に55pxの丸みが付くので、隅ぎりぎりの細部は、小さいアイコンサイズではどのみち見えなくなります。

フラットな絵や抽象的な絵なら、何も考えなくてもこれらをすべて乗り切れます。はっきりした主題が1つある写真は、主題を中央の帯に置く必要があります。FolderSkinはアートワークを常に中央に合わせるので、主題が上や下に寄っている場合は、追加したりパックに入れたりする前に、自分で画像をトリミングしてください。

`folderskin-tools guide`で、これらの帯を描き出せます。

```sh
cargo run -p folderskin-tools -- guide --out /tmp/guide.png
```

タブ、紙の帯、前面パネル、前面パネルが切り取る行に印を付けた、1024 × 958のテンプレートを書き出します。画像編集ソフトで、自分の画像の上にレイヤーとして重ねて使ってください。

## 画像をチェックする

`render`は、アプリと同じコードで、どんな画像でもアプリが作るのと同じフォルダとして描き出し、2種類のどちらとして扱われたかを表示します。

```sh
cargo run -p folderskin-tools -- render ~/Pictures/koi.webp --out /tmp/koi.png --size 512
# wrote /tmp/koi.png (512×512): artwork on FolderSkin's folder
```

画像を共有する前に、結果に目を通してください。`--focus x,y`でアートワークの切り取り位置を動かせるので、切り取り方を変えると画像がどれだけ残るかをすぐに確かめられます。ただし、アプリ自体は常に中央を基準に切り取るので、望む切り取り方は画像そのものに反映させておいてください。`render --solid RRGGBB`はテンプレートを単色で描くので、テンプレートそのものを確認できます。

## パック用の画像

パックの画像はロスレスで共有されるので、パックは作ったとおりの見た目になります。制限は[PACKS.md](https://folderskin.app/ja/docs/packs/)にあります。1辺は最大1024px（3つのOSのどれでも、描かれるアイコンの最大サイズ）、最小256px、1枚あたり最大1.5MB、パック全体で最大64MBです。アプリと`packs make`は、すべての画像を自動で縮小し、ロスレスWebPにエンコードします。

| 画像 | 形式 | 理由 |
|---|---|---|
| 完成したフォルダ | 透明部分を保ったロスレスWebP | ふちも含めて、すべてのピクセルが描いたとおり。サイズはPNGの約3分の2 |
| アートワーク：写真、絵画、グラデーション、粒子感のある絵 | ロスレスWebP | ブロックノイズもリンギングもなし。細かく描き込んだ1024pxの画像で約800KB |
| どちらでも、1024pxでは1.5MBに収まらないほど細かいもの | 896px、さらに768pxのロスレスWebP | ぼかさずに小さくし、そのことをアプリが知らせます |

自分でエンコードする場合は、PNGでも、`cwebp -lossless -z 9`でもかまいません。新しいパックでは、JPEGと非可逆のWebPは受け付けません。コミュニティサービスも`packs check --require-lossless`も拒否します。アートワークでは、フォルダの形をテンプレートが決めるので、保つべき透明部分はありません。アートワークは1024 × 958にすると切り取られる部分がいちばん少なくなりますが、どんなサイズでも使えます。

パック内の完成したフォルダはひとつの形にそろえるので、並べたときに同じ大きさに見えます。`packs make`とコミュニティの取り込み処理は、各フォルダの形の中央値でフォルダを描き直し、そこから離れすぎているフォルダの扱いは人の判断に任せます（[PACKS.md](https://folderskin.app/ja/docs/packs/#パックのフォルダの形をそろえる)）。

## ライセンス

共有するのは、自分で作った画像か、共有を許可されている画像だけにして、パックで使えるライセンスのどれかを付けてください（[PACKS.md](https://folderskin.app/ja/docs/packs/#ライセンス)）。それ以外のもの、たとえばストックフォト、壁紙、誰かの作品のスクリーンショット、利用規約を読んでいないモデルの出力などは、自分のコンピュータの中だけで使ってください。アプリにドロップすればそこで使え、コンピュータの外に出ることはありません。