本記事は、Web実装を前提とした画像のスライス・リサイズ・圧縮・SVG最適化に関する共通ルールをまとめたものです。デザイン〜実装間の手戻りを減らすことを目的としています。
ラスター画像（jpg / png / webp）の基本方針
1-1. リサイズ前提で考える
実装時、レイアウト調整により画像サイズを変更する可能性がある。そのため圧縮前の元データは必ず保持。
「再リサイズ後 → 再圧縮」が必要
1-2. 圧縮ツール
Squoosh（最高画質・微調整向き）
https://squoosh.app/
背景画像・ヒーロー画像の考え方
2-1. 背景画像は「可変」を前提にする
実稼働では画面サイズにより縦横比・表示範囲が大きく変動するので、ギリギリ構図はNG
2-2. 推奨サイズ
- PC（ヒーロー全面表示想定）：1920 × 1080（16:9）
- タブレット / SP：768 × 1024（3:4） 縦画像
※ カンプからの厳密なスライスは不要
※ 表示時にトリミングされる前提で余白を取る
2-3. 横一杯の壁系画像
- 幅 1600px 程度でも可、ややボケるが容量は抑えられる
- 対策としてアンシャープマスクをやや強めに適用
SVG最適化ルール
3-1. Illustrator / Affinity での事前整理
① 同色オブジェクトのマージ
- 境界線なし・同色のオブジェクトは 合体（マージ）
- 意味単位でのグループ化はOK（例：ロゴの「シンボル」と「文字」）
※ 境界線付きパスはマージ不可
※ 必要に応じて境界線を「アウトライン化 → マージ」
② 不要オブジェクトの削除
- パス以外のオブジェクトは削除
- 文字は アウトライン化
- 削除対象：
・見えないオブジェクト
・背後に隠れているパス
・ゴミパス（微小・不要な穴など）
③ レイヤー・グループ整理
- レイヤー階層は できるだけ浅く
- レイヤーやグループは最終的には気にしなくてOK（SVGOMGでほぼ消える）
※ 元データは必ず保存しておく
3-2. SVGのサイズ設計
- SVGの width基準：1024px または 512px
- 表示サイズは CSS / HTML 側で制御
理由：カンプサイズで作ると実装時に「小さすぎる」ケースがあるため
3-3. 複数アイコンを並べる場合のルール
- 基本：余白なし・ギリギリでカット
- 複数ある場合：
縦横ともグループ内で最大サイズを基準 - 見た目の大きさは「面積感」で調整
横長・縦長 → 一辺いっぱい
正方形 → 約70%程度 - レスポンシブ時の余白調整はCSSで行う
- SVG自体に余白は不要
3-4. SVGOMGでの最終最適化
SVGOMGで最適化を実施
注意点：
・Number precision
・Transform precision
- 左に寄せるほど軽量
- ただし 形が崩れない範囲で止める
- 目安：最低値から1〜2段階上
最適化後：念のためグラフィックソフトで再オープン確認
3-5. SVGのwidth / height指定（重要）
WordPressでwidth / height が無いと崩れる場合あり。テキストエディタで明示的に追加
4. よくある質問・補足
Q1. マージとは？
→ Illustratorの パスファインダー ＞ 合体 でOK（同色・境界線なしが条件）
Q2. 合体するとレイヤーができるが問題ない？
→ 問題なし。SVGOMG通過後、レイヤーはほぼ消える
Q3. SVGOMGでおかしくなることがある
Illustrator書き出しSVGで稀に表示崩れあり
対策：
SVG保存形式を変更
Affinityで書き出し直す
今回例：breast02 は色が消えるケースあり（例添付）
スライス範囲の結論（要点）
基本は、アイコンの周りギリでカットする。
複数並べる場合は、縦横ともグループ内の最大サイズを基準にする。