Figmaに慣れるならカタンしか勝たん件について
スタートアップテクノロジー・デザイン部の齋藤です！
弊社でもリモートワークを中心に仕事をすすめるようになって、かなりの期間が経ちました。
コミュニケーション機会の減少などを危惧して、いろいろと試行錯誤をしてきましたが、ただ雑談しましょうと集まるだけではなんだかツラい、、、
であるならば、なにか別の目的があればどうだろう？という話から、ゲームを通じて社内でのチームワーク向上させるイベントなども開催されています。
今回は、社内でFigmaを使ってカタンをしてみたら、一石三鳥くらいあって最高だったという内容をまとめてみました。
Figma Catanとは
Figmaはインターフェースなどのデザインが得意なデザインツールです。チームでデザインに取り組むために、コラボレーションを促進する様々な機能が提供されているのが特徴です。
そんなFigmaには、運営が用意している機能群に加えて、ユーザーが開発した拡張機能を公開できる「コミュニティー」というものがあります。
そこで配布されているもののひとつがFigma Catanです。
カタンとは
カタンは、「カタンの開拓者たち」というドイツ生まれのボードゲームで、発売は1995年。ボードゲーム界では先駆者的な存在です。
プレイヤーは4人が基本。順番にサイコロを振って、出た目によってもらえる資源を集めて、道をつくったり家を建てたりする陣取りゲームです。
プレイヤー間で資源を交換する交渉や、資源を能力に変換する発展カードなど、戦略性を求められるのが難しくも面白いところです。
詳しいルールを知りたい方は日本語解説のWebサイトやWikipediaをご覧ください。
仕事道具で遊んできました
というわけで、今回は仕事道具のFigmaで遊ぶという試みをしてきました。
カタンは交渉などの際に会話が必要になるので、お酒を用意して、Figma上に集まって、Discordをつないで話しながら進めました。
参加者は、エンジニア3人＋自分（デザイナー）の4人。
エンジニアたちは、Figmaに少しさわったことはあるけれど、デザイン系のツールはあまり能動的にさわったことがない、というような状態でした。
Figma Catanの基本構成
Figma Catanをコミュニティからコピーしてくると、ゲームに必要なパーツがデータ化されています。
ボードやサイコロなどのパーツ
道や開拓地などは4色用意されていて、色を変えたり増産することも可能です。
発展カードと資源カードの山札
カードは裏向きで積まれていて、自分の所持するカードはいつでも表面を見れるような仕組みになっています。
ゲームプレイに便利な機能
手動でもやれなくはないのですが、ゲームプレイに便利な機能がプラグイン化されていて、より快適に遊べるようになっています。
プラグインはサイドバーから利用するのがわかりやすいかと思います。
道の角度切り替え
道の角度が手軽に切り替えられるようになっています。（コンポーネントのインスタンスを利用）
ボード上で好き勝手に角度を切り替えるとぐちゃぐちゃになってしまうので、これできっちり決まった角度にしておくと盤面が見やすくなります。
ダイスロール
サイコロを選択してリロールを実行すると、ランダムに数字が切り替わる仕組みです。（プラグイン）
カードの操作
重ねたカードをシャッフルしたり、一枚一枚の裏表を切り替える機能なども用意されていました。（プラグイン）
スタートガイド
ボードのセットアップなど、Figma Catanのスタートガイドも用意されています。翻訳したのでご自由にお使いください。
1. 盤面がランダム化されたら、プレイ中に混乱しないように「Game Board」レイヤーをロックします。
2. ここで「Randomize Board」を選択すると、新しいボードが生成されます（必要に応じて）。
3. 盤面がランダム化されたら、プレイ中に混乱しないように「Game Board」レイヤーをロックします。
4. 自分の駒をボード上にドラッグしてみよう
Tip! 道路の回転を変更するには、インスタンスを垂直から "Angle Up "または "Angle Down"
5. スタート時のリソースを手に入れよう リソースを手札に入れると、「Look Privately」を使って手札を見て、そのリソースが何かを確認することができます。
6. 開発カードも同様です
7. サイコロを振ってゲームを始めましょう
Figmaがいつのまにか使えるように…！
わいわい話しながらやったのもあって、気づいたら2〜3時間ほどは遊んでいた気がします。
普段からデザイン業務はFigma、チームのエンジニアともFigmaを介したコミュニケーションをとっていますが、操作自体を説明するのはわりと新鮮でした。
遊びながら伝えた内容は、こんな感じでした。
・選択して移動、文字入力、複製のような基本操作
・Figmaファイルやチームの構成、左右の操作パネルについて
・レイヤーという重なり順があるという話
・グループとフレームについて
・コンポーネントやインスタンスは、ボタンやラベルのUIで、状態変化などを管理するのに便利
・整列はよく使うので、ショートカットを知ってると操作がスムーズだよ〜という話
デザイン系ツールに共通する話題が多く、新人さんの研修のような使い方もありなのではないかと思いました。
操作を覚えるときにどんなことがわからないのか、あらためて言語化するのが面白かったです。
参加者の感想
最後に、参加者の感想もまとめてみました。
カタン自体は一回やればわかるくらいのやさしさで、次からはもっと手軽に遊べそうです。
カタンについての感想
・カタン自体のルールははじめてだったけどシンプルでわかりやすかった
・自由度のある交渉による駆け引きがおもしろかった
・脅し、協力、懇願などの人間らしいコミュニケーションが生まれるのがおもしろかった
・初心者用に最初の準備、ターンの流れ、最初に開拓地を置く場所の選び方などの説明はまとめておいたほうがよい
Figmaについては、使い慣れてる人の操作を見て学んだり、詰まっても聞きやすい環境だったのが好評だったようです。
Figmaについての感想
・Figmaの基本のキを理解できた
・はじめてだったので時間がかかったけど、Figmaの機能で工夫の余地もありそう
・Figmaをデザイナーがどんなふうに使っているのか見れてよかった
・この操作どうすれば？という質問も遊びなので聞きやすく、すぐ教えてもらえた
・新しいツールは慣れるまで大変だけどFigma Catanならすぐ慣れそう、一度慣れれば使い方は自分でも学ぼうと思える
・レイヤーの見方や図形の変形・移動など、図形の基本的な操作に触るにはとてもよかった！
・知らないショートカットめっちゃ多い。でもイラレより使いやすそう！
・ショートカットのレクチャーをしてくれる人がいるととってもよき
・最初はFigmaというかデザイン系のツール自体に馴染みがなくて抵抗があったけど、途中でいつのまにか慣れてた
みんなFigmaさわれるようになった感じがあって最高ですね！！
まとめ
クライアントワーク中心の仕事をしている性質上、プロジェクトで関わるメンバー以外との社内コミュニケーションが希薄になったり、あまり人と会わなくなったことで口数が減り、いざというときに口が回らなくなっている方も多いのではないでしょうか。（※個人的な見解です）
遊びと仕事をうまくつなげるという視点は、コミュニケーションが希薄になりがちな世の中では、あらためて考えてみても良いことではないかと思います。
単純に楽しかったという話でもありますが、仕事で使うツールでもあるFigmaを利用したことで、今後のFigmaを介したコミュニケーションがスムーズになりそうな予感もあります。
デザイナーのためだけのツールじゃないというFigmaの在り方は、今後もどんどん進化していくようです。(ボイス機能も実装される予定。)
デザイナーとしての感想は、配布されているものを使うことで、データのつくりかたについても勉強になりました。
職種問わず、また家でお酒でも飲みながら、遊べたらいいなと思います。
Figma Catan、おすすめです。
▼株式会社スタートアップテクノロジーでは、一緒に働く仲間を募集しています！
クライアントワークや自社プロダクトのデザイン、コーポレートのブランディングなどに取り組みたいデザイナーの方がいらっしゃいましたら、弊社求人や採用資料を是非ご一読くださいませ🙇♂️
良い酒飲めると執筆がはかどります…！