Webサイト研究所
FigJamとは｜使い方、魅力、ショートカットキー、料金を徹底紹介【Figma製オンラインホワイトボード】

FigJamとは｜使い方、魅力、ショートカットキー、料金を徹底紹介【Figma製オンラインホワイトボード】

更新日：

2021/4/22の午前1時ごろ（日本時間）にFigmaのカンファレンス「config2021」が開催されました！

その中で発表されたFigmaの新しい機能としてオンラインホワイトボードサービスの「FigJam」についての使い方や魅力、料金についてを今回は徹底紹介します。

FigJamとは

Figma上で使えるオンラインホワイトボードです。Figmaの公式Twitterに使用イメージの動画が載っていますのでご覧ください。

オンラインホワイトボードのツールといえば、miroが有名です。それ以外も日本製だとGoodpatchが昨年リリースしたStrapもあります。

オンラインでのMTGが増えていて需要が高まっている今、ついにFigmaからも登場しました。

Figmaはブラウザ上で自由にデザインが作れるので、ホワイトボードのようにふせんを貼ったり、ストーリーボードのようなものを頑張って作っていた方も多いのではないでしょうか。

ただ、自由が故に難しさもありました。そんな悩みがついに解消されます！

FigJamの使い方

現状のFigJamで出来ることは基本機能を除いて大きく11個です。（記事執筆時点）

1. マーカーで手書きの線をかく
2. 図形を貼る
3. ふせんを貼る
4. 文字を書く
5. 線をつなぐ
6. ステッカーを貼る
7. スタンプをおす
8. 感情を伝える
9. 写真を貼る
10. カーソルチャットをする
11. コメントをする

まずはじめに新規ファイルの作成方法を説明して、そのあとに各機能の詳しい使い方を紹介します

新規FigJamファイルの作り方

FigJamは全く新しいサービスというわけではなく、Figmaの中に追加された機能という扱いです。

そのため新規ファイルの作り方は既存のファイル作成と同じように作成します。

画像31

 

「New」ボタンに「FigJam file [Beta]」という選択肢が追加されています。クリックすることで新規のファイルが作成されます。
（今までのファイルは「Design file」となったようです）

画像32

 

使い方1：マーカーで手書きの線をかく

ショートカットキー：M

既存のFigmaのペンツールのように自由に線を描くことができます。色と太さを変更することもできます。

 

画像7
画像8

それぞれの線は分割された線として配置されるようです。

画像9

 

ツールバーの右上の結合ボタンっぽいものを押すことで、全ての線が結合されて1つのオブジェクトとなります。

画像10

使い方2：図形を貼る

ショートカットキー：なし

四角や円、三角などさまざまな図形を選択して貼ることができます。主にフローチャートを作る時に使用する感じでしょうか。

画像11

 

ちなみにボード上に貼った後に、図形を変更したり、文字を書いたりすることができます。

画像12

 

使い方3：ふせんを貼る

ショートカットキー：S

ブレストやメモを書く時によく使い、使用頻度が高いと思われるふせん機能です。真ん中あたりの紙が重なっているイラストをクリックすることで使用できます。

画像13

 

ボードに貼ったふせんを選択することで、色を変えたり、文字を書いたりすることができます。

画像14

 

ちなみに、ツールバーの一番右のアイコンをクリックするとふせんに入っている自分の名前の表示/非表示を選べます。

画像15

 

大勢で使う場合は、まず人数分の色付きふせんを用意して、optionを押しながらDrag&Dropすると複製できます。

タイトルなし

 

使い方4：文字を書く

ショートカットキー：T

今まで紹介した図形やふせんの中に文字を書くこともできますが、ボード常に直接文字を書くことも可能です。

画面下部のメニューバーの中の「T」アイコンを押すことで、文字をボードに貼り付けられます。

文字の大きさは小さい順に「Normal」「Subheading」「Heading」「Title」の4種類から選ぶことができます。大きさは以下の通りです。

 

画像17

 

文字選択時のツールバーから大きさの変更は可能です。

画像18

 

使い方5：線をつなぐ

ショートカットキー
矢印：Shift + C
線：L

メニューバーの矢印アイコンを押すことで、矢印か線をかくことができます。さらにかいた線を選択することで、中心に文字を書くことができます。

タイトルなし

 

 

図形やふせんをせんたくすることで、それぞれを矢印や線でつなぐこともできます。図形が移動したら矢印も追従するので、とても便利です。

タイトルなし

 

 

使い方6：ステッカーを貼る

ショートカットキー：Control+ 2

ステッカーコンポーネントとして、デフォルトで用意されているさまざまなイラストをステッカーとしてボード上に自由に貼り付けることができます。

画像21

 

画像22

 

さらに応用の使い方として、普段Figmaを使っていてライブラリーとしてコンポーネントを共有している場合には、そのコンポートネントも使用できます！
（※コンポーネントの共有機能は有料プラン以上の機能です）

画像23

 

Manage Librariesで自身が使用しているライブラリーを追加（Add to file）することで、ステッカーとして使用することができます。

今回は普段から使っているアイコンのライブラリーを追加してみました。

画像24

 

使い方7：スタンプをおす

ショートカットキー：E

デフォルトで用意された7つのリアクション（ハートやGoodボタンなど）と自分のアイコンを、ボード上にスタンプとして押していくことができます。

画像25

 

画像26

 

使い方8：感情を伝える😍

ショートカットキー：E

スタンプと同じショートカットキーになっていて、似たような機能として感情を伝える機能があります。（emote）

画像27

 

スタンプのように絵文字を選んで、ボード上でクリックすることで絵文字が大量に出現します。チームでやる時に楽しくなりそうです。

スタンプとの違いとしては、ボード上に残らない点です。

また、ショートカットキーに関しては最後に使用した方がでてくるようです。

使い方9：写真を貼る

ショートカットキー：Shift + Command + K

写真ももちろんボード上に自由に貼ることができます。

画像28

 

使い方10：カーソルチャットをする

ショートカットキー：/

コミュニケーション用のおもしろい機能としてカーソルチャットがあります。/（スラッシュ）キーを押すことで、自身のカーソル上に吹き出しが出現して、メッセージを送ることができます。

画像29

 

使い方11：コメントをする

ショートカットキー：C

最後は普段のFigmaでもあるコメント機能も用意されています。「C」のキーか右上の吹き出しマークをクリックすることでコメントを入力できます。

画像30

 

 

以上がメイン機能の使い方のまとめでした。FigJamはオンラインホワイトボードサービスとして非常に使いやすい設計がされています。また、日頃Figmaを使用している人にとってはFigmaの延長線上に使えるのは大きなメリットです。

利用料金

FigJamは、2022年2月まで無料です。2022年には、FigJamには無料プランと有料プラン（エディター1人あたり月額8ドル〜）に変更されます。

 

現在の最新の料金については以下をご覧ください。（2022/06/07加筆）

width=

https://design.caroa.jp/article/gxaDe6Bg

 

公式テンプレート集について

FigJamが使えるテンプレート（チュートリアル）が公式から用意されています。

ぜひ参考に使ってみてください。
（右上のDuplicateから複製して使用できます！）

テンプレ1：Flow Charts Primer

https://www.figma.com/community/file/964644828001526628

フローチャートを作るのにぴったりなテンプレです。線でつないだり、リアクション（スタンプ）でここまでできるのを確認できます。

画像1

引用：https://www.figma.com/figjam/

テンプレ2：FigJam ice breaker template: animal drawings

https://www.figma.com/community/file/964643468321702755

手書きでこんなことができるよーという感じのものが入っています。

画像2

テンプレ3：FigJam Brainstorm Template

https://www.figma.com/community/file/964626434721506143

ふせんをつかったブレスト用のテンプレです。色違いの付箋が複数用意されているので、そのまま使えそうです。

画像3

テンプレ4：Brainstorm Crazy 8s

https://www.figma.com/community/file/964652140702534507

デザインスプリント内でアイデアを出す手法としてよく使用されている「クレイジー8」用のテンプレです。

画像4

テンプレ5：FigJam retro template

https://www.figma.com/community/file/964642284354524001

ふりかえり用のテンプレです。4つの軸として「うまくいったこと」「うまくいかなかったこと」「改善するためにできること」「アイデア」が用意されています。

画像5

テンプレ6：Mood Board Templates

https://www.figma.com/community/file/964643362660977506

イメージの共有や認識合わせの時に使用することの多い「ムードボード」を作るためのテンプレです。

画像6

まとめ

コラボレーションツールとして多くの人に使われてきたFigmaの新規機能である「FigJam」について紹介しました。

今までFigmaではやりづらくて外部のサービスを使用してきたのが、Figmaで完結できるようになりました。

また、将来的にはFigma上で音声による会話ができるようになるという発表もあったので、これからのFigmaの進化が楽しみです。

画像33

アップデート情報はこちらで公開されています。