こんにちは、ファームノート　小森です。

先週ワークショップを開催しましたので、久しぶりにフィード投稿します。

エンジニアやデザイナーの方を招待するイベントは、会社説明会くらいしか開催していなかったのですが、そろそろマンネリ化してきたし、なにかメインコンテンツを持ったイベントを開催したいよね、という会話の中で今回のワークショップ開催にいたりました。

今回扱ったFigmaはUIデザインツールで、Sketch やAdobe XDと今後特に比較されていくであろうツールです。私は全然詳しくないので、詳細は下記ページか公式ページ参照ください。Figmaの一番の大きな特徴は、複数人でリアルタイム編集（Googleドキュメントみたいに）出来る点です。

https://farmnote.connpass.com/event/82216/

ワークショップはFigmaの使い方を弊社菅原から説明した後、3チーム（TeamA、TeamB、TeamFarmnote）各5人程度に分かれて、タスク管理ツールTrelloを再デザインしてみるという内容でおこないました。私は、全体を見てようかなと思っていたのですが、菅原の進め方に若干の不安（笑）を覚えたので、急遽チームBに参加することにしました。Figmaはインストールしただけな上に、Sketchも利用したことがなかったので正直、やばい、と思っていました。（笑）

様子その1

Figmaの画面。小さくて見づらいかもですが、画面左側がパーツを作っているエリア、右側が組み合わせたパーツを配置しているエリアです。参加者にはデザイナーさんもいらっしゃったので、いい感じのパーツ類もサクサク作って頂いています。素敵！

私の入ったチームBでは、最初はとりあえず既存のTrelloっぽく作ってみようか、と話していたんですが、その前に既存アプリの問題点を上げてみようか、という話になりました。（この辺りの流れを最初にちゃんと説明できなかった点は反省）

既存アプリはPC版はまあ特に無いかな、という話になりスマホ版に話を移しました。そこでは

・カードの移動とリストの移動の動きが被っててちょっとやりにくいよね

・そういえば上下移動もやりにくいよね

という問題点がでたので、スマホ版の上記の機能改善をベースにUI設計を進めました。

そんな感じでわいわいと2時間くらいみんなで試行錯誤した再デザインがこちらです。上下左右にカード移動の矢印ボタンを追加してみました。作っていく中で「カードの新規追加もどこで出来るかわかりずらいよね」という話になり、右下に「＋ボタン」をつけてみました。

画面上では表現できていませんが、ボタンを押すと次の画面に遷移するアニメーションも簡単に作れます。とにかく同時に編集できるので、多人数で話しながら作り上げていくスピード感を体験してもらったんじゃないかなと思いました。

様子その2

ワークショップ後は発表も兼ねて懇親会を行いました。他のチームの発表もせっかくなので掲載します。

＜TeamA＞

わんちゃんとねこちゃんがかわいい。。。

＜TeamFarmnote＞

カオス。。。だと思ったのですが、6角形が一つのカードになっていて、期日や重要度が高いと上に上がってきたり、色が変わる仕様とのことです。ボタンも押しやすそうでいいかも。

懇親会も夜遅くまで盛り上がり、ワークショップ第1回目としては多少運営方法に課題は残りましたが、成功したんじゃないのかなと思っています。アンケートでは「コンポーネント（パーツ）の粒度について知りたい」という意見もあったので、次回ワークショップのネタとして絶賛検討中です。

こんなワークショップを開催してほしい、どのような開発をしているのか知りたい、むしろ一緒に働いてみたい等々、お気軽にお問い合わせください！