コードでデザインをするとは？

デザイナーとエンジニアは、顧客のニーズを満たす（優れた製品品質、ユーザーエクスペリエンス）という共通の目的を達成するために協業します。

共通の目的を達成・達成するために効果的に連携するために、デザイナーとエンジニアは互いの規律（できる事・できない事）を理解する必要があります。デザイナーは、コードを書く人にはなれませんが、コーディングの基礎・限界・メリットを理解することは可能です。

建築家が建築物を設計するためには、建築資材を理解しなければならないのと同じで、UXデザイナーも基礎的部分を成すHTML、CSS、Javascript(プロダクトデザインの構成要素)のようなフロントエンドコードを理解しなければなりません。

UXPinのコードベースデザインツールは、デザイナーとエンジニアの間に橋をかけるテクノロジーです。無料トライアルにサインアップをし、コードベースデザインがどれほどUX構築におけるワークフローに革命をもたらすのか（マーケットインへの時間短縮、デザイナーとエンジニアの相互理解の向上など）を体験してみて下さい。

1.デザイナーがコードを理解するメリット

コードを学んだデザイナーは、得るものはあっても失うものはありません。それでは、デザイナーとしてコードを学んだ経験を持つVanessa Jaramilloの例からこれらの利益について考えてみましょう。

（Vanessaは記事の最後の部分で、経験を以下のように概括しています。”デジタルデザイナーは、毎日コーディングスキルを使う必要はありません。つまり、完全なエンジニアになる必要はないのです。しかし、コードの基礎を知ることは、複数の制約がある中でデザインする際に大変役立つのです。”と。）

①エンジニアとのより良い連携

デザイナーがコーディングに関し基礎的な理解がある場合、エンジニアと意義のあるコミュニケーションができます。そうすると、エンジニアはデザイナーへ尊敬の念を抱き、デザインを理解するために努力をするかもしれません。（好循環の連続です。）

デザイナー、プロダクトチーム、エンジニア間でのデザインのハンドオフは非常に厄介なものです。なぜかと言いますと、それぞれが異なる制約の中で、それぞれが異なる言語を使用しているからです。

たとえ基礎でもコード知っていると、デザイナーはエンジニアの制約や限界を理解する事ができ、連携で生じる問題の解決を容易にします。

②開発の制約を理解する

デザイナーがコーディングの方法を知っている場合、制約と問題の解決方法を理解することは簡単です。特に、ハンドオフ後のQAの間は非常にワークします。例えば、仮にブラウザー上で何か不具合が生じた際、デザイナーはHTMLやCSSの構成要素を確認するために、エンジニア用のブラウザツールを使いこなせるでしょう。

技術的な限界を理解する事は、何が可能で不可能か・何を避けるべきかを知る事を意味するため、デザインプロセスにおいて時間の節約になります。

③プロトタイピングの改善

イメージベースのデザインツールやプロトタイピングツールは、コード製品が持つ機能性や忠実性を再現する事はできません。HTMLやCSSを知っているデザイナーは、イメージベースツールを上回る機能的なプロトタイプを構築する事ができます。

UXPinのようなコードベースデザインツールを使えば、デザイナーはコーディングする事なく、最終製品に近い完全に機能的でインタラクティブなプロトタイプを作ることができます。（無料トライアルで体験してみて下さい。）

④あなた自身の価値向上

コードを学ぶことによって、UXデザイナーはより大きな役割・機会を得ることができ、高度人材になることができるでしょう。

2.デザイナーはどのプログラミング言語を学んだら良いでしょうか

基礎

HTMLとCSSは、コードを学び始めたいデザイナーにとって最も良いプログラミング言語でしょう。HTMLはワイヤフレームのイメージに近く、HTMLとCSSの統合はデザインモックアップに相当するものであり、忠実性が高く機能的なものを期待できます。

デザインツールのほとんどのプロパティパネルは、CSSのサイズ、色、間隔、タイポグラフィ、グリッド、シャドウなどです。そのため、これらの言語を理解することで、デザインをコードで視覚化し、理解することができるようになります。さらに、エンジニアとより良いコミュニケーションをとる事もできます。

応用

Javascriptは素晴らしいフロントエンド言語です。学習曲線はやや高いですが、HTMLとCSSをより意義のあるものにします。JavascriptはReact、Vue、Angularなど多くの人気フロントエンドフレームワークの基礎となっています。一方で、フロントエンドフレームワークを学ぶのはかなり難易度が高く、時間もかかるので、デザイナーはコーディングが本当に好きでなければこの道を進む必要はないでしょう。

3.コードを学ぶ事なくコードデザインをする方法

デザイナーがコードを学ぶ主な理由は、よりよりプロトタイプを作る為だと思います。イメージベースで作られたプロトタイプは、忠実性も無く機能的でもありません。そして、細かくUXテストやエラーテストも出来ず、製品化してしますケースが多いのです。

HTML、CSS、Javascriptベースのデザインツールをお探しならば、一度ぜひUXPinを試してみて下さい！

表面上では、UXPinは他のデザインツールと同様の使い方です。しかし、他のデザインツールがベクターグラフィックスを発生させるのに対し、UXPinはHTML、CSS、Javascriptを発生させ、表現するのです。

UXPinは、機能面・検証面・異なるデータのインポート・条件付き形式の適用・インタラクティブ面でプロトタイプの価値をより一層高めます。

Mergeでよりハイレベルなプロトタイプ

リポジトリからコードを同期するUXPin Mergeを使用すると更にハイスピードでプロトタイプができます。Mergeもコードベースデザインであり、最終製品に近い（ほぼ同等）機能や忠実性を持つプロトタイプを実現します。デザイナーは、システムコードコンポーネントをドラッグ＆ドロップするだけで、完全に機能的なプロトタイプを構築できます。また、Mergeは直接React Gitに同期しますし、Vue、Angular、Webコンポーネント、EmberのようなフレームワークにStorybook integrationを使用することもできます。Mergeを使うとデザインプロセスに革命が起こることでしょう。

4.まとめ

コードベースデザインは以下の点であなたのUXワークフローを改善します、

プロトタイプの忠実性向上
開発参加者のフィードバックがより意義にあるものに変化させる
開発スピードの高速化
デザイナーとエンジニアの連携がより良くなる

コーディング思考はデザインプロセスそのものなのです。（教育で言う国語の読解力のようなものであり、どの教科にも必要なスキルなのです。）

それでは、UXPinの14日間無料トライアルにサインアップし、コードベースデザインを体験してみて下さい。