Contents
スポンサードリンク
1. プロジェクト構造の設計
1‑1. 推奨フォルダ階層（H3）
| フォルダ名 | 内容例 | 補足 |
|---|---|---|
01_リサーチ |
ユーザーインタビュー、競合分析、FigJam ノート | 「Note」テクニックで情報をカード化し、検索しやすくします |
02_Wireframes |
低忠実度ワイヤーフレーム（ページ単位） | Auto Layout 未使用のシンプルフレームで高速描画 |
03_Components |
ボタン・カードなどのコンポーネントとバリアント | 例: Buttons/Primary, Cards/Product |
04_Prototypes |
インタラクティブプロトタイプ（ページ） | 「After Delay」や「Overlay」等を活用 |
05_DesignSystem |
カラーパレット、テキストスタイル、アイコンライブラリ | ライブラリ化して全ファイルで共有 |
1‑2. ファイル命名規則（H3）
|
1 2 3 |
[プロジェクト名]_[プラットフォーム]_[バージョン].figma 例: FinPay_iOS_v1.0.figma |
- メリット：検索結果が一意に絞り込め、過去バージョンとの比較が容易になる。
1‑3. 権限とチームライブラリの設定（H3）
| ロール | 主な権限 |
|---|---|
| 閲覧者 | ファイル閲覧のみ。編集は不可。 |
| 編集者 | コンポーネント作成・バリアント追加が可能。 |
| オーナー | ライブラリの公開/非公開、権限変更、バージョン保存を管理。 |
Note テクニック
「Note」は Figma のコメント機能にタグやチェックリストを付与して情報共有を標準化する手法です。例：#review,@designer,☑︎ デザイン要件確認済みという形でコメントを書き込むだけで、タスク管理ツールに自動転送できるプラグイン（例: FigJam Note）と併用できます。
2. 5 ステップ実務フロー
Figma が公式で推奨する流れを日本語で整理し、各ステップで活用すべき機能やツールを補足します。
2‑1. フローチャート（H3）
|
1 2 3 4 5 6 |
flowchart TD A[リサーチ・要件定義] --> B[ワイヤーフレーム] B --> C[コンポーネント化] C --> D[インタラクティブプロトタイプ] D --> E[デザインシステム統合] |
2‑2. 各ステップの要点（H3）
| ステップ | 主な作業 | Figma の活用ポイント |
|---|---|---|
| 1. リサーチ | ユーザーインタビュー、競合分析 | FigJam にカード形式でまとめ、#リサーチ タグで検索。 |
| 2. ワイヤーフレーム | 低忠実度フロー図・画面構造 | シンプルなフレームに Auto Layout を付けず高速描画。 |
| 3. コンポーネント化 | ボタン・入力欄等をバリアント化 | Component → Variants で状態（Default/Pressed/Error）やサイズを管理。 |
| 4. プロトタイプ | クリック遷移、アニメーション設定 | 「After Delay」・「Overlay」などのインタラクションを設定し、デバイスプレビューで動作確認。 |
| 5. デザインシステム統合 | カラーパレット・テキストスタイルの定義と共有 | Design System ページに Style として保存 → ライブラリ化し全ファイルで参照可能。 |
公式ガイドは Figma の「5 ステップでアプリをデザインする」をご参照ください。
3. コンポーネント・バリアントとレスポンシブレイアウト
3‑1. バリアントの作り方（H3）
|
1 2 3 4 5 |
Component: Button/Primary Variants: - Property: State → Default / Hover / Pressed / Disabled - Property: Size → Small / Medium / Large |
- 操作手順：コンポーネントを選択 →右パネルの「＋」でバリアント作成 →プロパティ名と値を設定。
- 使い方例：プロトタイプモードで
Interaction → Change toを選び、ボタンの状態遷移をシミュレート。
3‑2. Auto Layout と Constraints の基本（H3）
| 要素 | 設定例 | 効果 |
|---|---|---|
| ボタン | 横パディング 16 px、縦パディング 12 pt、Hug contents |
コンテンツに合わせてサイズ自動調整。 |
| カード | 縦方向 Auto Layout、幅を「Fill container」 | 画面幅が変わってもカード内部の配置が崩れない。 |
| リスト | アイテム間 8 px、Constraints → Left & Right |
横幅変更に追従し、スクロール領域が自動調整。 |
3‑3. デバイス別レイアウト例（H3）
| 画面サイズ | ボタンバリアント | カード列数 |
|---|---|---|
| 360 dp (小) | Small |
1 列 |
| 414 dp (中) | Medium |
2 列 |
| 768 dp (大) | Large |
3 列 |
ポイント：バリアントでサイズを切り替えるだけで、同一コンポーネントが複数デバイスに対応できるため、手作業のレイアウト調整が不要になります。
4. デザイン原則・アクセシビリティ・ローカライズ
4‑1. 基本となるデザインガイドライン（H3）
- Material Design 3：ダイナミックカラー、丸み 4 dp の角丸を標準化。
- Apple Human Interface Guidelines (HIG)：iOS 17 に合わせた
SF Pro系フォント、タップ領域は最低 44 pt × 44 pt。
4‑2. アクセシビリティチェックリスト（H3）
| 項目 | 推奨基準 |
|---|---|
| カラーコントラスト | テキスト vs 背景 ≥ 4.5:1 (WCAG AA) |
| タップ領域 | 最低 44 pt × 44 pt |
| スクリーンリーダー対応 | aria-label に相当する「アクセシビリティ名」付与 |
| フォーカスインジケータ | 明確なハイライト（例: 2 dp の外枠） |
4‑3. 日本語ローカライズの留意点（H3）
- 行間：
1.5倍が読みやすさの目安。長文は20 pt前後の余白を確保。 - 全角/半角統一：数字・記号は UI の一貫性を保つために全角で統一（例: 「¥」）。
- 推奨フォント：
Noto Sans JP,游ゴシックなど可読性が高く、モダンな印象を与えるもの。
4‑4. Oflight ガイドラインへのリンク（H3）
Oflight が提供する実務向けチェックリストは以下から参照できます。
(※上記 URL は執筆時点での公開ページです)
5. チームコラボレーションとテンプレート活用
5‑1. コミュニティテンプレートの取り込み手順（H3）
- Figma Community で「FinTech App」など目的に合うテンプレートを検索。
- 「Duplicate」ボタンで自分のワークスペースへコピー。
Componentsフォルダ内の UI キットをブランドカラーに置き換える（色スタイル上書き）。- 必要に応じてバリアントや Auto Layout を追加し、プロジェクト固有の画面構成に合わせる。
5‑2. コメント・バージョン管理ベストプラクティス（H3）
| 機能 | 推奨設定例 |
|---|---|
| コメント | #review タグと担当者 @yamada を付与し、タスク化（プラグイン「Comment to Jira」等で自動連携可）。 |
| バージョン管理 | 主要マイルストーンごとに「Save version」を実行。バージョン名は v1.0‑wireframe のように分かりやすく命名し、リリースノートをコメントに残す。 |
| ライブ共有 | 「Presentation mode」または「Live embed」でデベロッパーへリアルタイムプレビューを提供。質問が出たら即座にインスタントコメントで回答。 |
5‑3. 効率化のためのおすすめプラグイン（H3）
- Figmotion：簡易アニメーション作成でプロトタイプの動きを手軽に表現。
- Stark：カラーコントラストや文字サイズを即座にチェックできるアクセシビリティ支援ツール。
- Design Lint：レイヤー名・スタイルの不整合を自動検出し、クリーンアップを促す。
まとめ（要点）
- プロジェクト構造と命名規則で情報共有基盤を確立。
- 公式 5 ステップフローに沿った段階的設計で品質・効率を同時向上。
- コンポーネント＋バリアント＋Auto Layoutでレスポンシブ対応を自動化。
- Material Design 3 / Apple HIG + WCAG 2.1 AA に基づくアクセシビリティ・ローカライズチェックリストを活用（Oflight ガイド参照）。
- コミュニティテンプレート＋コメント・バージョン管理機能でチームコラボレーションを最適化し、開発ハンドオフまでのサイクルを短縮。
これらの手順とツールを取り入れれば、Figma を最大限に活かしたモバイルアプリデザインが実現します。ぜひプロジェクトの初期段階から導入してみてください。
スポンサードリンク