【UI/UX デザイナー向け】プログラミング言語とフレームワークガイド

何百ものプログラミング言語がある中で、UX デザイナーやプロダクトデザイナーにとって、どれを理解してどれを学ぶべきなのかの判断が大変になることがあります。また、コードを学ぶのは UXデザイナーの仕事に欠かせないというわけではありませんが、技術的な制約の理解や、開発チームとの連携の向上につながることがあります。

そこで本記事では、UI/UX デザイナー向けの６つのプログラミング言語と、コーダーが１つを使う理由について説明します。そしてプログラミング言語やフロントエンドフレームワーク、コンポーネントライブラリの違いと、それらがデザインプロジェクトにどのような影響がもたらすのかについても見ていきます。

UXPin Mergeによって、コンポーネント駆動型プロトタイプにより、デザインプロジェクトをより高いレベルへと押し上げることができます。この画期的なUXテクノロジーへのアクセス方法と詳細については、こちらのページをぜひご覧ください。

プログラミング言語とは

プログラミング言語は、デベロッパーが Web サイトやアルゴリズム、デジタル製品を書くために使うコードであり、それぞれのプログラミング言語には、独自のマークアップ、ルール、構造、パッケージ・マネージャーなどがあります。

数百ものプログラミング言語がありますが、そのほとんどはプロダクトチームが触れることはないでしょう。ちなみに、重要なコーディング言語のリストを絞り込みましたので、これらをさらに調べたい場合には何から手を付ければいいかがわかります。

プログラミング言語が製品開発プロセスにもたらす影響

プログラミング言語は、製品の技術的制約を決定し、UX（ユーザーエクスペリエンス）のデザインプロセスを含などの製品開発に大きな影響を与えます。

デザインチームはその制限を理解していないと、プログラマーが構築できないソリューションや機能のデザインに時間を無駄に費やすことになるリスクがあります。

プログラミング言語は、最終的に UX に影響を与える他の製品開発の決定にも以下のような影響を与えます：

市場投入までの時間
バックエンドの技術インフラ（予算とパフォーマンスへの影響）
エンジニアの人材（人材の確保とコスト）
APIと統合による機能性／拡張性

プログラミング言語とフロントエンドフレームワークの比較

「プログラミング言語」と「フロントエンドフレームワーク」をの識別は重要です。例えば、Javascript はプログラミング言語ですが、React、Angular、Vue はすべて Javascript のフレームワークです。

フレームワークはプログラミング言語を使って構築され、それによってソフトウェアエンジニアはオートメーションやツール、ライブラリ、機能、テンプレート、セッション管理などを得られ、ゼロからコーディングするよりも効率的に Web サイトやアプリケーションを開発することができます。

コンポーネントライブラリとは

コンポーネントライブラリは、コードのスキルが限られている人々にとって、さらなる混乱が加えられることになります。

design system atomic library components 1

コンポーネントライブラリは、エンジニアが UI（ユーザーインターフェース）の構築に使う既製の UI 要素を備えたデザインシステムのコードコンポーネントです。一般的な例としては、Google の Material Design UI に基づいて構築された React コンポーネントライブラリである MUI が挙げられます。

コンポーネントライブラリは、デザイナーにとっての、デザインツールで使われるベクターベースのグラフィック要素を集めた UIキットに当たります。それでもいまいちピンとこないであれば、こちらの記事でデザインシステム、パターンライブラリ、スタイルガイド、コンポーネントライブラリの違いが説明されています。

UX デザイナーが出会うプログラミング言語

これは、デザイナーはその背後にある個々のプログラミング言語よりも、フロントエンドフレームワーク（通常は Javascript ベース）やコンポーネントライブラリに遭遇する可能性が高いので、答えにくい問題です。これまで学んだように、これらはまったく別のものなのです。

なので、以下の２つのカテゴリーを作りました：

プログラミング言語
フロントエンドフレームワーク

プログラミング言語

ここでは、UX デザイナーがキャリアの中で遭遇する可能性の高い１つのプログラミング言語を見ていきます。

1. HTML

HTML とは HyperText Markup Language の略で、Web ブラウザで使われるマークアップであり、Web サイトや Web アプリの構築では、全エンジニアが学ばないといけない基礎的な言語です。フロントエンドフレームワークを使うか使わないかはさておき、Web ブラウザは常に HTML をレンダリングし、スタイリングやインタラクティブ性のために CSS や Javascript もレンダリングします。

UX デザイナーとして基本的な HTML を学ぶことは、フロントエンドのコーディングの基礎を理解する上では決して悪くありません。

2. CSS

CSS（Cascading Style Sheets）は、色、レイアウト、フォントなどでコンテンツをスタイル設定するのに使われるスタイルシート言語です。CSS がなければ、HTML によってレンダリングされる基本的なスタイルプロパティを備えた Web サイトはどれも同じように見えるでしょう。

CSS は比較的わかりやすく、UI デザインに大きな影響を与えるため、UI デザイナーにとって非常に重要なもう一つの言語です。

3. Javascript

Javascript は、Web サイトや Web アプリケーションのもうひとつの中核となるインターネット言語であり、Web 開発において、HTML や CSS と並んでインタラクティブ性と機能性を提供することを主に担います。

また、Javascript は、React、Vue、Ember、Angular など、多くのフロントエンドフレームワークにも広く使われており、企業はこのようなフレームワークを使って、日々使われている Web アプリやモバイルアプリの多くを構築しています。

4. Java

Javascript と混同されがちですが、Java はソフトウェア大手のオラクルによって管理されているプログラミング言語で、主にエンタープライズアプリケーションの構築に使われており、スマートウォッチ、冷蔵庫、スマートTV、ウェアラブルなど、多くのハードウェアデバイスの動力源にもなっています。

5. PHP

PHP は、広く使われているコンテンツ管理システムである WordPress を支えるプログラミング言語として最もよく知られています。また、SNS の一大勢力が React を開発する前は、初期の Facebook を支えたオリジナルの言語でもありました。

6. Python

Python もまた、Meta が Instagram のために使っている人気のフロントエンドプログラミング言語です。この言語は、無駄のないコードとあらかじめ組み込まれたアルゴリズムライブラリにより、AI（人工知能）や ML（機械学習）アプリケーションにも広く使われています。

Web デザインに最適な言語は？

Web デザインに便利なストレートスタックを以下で見てみましょう。

HTML（Hypertext Markup Language）：会社情報、製品/サービス、サインアップフォームを表示するセクションなど、Web サイトの構造を提供する。
CSS（カスケーディング・スタイル・シート）： CS Sを使って HTML 要素をスタイル化することによって、Web サイトが視覚的に魅力的でまとまりのあるものになる。
JavaScript：サインアップフォームのクライアントサイドのバリデーションに JavaScript を使って、ユーザーが有効なメールアドレスなどの必要な情報を確実に入力できるようにする。また、スムーズなスクロール、インタラクティブなアニメーション、通知の表示など、UX（ユーザーエクスペリエンス）を上げるのに JavaScript を使うこともできる。
PHP（ハイパーテキスト・プリプロセッサ）または Node.js：サインアップ情報を収集および保存するバックエンド機能には、PHP または Node.js のいずれかを使うことができる。PHP は簡単で、フォーム送信の処理やデータベースとのやりとり、メールの送信によく使われ、対する Node.js は、よりモダンでスケーラブルなバックエンドソリューションを提供できる。
SQL (Structured Query Language)：集めたサインアップ情報を保存するデータベースとのやり取りには SQL を使う。

このスタックを使えば、メールとサインアップを効果的に集めるシンプルで機能的な企業 Web サイトを作成できます。まずは HTML と CSS を使ってレイアウトとスタイルをデザインし、JavaScript を使ってクライアントサイドのバリデーションとインタラクティブ性を実装して、最後に PHP または Node.jsと SQL を使ったデータベースを使って、サインアップデータを収集および保存するためのバックエンド機能をセットアップします。

フロントエンドフレームワークとは

本記事では、Web やモバイルアプリケーションでよく使われる４つの Javascript フレームワークに焦点を当てていきます。

そしてこのフレームワークは、UXPin Merge とも互換性があります。UXPin Merge は、デザイナーがデザインシステムから既製の UI コンポーネントを使って、完全に機能するプロトタイプを構築できるようにする技術です。詳しくは Merge のページをぜひご覧ください。

1. React

React は、Web アプリケーションとモバイルアプリケーション（iOS および Android）を開発するための一般的な Javascript フレームワークです。‐ ただし、組織では通常、後者に React Native が使われます。また、コンポーネントベースのマークアップとクロスプラットフォームアプリケーションを作成する柔軟性により、世界中の製品開発で人気の選択肢となっています。

2. Ember

Ember は Web アプリケーションを構築するための Javascript フレームワークであり、Netflix、Square、LinkedIn、Twitch など、多くの人気アプリで Ember が使われています。

3. Angular

Google によって開発および維持されている Angular は、クロスプラットフォームアプリケーションの構築向けの広く使われているフレームワークであり、このフロントエンドフレームワークを使っているプラットフォームのほんの一部を挙げると、PayPal、GMail、Upwork、Forbes の Web サイトがあります。また、Angular のすぐに使えるインタラクティブ性と機能性により、このフレームワークは複雑なアプリケーションに人気があります。

4. Vue

Vue は、シングルページの Web アプリケーションを構築するための Javascript フレームワークです。HTML を包含することができるため、HTML、CSS、Javascript のコーディングスキルがある人にとって習得しやすいフレームワークとなっており、優れたパフォーマンスと、アプリケーションを拡張するための包括的なエコシステムもあります。

プログラミング言語を使うメリット

デザインやプロトタイプのプロセスでプログラミング言語を使うことは珍しいことではなく、デザイナーはコードを使ってライブデータのプロトタイプを作成し、それで最終製品のユーザー体験を正確に再現することができます。

そしてこのようなコードプロトタイプにより、デザイナーは最終製品と同じ忠実度と機能性で機能をテストできるため、より質の高い結果とフィードバックが得られます。

ただ、プロトタイプとテストにコードを使う際に、デザインプロセスに時間がかかったり、貴重なリソースではあるけれどプロジェクトのコストが増えてしまうフロントエンドデベロッパーや UX エンジニアのスキルが要ることなどの問題があります。

なので、組織は複雑なユーザビリティの問題を解決するのにコードプロトタイプを準備したり、大体はリソースを節約するのに単一の画面やユーザーフローを構築します。

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を使うことで、デザインチームは最終的な製品体験を正確に再現する没入型のダイナミックなプロトタイプを作成し、ユーザーテストやステークホルダーからの有意義なフィードバックを得ることができます。

デザインチームはステークホルダーにプロトタイプへのリンクを送り、UX Pinのコメント機能を使って実用的なフィードバックを受け取ることができます。また、ステークホルダーは、特定のチームメンバーにコメントを割り当てることもできます。

「UXPin を使うことで、ステークホルダーはかなり速やかにフィードバックを提供できるようになります。また、UXPinを使うことで、プロトタイプに対して直接コメントを提供することができます。」Erica Rider, PayPal – Senior Manager for UX – Developer tools and platform experience at PayPal

UXPin Merge を使うと、デザインチームはプログラミング言語の習得や、プロトタイプ中のエンジニアとの共同作業を行ったりしなくても、コードの恩恵を受けることができます。この画期的なテクノロジーと、それがエンドツーエンドの製品開発プロセスをどのように改善するかについて、UXPin Merge のページでぜひ詳しくご覧ください。

Discover Merge