2021/4/22の午前1時ごろ（日本時間）にFigmaのカンファレンス「config2021」が開催されました！その中で発表されたFigmaの新しい機能としてオンラインホワイトボードサービスの「FigJam」についての使い方や魅力、料金についてを今回は徹底紹介します。FigJamとはFigma上で使えるオンラインホワイトボードです。Figmaの公式Twitterに使用イメージの動画が載っていますのでご覧ください。%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22en%22%20dir%3D%22ltr%22%3E%F0%9F%9A%80%20Just%20announced%20at%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fhashtag%2FConfig2021%3Fsrc%3Dhash%26amp%3Bref_src%3Dtwsrc%255Etfw%22%3E%23Config2021%3C%2Fa%3E%3A%20FigJam.%3Cbr%3E%3Cbr%3EFigJam%20is%20a%20new%20online%20whiteboard%20for%20teams%20to%20ideate%20and%20brainstorm%20together.%3Cbr%3E%3Cbr%3ECheck%20it%20out%3A%20%3Ca%20href%3D%22https%3A%2F%2Ft.co%2Fpu0SjB4Op1%22%3Ehttps%3A%2F%2Ft.co%2Fpu0SjB4Op1%3C%2Fa%3E%20%3Ca%20href%3D%22https%3A%2F%2Ft.co%2F4SVMKlM1rQ%22%3Epic.twitter.com%2F4SVMKlM1rQ%3C%2Fa%3E%3C%2Fp%3E%26mdash%3B%20Figma%20(%40figmadesign)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Ffigmadesign%2Fstatus%2F1384905547099553792%3Fref_src%3Dtwsrc%255Etfw%22%3EApril%2021%2C%202021%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3Eオンラインホワイトボードのツールといえば、miroが有名です。それ以外も日本製だとGoodpatchが昨年リリースしたStrapもあります。オンラインでのMTGが増えていて需要が高まっている今、ついにFigmaからも登場しました。Figmaはブラウザ上で自由にデザインが作れるので、ホワイトボードのようにふせんを貼ったり、ストーリーボードのようなものを頑張って作っていた方も多いのではないでしょうか。ただ、自由が故に難しさもありました。そんな悩みがついに解消されます！FigJamの使い方現状のFigJamで出来ることは基本機能を除いて大きく11個です。（記事執筆時点）1. マーカーで手書きの線をかく2. 図形を貼る3. ふせんを貼る4. 文字を書く5. 線をつなぐ6. ステッカーを貼る7. スタンプをおす8. 感情を伝える9. 写真を貼る10. カーソルチャットをする11. コメントをするまずはじめに新規ファイルの作成方法を説明して、そのあとに各機能の詳しい使い方を紹介します新規FigJamファイルの作り方FigJamは全く新しいサービスというわけではなく、Figmaの中に追加された機能という扱いです。そのため新規ファイルの作り方は既存のファイル作成と同じように作成します。「New」ボタンに「FigJam file [Beta]」という選択肢が追加されています。クリックすることで新規のファイルが作成されます。（今までのファイルは「Design file」となったようです）使い方1：マーカーで手書きの線をかくショートカットキー：M既存のFigmaのペンツールのように自由に線を描くことができます。色と太さを変更することもできます。それぞれの線は分割された線として配置されるようです。ツールバーの右上の結合ボタンっぽいものを押すことで、全ての線が結合されて1つのオブジェクトとなります。使い方2：図形を貼るショートカットキー：なし四角や円、三角などさまざまな図形を選択して貼ることができます。主にフローチャートを作る時に使用する感じでしょうか。ちなみにボード上に貼った後に、図形を変更したり、文字を書いたりすることができます。使い方3：ふせんを貼るショートカットキー：Sブレストやメモを書く時によく使い、使用頻度が高いと思われるふせん機能です。真ん中あたりの紙が重なっているイラストをクリックすることで使用できます。ボードに貼ったふせんを選択することで、色を変えたり、文字を書いたりすることができます。ちなみに、ツールバーの一番右のアイコンをクリックするとふせんに入っている自分の名前の表示/非表示を選べます。大勢で使う場合は、まず人数分の色付きふせんを用意して、optionを押しながらDrag&Dropすると複製できます。使い方4：文字を書くショートカットキー：T今まで紹介した図形やふせんの中に文字を書くこともできますが、ボード常に直接文字を書くことも可能です。画面下部のメニューバーの中の「T」アイコンを押すことで、文字をボードに貼り付けられます。文字の大きさは小さい順に「Normal」「Subheading」「Heading」「Title」の4種類から選ぶことができます。大きさは以下の通りです。文字選択時のツールバーから大きさの変更は可能です。使い方5：線をつなぐショートカットキー矢印：Shift + C線：Lメニューバーの矢印アイコンを押すことで、矢印か線をかくことができます。さらにかいた線を選択することで、中心に文字を書くことができます。図形やふせんをせんたくすることで、それぞれを矢印や線でつなぐこともできます。図形が移動したら矢印も追従するので、とても便利です。使い方6：ステッカーを貼るショートカットキー：Control+ 2ステッカーコンポーネントとして、デフォルトで用意されているさまざまなイラストをステッカーとしてボード上に自由に貼り付けることができます。さらに応用の使い方として、普段Figmaを使っていてライブラリーとしてコンポーネントを共有している場合には、そのコンポートネントも使用できます！（※コンポーネントの共有機能は有料プラン以上の機能です）Manage Librariesで自身が使用しているライブラリーを追加（Add to file）することで、ステッカーとして使用することができます。今回は普段から使っているアイコンのライブラリーを追加してみました。使い方7：スタンプをおすショートカットキー：Eデフォルトで用意された7つのリアクション（ハートやGoodボタンなど）と自分のアイコンを、ボード上にスタンプとして押していくことができます。使い方8：感情を伝える😍ショートカットキー：Eスタンプと同じショートカットキーになっていて、似たような機能として感情を伝える機能があります。（emote）スタンプのように絵文字を選んで、ボード上でクリックすることで絵文字が大量に出現します。チームでやる時に楽しくなりそうです。スタンプとの違いとしては、ボード上に残らない点です。また、ショートカットキーに関しては最後に使用した方がでてくるようです。使い方9：写真を貼るショートカットキー：Shift + Command + K写真ももちろんボード上に自由に貼ることができます。使い方10：カーソルチャットをするショートカットキー：/コミュニケーション用のおもしろい機能としてカーソルチャットがあります。/（スラッシュ）キーを押すことで、自身のカーソル上に吹き出しが出現して、メッセージを送ることができます。使い方11：コメントをするショートカットキー：C最後は普段のFigmaでもあるコメント機能も用意されています。「C」のキーか右上の吹き出しマークをクリックすることでコメントを入力できます。以上がメイン機能の使い方のまとめでした。FigJamはオンラインホワイトボードサービスとして非常に使いやすい設計がされています。また、日頃Figmaを使用している人にとってはFigmaの延長線上に使えるのは大きなメリットです。利用料金FigJamは、2022年2月まで無料です。2022年には、FigJamには無料プランと有料プラン（エディター1人あたり月額8ドル〜）に変更されます。現在の最新の料金については以下をご覧ください。（2022/06/07加筆）https://design.caroa.jp/article/gxaDe6Bg公式テンプレート集についてFigJamが使えるテンプレート（チュートリアル）が公式から用意されています。ぜひ参考に使ってみてください。（右上のDuplicateから複製して使用できます！）テンプレ1：Flow Charts Primerhttps://www.figma.com/community/file/964644828001526628フローチャートを作るのにぴったりなテンプレです。線でつないだり、リアクション（スタンプ）でここまでできるのを確認できます。引用：https://www.figma.com/figjam/テンプレ2：FigJam ice breaker template: animal drawingshttps://www.figma.com/community/file/964643468321702755手書きでこんなことができるよーという感じのものが入っています。テンプレ3：FigJam Brainstorm Templatehttps://www.figma.com/community/file/964626434721506143ふせんをつかったブレスト用のテンプレです。色違いの付箋が複数用意されているので、そのまま使えそうです。テンプレ4：Brainstorm Crazy 8shttps://www.figma.com/community/file/964652140702534507デザインスプリント内でアイデアを出す手法としてよく使用されている「クレイジー8」用のテンプレです。テンプレ5：FigJam retro templatehttps://www.figma.com/community/file/964642284354524001ふりかえり用のテンプレです。4つの軸として「うまくいったこと」「うまくいかなかったこと」「改善するためにできること」「アイデア」が用意されています。テンプレ6：Mood Board Templateshttps://www.figma.com/community/file/964643362660977506イメージの共有や認識合わせの時に使用することの多い「ムードボード」を作るためのテンプレです。まとめコラボレーションツールとして多くの人に使われてきたFigmaの新規機能である「FigJam」について紹介しました。今までFigmaではやりづらくて外部のサービスを使用してきたのが、Figmaで完結できるようになりました。また、将来的にはFigma上で音声による会話ができるようになるという発表もあったので、これからのFigmaの進化が楽しみです。アップデート情報はこちらで公開されています。