Figmaの使い方入門：発注者・社内担当者がデザイン確認で使う機能と料金

Webサイトの制作を依頼すると、制作会社から「デザインをFigmaで共有します」とリンクが届くことがあります。Figmaを使ったことがないと、アカウントは必要なのか、料金はかかるのか、どこを見て、どうやって修正を伝えればよいのか、戸惑うかもしれません。

発注者や社内担当者がFigmaで覚えることは「デザインを見る」「プロトタイプで動きを確かめる」「コメントで修正を伝える」の3つで十分で、閲覧とコメントは無料で行えます。

この記事では、Figmaとは何か、日本語への対応、Adobe XDの現状、料金プランと「シート」の違い、アカウントの作り方、デザインデータの見方、プロトタイプの確認方法、コメントでの修正依頼の書き方、知っておくと話が早い用語、社内担当者ができる簡単な作業、使うときの注意点を、2026年10月時点の公式情報をもとに解説します。

Figmaとは

Figmaは、Webブラウザ上で動くクラウド型のデザインツールで、複数の人が同じデザインデータを同時に見て、編集し、コメントでやり取りできることが最大の特徴です。

従来のデザインソフトは、パソコンにインストールしたソフトでデータを作り、画像やPDFに書き出してメールで送る、という使い方が一般的でした。Figmaでは、GoogleドキュメントやGoogleスプレッドシートと同じようにデータがクラウド上にあり、URLを共有するだけで相手が最新のデザインを見られます。WindowsでもMacでもブラウザから使え、デスクトップアプリも用意されています。こうした共有のしやすさから、Webサイトやアプリの画面デザインに、多くの制作会社が使っています。

Figmaの主な製品と機能

Figmaには、画面デザインのツールのほかにも複数の製品があります。2026年10月時点の主なものは次のとおりです。

このほか、デザイン作業を補助するAI機能の追加も続いています。製品の構成や提供状況は変わりやすいため、詳しくは公式サイトで最新の情報を確認してください。

Figmaは日本語に対応している？

対応しています。Figmaの画面表示は2022年7月に日本語に対応し、2026年10月時点では、英語・日本語・韓国語・フランス語・ドイツ語・スペイン語・ポルトガル語（ブラジル）から選べます。ブラウザ版での切り替え手順は次のとおりです（Figma公式ヘルプ：言語の変更）。

1. ファイル一覧の画面で、左上の自分のアイコン（アバター）をクリックする
2. 「設定」を選び、「言語」の項目で「言語を変更」をクリックする
3. 「日本語」を選んで保存する

ファイルを開いている画面の右下にあるアイコンからも、言語を変更できます。日本語の書体も使えます。Google Fontsにある和文フォント（Noto Sans JPなど）はそのまま使え、パソコンにインストールしているフォントも、ブラウザ版ではFigmaのフォントインストーラーを入れると使えるようになります。手順はFigmaでフォントを綺麗に見せる方法とローカルフォントの利用方法で解説しています。

Adobe XDとの違いと現状

以前はWebデザインのツールとしてAdobe XDも広く使われていましたが、2026年10月時点で、アドビの公式ページには「Adobe XD は現在メンテナンスモードです」と表示されています（Adobe XD 公式ページ）。単体プランの販売も2023年1月に終了したと報じられています（窓の杜）。これから新しく導入するツールとしては選びにくい状況です。XDで作った既存のデザインデータがある場合は、今後の修正をどのツールで行うかを制作会社と確認しておくと安心です。

Figmaは、ブラウザで開ける、URLで共有できる、コメントがデザインの該当箇所に残る、という点で、発注者と制作会社のやり取りに向いています。

Figmaの料金プラン：発注者は無料で参加できる

Figmaには無料のスタータープランと3つの有料プランがあり、有料プランでは「シート」と呼ばれる利用者ごとの権限に料金がかかりますが、デザインを見てコメントするだけの発注者は無料で参加できます。

2026年10月時点の公式料金ページ（米ドル表示）の内容を整理すると、次のとおりです（Figma 料金プラン）。料金や条件は変わることがあるため、契約する前に公式ページで確認してください。

スタータープランの制限はFigma公式ヘルプのプラン比較に記載されています。

シート（利用者の権限）の種類

有料プランでは、利用者ごとに次の4種類の「シート」を割り当てます（Figma公式ヘルプ：シートの種類）。

制作会社が自社のアカウントでデザインを作り、発注者を招待する場合、発注者側は閲覧の権限で十分です。社内でバナーなどのデザインを編集したい場合は、フルシートが必要になります。

Figmaのはじめ方：アカウント作成からファイルを開くまで

制作会社から共有されたデザインを見るには、届いたリンクを開き、無料のアカウントを作るだけで始められます。

1. 招待メールまたは共有リンクを受け取る：制作会社から、メールでの招待か、ファイルのURLが届きます。
2. ブラウザでリンクを開く：Google Chrome、Microsoft Edge、Safariなどのブラウザで開きます。ソフトのインストールは不要です。
3. アカウントを作成してログインする：メールアドレスかGoogleアカウントで登録します。招待メールが届いたアドレスと同じアドレスで登録すると、招待された権限がそのまま反映されます。
4. 表示を日本語に切り替える：前述の手順で言語を変更します。
5. ファイルを開く：一覧から共有されたファイルを開きます。頻繁に使う場合は、デスクトップアプリを入れてもかまいません。

デザインデータの見方

Figmaのファイルは、大きな作業領域（キャンバス）の上に画面（フレーム）が並んでいる構造で、拡大・縮小しながら確認したい画面を探して見ます。

• ページ：画面左側のページの一覧で、「トップページ」「下層ページ」「スマートフォン」などに分けられていることが多くあります
• フレーム：1つの画面にあたる枠です。パソコン用とスマートフォン用が並べて置かれているのが一般的です
• レイヤー：画面左側の一覧で、文字・画像・図形などの部品の重なりを確認できます。発注者は見なくても問題ありません

確認のときに覚えておくと便利な操作は次のとおりです（WindowsのCtrlキーは、Macでは⌘キーです）。

デザインは等倍（100%）で表示すると、実際の画面に近い大きさで、文字の読みやすさを確認できます。

プロトタイプで動きと画面の流れを確かめる

プロトタイプは、ボタンを押すと次の画面に移るといった動きを再現した試作版で、実際のサイトに近い感覚で「迷わず目的のページにたどり着けるか」を確かめられます。

1. ファイルを開いて画面右上の再生ボタン（▷）をクリックする、または制作会社から届いたプロトタイプ用のリンクを開く
2. 表示された画面で、ボタンやメニューをクリックし、画面の移り変わりを確認する。押せない場所をクリックすると、押せる箇所が青く示される
3. スマートフォン用のプロトタイプは、スマートフォンでリンクを開くと、実際の画面の大きさで確認できる

プロトタイプは本番のサイトではないため、すべてのリンクがつながっているとは限りません。確認する前に、「どの画面の、どの流れを見てほしいか」を制作会社に聞いておくと効率的です。

コメントで修正を依頼する方法と書き方

修正の依頼は、メールや電話で伝えるより、Figmaのコメント機能で該当する場所に直接書き込むほうが、「どこを、どう直すか」の行き違いが減ります。

コメントの付け方

1. ツールバーの吹き出しのアイコンをクリックする（またはCキーを押す）
2. 修正してほしい場所をクリックし、内容を書いて送信する
3. 特定の人に知らせたいときは、「@」に続けて名前を入れる（メンション）
4. 対応が終わったコメントは解決済みにして、未対応のものと区別する

伝わる修正依頼の書き方

コメントは、1つの指摘につき1件とし、「何を」「どうしたいか」「なぜか」を書くと、制作会社が意図をくみ取りやすくなります。

また、「事実の誤り（社名・数字・制度など）」と「見た目の好み」を分けて書くと、制作会社が優先順位をつけやすくなります。見た目についての指摘は、合意したコンセプトや設計書に照らして伝えると、好みの押し付け合いになりません。

知っておくと話が早いFigmaの用語

Figmaの用語をいくつか知っておくと、制作会社の説明が理解しやすくなり、修正の依頼もしやすくなります。

たとえば「すべてのボタンの色を変えたい」という依頼は、デザインがコンポーネントやスタイルで作られていれば短時間で反映できますが、そうでなければ1つずつ直す作業になります。Figmaでのレイアウトの仕組みはFigmaのオートレイアウト入門で詳しく解説しています。

社内担当者がFigmaでできる簡単な作業

フルシートがあれば、社内担当者でも、バナーやSNS用画像の文字の差し替え、画像の書き出し、簡単なモックアップ画像の作成といった作業をFigmaで行えます。

• テンプレートの文字・写真の差し替え：制作会社にバナーやSNS用画像のテンプレートを作ってもらうと、社内では文言や写真を差し替えるだけで新しい画像を作れます
• 画像の書き出し：選んだ部品や画面を、PNG・JPG・SVG・PDFの形式で書き出せます。画面右側のパネルの「エクスポート」で形式と倍率を選びます
• 簡単な画像の調整：画像のトリミングや、明るさ・コントラストなどの調整ができます。背景の差し替えなどのAIによる画像編集機能もベータ版として追加されていますが、人物の切り抜きなど本格的な写真の加工は、画像編集ソフトのほうが向いています。Figmaでの画像編集の例はFigmaで簡単モックアップ画像を作る方法で紹介しています
• 打ち合わせの資料・ホワイトボード：Figma SlidesやFigJamで、構成案の整理や社内の意見出しができます

Figmaを使うときの注意点

Figmaは共有が簡単な分、共有範囲の設定、データの保管と納品、フォントの扱い、デザインと実際の表示の違いに注意が必要です。

• 共有範囲を確認する：共有リンクを「リンクを知っている全員」が見られる設定にしていると、転送されたリンクから第三者も見られます。公開前の情報や社外秘の数字を含むファイルは、招待した人だけが見られる設定にします
• 編集権限を広げすぎない：確認だけの人は閲覧の権限で招待し、意図しない変更を防ぎます
• デザインデータの扱いを契約で確認する：Figmaのファイルを納品物に含めるか、公開後に誰のアカウントで保管するかは、制作会社によって異なります。将来の修正や別の会社への依頼も考え、見積もりの段階で確認しておきましょう
• フォントのライセンスを確認する：デザインで使ったフォントを、Webサイトでも同じように使えるかどうかを確認します
• 最終確認は実際のサイトで行う：Figma上のデザインと、ブラウザで表示した実際のサイトでは、文字の折り返しや見え方が少し異なることがあります。公開前のテスト環境で、パソコンとスマートフォンの両方で確認します

当社のコーポレートサイト制作では、デザインデータ（PC・スマートフォン）を納品物としてお渡しします。デザインはトップページ→下層ページの2段階で確認いただき、実装後はテスト環境で全ページを確認いただいてから公開します。工程ごとの成果物とお願いすることは制作の流れにまとめています。

よくあるご質問

発注者・社内担当者の方からよくいただく、Figmaについてのご質問にお答えします。

Figmaのアカウントは必要ですか？

デザインを確認してコメントで修正を伝えるには、Figmaのアカウントを作っておくのが確実です。アカウントはメールアドレスかGoogleアカウントで無料で作れます。招待された場合は、招待メールが届いたアドレスで登録してください。

無料のスタータープランのまま使い続けられますか？

スタータープランは無料で、期限なく使えます。ただし、チームで共有できるファイルの数やバージョン履歴の期間に制限があります。発注者として制作会社のファイルを閲覧・コメントするだけなら、発注者側が有料プランを契約する必要はありません。

Figmaのデザインデータは納品してもらえますか？

制作会社や契約の内容によって異なります。公開後に別の会社へ修正を依頼する可能性もあるため、デザインデータを納品物に含めるか、どの形式で受け取るかを、見積もりや契約の段階で確認しておきましょう。

Figmaで作ったデザインを、そのままWebサイトとして公開できますか？

Figmaには、デザインからWebサイトを作って公開できるFigma Sitesという機能がありますが、2026年10月時点ではベータ版です。コーポレートサイトは、お知らせや実績の更新、検索エンジン対策、アクセス解析の設定など、公開後の運用まで含めて作り方を選ぶ必要があります。当社では、更新しやすい管理画面を備えたWordPressで実装し、構造化データやGA4・Search Consoleの設定まで行ってから公開しています。

まとめ

Figmaは、ブラウザで開けてURLで共有でき、デザインに直接コメントを残せるため、発注者と制作会社のやり取りを速く確実にしてくれるツールです。

• 発注者が覚えるのは「見る」「プロトタイプで確かめる」「コメントで伝える」の3つ。閲覧とコメントは無料
• 画面表示は日本語に切り替えられ、和文フォントも使える
• Adobe XDは公式に「メンテナンスモード」と案内されており、新しく導入するツールとしては選びにくい
• 有料プランは利用者ごとのシートで料金が決まる。社内で編集するならフルシートが必要
• 修正依頼は1件ずつ、何を・どうしたいか・なぜかを書き、社内の意見は取りまとめてから伝える
• 共有範囲、デザインデータの納品、フォントのライセンスは事前に確認する

当社のコーポレートサイト制作では、各工程の成果物を確認いただき、合意してから次の工程に進めます。デザインの確認の進め方も含めて、お気軽にご相談ください。

関連記事：ワイヤーフレームとは？作り方と確認ポイント／コーポレートサイトのデザインの決め方／Webサイト制作のフローと作業項目