見出し画像

デザナレ展 vol.2| 優れたチームのすごいラフを一挙公開!リアルで見知れるデザイン展に登壇しました

みなさんこんにちは!BASE株式会社の渡邊です。先日開催された、「デザナレ展 vol.2| 優れたチームのすごいラフを一挙公開!リアルで見知れるデザイン展」に登壇させていただきました。

自身にとって初の大きな登壇経験だったのですが、無事発表できて良かったです...。今回はその様子をここで少しご紹介したいと思います。

Figmaを活用した、状況に応じたラフの作り方


めっちゃ緊張してる私(タイトル噛んじゃった)

今回私がお話ししたテーマは、『「ラフ=手書き」じゃなくてもいい!状況に応じて工夫するラフの作り方』です。具体的には

  • ラフを書く目的は色々あるけど、私の場合は「最初の議論を始めるための土台として使うため」

  • Figmaを使えば爆速でラフが書けて議論が進むけど、0から作ることや作って壊すことを躊躇わないなど気を付けること

  • 状況に応じてラフの書き方のアプローチを変えてもいいと思う

  • FigmaのComponent Propertiesを使って複雑なパラメータを整理しつつ、WEBデザインとUIのラフを同時進行する!という試み

などについて解説しました。

実はこの登壇内容の大枠は以前ブログにも書いています。気になる方はぜひ読んでみてください!

ただこのブログ、少々難解で文章だけではうまく伝わっているかわからず.... 登壇ではデモデータを用いて、なるべくわかりやすく私のデザインプロセスを紹介できるように工夫しました。結果、会場のみなさんがとても興味深く聞いてくれて、とても嬉しかったです!

BASEブースでの熱いデザイントーク!

Figmaデータの作り方について早口で解説する私

登壇後は、BASEのブースで2時間ほど、様々な方々とお話しする機会を得ました。時間があっという間に過ぎてゆき、ぶっ続けで会話・解説し続けていたので流石に大変でした…。しかし、デザインデータやUIデザインプロセスについて社外のたくさんの方と熱く語れる機会はそうそうないので、非常に楽しかったです!

ブースでのやりとりで多く話したトピックをいくつか紹介します。

「ラフを書いた後の議論はどんなものになるの?」

登壇では「とにかく爆速でたくさんラフを書いて、はやく議論をはじめよう!」ということを訴えていたのですが、その議論の内容はどんな感じ?という質問がありました。

私の場合はですが、開発に関わるエンジニア、PMを含めた全員を集め、時間をとって「こんな感じのを作れたらいいですよね」というノリで軽くシェアをしています。その後すぐに「ここはどうなる?こういう場合は?こうしたら?」といったFBをいただけるので、それを取り入れてさらにすぐリアルタイムでラフを修正して...。という非常にカジュアルな議論から始めています。

今回のメイン画像機能のWEBデザイン側の意思決定は、デザイナーの好みに左右されてしまわないよう外部のリサーチ会社に依頼して、たくさんのバリエーションのラフからより多くのショップオーナーさんが作りたいと選んだレイアウトを採用する形をとりました。

「Component、ボタンとかの一番小さい単位でしか使ってなかった!入れ子形式で差分を作るって使い方はなかった」

わかりますわかります!元々私も「そういう機能なんだろうな」と思っていたのですが、Nested Instanceができてからはガシガシblockごとの差分も1つのcomponentにして、入れ子形式にしています。

Figmaのアプデによって、プロトタイプやvariablesが強化されたぶん、今後はよりエンジニア的な考え方でデザインデータを作る必要があるんだろうな〜と思っています。

デザインの課題感(特にFigma)と解決策

上記で紹介したトピック以外で多かったものがこちら。

「Figmaってどうやって勉強するんですか?」

いや〜難しいですよね...バンバンアップデートされてどんどん便利になる反面、そのスピードについていくのは日々の業務の中でこなすにはちょっと大変だと思います。 私個人はFigmaが趣味というか、新しい機能を覚えることに喜びを感じるタイプなので、遊び感覚でplaygroundを夜通し触るというパワープレイで習得してしまっています…。

もちろん他のデザイナーに同じことをしろ!とは言えないので、習得したあとにワークショップを行うなどして、チーム全体のスキルの底上げを図っています。

ワークショップの内容については、こちらのブログでも紹介しています。

とはいえ私自身、Figma大好き人間でありながらも、まだ最新の機能アップデートを完全に理解したとは言えません...。

ただ、Figmaの潜在能力をフルに活用することで、複雑すぎて無意識に諦めてしまっていたアイデアを容易に図像化できたり、エンジニアとの協働がより円滑になる、というメリットがあることは確信しています。勉強したぶんだけ、毎日の仕事にとって絶対的な強みになる!と思って、一緒にFigmaマスターを目指しましょう!

とにかくブースで感じたのは、Figmaデータの作成やデザインラフの書き方、進め方について、どこの会社でも多かれ少なかれ悩みを抱えているということ。我々デザイナーの日々の課題について共感できる経験ができました。

とはいえ解決策について、すべてをブログやオンラインで話すわけにもいかないですよね。対面でそういった課題について、顔を合わせてぶっちゃけることができるのは、オフラインイベントならではの利点だなあと改めて実感しました。私たちのブースでの対話を通じて、皆さんの課題解決のヒントを得られていたらとっても嬉しいです!

私たちと一緒に働いてみませんか?

最後に、弊社では現在新たな仲間を募集中です。UIUXデザイナーとしてのスキルを活かし、一緒にむずかしいことをかんたんにしましょう!詳細は以下のURLからご覧いただけます。お気軽にご覧いただければ幸いです。

今後も皆さんに役立つ情報をシェアできるようにがんばります!どうぞよろしくお願いいたします!


この記事が気に入ったらサポートをしてみませんか?