みんなでFigmaを使ってみようの会をやりました！Figmaは今やデザイナーだけのツールじゃないんです。

2024年6月12日

emi

こんにちは、emiです。

今やWeb制作には欠かせなくなっているデザインツール「Figma（フィグマ）」。

最近では、デザイナーだけでなく、ライターやコーダーもFigmaを使うことが必須になってきています。

そこで、先日「リモート勉強会」を開催。

Figmaが大好きな私からチームメンバーに、Figmaの簡単な使い方〜デザインシステムのことまで、自らの学んだことなどをアウトプットしました📖

また、実際に手を動かして学ぶことも大事なので、お題に沿ってバナーを作るワークも行いました。

今回はその時の様子をお伝えしていきます！

まずはみんなで乾杯🍻✨最近の案件のお疲れ様会！

チーム結成から数ヶ月ですが、実はチーム内で全員集まるのはこの日が初めて。

まずは挨拶と乾杯で、最近終えた案件などのお疲れ様会をしました🍻

ちなみに、当チームはバーチャルオフィス「Gather」を使用して、チーム内のコミュニケーションを図っています💃🕺

みんな個性的なアバターを使って、楽しく交流しています🎉

毎週水曜日には、集まれるメンバーだけでもくもく会を行ったりしております。

Figmaってなんなんですか？の会

お疲れ様会の後は、進行中のタスクなどの情報共有を行い、いよいよFigma勉強会の開始です。

今回用意した流れはこちら。

Figmaって何なのか？
なんで今Figmaを勉強すべきなのか？
Adobeと何が違うのか？
実際にやってみる（CSSとオートレイアウト）
実際にやってみる（バナー制作）
バナーのフィードバックを送り合おう

Figmaって何？なんで勉強するの？

デザインツールとして浸透しているFigma。

ですが、デザインツールではなく「Web制作のためのツール」という認識を持とう、という話を最初に伝えました。

なぜ、デザインツールという認識ではいけないか？というと、様々な企業がツールとして採用し始めている理由の1つに、「デザインをシステム化して、運用しやすくする」という点があるからです。

だからこそFigmaは単なるデザインツールではなく「Web制作のためのツール」ととらえ、デザイナーだけでなく、ホームページ制作に携わるライターやコーダーも勉強していく必要があります。

Figma自体は優れたツールなのですが、他のデザインツールと同じ扱いで作業を行うと「なんじゃこりゃ😕❓❓」となってしまう面があります。特にデザインツールを使いこなせる人ほど挫折しやすい、と私は思っています😭

Webデザイナーは、デザインシステムへの理解を深めないと生き延びていけないところまで来ているというちょっと怖い話も😱

Adobeソフトとの違いと実際の機能のレクチャー

「Web制作のためのツール」ということがわかる一例として、他のデザインツールと画像の配置の違いや、Adobeソフトとの違いを解説。

他のデザインツールで配置された画像の構造を、画面共有で実際にFigmaを動かしながら見てもらいました。

その後は、CSSの解説と合わせてオートレイアウトの使い方までを簡易的に説明。

Figmaは全ての要素に「親要素と子要素の関係性がある」ため修正や変更に強い、ということ強調してお伝えました。

ここでもサンプルを使って、視覚的にオートレイアウトの使い方や効果を感じてもらえるように頑張りました💪

バナーを作ってみよう！

とはいえ、説明だけではいまいちわかりにくいのでは……？じゃあ、Figmaを実際に使って楽しんでみよう！！

ということで、こばやすさんのバナー制作のお題をお借りし、みんなで30分間の時間制限を設けてバナー制作を行ってみました！

#バナーお題第1弾冬限定一口チョコ

バナー設置場所：自社ECサイトのサイドメニュー
商品概要：冬限定一口チョコ。普段高いが今だけ割引価格で売っている
ターゲット：20〜40代の働く男女
イメージカラー：白、水色
バナーサイズ：W300×H280px
———————————
キャッチコピー：ちょっと一息。贅沢をお裾分け
割引期間：11月1日〜12月31日まで
割引価格：10～20％割引
https://note.com/kobayas/n/n7454d1ec9b95?magazine_key=m3e73ae9c2748#bd2be8c9-3952-4d6f-b647-d21190d0c009

上記の趣旨とは違うのですが「しっかりした美しくわかりやすいデザインを作る」ということよりも「Figmaを使ってみる」というところに主軸をおき、みんなに制作をお願いしました。

素材やワイヤーは私のほうで用意し、30分間、一旦マイクをミュートにして各自制作を開始。

そして、できあがったバナーはこんな感じです🥳🎉