2022/09/09

目次

こんにちは。デザイナーの野川です。

私は都内の美術大学を卒業後、WEBデザインコーダーとして1年半ほど働き、2021年12月にWEDに2人目のデザイナーとしてジョインしました。

WEDと出会うまでは、恥ずかしながらFigmaを使ったことが1度しか無く（Adobe XD を使っていたため）、アプリの知識もほとんどありませんでした。

そのため内定承諾後、先輩デザイナーの亀谷さんから、UIとFigmaの勉強を兼ねた「FigmaでのアプリのUIトレース」をしてくるよう課題をもらいました。

驚いたのが、それを亀谷さんに提出した時のリアクション。「こんなに作り込んで持ってくるとは思わなかった！」「Figmaってこんなに動くの！？」と目を丸くして言われました。UI内の細かいアイコンまで、Figma上でパスを打って描いていたことにも驚いたそうです。どうやら自分の作ったものは想像以上に価値のあるものだったらしい、ということを知りました。

「もっとチームにとって価値のあることをしたい」「もっとスキルアップしてメンバーを驚かせたい」と思い、その後も月に2つずつほどのペースで、下の動画のようなUIトレースを作成し続けています。

UIトレースで得たデザイン知識やFigmaスキルは、アプリの「プロトタイプ作成」にとても役立っています。

「プロトタイプ作成」という言葉を載せましたが、「プロトタイプ」という言葉は、美大生時代に散々使ってきた言葉でした。卒業制作の作品は、完成させるまでに10個以上のプロトタイプを作ったと思います。

プロトタイプを作成して、使ってもらって、意見をもらう。そしてブラッシュアップしたプロトタイプを作成して、使ってもらって、意見をもらう。これを残された時間の中で何回繰り返せるかが勝負。

誰かに使ってもらうためのツールを制作していたため、自分の仮定や憶測上だけでは完結できないものづくりでした。そのため、まずはプロトタイプを作成しないと先に進めなかったのです。

しかし、単純にたくさんのプロトタイプを作れば完成品が良いものになるわけではなく、質の良いプロトタイプを作ることがポイント。

私の思う「質の良いプロトタイプ」とは、簡単に言うと「機能するプロトタイプ」です。

美大生時代に教授から学び、それ以来意識しているのが「MVP」という言葉。「Minimum Viable Product（実用最小限の製品）」の略で、プロトタイプ作成のヒントを秘めています。

例えば、車を作りたい！となった時に、車輪を完璧に作ることから始めるより、スケートボードを作ることから始める方が正しい、というような考え方です。車輪は車輪だけではユーザーにとって価値がありませんが、スケートボードになれば価値を持ちます。車輪は、移動手段となって初めてユーザーが価値を感じるのです。

教授は「1箇所を作り込んでいく前に、まずは雑でも良いから、機能するものを作ってね」と教えてくれました。

「こんなに動くプロトタイプを見るのは初めて！」とエンジニアの方に言われたのは、入社して半年ほどの頃。

後に2022年7月にオープンする「ONEモール」のデザインFIXまであと残りわずからしいと知った頃、Figmaのデザインにほとんど動きがつけられていなかったため、「プロトタイプの作り込みをやらせてください」と挙手したことがきっかけでした。

カテゴリを切り替えた際の動きや、ボタンをタップした後の動き、画面遷移のアニメーション、アクションシートが出てくる速さの表現、などの一連の動きをFigma上で再現し、デザイナーやエンジニアに共有したことで、スムーズなデザインブラッシュアップと実装に貢献することができました。

後から知ったことは、Figma上でプロトタイプを作り込むにはそれなりのスキルが必要なため、「どこを押したらどこに行く」という遷移が伝わる程度のものしか作成していないデザイナーが多いらしいということです。

確かに、Figma上でプロトタイプを作り込むのに丸1日つぶれてしまうぐらいには、時間と労力が必要となります。しかし、ユーザーの操作感を実装前に再現・共有できる価値は相当高いものです。

ここで、前述した「MVP」について思い出してみましょう。MVPとは「まずは雑でも良いから、機能するものを作ること」ということだと簡単に説明しましたが、プロトタイプを作成するか否かは、MVPを作れているか否かの判断基準に大きく影響してくるのではないか、と思いました。

私が卒業制作でカードを作ったことを例に取ると、カードのデザインをデザインツールで描くことと、描いたデザインを専用の紙に印刷してモノとしてのカードにすることは、並走するべきです。カードとしてのモノ（プロトタイプ）にならないと「機能」させることができない（MVPが作れていない）からです。

また同じように、Figmaでアプリのデザインを考える過程を例に取ると、1枚1枚のボード上にUIを描いていくことと、ボード内の各所の遷移や動きを線で繋げて「どこを押せばどういう動きをする」というインタラクションを作ることも、並走するべきです。そうしないと、開発前に「機能」を体験できる要素が乏しくなってしまうためです。

この業界に入って個人的に驚いたのが、プロトタイプが「詰めの作業の1つ」として捉わられがちだということです。本来は、描くこととプロトタイプを作成することはセットであることが理想だと思います。

社会人になってものづくりをしていると、学生の頃よりたくさんの人やリソースが必要になってきて、お互いに連携を取るのが難しくなったり、やることが多くて忙しくなってしまったりします。そうするとますます「プロトタイプを作る暇は無い」となってしまうかもしれません。

しかし、こういうところで丁寧な過程を経て作ることに価値があり、より良いクリエイティブを生み出せるきっかけになると思います。

これを徹底できるデザインプロセスをWEDは目指しています。

トップに戻る