🏮

デザインをコードに変換したいと思った時の方法

2021/05/10に公開

UI/UX

code

teamwork

idea

(原文) Want to Convert Design To Code? Here’s A Better Way

Webページ、Androidアプリ、iOSアプリなど、従来のデザイナーの多くは、Adobe XD、Figma、Invision、Photoshopなどのツールを使って静的な画像を作成することから仕事を始めます。このようなデザインは、見た目には美しいかもしれませんが、制作に適しているとは言えません。

デザイン段階の後は、開発者やテスターにコンポーネントの対応関係を示すインタラクションを追加する必要があります。そして、静的な画像や、時間のかかるインタラクティブなプロトタイプを、デザインをコードに変換する開発者に渡します。

今こそ、この退屈なプロセスから脱却し、コードベースのアプローチでデザインを行うべきなのです。イメージベースのデザインの課題を考え、さらにインタラクションを追加してみると、ユーザーに愛される製品を作るためのより良い方法が必要であることがすぐにわかります。

デザイン・ファースト・プロトタイピングの課題

デザインファーストのプロトタイピングでは、人気のあるデジタル製品を作るために必要な手順よりも多くのステップが必要になります。そのプロセスにはおそらく...

製品や機能にするためのアイデアを考える。
デザインチームにアイデアを伝える。
デザインチームの作業を確認し、フィードバックを与える。
デザイナーは、デザインツールで高度なインタラクションを追加するための限られた可能性に悩んでいます。
デザイナーと開発者のコミュニケーションでは、プロトタイプの不整合を解消するために、何度もやりとりが行われています。

当初のビジョンを満たす製品になるまで、いくつかの微調整を加える。

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

また、AvocodeやAnimaはデザインをコードに変換するだけなので、余計なステップが必要になります。AvocodeやAnimaは、デザインをコードに変換するだけで、プロトタイピングの段階でコード・コンポーネントを使用して、最初にコード・アプローチを開始できるようなデザイン環境を提供していません。

デザインからコードへのハンドオフは時間とコストの無駄

当然のことながら、プロダクトマネージャー、デザイナー、開発者の間で仕事をやりとりする蛇行したプロセスは、すぐにコストがかかります。米国では、準学士号を取得したWebサイト開発者の時給は約35.46ドル（29.5ユーロ）と言われています。開発やプロトタイプの作成に時間がかかればかかるほど、製品を市場に投入するためのコストは増加します。

しかし、コードベースのデザインがなければ、そのプロセスは常に後戻りし、ステップを繰り返すことになります。デザインからコードへの移行が、時間とコストの無駄になることは明らかです。

人気のウェブサイトデザイナーであるMatthew Strom氏は、静的な画像から始めるのではなく、コードを使ってデザインすることでプロセスを効率化できることに気づきました。WSJ.Magazineの新しいホームページを制作していたときのことです。Magazineの新しいホームページを制作しているときに、コードを使って作業するほうが、ベクターファーストのアプローチよりも簡単でやりがいがあることに気づきました。しかし、画像の数が増えてくると、従来の方法では動作が重くなることがわかりました。

ありがたいことに、ストーム氏は複雑なホームページをデザインツールに頼らずに作成できるだけのコードを知っています。しかし残念ながら、コードからデジタル製品を作れる経験を持つデザイナーはほとんどいません。

コードベースのデザインではプロトタイプの機能性が損なわれる

デザイナーに基本的なコードを学ばせることで、デザインから開発までのプロセスを少し改善することができます。HTMLとCSSの基礎を知ることで、デザイナーは共通の理解を得て、開発者のニーズを予測することができます。また、デザイナーがフロントエンドのJavaScriptやAjaxを知っていると、静的なデザインをインタラクティブなコンポーネントにするのに、開発者がどれだけの作業を必要とするかを知ることができ、プロセスがさらに良くなります。

コーディングの経験は、デザイナーが開発の限界を理解するのにも役立ちます。グラフィックデザイナーが、開発者にできることとできないことを基本的に理解しているかどうかで、大きな違いが生まれます。

しかし、コードからデザインへのアプローチは、デザイナーがそのすべてを知らなければならないということではありません。開発者がUIコードの部品を保管しているリポジトリとデザインツールのエディタを同期させ、デザイナーが製品化可能な部品をデザインに使用できるようにするだけで十分なのです。これにより、スピードが向上するだけでなく、デザイン標準との整合性も高まります。これにより、製品開発プロセス全体におけるレビューや繰り返しの段階を回避することができます。

コードベースのアプローチで設計しないと、期待通りに機能しないプロトタイプができてしまい、必然的にリソースをさらに浪費することになってしまいます。

コード生成ベースのデザインツールで、デザインとプロトタイピングを容易にする

UIコードコンポーネントをデザインライブラリにインポートできるツールは、画像をコードに変換するツールよりもはるかに効率的です。UXPin Mergeは、すべての人に共通の言語を与えることで、デザイナーと開発者の間のギャップを埋めます。簡単なチュートリアルでは、デザイナーがMerge技術を使って既存のReactコンポーネントをUXPinのエディタにインポートする方法を紹介しています。

UIコードコンポーネントによるワークフローの改善
開発者は、画像ベースのデザインを解釈してコードに変換するのではなく、デザインに使用されたコンポーネントをライブラリから取り出して、すぐに製品を作ることができます。

コード化されたプロトタイプはすでに最終製品のように動作するため、追加のレビューステップは必要ありません。開発者の作業の結果は、デザイナーの作業と同様にピクセル単位で完璧になります。

おすすめの記事: コードを学ばなくても、コードベースのデザイナーになれる

ユーザーインターフェースやインタラクティブなデザイン要素を、完全に機能するプロトタイプでテストする
プロトタイプをリリースできる製品に仕上げるためには、プロジェクトマネージャーの仕様を満たす必要があります。UXPin Mergeは、開発プロセスに着手する前に、インタラクティブなコンポーネントの機能をテストする機会をチームメンバーに提供します。しかし、UXPin Mergeでは、プロトタイプと最終製品の違いを見分けるのが難しい場合があります。デジタル製品をコードで構築し、実際のデータを使用してインタラクションをテストする場合、初期テストがいかに強力になるかということです。

コードベースのデザインとプロトタイピングのためのUXPin Mergeへのアクセスをリクエストする

デザインファーストの観点から製品を構築する退屈なプロセスを続ける必要はありません。UXPinとMergeテクノロジーへのアクセスをリクエストすることで、市場投入までのプロセスを短縮し、部門間のコラボレーションを改善し、デザインをコントロールすることができます。