デザインから コードに変換 するには？
WebページやAndroid アプリ、iOSアプリのいずれを作成する場合でも、多くのデザイナーは Adobe XD や Figma、あるいはPhotoshopなどのツールを使って静的な画像を作成することから作業開始するのではないでしょうか。
デザインの見た目は美しく見えるかもしれませんが、それがコードに変換できる状態には至っていません。
デザイン段階の後、デザイナーは、各UI要素が「どのように機能するのか」や「どのようなアフォーダンスを考慮する必要があるのか」、また「最終的に表示されるその他のアニメーション」をデベロッパーとテスターに表すことができるインタラクションを追加する必要があります。
そして、デザイナーがそのプロトタイプをデベロッパーに渡し、デベロッパーがデザインをコードに変換して、意見のやり取りが始まります。
通常だとこのプロセスは煩雑になりやすいのですが、コードベースのデザイン手法を取り入れることで、このプロセスを乗り越えることができます。
インタラクションを伝えるためにベクターベースのデザインをアニメーション化したり、注釈を付けたりする時間の浪費を考えてみると、デザインチームがユーザーに気に入られる製品を作るためのより良い方法が必要なことは明らかです。
UXPin Mergeを使って、デザインとコードのギャップを埋めましょう。コード化されたデザインシステムを UXPinのデザインエディタに取り込み、高忠実度（Hi-Fi）のプロトタイプと質の高いユーザビリティテストが実現します。こちらからUXPin Merge をぜひご覧ください。
「デザインからコード（Design-to-Code）」とは
「デザインからコード（Design-to-Code）」とは、デザイナーが作成したデザインモックアップやプロトタイプを、デベロッパーが機能的なUI（ユーザーインターフェース）を作成するのに実装できる実際のコードに変換するプロセスです。
このプロセスでは、グラフィカル要素、レイアウト構造、インタラクションデザイン、その他のビジュアルコンポーネントを、Webブラウザやその他のプラットフォームで解釈可能なHTMLや CSS、場合によってはJavaScriptコードに変換します。
「デザインからコード（Design-to-Code）」は、デザインチームと開発チームの橋渡しをする、製品開発ライフサイクルの重要なステップであり、製品やアプリケーションの視覚的でインタラクティブな面が、最終的な実装において正確に表現されていることを保証するものです。
このプロセスでは、技術的な制約や要件に対応しながら、デザインの意図を確実に維持するために、多くの場合はデザイナーとデベロッパーが協力し合います。
デザインをコードに変換する際の課題
「デザインからコード」のアプローチだと、広く使われているデジタル製品を作成するのに必要な手順よりも多くの手順が必要になり、プロトタイプをコードに変換するプロセスは、おそらく以下のような領域に影響します：
- アイデア出しと製品開発 – 製品や機能なるようなアイデアを出す。
- デザイン構想 – デザインチームにアイデアを伝える。
- デザインレビューとフィードバック – デザインチームの仕事をレビューし、フィードバックを与える。
- ツールの限界 – デザイナーは、デザインツールに高度なインタラクションを追加する可能性が限られているという壁にぶち当たる。
- コミュニケーション – デザイナーとデベロッパーの間で何度もやり取りをすることで、プロトタイプの不一致を滑らかにしようと努める。
- 反復的改良 – 製品が当初のビジョンを満たすまで、微調整を多少加える。
このステップを完了するには、数週間から数ヶ月かかることもあります。Avocode や Anima のようなツールを使って PSD や Figma などのデザインをコードに変換する場合でも、インタラクションが全て設計どおりに機能することを確認するために、絶え間ないプロトタイプと製品のテストが必要です。
Avocode と Anima はデザインをコードに変換することしかできないため、不要なステップへの対処が必要です。また、Avocode や Anima は、デザインをコードに変換することしかできないため、プロトタイプの段階でコードコンポーネントを使えるデザイン環境がありません。
「デザインからコードへ」のハンドオフが時間とコストを食う
当然のことながら、プロダクトマネージャーやデザイナー、デベロッパーの間で仕事を受け渡すプロセスが色々とあると、すぐに高額になります。米国では、準学士号を持つ Web サイトデベロッパーの時給は約３５.４６ドル（２９.５ユーロ）であり、開発とプロトタイプに時間がかかればかかるほど、製品を市場に出すためのコストは上がります。
ただし、コードベースのデザインがなければ、プロセスは常に後戻りしてステップを繰り返すことになるでしょう。 そうなると「デザインからコードへ」のハンドオフのプロセスで時間とお金が無駄になっているのは明らかです。
人気のWeb サイトデザイナーであるマシュー・ストロム氏は、静的な画像から始めるのではなく、コードを使ってデザインすることでプロセスを効率化できることに気づきました。
彼は WSJ マガジンの新しいホームページを構築しているときに、コードを扱う方が、ベクトル優先のアプローチをとるよりも簡単でやりがいのあることが多いことがわかったのです。そして彼は、より多くのイメージを作成するにつれて、古いプロセスだと遅くなることを発見しました。
幸いストロム氏は、各ステップでデザインツールに頼ることなく、複雑なホームページを構築するのに十分なコードを知っていますが、残念ながら、コードからデジタル製品を作る経験があるデザイナーはほとんどいません。
コードベースのデザインがないと、プロトタイプの機能が損なわれる
デザイナーに基本的なコードを学ぶよう促すことで、デザインから開発までのプロセスを少し改善することができます。例えばHTML とCSS の基礎を知ることで、デザイナーは デベロッパーのニーズを予測するのに役立つ共通の理解を得ることができます。
デザイナーがフロントエンドの JavaScript や Ajax を知っていれば、デベロッパーがどのくらい手をかけて静的なデザインをインタラクティブなコンポーネントに変ええるのかを知ることができるため、プロセスはさらに改善します。
また、コーディングの経験で、デザイナーは開発の限界を理解することもできます。例えばグラフィックデザイナーが、デベロッパーができることとできないことを基本的に理解をしていると、そこに大きな違いが生まれます。
ただ、「コードからデザイン（Code-to-Design）」のアプローチは、デザイナーがそれを全て把握しておかないといけないということではありません。UIコードコンポーネントが保存されているデベロッパーのレポジトリをデザインツールのエディタと同期するだけで十分です。これにより、デザイナーは実稼働対応のパーツをデザイン内で使えるようになり、速くなるだけでなく、デザイン標準との整合性も大幅に上がります。 そしてそのおかげで、製品開発プロセス全体におけるすべての「レビューと繰り返し」の段階を回避できます。
デザインにコードベースのアプローチがないと、予想通りに機能しないプロトタイプができあがり、必然的にさらに多くのリソースを無駄にしてしまうことになります。
コード生成に基づくデザインツールで、デザインとプロトタイプがしやすくなる
UIコードコンポーネントをデザインライブラリにインポートできるツールは、画像をコードに変換するものよりもはるかに効率的です。
UXPin Merge だと、誰でも共通言語が使えることによって、デザイナーとデベロッパーの間のギャップが埋まります。 また、簡単にまとめられたチュートリアルでは、デザイナーが Merge テクノロジーを通じて既存のReact コンポーネントをUXPinのエディタにインポートする方法が示されています。
UI コードコンポーネントでワークフローを改善する
デベロッパーは、画像ベースのデザインを解釈してアイデアをコード化する代わりに、ライブラリからデザインに使われたコンポーネントを取り出すだけで、すぐに使える製品を作ることができます。
また、コードを活用したプロトタイプはすでに最終製品と同様に動作するため、追加のレビューを設ける必要はありません。デベロッパーの作業の結果は、デザイナーの作業に対してピクセル単位で完璧になります。
おすすめ記事：コードを学ぶ事なくコードベースデザイナーになる方法
完全に機能するプロトタイプを使って、UI とインタラクティブなデザイン要素をテストする
プロトタイプをリリースできる製品に仕上げる前に、プロジェクトマネージャーの仕様を満たす必要があります。
また、UXPin Merge で、チームメンバーは開発プロセスにコミットする前に、インタラクティブコンポーネントの機能をテストする機会を得られます。
ただ、UXPin Mergeでは、プロトタイプと最終製品の違いを見分けるのが難しいことがよくあります。これは、デジタル製品をコードで構築して、実際のデータを使ってインタラクションをテストする場合に、初期テストがいかに強力になるかということですね。
コードベースのデザインとプロトタイプのためのUXPin Merge へのアクセスをリクエストしよう
デザイン優先型の視点から製品を構築する退屈なプロセスを続ける必要はありません。Merge の技術を使って UXPin へのアクセスをリクエストすることで、市場投入プロセスの短縮、部門間の連携の改善、デザインのコントロールを実現しましょう。
