クリエイター向け
お仕事・転職お役立ちガイド

転職を成功に導く、UIデザイナー・Webデザイナーのポートフォリオの作り方

ポートフォリオとは、自分がこれまでに力を込めて作った作品集のことを指します。UIデザイナー・Webデザイナーにとっては、今までデザインしてきたWebサイト集がそのままポートフォリオになります。

UIデザイナー・Webデザイナーにとってのポートフォリオは、採用企業や採用企業が発注前にデザイナーのスキルを確認するために用いられることが多いです。具体的には、「どういったテイストのデザインが得意なのか」「どのぐらいのデザインスキルがあるか」を採用企業側が判断します。

そのため、ポートフォリオに載せる作品は多ければ良いということではなく、クオリティの低いものばかりだとレベルの低い作品ばかりが目立ってしまい、ポートフォリオの効果は薄くなってしまいます。

今回は、UIデザイナー・Webデザイナーとしての転職や仕事を受注しやすくなるポートフォリオの作り方を解説していきます。

デザイン・デジタル業界でのデザイナー転職ならBRIK JOB

UIデザイナー・Webデザイナーのポートフォリオ作成方法

UIデザイナー・Webデザイナーのポートフォリオ作成は大きく分けて4つの手順で進めます。

  1. プロフィールをまとめる
  2. プロジェクトでの制作プロセスをまとめる
  3. 自身のスキルレベルをまとめる
  4. 実績をまとめる

それでは一つ一つ解説していきます。

1.プロフィールをまとめる

まずは、自分を知ってもらうために自分の簡単なプロフィールをまとめましょう。プロフィールには主に以下の5つの項目を記載します。

・経歴、職歴、実務に関連する資格といった基本的な情報
・どのようなプログラミング言語を学習したのか
・どのようなソフトを利用しているのか
・どのような作品を作ってきたのか
・得意としている業務やスキル

実際に受注した案件があるのなら、どのくらいの規模の案件を、どのくらいの工数やスキルを使ったのかも可能であれば具体的にまとめて記しましょう。また、持っている資格や職歴、アイコンなども掲載すると、採用企業からの信頼性も上がります。

採用企業側にとっては、「どのようなスキルを持っているのか」だけではなく、「どういった人なのか」も採用のために重要視する情報です。自分自身の経歴や知見、仕事に対する考え方・姿勢、日常的に行っている情報収集・勉強の内容などをプロフィールを細かくまとめることで、採用企業の記憶に残りやすいポートフォリオになります。

2.プロジェクトでの制作プロセスをまとめる

次はプロジェクトごとの制作プロセスについてまとめていきます。ここでまとめておきたいのは以下の5点です。

1.作品のメインビジュアル
2.プロジェクト名
3.制作担当
4.コンセプト
5.工夫点

1.作品のメインビジュアル

自分が担当したプロジェクト(作品)が一目でわかるビジュアルを載せましょう。メインとなるビジュアル以外にも、Webサイト内の下層ページなどを含めたWebサイトの全体像を載せることで、より細かなデザインスキルをアピールできます。

また、パソコン版とスマホ版のレスポンシブデザインも作成している場合には、そのどちらも記載しましょう。

2.プロジェクトの概要

プロジェクトの概要をまとめる上で、最も重要なことは採用企業側に「この人を採用したら自社でどのような活躍をしてくれるのか」を伝えることです。

まずは、自分が担当したプロジェクト名と、そのWebサイトのURLを掲載して、担当者が実際のWebサイトの画面を確認しにいける状態を作りましょう。その後、採用イメージを具体的にするために、プロジェクトの内容として以下の4点をまとめましょう。

・プロジェクトにどのような課題や問題があったのか
・プロジェクトにどのような目標や目的があったのか
・プロジェクトに自身がどのような貢献をしたのか
・自身がどのような手法を使ったのか

特に、どのような課題や問題があり、どのような目標や目的が合ったのかという点についての要件定義の順序や視点、自身のヒアリング内容についてまとめましょう。

例えば、採用企業にあまりWebの知見がない場合、要件定義からお願いしたい場合もあります。そのため、最初から多くの業務を巻き取れることを具体化しておくと、採用企業にとっても安心感が大きいでしょう。

また、プロジェクトによっては、ディレクターの指示書のもと作業のみをした場合もあるかと思います。その際には、具体的に「プロジェクトの中で自身が意思決定したこと」や、「プロジェクトにどのような貢献をしたのか」などをまとめることで、採用企業側にも採用後の活躍イメージを持ってもらうことができます。

UIデザイナー・Webデザイナーには、自走力やヒアリング力などのソフトスキルと、デザインスキルなどのハードスキルが求められます。プロジェクト概要では、特にソフトスキルについて、アピールできる状態にしておきましょう。

3.制作担当

プロジェクトの概要をまとめたら、自分がプロジェクトのどの部分を担当したのかも明確に記載しておきましょう。

例えば、採用企業側にとっては、「IllustratorやPhotoshopなどのデザインだけができる人材なのか」「それともコーディングまでできるのか」「javascript等を用いたプログラミング領域まで任せられるのか」などどこまで任せられるのかを確認したい場合があります。

採用企業が仕事を発注しやすくなるように、自分のスキルをどのように活用しているのかなどをまとめておきましょう。

4.コンセプト

どんなに良い設計、良いデザインだったとしても、採用企業の求めるコンセプトに沿っていないWebサイトになっていては意味がありません。コンセプトも明記しておくことで、「誰向けのデザインが得意なのか」、「Webサイト制作目的を実現できるか」を採用企業側も把握できます。

そのため、ポートフォリオ上でも、「誰に向けて、どのような点を意識してデザインしたのか」を細かく記載しましょう。作品のビジュアルだけを見ても判断ができないような細かいポイントをアピールすることで、より採用企業に表面上だけではなく制作プロセスを深く理解してもらうことができます。

5.工夫点

採用企業の問題や要望に沿ったデザインにするために改善したり、こだわった工夫点をアピールしましょう。工夫点の具体例としては、以下のような点が挙げられます。

・目玉となるコンテンツを分かりやすく配置した
・文字の強弱
・配色
・視線がバラつかない文字や画像配置になっているか

など、自分がWebサイトを作る上で工夫した点を詳しくアピールすることが大切です。ここは、どちらかと言えば、担当範囲やプロジェクトの概要でまとめた点に加えて、自身のこだわりなどを記載しておきましょう。

3.自身のスキルレベルをまとめる

プロジェクトに関しての記載が終わったら、次は自身のスキルレベルとまとめて、採用企業が仕事を発注しやすい環境を整えていきます。

UIデザイナー・Webデザイナーなどのクリエイティブ系のポートフォリオには、まず使用できるデザインソフトを以下のように明記しましょう。

・Adobe XD
・Sketch
・Figma
・Photoshop
・Illustrator
・その他のソフト

そしてそのソフトの使用レベルが、上級、中級、初級、もしくは完全初心者なのかを伝えましょう。もし、スキルレベルを自分で評価するのが難しいと感じるのなら、ソフトの使用年数を記載することで、採用企業側にも使用レベルを理解してもらいやすくなります。

また、スキルだけではなく自分が担当できる業務の記載も忘れずに行いましょう。デザインのみなのか、コーディングまでできるのか、プログラミングの領域まで担当できるのか。
そして、そのレベルも先ほどと同様に、「上級、中級、初級」などという形で自身のスキルがどのくらいなのかをはっきり記載しておきましょう。

4.実績をまとめる

最後には、これまでに作成したWebサイトの一覧を載せましょう。実績は自身のスキルレベルを具体的に示し、より説得力を高めることができます。

それぞれのWebサイトの画面キャプチャ(ホーム画面等)を大きく分かりやすく配置した上で、実際のWebサイトのURLを添付しておくことも大切です。

また、各実績でどのようなスキルを使っているのか、どのようなアプローチをしたのかなどをまとめることで、採用企業側に自分のスキルレベルや能力をより正確に伝えることができます。

ポートフォリオを作る際には採用者目線が重要

ポートフォリオ作りには2つの大事なポイントがあります。

1.Webデザインのスキルを見せること
2.採用後の活躍イメージがわかること

ポートフォリオではデザインスキルだけがあるのではなく、実際に採用後の活躍イメージを持ってもらうことが大切です。

ポートフォリオで伝えるべき項目は、採用者の目線になってみると考えやすくなります。
採用者がチェックするのは以下のような項目になります。

・視覚上のデザインのスキル、情報整理のスキル
・Webサイトの目的を理解して、しっかりとデザインコンセプトを組み立てられているか?
・制作したデザインについて、その意図を文章でしっかりと説明できているか?
・年齢や学歴、資格などのプロフィール
・これまでにどんな勉強をしてきたか?普段、どの様に情報収集をしているか?
・どんな業務を担当できてそのレベルがどのくらいなのか?
・過去の実績、そのプロジェクトでどこを担当したのか
・トレンドをうまく取り入れ、そのプロジェクトで活用できているか?
・どういった制作チームで仕事をしたか?リーダーシップを取れる人材か?
など。

企業は、デザインに対する情報整理力や説明力を総合的に見て「伝える力がある」と判断します。伝える力があると感じてもらうためには「問題の解決方法とプロセス」を記載すると良いでしょう。

・このプロジェクトにはどんな問題があり、それを解決するためにどんなコンセプトを掲げ、どのようにデザインとしてアウトプットするのか。
・課題を見つけてから解決するまでにどんな思考を繰り返したのか。
・企業や採用企業が抱える問題をどのようにデザインの力で解決したのか。

これらを判断できる思考プロセスを載せることが、デザイナーに必要な「伝える力」を見せることができているポートフォリオとなります。

デザインのスキルを伝えることだけではなく、自分を採用したとき、企業にどんなメリットをもたらすのかを判断できるポートフォリオを作成しましょう。

ポートフォリオの作り方に明確な正解はありませんが、自分が実際に採用者目線になった時にどんなことが気になるのか?を意識して作ることで、UIデザイナー・Webデザイナーとしての転職や仕事を受注しやすくなるポートフォリオを作ることができるようになります。