Figmaの画面がごちゃごちゃ…どう整理すればいい？
こんにちは！株式会社Rabeeでデザイナーをしているkoppiです🐝
Figmaでたくさんの画面を並べていくと、だんだん「どう整理するのがいいんだろう？」という疑問が出てきます。
特に大きめのサービス設計をやっていると、分類や命名ルールが曖昧なままではすぐに迷子になります。
今回は1つの実験として、ルールを決めて命名や整理をやってみたので、その振り返りをまとめます。
こういう場合、どちらが良いと思いますか？
Figmaで画面を整理するとき、例えば「管理者用ログイン」と「一般ユーザー用ログイン」を並べるときに、次のような2つの整理の仕方があります。
① ログインを大カテゴリーにして、その下に「管理者」「一般ユーザー」を並べる
② ユーザー種別（管理者／一般ユーザー）を大カテゴリーにして、その下にログインやパスワードリセットを置く
今回のルールでは②を採用しました。
理由は「データ名 / CRUD / 状態」という整理方法に沿いやすく、一貫した命名ができるからです（例：「管理者 / ログイン / 通常」「一般ユーザー / パスワードリセット / 通常」）。
ログインやパスワードリセットは厳密にはCRUDに含まれませんが、今回のルールでは CRUD外アクション として整理しています。
ただし①も間違いではなく、「ログイン関連をひとまとめに見たい」場合には便利です。
※記事は最適解を断定するものではなく、あくまで「試行例」として読んでもらえると嬉しいです。
今回決めたルール
命名は基本的に 「データ名 / CRUD / 状態」 の形にそろえます。
それぞれの役割はこんな感じです👇
① データ名（大カテゴリー）
「1つのまとまりとして扱いたい単位」
ユーザー
チーム
ドキュメント
プロジェクト
👉 Figma上ではセクション（Shift+S）を使ってまとめると、セクション名が拡大縮小するので全体を俯瞰するときに見やすくなります。
② CRUD（中カテゴリー）
データに対して「何をするか」を表します。
CRUD（原則）
CRUDとは、ソフトウェア設計でよく使われる基本操作の整理方法で、次の4つの頭文字です。
Create → 新規作成 / 追加
Read → 詳細 / 一覧 / 表示
Update → 編集
Delete → 削除
👉 CRUDの一般的な説明はこちらも参考になります：
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
CRUD外（業務用語をそのまま使う）
招待
参加
承認
公開 / 非公開
発行（例：招待リンク発行、APIキー発行など）
👉 「ユーザー / 追加 / 通常」など同じ命名になるケースもあります。
その場合は「どの文脈（どの親データ）」に属するかを明確にすると整理しやすいです。
ユーザー / チームに追加 / 通常
ユーザー / プロジェクトに追加 / 通常
③ 状態（アートボードで表す部分）
アートボードごとに「その画面がどんな状態か」を示します。
共通語彙
通常
Empty
下書き
公開済み
確認ダイアログ
エラーページ系の例
エラー / 表示 / 通常
エラー / 表示 / 404
エラー / 表示 / 500
エラー / 表示 / 503
エラー / 表示 / Expired
👉 また、“手段”が重要なときは MOD で補足します。
ユーザー / 招待 / 通常 - 方法:リンク発行
プロジェクト / 詳細 / 通常 - 方法:下書き表示
ドキュメント / 発行 / 通常 - 方法:PDF出力
やってみて気づいたこと
命名をシンプルにできた反面、小さい単位まで独立させることで階層が浅くなり、親データとの関連性が伝わりにくい場面もありました。
まだ答えは出ていない
今回のルールは「1つの例」として整理してみただけで、最適解はまだ分かりません。
状況によって「階層を深くする」「カテゴリーをまとめる」など、違う整理方法の方が良いケースもあると思います。
最後に
私はこんな感じで試してみましたが、まだまだ模索中です。
皆さんはFigmaの画面やアートボードをどう整理していますか？
ぜひ教えてください！
