デザインをコードへ変換したいと思ったら？

Web ページ、Android アプリ、iOS アプリのいずれを作成する場合でも、従来のデザイナーの多くは、Adobe XD、Figma、Invision、Photoshop などのツールを使って静的な画像を作成することから作業を始めます。ただ、そのデザインは見た目には美しいかもしれませんが、プロダクションレディにはほど遠いものです。

デザイン段階の後は、デベロッパーとテスターに、コンポーネントが互いにどのように対応しているかを示すインタラクションを追加する必要があります。そして静的な画像や時間のかかるインタラクティブなプロトタイプを、デザインをコードに変換するデベロッパーに託します。

そしては、デザインにコードベースの手法を取ることで、この退屈なプロセスを超える時です。画像ベースのデザインにインタラクションだけを追加するという課題について考えてみると、ユーザーに気に入られる製品を作成するためのより良い方法がチームに必要であることがすぐに明らかになります。

UXPin Mergeを使えば、デザインとコードのギャップを完全に埋めることができます。UXPin Merge は、React や Storybook、npm コンポーネントを UXPin のデザインエディタにインポートして、高忠実度のプロトタイプと高品質なユーザビリティテストを実現する「Code-to Design（コードからデザインへ）」のテクノロジーです。こちらのページから UXPin Mergeをぜひご覧ください。

デザインをコードに変換する際の課題

「Design-to-Code（デザインからコードへ）」の手法では、人気のあるデジタル製品を作るのに以下のような必要以上のステップが発生します。：

製品や機能にするためのアイデア出し
デザインチームへのアイデアの伝達
デザインチームの作業のレビューおよびフィードバック
デザイナーは、デザインツールに高度なインタラクションを追加する限られた可能性に悩む
プロトタイプの矛盾を解消するための、デザイナーとデベロッパーの間での多数のやり取り
製品が当初のビジョンを満たすまでの更なる微調整

このようなステップを完了するには、数週間から数ヶ月かかることもあり、Avocode や Anima のようなツールを使って PSD や Figma などのデザインをコードに変換する場合でも、インタラクションが全てデザインどおりに機能することを確認するために、絶え間ないプロトタイプと製品のテストが必要です。

ちなみに Avocode と Anima はデザインをコードに変換することしかできないため、不必要なステップに対処する必要があります。また、コードの手法を最初に開始するプロトタイプ段階でコードコンポーネントを使用できる設計環境は提供されていません。

「Design-to-Code（デザインからコードへ）」のハンドオフは時間とコストがかかる

当然のことながら、プロダクトマネージャー、デザイナー、デベロッパーの間で作業を受け渡すプロセスがだらだらと行われれば、すぐに高額になります。ちなみに米国では、準学士号を持つWebサイトデベロッパーの時給は約３５.４６ドルします。開発とプロトタイプに時間がかかればかかるほど、製品を市場に出すためのコストは高くなります。

コードベースのデザインがなければ、そのプロセスは常に後戻りし、ステップを繰り返すことになります。「Deisgn-to-Code（デザインからコードへ）」のハンドオフのプロセスが時間とコストの無駄であることは明らかです。

人気 Web サイトデザイナーであるマシュー・ストーム氏は、静的な画像から始めるのではなく、コードを使ってデザインすることでプロセスを効率化できることに気づきました。WSJ.マガジンの新しいホームページを制作していたとき、彼は、ベクター優先型の手法をとるよりも、コードを使って作業するほうが、よりわかりやすく、やりがいがあることがわかりました。彼は、より多くの画像を作成するにつれて、以前のプロセスが遅くなることを発見したのです。

ありがたいことに、ストローム氏は、全ステップでデザインツールに頼ることなく、複雑なホームページを構築するのに十分なコードを知っていますが、残念ながら、その経験があってコードからデジタル製品を作るデザイナーはほとんどいません。

コードベースのデザインがないと、プロトタイプの機能が損なわれる

デザイナーに基本的なコードを学ぶよう促すことで、デザインから開発までのプロセスを少し改善することができます。HTML と CSS の基礎を知ることで、デザイナーはデベロッパーのニーズを予測するのに役立つ共通の理解を得ることができます。

デザイナーがフロントエンドの JavaScript や Ajax を知っていれば、静的なデザインをインタラクティブなコンポーネントに変えるのに、デベロッパーがどれくらいの作業を要するかがわかるため、プロセスはさらに良くなります。

また、コーディングの経験で、デザイナーは開発の限界を理解することもできます。例えばグラフィックデザイナーに、デベロッパーができることとできないことの基本的な理解があると、大きな違いが生まれます。

ただ、「Code-to-Design（コードからデザインへ）」のアプローチは、デザイナーがそのすべてを知っていなければならないということではありません。デベロッパーが UI のコードコンポーネントを保存しているレポジトリとデザインツールのエディタを同期させれば十分で、デザイナーは制作可能なパーツをデザインに使用することができます。それでより速くなるだけでなく、デザインの規準との整合性も挙がり、そのおかげで、製品開発プロセス全体におけるレビューと繰り返しの段階を全て回避できます。

デザインにコードベースの手法がなければ、予想通りに機能しないプロトタイプができあがり、必然的にさらに多くのリソースを浪費することになるのです。