《Figmaと運用 Vol.1》リレー制作から、同時編集へ。Figmaが変えたレアゾン・ホールディングスの制作現場

レアゾン・ホールディングスは、自社事業を中心に幅広いクリエイティブを手がけています。Figmaを活用するようになったことで、デザイン制作後に別の担当者が確認し修正をしていくというリレー形式のフローから、複数人で同時に制作し、随時フィードバックする共同作業へと制作スタイルが変わりました。共同制作を行うことで、スピードやクオリティにどのような変化が起きるのでしょうか。同社の山口暁亨さんと西村愛美さんに、Figmaを使用するメリットや運用方法についてうかがいました。（「Web Desigining 2025年8月号」より抜粋）

プロフィール

あらゆるプロセスをFigmaで行い、チームで共同制作

──レアゾン・ホールディングスがFigmaを使用する一番の理由は何ですか。

山口暁亨（以下、山口）　コラボレーションしながら作業を進められる点です。チームでの共同制作が主流になり、1人でデザイン作業をすることは減りました。また、ワイヤーフレームからデザイン、プレビューなど、ほとんどの工程でFigmaを使用しています。Webサイトやアプリだけでなく、プロダクトデザインや紙媒体などのデザインもFigmaで行います。サービスなどをローンチ後にブランド素材を管理するのにもFigmaを使っています。

西村愛美（以下、西村）　　デザインをつくる前に、「何をつくるか」という議論をFigma上で行うケースもあります。私が担当する自社の採用サイトでは、コンテンツもFigma上で作成して共有し、デザインと同時に進めています。

──イラスト制作や写真の補正などもFigmaで行っているのでしょうか。

西村　　簡単な作業はFigmaで行いますが、細かくつくり込む場合はIllustratorやPhotoshopで制作し、Figmaに受け渡します。ただ、若手はイラストも写真もすべてFigmaで扱うため、Adobeツールの使い方を知らないという声も耳にします。それくらいFigmaが基本になっています。

──Figmaのデータを共有するのは、デザイナー同士ですか。

山口　　デザイナーが中心ではありますが、BizDev（事業開発）のメンバーが参加して意見を交わすことも多いですし、エンジニアに参加してもらいFigJamでブレストをすることもありますね。

西村　　社内だけでなく、業務委託の方に参加していただくこともあります。

──Figmaで共同制作がしやすくなったことで、プロセスやクリエイティブの制作はどのように変わりましたか。

山口　　方向性のズレなどが早い段階で修正できるので手戻りが少なくなり、制作スピードが上がりました。全体的なクオリティも上がっていると思います。

西村　　エンジニアとのコミュニケーションが密になり、デザイナーが思い描いた通りのデザインが実現しやすくなりました。また、Figmaで随時修正を共有できるためPDCAが回しやすく、結果的に品質が向上することが多いと感じます。

制作スピードアップとトラブル回避！　Figmaの機能活用と運用方法

さまざまな工程でFigmaを用いた共同作業を行うレアゾン・ホールディングス。同社が活用している機能や効率的な運用方法を教えていただきました。

プラグインや便利な機能を活用し、作業を効率化

①オリジナルのプラグインを活用した企画書作成

デザイン制作前の企画書をつくる工程でもFigmaを使っています。SEESAWの山口翔平さんが開発した、ファイルの並びを整える「Frame Sequencer」やファイルに連番で名前をつける「Frame Organizer」といったプラグインにより、手間のかかる作業も一括で行えます。

②Comment Noteでフィードバック

共同作業でもっとも活用するコメント機能はデフォルトで備わっていますが、多くの投稿があるとどれが新しいコメントかわかりづらくなります。人気のプラグイン「Comment Note」を使うことで、コメントが整然と並び一覧性が高くなるので、チェック漏れなどのトラブルが起きにくくなります。

③不要な小数点をまとめて切り捨て

Figmaでレイアウトを作成していると、小数点の入る数値が出てきがちです。「Clean Document」というプラグインを使うことで、一括で小数点以下を切り捨てしています。

④デザインを効率化する便利な機能

デフォルトの機能にもデザインする際に有用なものがあります。なかでも、選択した要素の並びや余白を自動で整えてくれる「AutoLayout」と、色の組み合わせや使用するフォント、文字サイズなどのデザインの決まりをまとめて管理できるデザインシステム関連の機能は特に便利だと感じています。

明瞭なページ構成とルール決め

⑤情報の場所を明確にするページ分け

Figmaには多くの要素を入れられるので、共有するメンバー誰もがぱっと見て必要な情報がどこにあるのかがわかりやすく整理されていることが大切です。例えば毎年開催しているイベントの情報を集約しているファイルでは、参加者募集のデザインなど「内容別」でまとめたページや、イベントを「年度別」に分けたページなどに分類しています。

⑥編集してよい場所とダメな場所を分ける

Figmaには多くの要素を入れられるので、共有するメンバー誰もがぱっと見て必要な情報がどこにあるのかがわかりやすく整理されていることが大切です。例えば毎年開催しているイベントの情報を集約しているファイルでは、参加者募集のデザインなど「内容別」でまとめたページや、イベントを「年度別」に分けたページなどに分類しています。

一貫性のあるブランド運用を実現

⑦最新のブランド情報やデザインのトーンを共有

サービスのローンチ後も、理念や色のルール、イラスト素材など、ブランドに関する最新の情報をFigmaに集約して共有し、どのデザイナーでもブランドに沿ったデザインができるようにしています。

＜まとめ＞
①あらゆる工程で、共同作業・情報共有をする
②プラグインなどの機能を活用し、作業を効率化
③情報を整理・集約し、適切に扱えるようにする

取材・文：平田順子
※本記事は「Web Desigining 2025年8月号」より抜粋しています。