UIデザインガイドラインをAdobeXDからFigmaに移行した私の奮闘記録 ③勉強会編

イルグルムUXデザインチーム

2025年8月1日 15:54

こんにちは！

イルグルムのUXデザイン室でUI/UXデザイナーをやっている松尾です。

前回の第２章ではガイドラインの移行作業についてどのように進めたのかを具体的にお話ししました。
そこでは作業前にゴールを明確にし、目的に沿って事前に計画を立てていくことの重要性について触れました。

新しくツールの移行ができたは良いものの、
「チームにどうやって使い方を広めればいいんだろう…」
「自分しかツールを使える人がいなくて、業務が集中してしまう…」
そんな悩みを抱えている方も多いのではないでしょうか。

今回は、Figmaを全く触ったことがないメンバー向けの社内勉強会について、どのように計画を立てて実施したのかを紹介していきます。
同じような状況の方がいましたら、この奮闘記が少しでも参考になれば幸いです。

それでは、よろしくお願いします！

移行作業全体の流れ

Figma勉強会編では、約1ヶ月半におよぶ取り組みとなりました。
このパートでは、
・勉強会のゴール・目的の設定
・カリキュラムの計画
・どのように勉強会を実施したのか？
について具体的にお話ししていきます。

まずはじめに、私が以前より定義しているガイドラインの移行レベルについておさらいします。

移行レベル1：
コンポーネントのみ移行できている。
デザイナーがUI作成可能な状態。

移行レベル2：
ガイドラインを移行。
デザイナーの補助ありでチーム全員がUI設計可能な状態。

移行レベル3：
運用ルールを整備。チーム全員がUI設計可能な状態。

レベル2以降はデザイナー以外の人でもUI設計が可能な状態と定義しています。
コンポーネントデータなどのデータはある程度整備することができましたが、チームメンバーがこのデータを扱えるようにするには実際にFigmaを触って学習する必要があります。

勉強会実施の目的を整理する

属人化の解消とチーム全体のスキルアップを目指す
社内で製品に関わるデザイナーは現在私一人なので、複数のプロダクトを横断しながらUI作成や修正を行うと完全に業務がそこだけに集中してしまいます。

業務上、UIに関連したものだけでなく、UXの方面でもユーザーリサーチや体験設計のために様々なタスクを常に並行して進めているのが現状です。そのため、UI関連業務をチーム内で分散させたいと考えていました。

こういった課題から、ガイドライン移行の機会に、全く触ったことがない人を前提としたFigma勉強会を実施することにしました。

勉強会のゴールを決める

今回私は勉強会を通して「Figmaの基本操作をマスターし、簡単なUIパーツを作成できる状態になる」というゴールを設定し、カリキュラムを組むことにしました。
この状態になれば、移行したデザインガイドラインへの理解もメンバー間で深まり、UI関連業務をチームで分担できるようになります。結果として、デザイナーにUI作成業務が集中する状態を解消し、チーム全体の業務効率化にも繋げられると考えました。

Figmaへの抵抗感も減らせるよう、チームメンバーが取り組みやすいカリキュラムを考えていきます。
（ここが一番大事）

カリキュラムを考える前に告白...
「実は私もFigma初心者でした。」

本当に元も子もないような話ですが、この勉強会の計画を立てた当初、私自身もFigmaをほとんど触ったことがありませんでした。
幸い、勉強会実施前の1ヶ月間はデザイン業務に絡んでFigmaの修行に時間を費やすことができたので（詳しくは第2章前半パート）、なんとか基本操作を教えられるレベルにはなっていました。

触っていない状態でメンバーに教えることなんてそうそう無いと思いますが、そのような状況の方がもしいらっしゃったらなんとか1、2週間だけでも業務に沿ったツールの扱い方に慣れておく時間を捻出したいところです。

実施に向けて準備する

カリキュラムの計画

チームメンバーには、移行前のXDをある程度触っていた方もいれば、初めてデザインツールに触れる方もいました。
そのため、みんなで足並み揃えて簡単な演習から徐々に難易度をあげ、着実に理解してもらうことにしました。

カリキュラムではまず機能や操作ごとにリストアップしていきました。
そこに、難易度と重要度の２軸で各リストを評価していきます。
私の場合、難易度は「実際に触った感触で理解に時間がかかったもの」、重要度は「業務に当てはめた時によく使いそうなもの」という基準で評価を行いました。

最終的にこのようなリストが出来上がりました。
（見づらい表で申し訳ないです）

所要時間も大まかに出し、何回目の講義で取り扱うかを計画していきます。
上記キャプチャの備考に書いてる通り、講義内容によっては別の機能についての知識が必要なものもあるため、順序立てて講義計画を考える必要がありました。

学習用のデータをFigmaで作成

学習用に1つFigmaでファイルを作り、その中にカリキュラムに沿ってページを追加していきました。
各メンバーはこのファイルを使って勉強会を進める形になります。

私の場合は大きく2つのページを用意しました。

操作画面の説明用ページ
勉強会用の作業ページ

1は講義の最初にFigmaの操作画面についての説明が必要なため、番号を振って各機能について説明しているページを用意しました。

2は主にメンバーの作業用ページです。
各回で講義する内容をあらかじめ記載しておき、各メンバーの作業場所を用意しました。
こうすることでリアルタイムで各メンバーが作業を行っているところを見ることができます。
メンバーごとに作業スペースを作成しておけば、誰がどういったことにつまずいているのかがその場で分かるので、すばやくフィードバックが行えます。

準備はできた！
当日はどんな方法で実施しよう？

実施はハンズオン形式で

デザインツールは触りながら慣れるのが良いかと思うので、以下のような流れで進めていきました。

私がデモンストレーションする
各々で実際にやってみる
つまずいた人がいたらその場でフィードバック

Figmaの「スターターチーム」を活用する

Figmaのスターターチームという無料枠があるのをご存知ですか？
ここでは有料、無料アカウントに関わらず利用することができます。
作成できるファイルは3つまでと制限がありますが、ファイルを共有する際は何人でも「編集者」として招待することができます（2025年7月現在）。

有料アカウントで作ったプロジェクト内のファイルの場合、「編集者を増やした数だけ」請求日に追加料金が発生しますので、意図せず課金が発生する可能性があります。
参加メンバーの人数が多かったり、エンジニアなどの他部署の方が参加する場合はスターターチームを活用することをおすすめします。

+αでさらに理解してもらうための取り組み

録画して見直せるようにする

週1回30分で全6回の実施になるため、業務の都合上参加できないメンバーもいます。
録画しておけばあとで見返せるだけでなく、今後さらにFigmaを使える人を増やしたい時にも使えます。
昨今だとAIに録画データを読み込ませて、重要なポイントだけ絞って効率よく振り返ることもできそうですね。

チートシートとしてまとめていく

実施した講義で押さえておきたいポイントをチートシートとしてまとめていきました。
毎回の講義後にシートに整理していくやり方で運用していきました。

実施した結果

全6回、約1ヶ月半に及ぶ勉強会の実施を無事に終えることができました。
和やかな雰囲気ながらも各メンバーに集中して取り組んでいただきました。

最終的にはアドエビスの実際の画面UIを使って演習を行いました。
経験の違いから慣れ・スピードに若干の差はありましたが、総じて皆さんの吸収が早かったです。私も大変助けられました。

実施する中で良かったことは細かいものを含めてたくさんありましたが、もっとこうしておけばよかったなと思うこともあったので紹介します。

良かったこと

カリキュラムに沿って順調に勉強会を進めることができた

カリキュラム計画の時点で必要な知識をリストアップし、いつ何を講義すべきか順序立てておいたことで、実施中は前提知識が不足した状態で講義に臨むといったことがなく進めることができました。想像以上にトントン拍子に進めることができて個人的には大成功でした。

もっと工夫したかったこと

勉強会後、いざUI作成業務となった時に期間が空いてしまい、現在は私が都度フォローする状態になっています。
ある程度は発生するものですが、各メンバーが自動的に解決できるような仕組みをもう少し考えておけば良かったと思いました。
例えばチートシートや録画データが活用に至っていなかったことです。

チートシートについては、それ自体がメンバーにとっては見慣れないものなので、どんな場面で使えば良いのかまで落とし込めていなかったことや、そもそもつまずいた時はこのシートを活用しようというチームへの啓蒙が全くできていませんでした...。
また、このチートシートは機能や操作ごとに説明しているため、実際のUI作成で「こういうことがしたい」といった状況で活用しづらい内容になっていました。

録画データについては、ハンズオン形式で実施したこともあり、皆がもくもくと作業する時間が大半の内容でした。
これについては例えば序盤の講義シーンだけ抜き出すようにするなど、工夫の余地がありそうでした。

その後どうなったか

Figmaを触れる人数が1人→4人になった

UI作成は基本的に私が担当していますが、簡単なUI作成や軽微な修正は各々でできるようになり、勉強会の目的であった業務効率化に繋がっていると感じます。データの作りが適切なのか中身を見て私がフィードバックを行いながら、実践で学んでもらっているところです。
今後、Figmaを触る機会が多い人と少ない人の間で、技術スキルの伸びに差が出てくるかもしれませんが、それでもツールに触れる人が増えたのは大きな成果だと思います。

エンジニア全体向けにも社内勉強会を行いました

当社では毎週水曜日に社内エンジニア向けに勉強会を持ち寄りで実施しています。
チームメンバー向けの勉強会が終わり、良いタイミングだったので「Figma勉強会」と称して講師をやりました。
日頃の開発ではエンジニアにデザインデータを共有し、コミュニケーションを取る必要があるため、講義ではその中で必要になってくるFigmaの機能や操作の説明を行いました。
ここでもハンズオン形式で皆でわいわいしながらFigmaへの理解を深めていただきました。

ガイドライン移行奮闘記は最終章へ

Figmaの移行が完了し、次は組織に浸透すべく勉強会を実施しました。
これまでの取り組みを2023年末に行い、現在すでに1年半が経ちました。
（更新スピードが亀ですみません）

私が最初に定義したガイドラインの移行レベルを改めておさらいします。