UXエンジニア のポートフォリオ – 短編ガイドと例をご紹介
Springboardのオンライン学習プラットフォームでは、2022年に最も需要の高い仕事の1つとしてUXエンジニア（別名：UXユニコーン）が挙げられています。魅力的なUXエンジニアのポートフォリオを作成すれば、あなたは頭一つ出て目立てます。
というわけで本記事では、UXエンジニアのポートフォリオの作り方、共有すべき情報、そしてインスピレーションを得るための事例をご紹介します。
世界最先端のUXデザインおよびプロトタイピングツールで、デザインと開発の連携を改善し、両者間のギャップを埋めましょう。無料トライアルにサインアップして、UXPin Merge が製品開発プロセスにどのような革命をもたらすかご体験ください。
UXエンジニアとは
UXエンジニア（ユーザーエクスペリエンスエンジニア）は、UIエンジニア/デベロッパーまたはUI/UXエンジニアとも呼ばれ、UXデザイナーとデベロッパーのハイブリッド的な職種です。一般的に、デザイン思考、デザイン原則、アクセシビリティを理解するフロントエンドデベロッパーになります。
UXエンジニアは、HTML、CSS、Javascriptなどの主要なフロントエンドプログラミング言語の専門家です。デザイナーが忠実度の高いプロトタイプの作成や、フロントエンドのUI要素やインタラクティビティの開発をする際にサポートするのが彼らの仕事です。
UXエンジニアは、デザイナーやエンジニアと連携するための知識とスキルがあることから、デザインと開発の橋渡し役と思われがちです。
UXエンジニア のスキル
- デザイン思考
- ビジュアルデザイン
- インタラクション
- UIデザイン
- ウェブデザイン
- ウェブ開発
- モバイルアプリ開発
- バージョン管理
- HCI（ヒューマンコンピュータインタラクション）
- デザインシステム
- デバッグとテスト
- ナビゲーションと情報アーキテクチャ
- レスポンシブデザインと開発
- Hi-Fiプロトタイピング
UXエンジニア のポートフォリオが必要な理由
フリーランスとして働くにしても、正社員のポジションを探しているにしても、ポートフォリオは自分のスキルや経験をアピールする機会になります。
UXエンジニアは、UXとフロントエンド開発の能力があり、組織にとらわれることなくチームで働くことができることを証明するのに、ポートフォリオが必須なのです。
UXエンジニアのポートフォリオの作り方
UXエンジニアがUXポートフォリオサイトを作成する場合、選択肢がいくつかあります：
- WordPress、SquarespaceなどのCMS（コンテンツ管理システム）の利用
- HTML、CSS、Javascriptを使った静的なWebサイトの構築
CMSはメンテナンスが簡単であり、静的なWebサイトはUXエンジニアに創造性と柔軟性を与えます。また、静的なWebサイトは、デザインからフロントエンド開発まで、UXエンジニアのスキルをトータルにアピールできる機会でもあります。
UXポートフォリオサイトの構成要素
- ホーム
- 自己紹介
- ポートフォリオ
- お問い合わせ先
UXエンジニアの中にはブログを入れる人もいますが、気が散るものは少ない方がいいですよね。
ポートフォリオのウェブサイトを構築する際には、ユーザーのことを考えるのが重要です。彼らは、あなたのことを知り、あなたのポートフォリオを見たいと思っている潜在的な顧客やリクルーターですから、それに応じてコンテンツの優先順位を決めましょう。
ホーム
ホームでは、1〜2文での簡単な自己紹介、スキルセットの概要、作品へのリンク（ポートフォリオページ）を掲載しましょう。また、折り返しの上に2つのCTA（Call To Action）を設け、1つはポートフォリオに、もう1つはコンタクトページにリンクさせるとよいでしょう。
自己紹介
アバウトページでは、あなたの知識、経験、職歴を紹介しましょう。また、あなたが得意とするデザインや開発ツールのリストも掲載しましょう。
業界関連の講演や出版物の記事などについての言及やリンクがあれば、専門家としての自分をアピールでき、大きな仕事を獲得できる可能性が高まります。
ユーザーはペットの猫の写真よりも、あなたの専門的な知識を知りたがっているため、個人情報は最小限にとどめましょう。
ポートフォリオ
ポートフォリオページは、ウェブサイト上で最も重要なページです。あなたのプロジェクトでをベストなのを3～5つ紹介することをお勧めします。UXエンジニアとしての仕事を希望する場合は、デザイナーやエンジニアと共同作業したエンドツーエンドの製品開発プロセスを示すプロジェクトを含めるとよいでしょう。
各事例の構成については、下記の「The Anatomy of a UX Engineer Portfolio Case Study」をご確認ください。
お問い合わせ先
以下の項目を入力するためのシンプルなお問い合わせフォームを使いましょう：
- 氏名
- メールアドレス
- 本文
関連するSNSアカウントへのリンクを忘れすに含めましょう。メールアドレスや電話番号の記載は、迷惑メールにつながる可能性があるため避けましょう。
UXエンジニア のポートフォリオ事例を解析
ここでは、UXエンジニアに関連する余分な部分を含む、UXケーススタディの解析をご紹介します。ケーススタディを読むのに時間がかかりすぎないように、文字は最小限に抑えるのがベストなアドバイスです。
1. イントロ
プロジェクト、クライアント/雇用主、新製品や新機能の必要性、自分の役割について3段落で説明しましょう。
2. 問題の概要
1〜3文でユーザーとプロジェクトが解決しなければならない問題を定めましょう。
3. デザインプロセス
あなたがデザインプロセスにどのように関わり、デザインチームとどのようにコラボレーションしたのか、デザイン思考を応用して問題を理解し、解決策を開発したことを含めて、3段落で説明しましょう。
また、デザインシステムを使用したかどうかや、デザインのハンドオフにおける自分の役割も記載するとよいでしょう。これらはUXエンジニアの重要な役割であり、デザインと開発の連携をどのように強化したかを示すものだからです。
ポートフォリオのこの部分で重要なUXアーティファクトは以下の通りです：
- アイデア出しのメモとスケッチ
- UXリサーチ
- Hi-Fiプロトタイプのスクリーンショット
デザインチームと共同作業する際に使用したデザインツールをリストアップしましょう。
開発プロセス
ユーザーインターフェース開発におけるあなたの役割と、エンジニアとの共同作業について、1～3文で説明しましょう。その際、コードのコンパイルとテストに使用したツール、ソフトウェア、技術スタックを含めましょう。
採用担当者は、あなたが技術的な問題に対する解決策を見出す能力があることを確認したいことから、開発プロセスにおける課題と、それを克服するために何をしたかを強調することが重要です。
また、デザインファイルをどのように機能するコードに変換したか、さまざまな反復作業、課題、最終製品に到達した方法もオススメです。
プロダクトデザイナー兼UXエンジニアのアドハム・ダナウェイ氏は、2枚のスクリーンショットを並べることで、ワイヤーフレームから最終製品に至るまでを紹介しています。
UXエンジニアの重要なプラットフォーム
UXエンジニアのためのプラットフォームは、あなたの露出を増やし、最高の仕事を獲得するチャンスを増やすために、以下のものをお勧めします：
- LinkedIn：LinkedInは、UXデザインスキルやプログラミングの理解度を証明するテストが受けられるので、UXエンジニアには最適です
- CodePen：デベロッパーがコードを共有できるコミュニティベースのプラットフォームで、プログラミングのスキルをアピールするのに適しています。CodePensを埋め込むこともできるので、ユーザーはあなたのポートフォリオのサイトから離れる必要がありません。
- GitHub：GitHub プロファイルへのリンクを共有することで、見込み客や雇用主があなたの貢献や個人的なプロジェクトを見ることができるようになります。
また、このようなプラットフォームへのリンクをウェブサイトに掲載し、訪問者があなたの作品をより多く探せるようにしましょう。
UXエンジニアのポートフォリオ５例
ゼニア・リン：米国のUXエンジニア
ゼニアのポートフォリオのホームには、彼女のスキル、仕事、経験についての紹介が含まれています。ゼニアはこのスペースで、デザインと開発の両方のスキルや、拡張現実体験の構築に対する情熱をアピールしています。
マット・ファーレイ：カナダのプロダクトデザイナー兼UXエンジニア
マットのポートフォリオのホームは、ミニマルなUIと明確なCTAである「Say Hello」によって、訪問者をお問い合わせページに導き、コンタクトを取ることができるようになっています。また、彼のホームページには、以下のような重要なセクションがあります。
- デザイナー、フロントエンドデベロッパー、メンターとしてのスキル
- 最近の仕事
- マットが関わった企業
- スタートアップ・プロジェクト
- お客様の声
マットのフッターには、明確なCTAと彼のSNSリンクが含まれています。
アドハム・ダナウェイ：オーストラリアのプロダクトデザイナー兼フロントエンドデベロッパー
アドハムのホームページは、片方に【designer】、もう片方に【<coder>】と表示されたクールなヒーローアニメーションが特徴です。その下には、彼の最新の作品へのリンクがあります。アドハムのヘッダーナビゲーションは、彼の他のポートフォリオウェブサイトやSNSへのリンクが提供されています。
ヘレン・コーア：英国のUXエンジニア
ヘレンは、ホームページでさまざまなプロジェクトを紹介しており、GitHub上のプロジェクトとプロトタイプへのリンクがあります。彼女のUIはシンプルですが、人々が自身の作品を見るために最も必要な情報とリンクを載せています。
アタ・ドーガン：MetaのAR プロダクトデザイナー
アタのポートフォリオサイトでは、彼の作品、プロセス、トークが没入型ビデオで紹介されており、それは自分自身と作品を紹介するためのクリエイティブなアイデアになっています。彼の自己紹介ページには、簡単な自己紹介、講演活動、SNSへのリンクが掲載されており、ヘッダーナビゲーションには履歴書へのリンクがあります。
UXPin Mergeでギャップを埋める
UXPin Mergeは、レポジトリからUIコンポーネントライブラリをUXPinのエディタに同期させ、デザイナーがコードコンポーネントで完全に機能するプロトタイプを構築できるようにするものです。
プロトタイプを作成するためにコード コンポーネントを使用すると、UX エンジニア の UI 開発時の作業が少なくなります。Merge は、UX デザイナーと UX エンジニアが同じ言語（信頼できる唯一の情報源（Single source of truth））を話すため、デザインのハンドオフ プロセスが簡素化されます。
レポジトリ内のコンポーネントに変更があると自動的にUXPinに同期されるため、デザインチームは最新のイテレーションでプロトタイプやテストを行うことができます。UXエンジニアは、コンポーネントのプロップ（またはStorybookとの統合によるArgs）を使用して、デザイナーがUXPinでプロパティを調整できるようにします。変更はすべてJSXでレンダリングされ、エンジニアはこれをコピー＆ペーストして開発を開始できます。
