UXデザイナーになるために必要な プログラミング 言語とは？
UXデザイナーやプロダクトデザイナーにとって、何百種類もあるプログラミング言語を理解し、どれを学ぶべきなのかを判断するのは簡単なことではではありません。UXデザイナーの仕事にコードの習得は不可欠ではありませんが、習得すれば技術的な制約がわかり、開発チームとの連携の向上にも繋がります。
本記事では、UI/UXデザイナーのための6つのプログラミング言語と、コーダーがどちらか一方を使う理由を探ります。また、【プログラミング言語】、【フロントエンドフレームワーク】、【コンポーネントライブラリ】の違いと、それらがデザインプロジェクトに与える影響についてもお話します。
当社独自のMergeテクノロジーは、UXPinのコンポーネント駆動型のプロトタイプにより、デザインプロジェクトを次のレベルへと導きます。この革新的な UX テクノロジーへのアクセス方法と詳細については、Merge ページをぜひご覧ください。
プログラミング 言語について
プログラミング 言語は、デベロッパーがウェブサイトやアルゴリズム、デジタル製品を書くのに使うコードであり、各プログラミング言語には、独自のマークアップ、ルール、構造、パッケージ・マネージャなどがあります。
プログラミング言語は何百種類もありますが、製品チームはほとんどそれを目にすることはありません。そこで筆者達は、その中でも必要なプログラミング言語を絞り込み、どこから手をつければいいのかわかるようにしました。
プログラミング 言語が製品開発プロセスに与える影響
プログラミング言語は、製品の技術的な制約を決定し、UX（ユーザーエクスペリエンス）のデザインプロセスを含む製品開発に大きな影響を与えます。
デザインチームがこの制限を理解しなければ、プログラマーが構築できないソリューションや機能をデザインして時間をムダにしてしまうリスクを負うことになります。
さらにプログラミング言語は、以下のような最終的にUXに影響を与える他の製品開発の決定にも影響を及ぼします：
- 市場投入までの時間
- バックエンドの技術インフラ（予算や性能に影響を与える）
- 技術者の人材（人材の確保とコスト）
- APIや統合による機能性および拡張性
プログラミング言語とフロントエンドのフレームワーク
「プログラミング言語」と「フロントエンドフレームワーク」の区別が重要です。例えば、「Javascript」はプログラミング言語ですが、「React」、「Angular」、「Vue」はすべてJavascriptのフレームワークです。
フレームワークは、プログラミング言語を用いて構築され、ソフトウェアエンジニアに自動化、ツール、ライブラリ、機能性、テンプレート、セッション管理などを提供し、ゼロからコーディングするよりも効率的にWebサイトやアプリケーションを開発することができます。
コンポーネントライブラリとは
コンポーネントライブラリは、限られたコードスキルしか持たない人々にとって、もう一つの混乱要因となっています。
コンポーネントライブラリは、エンジニアがユーザーインターフェースの構築に使う、既製のUI要素を特徴とするデザインシステムのコードコンポーネントであり、代表的な例としては、GoogleのマテリアルデザインのUIをベースに構築されたReactコンポーネントライブラリである「MUI」があります。
デザイナーにとってコンポーネントライブラリに相当するのは、デザインツールで使われるベクターベースのグラフィック要素を集めたUIキットです。まだよくわからないという方は、デザインシステム、パターンライブラリ、スタイルガイド、コンポーネントライブラリの違いについて書かれた記事をぜひご覧ください。
UXデザイナーが目にするプログラミング言語
デザイナーは、通常はJavascriptベースのフロントエンドのフレームワークやコンポーネントライブラリを目にすることが多く、その背後にある個々のプログラミング言語とはまったく別のものであることが分かっていることから、この質問には答えにくいですね。ちなみに筆者たちも、それが全く別のものであるということがわかりました。 そのため、以下のように2つのカテゴリーを設けました：
- プログラミング言語
- フロントエンドフレームワーク
プログラミング言語
ここでは、UXデザイナーがキャリアにおいて最も目にする可能性の高いプログラミング言語を６つご紹介します。
1. HTML
HTML（HyperText Markup Language）とは、Webブラウザで使用されるマークアップであり、WebサイトやWebアプリケーションを構築する上で、エンジニアが必ず習得しなければいけない基礎的な言語です。フロントエンドフレームワークを使っているかどうかに関わらず、Webブラウザは常にHTMLをレンダリングし、スタイリングとインタラクティブ性のために「CSS」と「Javascript」が使われます。
UXデザイナーとしてHTMLの基礎を学ぶことは、フロントエンドのコーディングの基礎を理解する上では決して悪いことではありません。
2. CSS
CSS（Cascading Style Sheets）は、色、レイアウト、フォントなど、コンテンツのスタイルに使われるスタイルシート言語です。CSSがなければ、どのウェブサイトもHTMLで記述された基本的なスタイルと同じに見えてしまうでしょう。
CSSは比較的わかりやすく、UIデザインに大きな影響を与えるため、UI（ユーザーインターフェース）デザイナーにとって、もうひとつの重要な言語になります。
3. Javascript
Javascriptは、WebサイトやWebアプリケーションのためのもう一つの中核となるインターネット言語であり、ウェブ開発における主な役割は、HTMLやCSSと並んで、「インタラクティブ性と機能性の提供」です。
また、Javascriptは、React、Vue、Ember、Angularなど、多くのフロントエンドフレームワークに広く使用されており、企業はこういったフレームワークを使って、私たちが毎日使う多くのウェブアプリやモバイルアプリを構築しています。
4. Java
Javaは、Javascriptと混同されないように、ソフトウェア大手のOracleによって維持されているプログラミング言語で、主にエンタープライズアプリケーションの構築のために使われています。Javaは、スマートウォッチ、冷蔵庫、SmartTV、ウェアラブルなど、多くのハードウェアデバイスの動力源にもなっています。
5. PHP
PHPは、人気のコンテンツ管理システムであるWordPressを支えるプログラミング言語として最もよく知られています。また、SNS大手のFacebookがReactを開発する前の、初期のFacebookを支えていたオリジナル言語でもあり、現在では、Metaの大部分を供給しています。
6. Python
PythonもMeta for Instagramで使われている人気のフロントエンドプログラミング言語です。この言語は、無駄のないコードとあらかじめ組み込まれたアルゴリズムライブラリにより、AI（人工知能）や（ML）機械学習アプリにも人気があります。
フロントエンドフレームワーク
では、Webアプリケーションやモバイルアプリケーションでよく使われる4つのJavascriptフレームワークを見てみましょう。
このフレームワークは、デザイン システムから既製の UI コンポーネントを使って、完全に機能するプロトタイプを構築できるようにする技術であるUXPin Mergeとも互換性があります。詳細については、Merge ページをぜひチェックしてみてください。
1. React
Reactは、Webアプリケーションおよびモバイルアプリケーション（iOSおよびAndroid）開発用の一般的なJavascriptフレームワークでありますが、組織では通常、後者にReact Nativeが使われます。コンポーネントベースのマークアップとクロスプラットフォームアプリケーションを作成するための柔軟性により、Reactは世界中の製品開発よく選ばれます。
2. Ember
Emberは、Webアプリケーションを構築するためのJavascriptフレームワークであり、Netflix、Square、LinkedIn、Twitchなど、多くの人気アプリでEmberが使われています。
3. Angular
Googleによって開発・維持されているAngularは、クロスプラットフォームアプリケーションの構築によく使われるフレームワークであり、PayPal、GMail、Upwork、Forbesのウェブサイトが、このフロントエンドフレームワークを使っているプラットフォームのほんの一例として挙げられます。Angularのすぐに使えるインタラクティブ性と機能性により、このフレームワークは複雑なアプリケーションに人気があります。
4. Vue
Vueは、シングルページのWebアプリケーションを構築するためのJavascriptフレームワークであり、HTMLを包含することができるため、HTML、CSS、Javascriptのコーディングスキルを持つ人にとって、習得しやすいフレームワークになっています。また、このフレームワークには、優れたパフォーマンスと、アプリケーションを拡張するための包括的なエコシステムがあります。
プログラミング言語をUXデザインに活用するメリット
デザインやプロトタイプのプロセスでプログラミング言語を使うのは、珍しいことではありません。デザイナーは、コードによるライブデータプロトタイプを作成し、最終製品のUX（ユーザーエクスペリエンス）を正確に再現することができます。
このようなコードプロトタイプにより、デザイナーは最終製品と同じ忠実度と機能で機能をテストすることができ、より質の高い結果とフィードバックを得ることができるのです。
ただ、プロトタイプやテストにコードを使うと、デザインプロセスに時間がかかってしまい、フロントエンドデベロッパーやUXエンジニアのスキルが必要となり、貴重なリソースがプロジェクトのコストアップにつながるという問題があります。
そのため、コードのプロトタイプは複雑なユーザビリティの問題を解決するために行われ、リソース節約のために1つの画面やユーザーフローを構築するのが一般的です。
UXPin Merge – コードをレンダリングするデザインツール
UXPin Mergeのようなコードベースのデザインツールを使うと、デザイナーはコードを一行も書かずに同じ結果を得ることができます。Mergeでは、デザインチームがレポジトリからUXPinのエディタにデザインシステムを同期させることができるので、デザイナーとエンジニアはデザインおよび開発プロセスで同じUI要素を使うことができるのです。
Merge は React、Vue、Ember、Angular など、多くの一般的なフロントエンド フレームワークと連携しています。デザイナーはこれらのコンポーネントを他のどのデザイン ツールでも使いますが、デザインシステムによって定義されたステート、アニメーション、およびプロパティを備えた既製のコンポーネントが用意されています。
プロトタイプの迅速化、連携の強化
コンポーネント駆動型のプロトタイプは、デザイナーがUI要素をゼロからデザインするのではなく、UIの構築のみに集中するため、画像ベースのデザインよりも大幅に速くなります。
この信頼できる唯一の情報源（Single source of truth）により、デザイナーとデベロッパーの連携が向上し、誰もが同じ言語を話し、同じ制約の中で仕事をすることができます。エンジニアには同じコンポーネントライブラリがあるので、Mergeでのデザインのハンドオフはほとんどなく、UXPinからデザインをマッチングさせるだけで、シームレスに行うことができます。
拡張
Merge では、パターンを使ってコンポーネント ライブラリを簡単に拡張および成熟させることができ、デザイナーは複数の要素を組み合わせて、新しい UI コンポーネントやパターンを構築できます。デザインシステムに必要なものがない場合は、UXPin の 「npm 統合」を使ってオープンソースライブラリからコンポーネントをインポートし、新しいパターンを構築することもできます。
テストの強化
Mergeで、デザインチームが最終的な製品体験を正確に再現する没入型の動的プロトタイプを作成し、ユーザー テストやステークホルダーからの有意義なフィードバックを得ることができます。
デザインチームはステークホルダーにプロトタイプへのリンクを送信し、UXPinのコメント機能で実用的なフィードバックを受けることができます。さらに、ステークホルダーは、特定のチームメンバーにコメントを割り当てることもできます。
“当社のステークホルダーは、UXPinを使ってかなり迅速なフィードバックの提供ができます。彼らにリンクを送って、自分の好きな時間にプロトタイプで遊んでもらい、UXPinではプロトタイプに直接コメントを提供できるのです。” エリカ・ライダ氏（PayPalのデベロッパーツールおよびプラットフォームエクスペリエンスであるUXの担当シニアマネージャー）
UXPin Merge があれば、デザインチームはプログラミング言語の習得や、プロトタイピング中のエンジニアとの共同作業の必要がなく、コードの利点を得ることができます。UXPin Merge のページで、この画期的なテクノロジーとそれがエンドツーエンドの製品開発プロセスをどのように改善するかについて是非詳しくご覧ください。
