本日の記事はLeon Zhangさんによる、「Seven steps to create your first UX portfolio website that lands a FAANG interview (Examples from new 2022 Amazon, Facebook, Microsoft designers)」の翻訳記事となります。
何度か私のブログでも記事にしていますので、オリジナル記事の筆者にのLeonさんについてはご存知の方も多いかもしれません。初めてみた方のために簡単な紹介をしておくと、Leonさんは現在ExpediaでUXデザイナーをしています。過去には、スタートアップからAmazonやGoogleのような大手ハイテク企業まで、学校に通いながらインターンや契約社員として働いていました。
UXGOのコーチとして、デザイン業界へ進みたい学生や新進デザイナーのために記事を書いたり、1:1のサポートを提供しています。
最初のポートフォリオサイトを作るのは、圧倒的な経験です。このような疑問をお持ちの方、またはポートフォリオを次のレベルに引き上げるにはどうしたらよいかわからない方に、この記事をおすすめします。
ポートフォリオに関する質問は、Leonさんがデザイン学生へのコーチングを行う中でも最もたくさん聞かれる質問の一つのようで、
「何から始めるべきか？何を載せるべきか？誰がポートフォリオを見るのか」などです。
この記事では、FAANGをはじめとする企業へUXデザイナーとしてパスするための簡単なステップを７つご紹介していきます。
ステップ1. 採用担当者や設計担当者が求めているものを理解する。
ステップ2. あなたのプロジェクトやケーススタディをすべて集める。
ステップ3. 選考の流れ
ステップ4. 自分のスタイルを見つけ、最適なサイト構築ツールを選択する。
ステップ5. レスポンシブ＆ウェブデザインの基本原則を理解する
ステップ6. ホームページと情報のデザイン
ステップ7. テスト、アップデート、精緻化する
すでにポートフォリオをお持ちの方で、繰り返しポートフォリオを改善したい方は、ステップ7の一番最後まで読み進めると、よい事例を見つけることができます。
ステップ1 採用担当者や設計担当者が求めているものを理解する。
採用プロセスのどの段階にあるかによって、ポートフォリオウェブサイトを閲覧するユーザーは大きく異なります。一次面接やFANNGの面接を受けるためには、採用担当者などのデザイナーでは無い人が見やすく、アクセスしやすいこと、そしてデザイン担当者が詳細に見たときに印象に残るような深みのあるポートフォリオであることが必要です。
そこでまず最初に、採用担当者が見ることのできる一般的な部分についてお話しすると、
「この人はUXデザインのプロセスを理解しているのか、それともただ最終製品を見せるだけの伝統的なビジュアルやグラフィックデザイナーなのか？」
「この人はどんなデザイン経験を持っているのか、その機会をどのように利用して、組織のための単なる目の保養ではなく、本当の価値のあるものを作り出したのか。」
職種や役割に特化したものなど、より詳細な要件に基づいて、各採用担当者は他の細部にまで注意を払うでしょう。しかし、ポートフォリオがユーザー(採用担当者)フレンドリーであることは、多くのデザイナーが忘れがちなことです。例えば、クリック数を少なくして、ナビゲーションを速くすることなどが、リクルーターフレンドリーです。
私もポートフォリオの第2版を制作する際、「ありきたりのデザインポートフォリオではなく、ユニークで既成概念にとらわれないものを作らなければ」という思いが強かったため、このような失敗をしたことがあります。
以下のクールな例を見て、またはここで試してみてください。このゲーム要素のあるドライビングデザインは非常に目を引きますが、リクルーターがナビゲートするためにこのようなことをしてしまうと、かえって逆効果です。正しいプロジェクトにたどり着き、あなたがUXデザイナーであることを示すことは非常に難しく、間違いなく非常に不親切なUXポートフォリオデザインと評価されてしまうでしょう。
クリエイティブになるなと言っているわけではありませんが、常にユーザー（採用担当者）の体験を最優先してください。記事の最後に、Webflowを使ったよりクリエイティブな学生/コーチの事例をご紹介していますので、参考にしてください。
ステップ2. あなたのプロジェクトやケーススタディをすべて集める。
学生や新米UXデザイナーの場合、多くの異なるタイプのサイドプロジェクトやタスクに取り組んできたかもしれません。つまり、すべてがステップ1で述べたオーディエンス、つまり採用担当者に関連するとは限らないのです。
ですから、私が指導する学生には、まず自分がやったことを全部集めてから、ポートフォリオに入れるものを絞るように勧めています。
全てといえば、あなたが制作した全てです！写真、アート、ロゴデザインなど、まずは膨大なリストを作り、すべてを書き留めるか、フォルダーに入れることから始めてください。
クリエイティブ、プロダクト、あるいはビジネスなど、自分が手がけたものをすべて頭に叩き込んでおくことが大切です。そうすることで、どんなプロジェクトがUXリクルーターに本当に関係あるのか、どんなプロジェクトが個人的に好きなのか、その「価値」は自分にとってもっとずっと個人的なものなのか、本当の意味で把握することができます。また、このプロセスを通じて、自分自身について多くを学ぶことができます。
このプロセスで自己分析できそうな項目としては、こんなところでしょうか。
- 自分自身のUXにおける得意な分野は何なのか？
- どのUX分野をまだ改善する必要があるのか？
- 何が自分自身を際立たせているのか？
- 自分自身が行ったプロジェクトの中で、最高のケーススタディとなったものは何か？
- どのプロジェクトが一番勉強になったか？
- これらのプロジェクトを通じて、自分自身についてどんな面白い話ができるか？
可能であれば、ケーススタディを収集する際に、すべての進行中の仕事、文書、成果物を含めるようにしてください。Leonさんのポートフォリオにはない、モーションデザインに特化した以下のプロジェクトを見てみてください。
今でもLeonさんは好きなときにいずれのポートフォリオにもアクセスできるようにしているそうです。ですから今後は、あなたもBehanceやプライベートフォルダなど、常に自分の作品をきちんと記録し、アクセスできるようにしておくように心がけてください。
すべてのプロジェクトを収集し、分類することは、成功するポートフォリオウェブサイトを作成する上で最も重要な次のステップに進む際に非常に重要になります。
ステップ3. 選考の流れ
さて、ステップ1とステップ2に従えば、自分のウェブサイトを誰が見ているのか、そして、自分が利用できるすべてのプロジェクトがわかっているはずです。そこで、ステップ3では、どのようにすれば相手を感動させることができるかを計画します。
2で収集したプロジェクトの中から3-4プロジェクトだけを選び、ノイズを排除していきます。
UXデザイン関連のポートフォリオを作成するとき、就職活動をするとき、あるいはクライアントに対応するとき、その対象にふさわしいプロジェクトを選択することが非常に重要です。
採用担当者の注目度は限られています。UXGOのコーチが2021年に行った調査では、12人の大手テック系UXD学生プログラムのリクルーターにそれぞれ100のポートフォリオウェブサイトを渡し、ざっと読んで候補者を探させました。平均して、すべてのリクルーターは最初のスクリーニングでポートフォリオに平均56秒しか費やさなかったのです。これは、誰かの注意を引くのに1分もかからないということです。つまり、たとえ素晴らしいUXプロジェクトやコンテンツを持っていたとしても、それが適切に「表面化」されていなければ、まったくチャンスはないのです。
多くの新人UXデザイナーや学生はこのことを認識できず、プロジェクトを増やしすぎたり、少なすぎたりしています。ですから、私が指導する学生たちには、3～4個のプロジェクトを目標にするのが良いといつも言っています。
私の最初のデザイン教授の一人で、有名な『Designing Type』の著者であるKarenは、いつも私たちに、
「あなたのポートフォリオは、あなたの最も弱いプロジェクトと同じくらい強力であるため、慎重に選択するように」と言っていました。
採用担当者があなたのプロジェクトやケーススタディをクリックすることを期待し、それらはすべてあなたが良いUXデザイナーであることを納得させるものであるべきです。
良いプロジェクト/ケーススタディは、デザインプロセス全体をカバーする必要があります。つまり、そのようなポートフォリオであれば、56秒という短い時間の中で、採用担当者はざっと目を通すことができるはずです。
- デザイン上の問題をどのように紹介するか？
- なぜ解決する価値があるのか？
- どのように解決へアプローチするのか？
- どのような調査を行ったか？
- どのようなデータがあなたのデザインをサポートしていますか？
- どのようにリサーチとデザインの橋渡しをしますか？
- どのように反復し、プロトタイプを作成するのか？
- プロトタイプのテストはどのように行いますか？
- 最後に、どのようにデザインを引き渡すのか、あるいは出荷された製品はどのようなものなのか？
また、情報をどのように表示するかという構造も非常に重要で、これについてはステップ6でサイトを構築する際に詳しく説明します。
成功するUXケーススタディの構成方法について詳しく知りたい方は、こちらの別記事で詳しくご紹介しています。(2022年、最初の面接を突破するための成功するUXケーススタディの作り方)
自分のプロジェクトが上記のステップを全て踏んでいなくても構いませんが、一般的にはこの目標指向型のデザインアプローチによるUX問題解決の手法はFAANGの業界標準となっているので、理解しておいた方が良いでしょう。(Leonさんたちが勉強したほとんどのリクルーターが、その貴重な1分間で求めていることを述べています)
ステップ4. 自分のスタイルを見つけ、最適なサイト構築ツールを選択する
さて、ここからが楽しいところです。きれいなものを作るのは楽しいですよね。
通常、多くのUXデザイナーは、ウェブサイトを作成するための適切なコーディング経験がないため、サイトビルダーを使用することを選択します。サイトビルダーが普及したのには理由があるので、これは恥ずべきことではありません。
ですから、あなたが探しているニッチな役割にとって、フロントエンドのコーディング経験が非常に重要であることを証明しない限り、あなた自身のウェブサイトをコーディングすることを検討しないようにというのが、ひとつのアドバイスです。ウェブサイトのコーディングは非常に時間がかかり、より良いものに精緻化していくのに長い時間がかかるでしょう。
そこで今回は、3つの人気のあるサイト構築プラットフォーム、Wix、Webflow、WordPressを簡単に紹介します。
Leonさんは個人的にこれら3つのプラットフォームを数え切れないほど使ってきました。そのため、ここではどのプラットフォームを推奨することではなく、どのような状況に対してどれが最適かを解説していきます。(Adobe portfolio、Square space、Sempliceなど、他にもたくさんのプラットフォームがありますが、今回取り上げるツールと非常に似ているため、すべてについて説明するつもりはありません）
技術的には、ポートフォリオサイトを作る際にこのステップから始めて、ステップ1に戻ることもできますが、サイトを作る前に何を載せる予定なのかを知っておくに越したことはないので、ステップ1から始めることをお奨めします。どのようなプロジェクトを使いたいか、そしてそれぞれのプロジェクトに対する一般的な視覚的美学を知ることで、サイトビルダーをより簡単に選ぶことができます。
少なくとも50のポートフォリオを見て、本当に気に入ったものを選ぶようにしましょう。Webflow、Wix、WordPressで構築されたものを見てから、決定してください。どのような視覚的要素やマイクロインタラクションが楽しいと感じたかをメモしておくことも大切です。
グラフィックアセットは、どのウェブ構築ツールを選ぶかとは関係ないので、あまり気負わずに、それぞれのサイト構築ツールで何が可能か、何が作りやすいかを大まかに把握することが大切です。
一般的に、Wix/Squarespaceのようなサイトは、ほとんどの人にとって非常に簡単に理解することができます。要素をドラッグ＆ドロップして、photoshopやFigmaと同じような感覚でページを作成することができます。これらのサイトを「簡単テンプレートビルダー」と呼んでいるのは、たくさんの素晴らしいテンプレートが用意されており、個人的なプロジェクトや以前に集めたグラフィック資産をアップロードすれば、簡単にデザインポートフォリオにすることができるからです。
Leonさんの生徒のように、もっと動きがあって、下の写真のような個性的なものが欲しいという人には、このようなサイトがおすすめです。(動きがあれば最高のUXポートフォリオになるとは言いませんが、最後にシンプルなFAANGのUXポートフォリオサンプルをご覧ください。）
このようなポートフォリオサイトは、一般的にWebflowで構築されていますが、場合によってはWordPressで構築されていることもあります。しかし、WordPressよりもWebflowをお勧めします。WordPressの大きなメリットは、より複雑な機能を必要とするデータ駆動型の大企業向けに、より強力なバックエンド・コードをサポートできる部分にあります。
Leonさんは、VRインディーゲームSword Reverieのウェブサイトを作成するときだけ、Webflowを使用したそうです。(ご自由にご覧ください)
Webflowには、より魅力的なフロントエンドのインタラクションを作成するために必要なカスタマイズ機能がすべて備わっているので、カスタマイズやよりクールなマイクロインタラクションが必要な場合は、Webflowが最適な方法です。
しかし、Webflowを選ぶ前に、WixやSquarespaceのサイトビルダーは、初心者にはWebflowよりも早く構築できるので、自分にどれだけの時間を確保できるのか確認することを忘れないでください。
ステップ5. レスポンシブ＆ウェブデザインの基本原則を理解する
ステップ4で述べたように、フロントエンドのコーディングを理解することは、この現代においてほとんどのUXデザイナーにとってもはや必須ではありません。しかし、基本的なレスポンシブ＆ウェブデザインの原則を理解することは、また別の話です。
日々のUX業務でこれらに精通している必要があるだけでなく、良いデザインポートフォリオを作成するつもりなら、基本を学ぶことがベストです。(たとえ、Wixやsquare spaceのテンプレートを使うことになったとしてもです）。
ここでは、レスポンシブ、CMS、HTML、CSS、フロントエンド、バックエンドという重要な用語を定義したいと思います。
レスポンシブとは、以下のような画面サイズに対応できるウェブサイトを指します。これは必須項目であり、すべてのデザイナーがウェブサイトを構築する際に考慮する必要があります。クロスプラットフォームデザインの基礎となるものです。
HTMLは、すべてのWebサイトのバックボーンとなり、ウェブサイトを作成するコードです。ここで私が何を意味するかを確認するために、以下のこの例のようにChrome上でクリックして検査していきます。
CMSとは、ブログやインスタグラムのように、画像を投稿すると自動的に更新されるアイテムの集合体のことです。CMSは、サイトビルダーが提供する有料の機能であることが多いで
す。またCMSをCSSと混同してはいけません。CSSはCascading Style Sheetの略で、HTMLがバックボーンであるならば、CSSはウェブサイトの表面であり、下の例のように色やレイアウトを制御するものです。
最後に、「フロントエンド」とは、通常、ボタンやメニューなど、ユーザーが直接操作するものを指します。目で見てわかるものは、一般的にフロントエンドとみなされます。
一方、バックエンドとは、通常、サーバーサイドのコードを指します。ウェブサイトから収集したデータなど、目に見えず、やりとりもできないものを指します。これは、あなたのポートフォリオサイトには絶対に必要ないものであり、また必要であってはならないものなので、全く気にする必要はありません。
下の見本はWixで作成されているので、Wixが醜いデザインを作成するとは思わないでください。WixがWebflowに比べて本当に劣っている点は、レスポンシブデザインとページデザインの制限であるとLeonさんは考えています。
したがって、Webflowのようなツールを使用する場合は、これらの基本的なWebデザインの原則を理解し、異なる画面の複数のブレイクポイントでページのデザインをテストすることを確認してください。代表的なものとして、モバイル、タブレット、デスクトップが挙げられます。ポートフォリオの場合はデスクトップを優先しますが、それ以外の画面サイズでもサイトが壊れないようにしてください。
レスポンシブ・ウェブデザインをテストするための無料ツールはこちらです。
ステップ6 ホームページと情報のデザイン
上記のステップに注意深く従い、自分自身で調査したのであれば、成功のための準備は万端整っているはずです。最後の2つのステップでは、より高度なサイト構築の経験をお伝えします。
ステップ1でお教えしたことを思い出してください。ポートフォリオはあなたの商品です。採用担当者はあなたのユーザーです。ですから、UXデザイナーとして、よりユーザーフレンドリーな方法であなたの情報を提示する方法を考えてください。
ここにいくつかの例がありますが、リクルーターは何に着地すべきなのでしょうか。1分しか時間がない場合、最初にあなたの経歴を読んでもらいたいですか？それとも、あなたのベストプロジェクトに直接進んでもらいたいですか？
履歴書のCTAにはどの程度アクセスさせるのか、全ページに記載するのか、それとも自己紹介だけに記載するのか。
自分のケーススタディを例にとると、とても詳細で長いので、アンカーやスティッキーナビゲーション（赤のハイライト）を追加して、セクション間をすばやく移動できるようにするのがよいでしょうか？
これらはポートフォリオサイトごとに異なりますが、UXデザイナーとして、これらのユースケースをすべて考慮し、ポートフォリオをワンランクアップさせる必要があります。
また、このステップでは、Webサイトに味付けをしていくことを考えなくてはいけません。ステップ2で集めた、あなたが今までに作成したいくつかの情熱的なプロジェクトを含めることで、フレーバー要素を追加してください。
下の生徒の例を見てください。Jacksonは写真が大好きなので、アートや写真のセクションを設けると、とても個性的になります。
ブログを書くのが好き、イラストを描くのが好き、歌やダンスが好きなど、何でも構いませんので、アピールしてください。ただ、サイトナビゲーションの階層が明確であることを確認し、これらが、サイトへ出入りするリクルーターからこの項目が注意を引きすぎないようにしてください。
ステップ7. テスト、アップデート、精緻化する
優れたUXデザイナーは、常にテストとデータを信頼すべきですから、最後のステップはテストです。 何度も繰り返しテストしてください！！ テストせずに行うデザインは、せいぜい推測に過ぎません。
Leonさんや他の有能な新人デザイナー（以下にサンプルとして紹介するポートフォリオ）にポートフォリオを見せてくれと言っても、全員から「ポートフォリオを更新して変更する時間がなかったんだ…」と言われることでしょう。
それは、古典的なUXの流儀で、どんなポートフォリオも完璧にはなり得ないからです。大切なのは、常にフィードバックを受け、批評を受け、他の人に自分のサイトのナビゲーションをテストしてもらうことです。そうすれば、サイトのアップグレードは自然にされていくでしょう。
“私のポートフォリオはいつ完成するのですか？”
それは、あなたがどれだけの時間をもっているか、そして何を一番重要な機能として完成させるかによります。MVPのようなものだと思って、どんどん磨きをかけてください。
この7つのステップのゴールは、成功するポートフォリオの強固な基礎を築くことです。ポートフォリオはUXデザインの製品であると考え、最初から完璧であることはなく、反復はプロセスの一部に過ぎません。
私はいつも学生に、一度提出したら終わりの履歴書と違って、ポートフォリオは提出後も常に更新できるのだから、反復していくように、と言っています。
以下は、UXGOのコーチと私たちが指導した学生の例です。どれも完璧ではないので、それぞれの例から良いところだけを学んでください。
ビジュアルデザイナーはあまり得意ではない？この2つの例をご覧ください。HannahさんとIsabelleさんのものです。どちらもシンプルなランディングページですが、情報の階層が明確です。それぞれの事例には、明確なストーリーテリングとUXのロジックがあります。
https://www.meihannah.com/projects (UXGO コーチのHannahさんの例 — Epic games)
https://isabellecordova.com/ (ゲストコーチであるIsabelleさんの例 — Facebook)
もしあなたがピクセル単位の完璧な美学と意味あるマイクロインタラクションを推し進めることが好きであれば、JasperさんとJacksonさんの例が参考になるかもしれません。
これらの例では、観客の気を散らさずに、これらのインタラクションを良い「おとり」として機能させる方法について議論しました。なぜなら、「中身」は常に各ケーススタディの中にあるべきであることを忘れてはならないからです。
https://www.yichenxie.com/ (ゲストコーチの例 – Microsoft)
https://www.jacksonjiang.com/（コーチングを受けた生徒の例）
最後に
UXのポートフォリオに出会うと、どれも異なるものですが、成功しているものに注目し始めると、想像以上に多くの共通点が見えてきます。
LinkedinでLeonさんとは自由につながることができます。もしあなたがUXケーススタディの構成方法についてもっと学びたいと考えている学生なら、遠慮なく連絡を取ってみてください。
本日の記事は以上となります。
FAANGレベルの企業になると、なかなか採用時の事例も少なかったり、そのポジションに就いている担当者と会話できる機会というのはなかなか限られているのではないでしょうか？私自身も就職活動の際、OB訪問なんかをやったりしましたが、今の時代は必ずしも対面で無くオンラインかつ、Leonさんのように日本以外の有識者に向けて意見やレビューをお願いしてみるというのもかなり有効な手段なのではないでしょうか？
この記事がデザイン職を目指す方にとって、少しでも参考になれば幸いです。
というところで、本日の記事は終わりにしたいと思います
それではまた明日！
コメント