Figma デザイン基礎
個人アプリのアイコンやビジュアル素材を作るために調べたことのまとめ。
Figma の基本操作
まず覚えること
- フレーム（Frame） — 基本単位。アートボードみたいなもの
- シェイプツール — 四角・丸・線を描く
- 色・グラデーション — Fill と Stroke の設定
- テキスト — フォント・サイズの変更
- エクスポート — PNG/SVG で書き出し
形の作り方（優先順）
- シェイプ + Boolean — まずこれで作れないか考える。アイコンはほぼこれでいける
- ペンツール（ベジェ曲線） — 自由な曲線が必要なとき
- フリーハンド（鉛筆ツール） — 手書き感を出したいとき
Boolean Operations（ブーリアン演算）
| 英語 | 日本語 | 意味 |
|---|---|---|
| Union | 統合 | 合体する |
| Subtract | 前面オブジェクトで型抜き | くり抜く |
| Intersect | 交差 | 重なり部分だけ残す |
| Exclude | 中マド | 重なり部分だけ除く |
アイコン作りなら 統合 と 型抜き の2つでだいたいいける。
グループ vs Boolean
- グループ（Cmd+G） — まとめて移動・管理。個々のシェイプは独立して編集可
- Boolean — シェイプを1つの形に合成。1つの形として書き出せる
アイコンのように1つの形として仕上げたいなら Boolean がおすすめ。
アイコンのサイズ・形式
iOS アプリアイコン
- 1024x1024px で作る。Xcode が各デバイス向けに自動縮小
- 背景色は塗る（透明だと黒になる）
- 角丸は書かない（iOS が自動で適用）
- 端ギリギリまで使って OK（iOS が少し内側にクロップする）
favicon（Web）
| ファイル | サイズ | 用途 |
|---|---|---|
| favicon.ico | 32x32 | ブラウザタブ |
| favicon.svg | ベクター | モダンブラウザ用 |
| apple-touch-icon.png | 180x180 | iOS ホーム追加時 |
| OGP 画像 | 1200x630 | SNS シェア時のサムネ |
- favicon は 1024 を縮小するのではなく、32x32 前提で簡略化したバージョンを別途作るのが定石
- 細い線やテキストは 32px だと潰れるので、シンボルか頭文字1文字だけにする
- .ico への変換は realfavicongenerator.net が便利
アプリ関連で必要になるデザイン素材一覧
- App Icon（1024x1024）
- Launch Screen
- App Store スクリーンショット
- favicon / apple-touch-icon / OGP（Web がある場合）
- ロゴ（横長 / シンボルのみ）
- SNS プロフィール画像 / ヘッダー画像
→ App Store 公開やプロモサイトを作るタイミングで都度考えれば OK。
フォントのライセンス
| ライセンス | 改変 | 画像に使用 | 例 |
|---|---|---|---|
| OFL (SIL Open Font License) | OK | OK | Google Fonts、Noto Sans 等 |
| Apache License 2.0 | OK | OK | Roboto 等 |
| 商用フォント | 大抵 NG | 契約次第 | ヒラギノ、モリサワ等 |
安全なのは Google Fonts（OFL）。日本語なら：
- Noto Sans JP（ゴシック）
- Noto Serif JP（明朝）
- M PLUS シリーズ（カジュアル）
- Zen Maru Gothic（丸ゴシック）
Figma のバージョン管理
- 自動保存 + 履歴が自動で残る
- 名前付きバージョンを手動で保存できる（区切りで保存するのがおすすめ）
- 無料プランは 30 日間保持、プロフェッショナルは無制限
- ブランチ機能は Organization プラン以上
デザイナーの職種
| 職種 | 守備範囲 |
|---|---|
| グラフィックデザイナー | ロゴ、アイコン、バナー、印刷物 |
| UI デザイナー | 画面レイアウト、ボタン、色 |
| UX デザイナー | 使いやすさ、画面遷移、ユーザー体験 |
| ブランドデザイナー | ブランド全体の統一感（ロゴ、カラー、フォント） |
| プロダクトデザイナー | UI + UX + ビジネス要件を横断 |
個人開発者がアイコン作りをするのは、グラフィック + UI デザイナーの仕事を兼ねている感じ。
デザインツール
個人開発なら Figma だけでほぼ全部できる。Illustrator が必要になるのは印刷物や複雑なベクターイラストのとき。
- UI: Figma（業界標準）
- グラフィック: Adobe Illustrator / Affinity Designer
- 写真加工: Adobe Photoshop / Affinity Photo
- アニメーション: Lottie / Rive