最近デザイン講師にもなりましたシオワキです。
今回はFigmaの使い方について、初手で意外とつまずくクライアントへの共有方法について説明します。
目次
はじめに
結論から言うと、Figmaのデザインをクライアントに見せるなら「プロトタイプ共有＋閲覧のみ（can view）」がいちばん手軽で安全です。相手はURLを開くだけで、いつでも最新のデザインを確認できます。
とはいえ、Figmaの共有方法はプロトタイプ共有だけではありません。編集してほしい相手、完成イメージを触って確かめてほしい相手、Figmaを使わない相手では、適した方法が変わります。
この記事では、Web制作会社のるーぷが実際の案件で使い分けている4つの共有方法と、その手順・権限設定・注意点をまとめました。
Figmaの共有方法は大きく4つ
用途に合わせて、次の4つから選びます。迷ったら「プロトタイプ共有」から始めれば問題ありません。
| 共有方法 | 向いている場面 | 相手のFigmaアカウント | 最新版が自動で反映されるか |
|---|---|---|---|
| リンク共有 | 実際のデザイン画面を全て見せたい | 不要（コメントには無料アカウントが必要） | ⭕️される |
| プロトタイプ共有 | ページのプレビューや画面遷移を見せたい | 不要（コメントには無料アカウントが必要） | ⭕️される |
| メール招待 | 特定の人にだけ見せたい | 必要 | ⭕️される |
| 画像・PDFで書き出し | 社内稟議の資料、印刷 | 不要 | ❌されない（その時点の版） |
リンク共有の特徴と手順
リンク共有は、URLを1つ送るだけで相手がブラウザからデザインを見られる方法です。実際のデザイン作業画面の状態を共有できます。手順は3ステップです。
▼Figmaでファイルを開き、画面右上の「共有（Share）」ボタンを押す
▼リンクの公開範囲と権限を選ぶ
▼「リンクをコピー（Copy link）」を押し、メールやチャットで相手に送る
プロトタイプ共有の特徴と手順
プロトタイプ共有は、ボタンを押したときの画面遷移やメニューの開閉など、完成後の動きを体験してもらう方法です。画面右上の再生ボタンでプロトタイプを表示し、そこから共有リンクをコピーします。静止画では伝わりにくい「使いやすさ」の確認に役立ちます。
▼Figmaでファイルを開き、画面右上の「▶︎」ボタンを押す
▼プレビュー画面が開くので、画面右上の「共有（Share）」ボタンを押す
▼「リンクをコピー（Copy link）」を押し、メールやチャットで相手に送る
【注意】リンクの共有とプレビューの共有はとても似ています。「今見ている画面を共有する」ので、どちらの画面を共有したいかという目的に合わせて選択してください。
メール招待の特徴と手順
「共有」画面で相手のメールアドレスを入力し、権限を選んで招待します。招待した人だけがファイルを開けるので、公開前のデザインなど外に出したくない内容に向いています。相手はFigmaのアカウント（無料で作成可能）でログインする必要があります。
▼共有したい画面の状態で、画面右上の「共有（Share）」ボタンを押し、共有したい人（送り先）のメールアドレスを入力し、招待ボタンを押す
画像・PDFで書き出し：Figmaを使えない相手に
右側パネルの「エクスポート（Export）」から、PNG・JPG・SVG・PDFで書き出せます。社内の決裁資料に添付したい、印刷して会議で配りたい、といった場面で使います。ただし書き出した時点の版で止まるため、修正のたびに送り直しが必要です。普段の確認はリンク共有にして、書き出しは「確定版の記録用」と分けるのがおすすめです。
▼共有したいフレームを選択し、 右下のエクスポートボタンより、書き出したい形式を選択して「〇〇をエクスポート」を押す
権限は「閲覧のみ」が基本
クライアントに送るリンクは「閲覧のみ」にしておきましょう。誤ってデザインが動かされる心配がなく、修正の要望はコメントで受け取れます。
| 権限 | できること | おすすめの相手 |
|---|---|---|
| 閲覧のみ（can view） | デザインを見る、コメントを付ける | クライアント、社内の確認者 |
| 編集可（can edit） | デザインを直接変更できる | 一緒に作業するメンバー |
共有するときの注意点
共有は手軽な分、設定を間違えると見せたくない人にまで届いてしまいます。送る前に次の4点を確認しましょう。
【権限が「閲覧のみ」になっているか】
編集可のリンクが転送されると、誰でもデザインを変更できてしまいます。
【公開範囲が適切か】
「リンクを知っている全員」はURLさえあれば誰でも開けます。機密性の高い案件は招待制にします。
【同じファイルに別案件のデータが入っていないか】
リンクで共有されるのはファイル全体です。他のクライアントのページが残っていないか確認します。
【作業途中の画面が見えていないか】
確認してほしい画面とそれ以外をページで分けておくと、相手が迷いません。
実務でのクライアント共有方法
るーぷでは、デザインができあがった段階でクライアントに「閲覧のみ」でプロトタイプの共有リンクをお送りしています。そのうえで、オンライン打ち合わせ中に同じFigmaの画面を一緒に見ながら確認を進めます。
以前は、ディレクターがお客さまと打ち合わせをし、その内容をデザイナーに伝えてから修正に取りかかっていました。今はご要望をその場でFigmaにコメントとして残すため、デザイナーがすぐに確認できます。
伝達の待ち時間がなくなり、「言った・言わない」の行き違い予防にもなります。
まとめ
Figmaの共有は、ふだんの確認なら「リンク共有＋閲覧のみ」、編集仲間には「メール招待」、動きを見てほしいときは「プロトタイプ共有」、印刷の必要性がある場合には「書き出し」と使い分けるのがポイントです。送る前に権限と公開範囲を確認すれば、安全に、行き違いなくデザインを共有できます。
Figmaを使ったWebサイト制作はるーぷへ
るーぷでは、Figmaの共有リンクとオンライン打ち合わせを組み合わせ、スムーズなデザイン制作を行っています。
「確認のやり取りが負担で制作が進まない」「初めての制作で何から始めればいいかわからない」といったご相談も歓迎です。
PREV