Figmaのカラースタイルは、Fillを持つオブジェクトを選択し、スタイルアイコンから「＋」を押して名前を付けるだけで作成できます。登録後は全要素に一括反映されるため、修正工数を大幅に削減できます。この記事では作成手順から命名規則・削除まで、フリーランスの実務で使える運用方法を解説します。
▶ 3日で初案件PR
この記事でわかること
この記事を読むと、カラースタイルの登録から命名・削除まで3分で操作できるようになります。スラッシュ区切りの命名で20件超のスタイルを迷わず管理できます。フリーランスの案件引き渡しでスタイルの乱れによるクレームをゼロにできます。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Figmaのカラースタイルは「登録・命名・運用」の3段階で完結します。最初に用途別の命名規則を決めておくと、スタイルが増えても迷わず管理できます。フリーランス案件では、引き渡し前にスタイル一覧を整理しておくことが、クライアントとのトラブルを防ぐ最短の方法です。
今日やるべき1つ
使用中のFigmaファイルを開き、既存の色が付いた任意のオブジェクトを1つ選択して、右サイドバーのFillセクションにある「スタイルアイコン（四角が4つ並んだアイコン）」をクリックし、「＋」から新規カラースタイルを1つ登録してください（所要時間：3分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 初めてカラースタイルを作りたい | Figmaカラースタイルは3ステップで登録完了 | 5分 |
| 命名ルールに迷っている | Figmaの色命名は「用途/色名」形式が最適 | 5分 |
| 編集・削除の手順を確認したい | Figmaカラースタイルは2操作で編集と削除 | 3分 |
| 自分の運用方法を診断したい | Figma色管理を3分で自己診断 | 3分 |
| 実務での管理を効率化したい | Figmaカラースタイル管理は5つの仕組みで解決 | 10分 |
Figmaカラースタイルは3ステップで登録完了
カラースタイルの作り方を調べているとき、「Fill」「スタイルアイコン」「＋」のどこを操作すればいいか迷うことがあります。操作は3ステップで完結するため、一度流れをつかむと次回から迷わなくなります。
カラースタイルの登録は「選択→スタイルアイコン→＋」の順
Figmaでカラースタイルを新規登録するには、まず色が設定されたオブジェクトを1つ選択します。次に、右サイドバーの「Fill」セクション右端にある「スタイルアイコン（四角が4つ並んだアイコン）」をクリックします。スタイル一覧パネルが開いたら右上の「＋」を押し、任意の名前を入力してEnterを押すと登録完了です。「Fillを設定したレイヤーを選択し、スタイルアイコンからCreate new color styleを作成する」というのが基本的な手順です（Figmaでスタイルを定義して再利用できるプロパティを作る）。登録と同時に命名まで行うことが、後の整理コストを抑える最初のポイントです。
カラースタイルを他のオブジェクトに適用する手順
登録済みのカラースタイルを別のオブジェクトに適用するには、対象のオブジェクトを選択し、同じく「スタイルアイコン」をクリックします。スタイル一覧から目的のスタイル名をクリックするだけで即時適用されます。Figma公式ヘルプでは「右サイドバーの関連プロパティ横のスタイルアイコンから、利用可能なスタイル一覧を表示して適用できる」と明記されています（Figma公式ヘルプ：スタイルの管理と共有）。登録済みのスタイルはファイル内のどこからでも呼び出せるため、同じ色を毎回カラーピッカーで合わせる必要はありません。
カラースタイルを変更すると全適用先に一括反映される
登録済みのカラースタイルの色値を変更すると、そのスタイルが適用されているすべてのオブジェクトに自動で反映されます。10画面・100個の要素があっても、スタイルの定義を1か所変えるだけで完了します。ただし、スタイルの変更は「元のファイルで定義を編集」する必要があり、別ファイルから直接変更することはできません。フリーランスのWebデザイナーとして複数のクライアントファイルを扱う場合、各ファイルに独立したローカルスタイルが存在することを前提に管理設計を立てると混乱を防げます。
CHECK
▶ 今すぐやること: 使用中のファイルで1つのオブジェクトを選択し、スタイルアイコンから「＋」を押してカラースタイルを1件登録してください（3分）
Q: Fillがないオブジェクトでもカラースタイルは作れますか？
A： Fillが設定されていないオブジェクトではスタイルアイコンが非活性になる場合があります。まず右サイドバーの「Fill」セクションで「＋」をクリックして任意の色を設定してから、スタイル登録の手順に進んでください。
Q： Strokeの色もカラースタイルとして登録できますか？
A： できます。StrokeセクションのスタイルアイコンからFillと同じ手順で登録できます。FillとStrokeは別々のスタイルとして管理できるため、境界線の色だけを一括変更したい場合はStroke専用のスタイルを作成しておくと便利です。
Figmaの色命名は「用途/色名」形式が最適
スタイルをいくつか作ったあとで「どれがどの色だっけ？」と迷うことがあります。命名規則は最初に決めておかないと、後からの修正コストが登録数に比例して増えます。
スラッシュ区切りで命名するとフォルダが自動生成される
Figmaでは、スタイル名に「/（スラッシュ）」を使うと自動的にグループ（フォルダ）として整理されます。たとえば「text/normal」「text/muted」「fill/background」「fill/primary」のように命名すると、「text」グループと「fill」グループに分かれて表示されます。「text / normal のように用途別に命名すると迷わない」という実務からの声もあります（もう散らかさない！チームでFigmaの色管理）。フラットな名前で登録し続けると、スタイルが20件を超えたあたりから目的のスタイルを探す時間が無視できなくなります。
命名に「brand/primary」「ui/border」の2階層を使う理由
推奨される命名の上位階層は「brand（ブランドカラー）」「text（テキスト色）」「fill（背景・塗り）」「ui（UIパーツ）」の4種類が実務でよく使われます。下位階層には「primary」「secondary」「disabled」「hover」のような役割名を付けます。色の16進数値（例：#3498DB）をそのまま名前にすることは避けてください。値が変わったときに名前と実態がズレて、スタイル一覧を見ても判断できなくなります。役割を名前にしておけば、ブランドカラーが変更されても名前の修正は不要で、値の変更だけで完結します。
フリーランスが案件引き渡し時に命名で判断されるポイント
フリーランスのデザインファイル納品において、スタイルの命名品質はクライアントや後任デザイナーへの影響を直接左右します。「Color_1」「色A」「blue」のような命名は、たとえ作業中でも使わないことをおすすめします。引き渡し後に先方が修正できなくなり、サポートを求めて連絡が来るケースが実務では起きやすいためです。フリーランスの案件引き渡しでは、ドキュメントなしでもファイルが自立できる状態を目指すことが、クライアントとのトラブルを防ぐ最短経路です。「fill/background/page」「text/label/disabled」のように意味が完結する命名なら、ドキュメントなしでもファイルが自立します。
CHECK
▶ 今すぐやること: 現在登録済みのカラースタイルを開き、フラットな名前になっているものを「用途/役割」形式に変更してください（5分）
Q: 英語と日本語のどちらで命名すべきですか？
A： 英語が推奨されます。Figmaのスタイル名は英数字とスラッシュで管理するのが国際的な慣例で、日本語名は文字コードの問題でURLやAPIで扱いにくくなる場合があります。クライアントが日本語のみ対応の場合は日本語でも問題ありませんが、将来的にデザインシステムへ発展させる場合は英語が有利です。
Q： スタイル名は後から変更できますか？
A： できます。スタイル一覧上でスタイルを右クリックし「Edit style」を選ぶと名前の変更画面が開きます。変更しても適用済みのオブジェクトに影響は出ません。ただし「/」の区切りを変更するとグループが変わるため、チームで運用中のファイルでは事前に共有してから変更してください。
Figmaカラースタイルは2操作で編集と削除
スタイルを編集・削除するとき、「既存のオブジェクトの色が崩れないか」と不安になることがあります。操作ごとの影響範囲を把握しておくと、躊躇なく整理できます。
スタイルの色値変更は「鉛筆アイコン→色変更→保存」の3ステップ
登録済みのカラースタイルの色を変えるには、スタイル一覧で対象スタイルの上にマウスを乗せ、表示される「鉛筆アイコン（Edit style）」をクリックします。色変更パネルが開くので、カラーピッカーまたは16進数入力で色を変更し、パネルを閉じると保存されます。変更は即時に全適用先へ反映されるため、1つのスタイルに100個のオブジェクトが紐づいていても、一度の操作で完了します。変更前に影響範囲が不安な場合は、スタイルを一時的に複製してからテストする方法が安全です。
スタイルの削除は「右クリック→Delete style」で即時実行される
スタイルを削除するには、スタイル一覧上で対象スタイルを右クリックし「Delete style」を選択します。削除を実行すると、そのスタイルが適用されていたオブジェクトはスタイルの参照が外れ、削除時点の色値はそのまま保持されます。スタイルとの連動が切れるため以後は一括変更の対象外になります。未使用スタイルを削除しても実害はありませんが、使用中スタイルを誤って削除した場合は「Command + Z（Ctrl + Z）」で即座にアンドゥできます。
ローカルスタイル一覧で未使用スタイルを棚卸しする方法
左サイドバーの「Assets（アセット）」パネルを開くと、ファイル内のすべてのローカルスタイルが確認できます。既存ファイルを引き継ぐフリーランスデザイナーは、このパネルでスタイルの総数と命名状況を最初に確認することをおすすめします。スタイルが30件を超えている場合、相当数が実際には使われていない「幽霊スタイル」になっていることが多く、整理するだけでファイルの見通しが大きく改善します。「使われていないスタイルを残さない」という原則を定期メンテナンスのルールにしておくと、ファイルを長期間きれいに保てます。
CHECK
▶ 今すぐやること: Assetsパネルを開き、登録されているカラースタイルの総数を確認してください。10件以上あれば未使用スタイルがないか確認してください（3分）
Q: スタイルを削除したあと元に戻せますか？
A： 削除直後であれば「Command + Z（Mac）」または「Ctrl + Z（Windows）」でアンドゥできます。セッションをまたいだ復元は原則できないため、重要なスタイルを削除する前にファイルを複製しておくことをおすすめします。
Q： 別のファイルのカラースタイルをコピーして使うことはできますか？
A： 直接のインポート機能はありませんが、スタイルが設定されたオブジェクトをコピー＆ペーストすると、スタイル情報も一緒に貼り付き先のファイルに追加されます。貼り付け後に名前を確認してください。
PR提供: 日本デザインスクール（デザスク）
Figma色管理を3分で自己診断
自分の色管理がどの段階にあるのか、以下の質問に答えると今取り組むべき改善ポイントを特定できます。
Q1: 現在使っているFigmaファイルにカラースタイルが登録されていますか？
Yesの場合 → Q2へ進んでください。
Noの場合 → Result Aが該当します。
Q2: スタイル名が「用途/役割」形式（例：text/normal、fill/background）になっていますか？
Yesの場合 → Q3へ進んでください。
Noの場合 → Result Bが該当します。
Q3: 登録されているスタイルのうち、現在のファイルで実際に使われていないスタイルが5件以上ありますか？
Yesの場合 → Result Cが該当します。
Noの場合 → Result Dが該当します。
Result A: 未登録の段階
カラースタイルがまだ1件も登録されていない状態です。任意の色を持つオブジェクトを1つ選択し、スタイルアイコンから「＋」を押してスタイルを1件登録することを今日の目標にしてください。
Result B: 登録済みだが命名が整っていない段階
スタイルは登録されているものの、命名規則がないため管理コストが増加しています。既存スタイル名を「用途/役割」形式に変更するリネーム作業を1時間確保してください。
Result C: 未使用スタイルが蓄積している段階
ファイルが成長するにつれて「幽霊スタイル」が増えている状態です。Assetsパネルで未使用スタイルをリストアップし、削除してよいものから順に整理してください。
Result D: 適切に管理されている段階
登録・命名・整理の3点が揃っている状態です。次のステップとして、命名規則をドキュメント化しチームや後任者と共有することを検討してください。フリーランスのポートフォリオやデザインファイルの品質を高める習慣が、長期的な受注率の向上につながります。
CHECK
▶ 今すぐやること: 上記の診断を完了し、自分のResultを特定してください。Result AまたはBの場合は今日中に対応を開始してください（3分）
Q: 複数のFigmaファイルを扱っている場合、診断はファイルごとに行うべきですか？
A： はい、カラースタイルはファイル単位で管理されるため、ファイルごとに状態が異なります。アクティブな案件ファイルを優先して診断・整理してください。
Q： 診断でResult Aだった場合、最初に登録すべき色は何ですか？
A： 最も使用頻度が高いブランドカラー1色から始めてください。「brand/primary」として登録しておくと、以後の命名規則のベースになります。
Figmaカラースタイル管理は5つの仕組みで解決
フリーランスが実務で色管理に手間をかけすぎている場合、多くは「登録後に放置している」「命名規則がない」「整理のタイミングを決めていない」の3点が原因です。以下のハックを導入するだけで、日常の色管理コストを大きく下げられます。
ハック1: 命名規則を先に1ページに書いておくと登録時間が半分になる
【対象】: 初めてカラースタイルを設計するフリーランスデザイナー
【手順】: Figmaファイルの専用フレーム（命名規則ページ）を1つ作成し、使用予定の色カテゴリ（brand/text/fill/ui）と役割名の一覧を書き出します（所要時間：15分）。一覧に従い、最初のデザイン作業前に全スタイルを登録してください。以後は命名規則ページを参照しながらスタイルを追加・削除し、ページ自体も同期して更新します。
【コツと理由】: 「カラースタイルをデザインしながら随時追加」する方法では、実際には最終的なスタイル数が増えやすくなります。「命名規則を先に1ページ書いてから一括登録」した場合、事前に書き出すと類似スタイルの重複に気づけるため、「text/normal」と「text/default」のような同一色の二重登録を防げます。登録後の整理コストが発生しないため、トータルの管理時間が短縮されます。
【注意点】: 命名規則ページを「完璧に書こうとする」必要はありません。brand/text/fillの3カテゴリだけで始め、必要に応じて追加してください。最初から10分類以上の詳細設計を目指すと作業が止まります。
ハック2: 代表オブジェクト1つで色見本フレームを作ると確認が3秒で終わる
【対象】: 複数画面に色を使っており、色の確認に都度カラーピッカーを開いているデザイナー
【手順】: ファイル内に「Color Palette」という名前のフレームを1つ作成します（所要時間：2分）。各カラースタイルを適用した正方形オブジェクト（64×64px）をフレーム内に並べ、テキストで名前を表記してください。このフレームをファイルの最初のページに固定し、作業前にパレットを確認する習慣をつけます。
【コツと理由】: スタイル一覧はAssetsパネルで確認できますが、実際のデザイン上での見え方と名前だけのリストでは判断速度が異なります。色見本フレームがあれば「この青はどのスタイルか」という確認がAssetsパネルを開かずに完了します。視覚的な確認手段を用意しておくことで、誤ったスタイルを適用するミスを防ぐ効果があります。
【注意点】: 色見本フレームはあくまで参照用です。ここのオブジェクトを直接編集してもスタイル定義は変わりません。スタイルの値を変えたい場合は必ずAssetsパネルの「鉛筆アイコン」から編集してください。
ハック3: 案件開始時に「使う色だけリストアップ」すると未使用スタイルがゼロになる
【対象】: 案件ごとに新規ファイルを作成するフリーランスで、終了時にスタイルが散乱しがちなデザイナー
【手順】: クライアントのブランドガイドラインや参考資料から使用する色を洗い出し、メモ帳やFigmaの専用フレームに16進数と用途をリストアップします（所要時間：20分）。リストの色だけをカラースタイルとして登録してください。作業中に新しい色が必要になった場合のみ、リストに追加してからスタイル登録します。
【コツと理由】: 「作りながらスタイルを追加する」定番の方法では、「試した色」「一時的に使った色」がスタイルとして残り続けます。案件開始時にリストアップしてから登録する方式では、作業中の「とりあえず登録」が発生しないため、引き渡し時に未使用スタイルを最小限に抑えやすくなります。フリーランスのデザイン案件では引き渡し前の品質管理が信頼構築に直結します。
【注意点】: リストアップに時間をかけすぎる必要はありません。ブランドカラー・テキスト色・背景色の3種類さえ最初に登録できれば、残りは作業しながら追加しても整理できます。リストが完璧でなくても、「事前に考える」行動自体が重複登録を防ぐ効果を持ちます。
ハック4: スタイル変更は「複製してから試す」と本番崩れをゼロにできる
【対象】: ブランドカラーの変更やリブランディングが発生したフリーランスデザイナー
【手順】: 変更対象のカラースタイルをアセットパネルで確認し、スタイル名の末尾に「_test」を付けた複製スタイルを作成します（所要時間：5分）。変更確認用のフレームを1つ作り、テストオブジェクトに「_test」スタイルを適用して色値を変更してください。見た目を確認して問題がなければ、本番スタイルの色値を変更し「_test」スタイルを削除します。
【コツと理由】: スタイルの色値を直接変更すれば一括反映できますが、変更後に「思っていた色と違った」となると全適用先を再確認する手間が発生します。複製してテストする手順では、本番スタイルに触れずに仕上がりを確認できるため、修正が1回で完了しやすくなります。ファイル内に100件以上の適用先がある場合、誤変更のリカバリーコストは複製の作業時間（5分）を超えることがあります。
【注意点】: テストが完了したら「_test」スタイルは必ず削除してください。削除を忘れると、後からファイルを開いた人が「_test」スタイルを本番として使ってしまうリスクがあります。「_test」や「_old」のような接尾辞スタイルを本番ファイルに残すことは、引き渡し時の信頼性を下げる原因になります。
ハック5: 既存ファイルの色をスタイルに置き換えるには「段階的置換」が安全
【対象】: スタイル未設定のまま完成した既存ファイルを引き継ぎ、後からスタイル管理を導入したいデザイナー
【手順】: ファイル内で使われている色を「Edit → Find/Replace Color」またはプラグインで洗い出し、種類数を把握します（所要時間：10分）。使用頻度が最も高い上位3色からカラースタイルとして登録し、そのスタイルを同色のオブジェクトに手動で適用してください。上位3色の置換が完了したら、残りの色を順番に置換します。
【コツと理由】: 「一気にすべての色をスタイル化する」を目指すと作業が止まりやすくなります。最頻出の3色から始めると、全体のスタイル化を確実に完了できます。最初の3色を置換するだけでファイルの多くの色がスタイル管理下に入るため、残りの作業量が見えてきます。段階的に進めることで「どこまで終わったか」が可視化され、作業の中断・再開がしやすくなります。
【注意点】: 既存ファイルの色置換では、Strokeや不透明度付きの色が見落とされやすいです。Fillだけでなく、Strokeセクションの色も必ず確認してください。Strokeを確認せずに完了とした場合、引き渡し後にクライアントから「境界線の色がバラバラ」と指摘されることがあります。
CHECK
▶ 今すぐやること: ハック1の「命名規則ページ」をFigmaファイルに新規フレームとして作成し、brand/text/fillの3カテゴリを書き出してください（15分）
Q: FigmaのVariables（変数）機能とカラースタイルはどう違いますか？
A： カラースタイルは「色値そのもの」を登録するのに対し、Variablesは「色の参照関係」を定義できます。たとえば「ライトモードでは#FFFFFFを使い、ダークモードでは#1A1A1Aを使う」という切り替えが変数では可能です。カラースタイルはシンプルな色管理に、Variablesはライト/ダークモードや複数テーマの切り替えが必要な場合に適しています。フリーランスがクライアント案件でシングルテーマのUIを作成する場合は、カラースタイルだけで十分なケースがほとんどです。
Figmaカラースタイルは命名が鍵
Figmaのカラースタイルは「登録・命名・整理」の3段階を最初に設計することで、修正コストをゼロに近づけられます。登録手順は3ステップで完結しますが、命名規則を事後に整えようとすると修正コストがスタイル数に比例して増加します。フリーランスとして複数案件を扱う場合は、案件ごとに命名規則ページを1枚作る習慣が、長期的な管理コストを最も効果的に下げます。
現在のFigmaファイルに「Color Palette」フレームを1枚作り、使用中の色を「brand/primary」のような命名で登録してください。このたった1つの行動がファイルの秩序を作る起点になります。フリーランスのWebデザイナーとして作業の効率化を仕組み化することが、長期的な収入安定にもつながります。
| 状況 | 次の一歩 | 所要時間 |
| カラースタイルが未登録 | 最頻出の色1つをスタイルアイコンから登録する | 3分 |
| 命名が整っていない | 既存スタイルを「用途/役割」形式にリネームする | 30分 |
| 未使用スタイルが多い | Assetsパネルで不要スタイルを削除する | 15分 |
| 既存ファイルをスタイル化したい | 最頻出の色上位3色から段階的に置換する | 60分 |
Figmaカラースタイルに関するよくある質問
Q: カラースタイルを作るのに特別なFigmaプランは必要ですか？
A： いいえ、無料のStarterプランでもカラースタイルの作成・適用・編集はすべて利用できます。チームライブラリとして他のファイルからスタイルを共有する機能は有料プランが必要ですが、1ファイル内でのローカルスタイル管理は無料で完結します。
Q： カラースタイルをチームメンバーと共有するにはどうすればいいですか？
A： FigmaのOrganizationプランまたはProfessionalプランでは、チームライブラリとしてスタイルを公開し、他のファイルから参照できます。Starterプランの場合は、スタイルが設定されたオブジェクトをコピー＆ペーストする方法で共有できます（Figma公式ヘルプ：スタイルの管理と共有）。
Q： 同じ色を複数の用途で使いたい場合、スタイルは1つにまとめるべきですか？
A： 用途ごとに別スタイルとして登録してください。たとえばボタンの背景とリンクテキストが同じ青（#3498DB）であっても、「fill/button-primary」と「text/link」に分けて登録します。用途が分かれていれば、将来的にボタンの色だけを変更したい場合にテキストリンクに影響を与えずに対応できます。
【出典・参照元】
Figma公式ヘルプ：スタイルの管理と共有 – Figma公式ドキュメント
Figmaでスタイルを定義して再利用できるプロパティを作る – カラースタイル作成手順の実践解説
もう散らかさない！チームでFigmaの色管理 – 用途別命名と色管理の工夫