#58「Figma使ってみてどうですか？」

加藤 : 皆さん、こんにちは！ ミツエーリンクスの加藤です！ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、 Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。今回はUX事業部のインタラクションデザインチームから小室さんをゲストにお呼びして、Figmaの話を聞いていきたいと思います。よろしくお願いします！

小室 : よろしくお願いします！

加藤 : はい。今回小室さんには初めてスピーカーとして登場いただくので、簡単に自己紹介をお願いしてもよいでしょうか？

小室 : はい。初めまして。UX事業部のインタラクションデザインというチームでデザイナーをしている小室と申します。WebサイトだけでなくWebアプリやネイティブアプリのデザインをしています。よろしくお願いします。

加藤 : はい！よろしくお願いします！えーミツエーリンクスでもFigmaを使ったプロジェクトはちょっとずつ増えているのかなと思っているんですけど、小室さんのチームはけっこう早いタイミングからFigmaを使っていましたよね？

小室 : はい。私のチームでは社内でも早いタイミングで導入されました。既にクライアントが使っているとか、そもそもFigmaで対応してくださいという依頼が多くなってきたという経緯があります。それらの案件では、ワイヤーフレームからデザインまでをFigmaで行っています。開発者への共有はもちろん、クライアントとのやり取りや、社内でのデザインレビューにも非常に役立っています。

加藤 : なるほど、そうなんですね。私がかかわっているプロジェクトだとまだFigmaは使ったことがないので、いろいろ教えていただければと思います！

加藤 : はい。では早速、Figmaの機能的なところを少しずつ聞いていきたいと思っていますが、そもそもミツエーリンクスではAdobe製品をメインで使っていたと思うんですけど、これは小室さんも同じですか？

小室 : はい。デザイン作るときには主に、Adobe XDを使っていて、必要に応じてPhotoshopとかIllustratorを使うような感じですかね。

加藤 : で、今はXDの代わりにFigmaがメインになってきているみたいな感じですかね。

小室 : はい、そうですね。Adobeが公式にAdobe XDはメンテナンスモードだと宣言していますし、積極的に使う理由はないかなと思いますね。で、今移行するとしたらまず候補に挙がるのがFigmaかなと思います。

加藤 : うん、そうですよね。実際使ってみてどうですか？ほかのデザインツールと比べて特徴的だなーって感じるところとかあります？

小室 : そんなにデザインツールをたくさん使ってきたわけではないので比較するとっていう感じではないんですが、使っていて思うのは、より直感的というか、自由度が高いなーっていうのは感じます。

加藤 : あーそうなんですね。どのへんが自由度高い感じですか？

小室 : コンポーネントとか画面の構成を作るときにつかうオートレイアウトっていう機能があるんですけど、その存在が大きいかなと思います。

加藤 : あーその、オートレイアウトって簡単に説明できたりしますか？

小室 : 言葉で表現するのは結構難しいんですけど…。複数の要素を規則的に並べるっていうのができる機能で、ある程度レスポンシブな動きも制御できるものになっています。画面幅や親のサイズを変えたときに、ここはこう動くとか、逆にここは動かないようにする、みたいな設定ができるので、汎用的なコンポーネントを作成する時が一番助かる機能になっています。

今までは作成した要素の伸縮がうまくいかないっていうことがけっこう多くて、幅ごとに編集する必要があったんですよね。でもオートレイアウトを使うようになってからは、最初の設定を考えておけばあとは自在に伸縮してくれるっていうのが、すごくありがたくて、もう手放せないかなーという感じになりました。設定に「内包」っていうのと「拡大」っていうところがあるんですけど、そのイメージが掴めればもう怖いものが無くなるかなと思います！

加藤 : うーんなるほど。開発しているときも、やっぱり基本レスポンシブを想定しながら作るんですけど、作ったあとに実際タブレットで見てみると、やっぱり収まりきらないときとかあるので、レスポンシブのレイアウト方針がデザインを見て分かるのはけっこうやっぱり嬉しいですね。

小室 : そうですよね。

加藤 : うん。あのーiOSとかのアプリを作るときに使うXcodeにもAuto Layoutっていう機能があって、あのFigmaのオートレイアウトと近い機能を持っているんですけど、XcodeのほうではそのAuto Layoutのいろいろな設定のことを「制約」って呼ぶんですよね。だからそれが自由度が高いっていうところにつながるのがおもしろいなーと思って聞いてました。

小室 : なんか、何でもできるっていう意味の「自由度が高い」っていうのじゃなくて「柔軟」っていう表現の方があっているかもしれないなと今思いました。あとは、コンポーネントを作るのもすごい楽になりましたね。

加藤 : あーこれまではけっこう大変だったんですか？

小室 : はい。複数のステートを持つコンポーネントを作るっていうのはXDでもできたんですけど、複数のステートを同時に表示しながら、コンポーネント自体を編集するっていうのはできなかったんですよね。いちいちステートを切り替えて編集して、また切り替えて編集して…っていう作業を繰り返す必要がありました。

加藤 : なるほど。で、Figmaだと切り替える必要がない、っていうことですかね？

小室 : はい。Figmaの場合だと、コンポーネントの状態1つ1つをバリアントと言ってるんですけれど、そのコンポーネントで定義されているバリアントは常に一覧化されているので、編集も楽だし、わざわざ状態の一覧を新しく作り直すみたいな必要もなくなったので、すごく楽になりました。

加藤 : あーたしかにそうなってますね！あんまり意識したことなかったけど、そういわれると便利ですね。

小室 :　はい、そうですね。あとバリアブルも便利ですね。必要な色とかサイズとかいわゆるデザイントークンと呼ばれるものを変数として管理して一覧できるんですけれど、それだけじゃなくて１つの変数に対してエイリアスを作ったり、ライトモードのときはこの色で、ダークモードのときはこの色、みたいにモードによって変数の内容を変えたりもできるんですよね。

加藤 : これ、開発者からするとかなり親近感があるというか、分かりやすいし、そういう設定があるからCSSの出力とかも楽にできるんだろうなーって思うんですけど、一方で、デザイナーさんからするとちょっとシステマチック過ぎるんじゃないかな？って思ったりしていて、小室さん的にはそうは感じたりしないですか？

小室 : そうですね…どうでしょう。私自身はどっちかというと業務アプリのデザインを担当することが多いので、あまり色を使いすぎないように、アクセントカラーも一色でどうにかする、みたいな、そういう工夫が必要な案件が多いんですよね。なので、そういう意味では個人的には理論立ててデザインする方があってるかなーと感じるので、すごくよいかなと思います。

加藤 : なるほどねーたしかに。そういう意味では制約があったうえでのデザインのほうが逆にクリエイティブになったりするのかもしれないですね。

小室 : そうですね。あとは一番シンプルなところでいうと、Figmaではアートボードのことを「フレーム」って言うんですけど、フレームを置けるエリアがスゴイ広くなってて、いままで以上にアイデアの発散とかそういうのがスゴイしやすくなったかなーと思います。

加藤 : これ逆に広すぎると、どこに何があるか分からなくなったりはしないんですか？

小室 : 正直たまにあります。笑 でもページを管理する機能とかもあるので、どのページにどのデザインを置くとかそういうのを最初に決めておけばそんなに迷子になることもないのかなと思います。あとFigmaの標準の検索機能がけっこう充実していて、フレームとかコンポーネント名で検索しつつ、テキストだけ探すとか、コンポーネントだけ探すっていうフィルタリングもできるようになっています。

加藤 : へーそれはいいですね。開発してる時もパーツ探すの大変だったりするので、地味にうれしいポイントですね。

はい。ではここからは少し最近のFigmaの話をしようかと思っています。最近と言ってもちょっと前の話になってしまうんですが、年に一度開催されているFigmaのカンファレンスであるFigma Configが6月末に開催されてたんですけど、これ小室さん見ましたか？

小室 : はい。リアルタイムでは見られなかったんですけど、YouTubeでアーカイブが見られたので、キーノートとか気になるところをちょっとずつ見るっていう感じで見ました。

加藤 : うん、私も似たような感じですね。なにかこの機能すごいなー、みたいなアップデートってありました？

小室 : いろいろあったんですけど、まずはやっぱりAIかなと思います。周囲のデザインやテキストの文脈にあったダミーテキストを設定してくれたりするんですけど、デザイン上で使っている言語を一気に翻訳することもできたりして、そういうのがすごい便利だなと思いますね。アップデートが私のところでも来てたので試してみてたんですけど、右から左に流れる言語に翻訳すると、リストのビュレットの位置が右側に移動したりしたので、その辺も考慮してくれるみたいですね。

加藤 : たしかにただテキストを翻訳するだけだったら技術としての真新しさはそんなにないかなって感じてたんですけど、見た目への影響も考慮してくれるのはやっぱりすごいですね。

小室 : そうですね。あとは画像の生成とかももちろん、すでにある画像の背景だけを削除したり、最初に少し話しをしていたオートレイアウトを自動で全部設定してくれたり、あとはレイヤー名を全部自動でいい感じにしてくれたりとか、アセットの検索面も強化されてる印象でした。見た目に関するところだけじゃなくてファイル全体を整理するところの機能も充実しているかなと思います。

加藤 : うん、まさにAIアシスタントっぽくていいですね。

小室 : デザインを開発者に連携するためにデザインを作った後に整理するっていうところがけっこうめんどうだったりするのでそのあたりやってくれるのはありがたいなと思いました。

加藤 : あとはデザイナーと開発者の連携に関するアップデートとかはどうですかね？Figmaは最初からそのあたり力を入れている印象が個人的にはあるんですけど。

小室 : そうですね。ハンドオフに関する動画も公開されていました。Figmaではデザインがコーディングの準備ができている状態なのかを示すことができるんですけれども、デザイン上にアノテーションを残しておくと、ステータスを開発準備完了に変更したときに、アノテーションが一覧で分かりやすく表示されるので、デザインのどこに変更があったのかっていうのは探す必要がなくなるみたいですね。

加藤 : うん。やっぱり単なるデザインツールではなくて、コミュニケーションツールも兼ねているような感じがしますよね。

小室 : そうですね。社内だとBacklogとかTeamsも使っているので、他にもコミュニケーションツールが増えると混乱することもありそうだなーと思っているので、そのあたりはきちんと最初のほうに使い分けを決めておくといいかもなと思います。

加藤: なるほど。たしかにそうですね。

はい。今日はUX事業部から小室さんをゲストにお呼びしてFigmaを使ってみての印象などを聞いてみました。けっこういいことばかり話していたんですけど、小室さん的に物足りないなーと思うところはないんですか？

小室 : んーそうですね、今のところはないかなという感じです笑

加藤 : おーそうなんですね。それはすごい。じゃ、代わりに、今回の感想とかあればお願いします！

小室 : はい。Figmaは本当に便利なので是非みなさん使ってください！作業が簡単になる＝作業時間が短縮されるっていう感じなので、その浮いた時間を調査とかアイデアの検討に充てられるようになるかなと思います。そうすれば自ずとより良い成果物が生まれていくんじゃないかなと思いますので、みなさんぜひ良いもの作っていきましょう！今回はありがとうございました！

加藤 : はい！ありがとうございました！またお呼びするのでその時はぜひよろしくお願いします！最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。

また、このPodcastはApple Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。 「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどお待ちしております。それでは今日はこの辺で！ありがとうございましたー！

小室 : ありがとうございました！