「クラスメソッドのデザイン・体験づくり事情大公開スペシャル」を開催・登壇しました！

みなさんこんにちは、CX事業本部のmorimorikochanです。最近水泳にハマってます🏊‍♂️
昨日1月25日に、クラスメソッドのデザイン・体験づくり事情大公開スペシャルを大阪オフィスで開催いたしました。
私も他の方より短い時間ですが登壇しましたので、勉強会の開催記録と合わせて登壇内容についても以下に掲載したいと思います！

イベント概要

イベント名	クラスメソッドのデザイン・体験づくり事情大公開スペシャル
日時	2024/01/25 19:00〜
場所	クラスメソッド 大阪オフィス

イベントでは、3名の方にこんな感じで登壇していただきました。

1.体験づくりへの理解があるお客様とサービスを作った話

isodaさんが発表されました。
UIデザインだけではなく、体験づくりという側面での貴重な知見を聞くことができました。

登壇内容を以下のブログで文字にしていただいてますので、気になる方は是非チェック👀してみてください

2.受託開発の中でデザイナーが実施したユーザーテスト奮闘記（仮）

スギヤマさんが発表されました。
スギヤマさんもisodaさんと同様に体験づくりに関する発表でした。
ユーザーテストの詳細な内容やそこから学んだ内容等は滅多にネットで聞ける話ではないので、とてもおもしろかったです。また、話し方がとても丁寧で、聞きやすかったです👂

スギヤマさんも登壇内容をブログにしていただいてます！気になる方は是非チェック👀してみてください

3.Figmaを通したエンジニアとデザイナーの連携について

最後に、私も10分間だけですが発表しました！
簡単に一部のスライドを抜粋して、以下で説明していきます。

私はデザイナーではなくエンジニアなので、その両者の関係性からみた発表にしたいと考えて、デザイナーとエンジニア（コーダー）が協業する上で大事な3つと、それぞれにおいてFigmaでは何を気をつければ良いのかという内容でお話をさせていただきました。

1つめの大事なことが UIを可変なサイズで作りましょう です。
例えばエンジニアのあなたに以下スライド右側のようなデザインがFigmaで渡されました。このUIはさまざまなデバイスで表示される可能性があるため、横幅はバラバラです。
フロントエンドを実装する際に、横幅が大きくなったり小さくなったりする際にユーザー名や日付の配置をどのようにすれば良いかが分からないはずです。

Figmaでただ要素を配置しただけでは、横幅を伸ばしてみてもどのように変化するかが全くわかりません。おそらくあなたは悩んでしまうでしょう。 これでは、デザイナーの意図がエンジニアに伝わらずそのままリリースされてしまったり、デザイナーへの質問攻めが起きてしまいます。

なので、UIを可変なサイズで作ることが大切だと思っています。

Figmaでこれを可能にするのが AutoLayout です

AutoLayoutで具体的に何ができるかはこちらが大変わかりやすいです。
Macでは要素を選択した上でshift + Aを押すと適用されます。

先ほどの例でも、もしAutoLayoutが適用されると以下画像の右側のように動的にサイズが変わっています。
このように要素を定義しておくことで、デザイナーの意図をエンジニアに正確に伝えることができます。

2つめの大事なことは 再利用性を高めましょう です。

例えば、あなたが以前作ったwebアプリケーションのUIに対して、大量の仕様変更が降ってきました。アプリケーションのベースとなるボタンや入力フォーム100箇所以上を修正しなければなりません。

全て修正できないので、エンジニアに口頭で修正内容を伝えてよしなに実装してもらうとFigmaと実装にズレが生じ、いつしかメンテナンスされなくなってしまいます☠️
また、100箇所すべてFigmaで修正したはずだけど修正漏れがあり、そのままリリースされてしまうこともありえます☠️

これらの根本的な原因は、再利用を前提に作成されていないからだと考えています、

再利用性はソフトウェアエンジニアリングの世界ではとても重要な位置付けになっています。

Figmaで再利用性を高めるために利用できるのが、コンポーネント です。

これはいわばデザインのテンプレートのようなもので、コンポーネントからコピーされたものをインスタンスと呼ばれます。

ただ要素をコピーした場合とは異なり、コンポーネントに対しての修正はインスタンスに反映されます。
例えばコンポーネントで文字色を赤色にすると、インスタンスの文字色もすべて赤色になります。

（実例については省きます）

ここまで、デザイナーにとって嬉しい部分を説明しましたが、実はこれエンジニアにとっても大きな恩恵があります。

最近のフロントエンドのフレームワークではいずれも再利用性が考慮されています。ですので、エンジニアが再利用の単位についてすでに考えて独自に定義している可能性が高いです。

ですので、デザイナーによるUIデザインの段階からFigmaでコンポーネント（=再利用の単位）が定義されると、エンジニアが考える再利用の単位とデザイナーが考える再利用の単位が一致しやすいと考えています。
これにより実装の難易度イメージが一致しやすい（=見積もりと実績がずれにくい）・エンジニアが実装時に再利用の単位を考えやすい、という大きな恩恵があります。

3つめは「タスクを明確にしよう」です

大規模なアプリケーションを作っていくと、Figma上で関係者からコメントが鬼のように増えていくことがあると思いますが、Figmaではだんだん管理しにくくなってくると思います。
この状態は最終的に、タスクが誰にあるかわからない状態を引き起こしてしまいます。

これを防ぐために紹介したいのが、FigmaのプラグインであるExport Commentsです。

これはFigmaのコメントをExcelに書き出してくれるプラグインであり、以下のような特徴を持っています。

• 返信が折りたたまれていて一覧性が高い
• 解決済みかどうかが一目でわかる
• 該当のコメントへアクセスできるリンクがある

私からおすすめしたい運用方法としては、

2,3日に一度Excelに出力し、GoogleDriveに配置してプロジェクトメンバー全員に共有しておくような運用です。
こうすると、プロジェクトメンバー全員が残っているタスク・自分に割り当てられたタスクについて同じ認識を持つことができるようになりやすいです。

また、あまり深くは解説しませんが、DevModeもタスク管理において大変有用です。

以下、まとめです

懇親会

発表後に1時間ほど懇親会を開催しました🍻

ほとんどの参加者の方が残っていただき、お酒を片手にワイワイ話をすることができました。
意外とエンジニアの参加者の方が多かったです。またFigmaの話や体験作りの話がとても良かったというフィードバックをいただけたのが本当に嬉しかったです。

1つびっくりしたのが、以前参加したReboot kansai.ts（こちらでブログ記事にもしてます）で登壇されていた方と話すことができました。当時はこんな優秀な方いらっしゃるんだなぁと思っていたので、その方がまさか自分が運営する勉強会に参加されるなんて驚きです。
意外と世界は狭いかも知れませんね🌎

アンケート

ちなみに、参加者の方にホワイトボードで興味がある分野のアンケートを取ってみました。
Figmaに関する発表があったのでやっぱりFigmaが多いですね。それにしてもXDの圧がすごい...

感想・まとめ

• 自分が運営する勉強会としては2回目でした。
  • 悪い意味でだいぶ慣れてしまって、直前にバタバタすることになってしまいました、
• とても面白い勉強会でした
  • 第二回も考えたいです💪
• オフライン勉強会はやっぱり懇親会が楽しいなと感じました
• 「クラスメソッドのXXXX事情大公開スペシャル」は毎回弊社メンバーが登壇する形をとっていますが、参加者の一部の方から「登壇しても良いですよ」とおっしゃっていただけました。
  • 将来的には参加者の方も発表できるようにして、面白いコミュニティを作っていければ良いかなぁと感じました！