UXデザインポートフォリオをつくろう！オススメの3つのタイプの6つの事例 | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
UXデザイナーにとってポートフォリオは名刺のようなものです。自分が何をするか、どのように制作に取り組むか、それらをどのくらい上手に提示できるかを示すのがポートフォリオです。たいていのデザイナーにとって、ポートフォリオへの着手は大きな挑戦です。そのハードルを越えるもっともよい方法は、多くの場合、他のデザイナーからインスピレーションを得ることです。
そこでこの記事では、ポートフォリオの着想を与えてくれるいくつかの事例を紹介します。また、作品を魅力的に見せるために役立つヒントも紹介します。
ポートフォリオの構築の始め方
魅力的なポートフォリオの構築に最適なアプローチは、戦略を練ってデザインプロセスを繰り返すことです。これは、日々勤しんでいるいつものデザインプロジェクトと同じです。すなわち、その道のプロでもない限り、すぐにWebサイトの構築を始めるべきではありません。
まずは、コンセプトのスケッチから始めて、ポートフォリオの見せ方に集中しましょう。その後、少し細部を具体化しながらレイアウトを見直して、最後にカラーパレットやビジュアル要素を追加した本物に近い状態に移行します。この手順であれば、Webサイトの構築を始める頃までには、何がどこに欲しいのか、どのように振舞って欲しいのかを明確に把握できます。
それでは、いくつかの一般的なUXポートフォリオのスタイルを、実際にデザイナーが構築した例と共に紹介します。
列挙型のケーススタディポートフォリオ
列挙型のケーススタディポートフォリオは誰もが目にしたことのある業界の伝統的な形式です。事例をいくつも並べるこの形式は、自分のデザインに対する考え方を十分に紹介し、すべてのデザイン制作物を展示することができます。ケーススタディのポートフォリオは最も一般的な形式のひとつですが、うまくまとめるのが最も困難なもののひとつでもあります。それは、長くなりすぎないように注意しつつ、デザインプロセスをできる限り明確で詳細に示す必要があるからです。
この手のポートフォリオを適切にまとめるための鍵は、自身のデザインプロセスを綿密に見直して、その中で一番印象的だった箇所に絞ることです。プロジェクトのどの段階で最も学びがあったのか？どの制作物から閃きを得たのか？解決しようと試みた特に重大な課題は何だったのか？のような問いの答えを探してみましょう。また、デザインポートフォリオを閲覧している人が興味を持ち続け、最後まで没頭したままたどり着くように、無駄が無くてスキャンしやすいデザインを心掛けるべきです。
Rokid Inc.のシニアUXデザイナーであるNan Wangは、ケーススタディポートフォリオに求められる要件を見事に均衡させています。それぞれのプロジェクトページは紹介するプロジェクトに合わせてルック&フィールがカスタマイズされ、テキストと画像を使ってケーススタディがバランスよく配置されています。Nanのポートフォリオは、見た人に個々のプロジェクトの世界に入り込む感覚を与え、制作物についてより詳しく知りたいという気持ちにさせます。
https://www.nanwang-design.com/
もうひとつの優れたUXデザインポートフォリオの例は、DockwaのプロダクトデザイナーのBianca Salomonが公開しています。Biancaは、明確なテキストとシンプリシティに情熱を傾けており、それは彼女のUXデザインポートフォリオにも明らかに見てとれます。彼女は自身のデザインに対する考えを十分に詳しく記述しています。そして彼女のすべての制作物を、スキャンしやすい整然としたレイアウトで展示しています。彼女はUXブートキャンプの卒業生で、卒業後数か月もたたずに最初の職に就きました。彼女の成功の助けになったのは、ポートフォリオ、デザインシンキング、そしてガッツです。（なお、このポートフォリオはすべてAdobe XDを使ってデザインされています）
スペシャリストのポートフォリオ
これは基本的に、「自分が何者で、何をしたいか分かっている人」向けのポートフォリオです。特定の領域、たとえばモーションデザイン、UXライティング、AR/VRデザインなどに特化したUXデザイナーがよく採用しています。このタイプの人々は、自分の分野に深く集中できるように、様々な専門分野を持つデザイナーとチームを組んで働く傾向があります。スペシャリストのポートフォリオは、デザインプロセスの特定の面に集中して精密に表現することで、刺激と魅力を表現します。
スペシャリストのポートフォリオはその名の通り専門家によってよく使われるポートフォリオですが、ケーススタディの最も本質的で価値ある細部に絞り込む手法からはすべてのデザイナーが学べます。自分自身を表現する要素として何が訴求して何が不要なのかを考えるヒントを与えてくれるでしょう。
SpotifyのシニアUXライターであるAnjana Menonのスペシャリストポートフォリオは私のお気に入りのひとつです。彼女は基本的なインタラクションだけのシンプルなサイトを公開しています。閲覧した人の注意はすぐに彼女の作品へと導かれ、彼女自身の貢献に焦点を当てて注意深く要約されたケーススタディと共に、一つひとつのプロジェクトが紹介されます。明確で理解しやすく、彼女が個々のプロジェクトで何をしたのかがはっきりと示されています。
Hello MondayのシニアデザイナーIsa Pinheiroも刺激的なポートフォリオを公開しています。彼女のサイトを訪れると、シンプルかつ印象的なインターフェイスがすぐ目にはいります。彼女のケースステディはデザインとグラフィックスに焦点が当てられており、そこに彼女のプロジェクトにおける貢献を語る短い状況説明文が添えられています。Isaは明らかに徹頭徹尾デザイナーであり、彼女はポートフォリオを通じてそれを極めて明確に示しています。
ミニマルなポートフォリオ
UXポートフォリオにおける新しいトレンドは、一部のシニアなデザイナーに見られる極端なミニマリズムです。彼らは、長い定型的なケーススタディに自身のデザインや考えを並べることに注力する代わりに、シンプルさの実現に主眼を置きます。
これらのミニマルなポートフォリオに関してはちょっとした注意事項があります。効果的なものにするためには、デザイナーは、それなりの数の出荷済の製品や公開されたランディングページなどを持ち合わせていることが必要です。また、自身のレジュメと作品それ自体が訴える力を持つことについて、比較的自信が持てることも条件です。
このタイプのポートフォリオで気に入っているものといえば、現在はAirtableで働いているKyle Ribantのサイトです。彼のサイトは美しいほどに禁欲的で、余分な飾りも不要物もありません。彼は、微妙な色の変化とシンプルなインタラクションと僅かな刺激により、とても魅力的なインターフェースをつくり上げました。魅力的なシングルページのポートフォリオに加えて、彼は、スタイルと仕上げのまとまりを示すためにプロジェクトを注意深く選別しています。個々のプロジェクトへのリンクの先には、類似した魅力のデザインタッチを示すページが待っています。ポートフォリオの簡素さが、彼の作品を主役にすることを可能にしています。
もうひとつの刺激的なミニマリストのポートフォリオはDaniel Rodriguezのサイトです。「Danny from Miami」として知られ、FacebookでAR/VRのプロダクトデザイナーとして働く彼は、最近、列挙型のケーススタディポートフォリオからミニマルなポートフォリオに移行しました。彼のサイトはクリーンで、ナビゲーションが容易で、パーソナリティに満ちています。彼の紹介文は最高に魅力的で、読むたびに彼のチームの働く様子がどのようなものなのか想像せずにはいられません。
https://www.dannyfrommiami.co/
長すぎて読む気がしなかった人へ
ポートフォリオの作成は手ごわい仕事です。しかし幸運なことに、私たちは世界的なデザインコミュニティから学び、インスピレーションを得ることができます。以下に並べた、伝統的なケーススタディのレイアウトから極端なミニマリストデザインまで3つのタイプをカバーする素晴らしい一連のUXポートフォリオを丁寧に調べれば、自分がつくりたいポートフォリオのアイデアを見つけることができるでしょう。Adobe XDを使えば、素早くインタラクティブなプロトタイプを制作して、アイデアを実際に確認しながら作業を進められます。
- Nan Wang – シニア UXデザイナー Rokid Inc.
- Bianca Salomon – プロダクトデザイナー Dockwa
- Anjana Menon – シニアUXライター Spotify
- Isa Pinheiro – シニアデザイナー Hello Monday
- Kyle Ribant – デザイナー Airtable
- Daniel Rodriquez – AR/VRプロダクトデザイナー Facebook
- この記事はInspiring Examples of UX Design Portfolios（著者:Kathryn McClure）の抄訳です