雑感：Opening Keynote - Conference Kickoff - Sho Kuwamoto (Schema 2021)
はじめに
Figmaのプロダクト・ディレクターであるSho Kuwamotoさんの基調講演を聞いた雑感です。本講演はデザインシステムのを取り巻く歴史やツールを題材に、システムデザイナーがより良く包括的な未来を創造するために何ができるかの？というものでした。
講演のあらすじ
1982年にアドビが開発したPostscriptは、プログラムのように命令を記述することによって、文字や画像の配置、色、線の太さ、グラデーションなどのグラフィック表現を可能にしました。
1987年にはIllustrator 1.0が発表され、プログラムを書くことなくフリーフォームでのグラフィック表現が可能となり、より自由な表現が可能となりました。
PostscriptとIllustratorの関係と同様に、HTMLコーディングの代替として、Dreamweaverによる直感的なGUIが登場しました。
Dreamweaverで描いたWebサイトをコーディングし、コーディング側の修正をDreamweaverに反映するといった可逆的なプロセスが見込めました。
ところが、多くのデザイナーがDreamweaverを使わずにPhotoshopを使ってデザインしたことにより、想定していたDreamweaver→コーディングというプロセスには大きな溝が生まれました。
その溝を埋める役割をDreamweaverに与え、Photoshopを使うフェーズをフリーフォームデザイン、Dreamweaverを使うフェーズを構造化デザインと定義しました。
この設計思想を取り入れたものがFigmaであり、Figmaはフリーフォームデザインフェーズと構造化デザインフェーズを繋げることができます。また、構造化デザインフェーズとコーディングフェーズを繋げるものがデザインシステムです。
雑感
このモデルはデザイナーの制作プロセスに似ています。グラフィックデザイナーでもプロダクトデザイナーでも、最初は自由な発想でアイデアを出し、次第にアイデアを絞り込み、アウトプットの完成度を高めていきます。つまり、フリーフォームデザインを構造化するアプローチは、ツールを使ったデザイニングだけでなく、デザイン全般の制作プロセスにおいても当てはめることができます。
講演ではフリーフォームデザインを右脳的、構造化デザインを左脳的とも表現しています。最近のUIデザインは、人間中心設計やデザインシステムなどの台頭により右脳的アプローチでロジカル＆システマチックに詰めていくことが多い気がします。しかし、UIはもっとグラフィカルでアーティスティックなものであるべきというのが持論です。使いやすさを無視したデザインを良しとしているわけではありません。右脳的アプローチと左脳的アプローチをバランスよく取り入れることが大事だと思っています。
たとえば、Dribbbleに公開されているUIは絵空事で実現性を無視したものばかりと言われますが、これは右脳的アプローチと左脳的アプローチを混同して見ているからです。Dribbbleは右脳的アプローチのひとつでしかありません。一方で、ユーザーインタビューやユーザビリティテストの結果をそのまま実装してしまうと、そこにクリエイティビティはあるのか？という議論もあります。これに関しても、テストやインタビューは左脳的アプローチのひとつに過ぎないと捉えています。
大事なのは、右脳的アプローチと左脳的アプローチをいい塩梅で混ぜながらデザイニングすることで、それが今のUIデザイナーに求められていることです。そしてそれを可能にするのがFigmaなわけです。
Figmaはブラウザベースでの共同作業に特化しており、また膨大なプラグインによる自由度の高いカスタマイズも可能で、いい意味でごちゃごちゃしています。この「ごちゃごちゃ感」こそがフリーフォーム的なんだと思います。また、FigmaにはFigJamというオンラインホワイトボードツールがあります。これもアイデアをごちゃごちゃさせるにはもってこいのツールです。
一方で、Figmaはコンポーネントの操作性やプロパティパネルがとても良いので、ごちゃごちゃしたものを整然と管理させ、デザインシステムを構築すること（つまりフリーフォームデザインを構造化させること）も得意です。さらにCSSの書き出しも対応しているので、コーディングへの橋渡しもできるわけです。
おわりに
講演はこのように締めくくられています（意訳気味）。
デザインシステムのあり方をより良くしていくためには、ひとりひとりのデザイナーがデザインシステムをアップデートし、仲間や世界と共有することが重要です。
デザインシステムの意義は、デザイン思想をエンジニアに伝えることで、デザイナーの意図を正確に実装することだと思っていますが、もう少し抽象的で有機的に「デザイナーからの手紙」くらいのニュアンスでいいのかなと感じました。右脳的なフリーフォームデザインと左脳的な構造化デザインを明確に区別するのではなく、右脳と左脳の間のグラデーションの海を行ったり来たりする方が、デザイナーらしいというか楽しいよなと思っています。
Figmaに出来ることのほとんどはXDやSketchなどでも出来るはずですが、なぜFigmaが世界No1のシェアと多くのファンを獲得したのか？最近はサステナブルやエシカルな企業が好まれる傾向にあることからも、ユーザーの意識がプロダクトや企業の内面的な価値に向いているのは明らかです。FigmaのUI史上の課題を解決するような設計思想に、多くのユーザーが共感したのかもしれません。
この記事が気に入ったらサポートをしてみませんか？