UI/UXデザイナーのポートフォリオ作成術｜未経験からでも伝わる構成

公的な職業情報から見る実績の位置づけ

厚生労働省の職業情報提供サイトjob tag（UX/UIデザイナー）では、それまでの仕事の実績が名刺代わりとなっていると説明されています。あわせて、デザインの基礎や情報設計の基礎に加え、ユーザーの側に立った設計のための人間中心設計や心理学の知識、プレゼンテーション能力が求められる場面もあると記載されています。

実績を示す手段であるポートフォリオに、設計の根拠と伝え方の工夫を盛り込むことは、こうした求められる力を示すことにもつながります。

役割と期間をはっきり書く

チームで取り組んだ制作の場合、自分がどの工程を担当したのかを明記します。すべてを一人で行ったかのように書くと、面談で質問されたときに説明が食い違い、かえって信頼を損ないます。期間も書いておくと、作業の規模が伝わります。

調査で得た気づきを具体的に書く

「ユーザーインタビューを行った」だけでなく、「〇人に話を聞いたところ、〇人が支払い画面で迷っていた」のように、何が分かったのかを具体的に書きます。ユーザーへの調査が難しい場合でも、既存サービスの比較や、身近な人に操作してもらった観察の結果を載せることで、根拠をもとに考えたことを示せます。

採用しなかった案も載せる

最終案だけを並べるより、途中で検討した案と、それを採用しなかった理由をあわせて載せるほうが、判断の力が伝わります。手書きのスケッチやワイヤーフレームなど、途中の段階の成果物も積極的に見せましょう。

検証の結果と学びで締めくくる

試作品を実際に触ってもらい、どこでつまずいたか、それを受けてどう改善したかを書くと、検証と改善の力を示せます。最後に、次に取り組むなら何を変えたいかを書いておくと、振り返る力と成長意欲も伝わります。

既存のアプリやサイトの改善案を作る

普段使っているアプリやWebサイトの使いにくい点を見つけ、改善案を作る方法は、取り組みやすい題材です。ただし、そのサービスの運営会社から依頼された仕事であるかのような書き方は避け、「学習のために個人で取り組んだ改善提案」であることを明記しましょう。

架空のサービスを企画して設計する

「地域の子育て世帯向けの情報アプリ」のように、架空のサービスを設定して一から設計する方法もあります。課題の設定から自分で行うため、企画力も示せます。架空の題材であることは、はっきり書いておきます。

身近な人の困りごとを解決する

家族や友人、地域のお店などが抱える困りごとを聞き、その解決策を設計する方法もおすすめです。実在のユーザーに話を聞き、試作品を試してもらえるため、調査と検証の過程を具体的に示しやすくなります。掲載する際は、相手の了承を得ましょう。

各ケーススタディの冒頭に要約を置く

採用担当者や発注者は、多くのポートフォリオを短い時間で確認します。ケーススタディの冒頭に、課題、自分の役割、結果を数行程度で記載しておくと、全体を読まなくても要点が伝わります。

文章だけでなく図や画面で示す

調査の結果は図や表に、設計の変化は修正前と修正後の画面を並べて見せると、読む負担が減ります。画面ごとに、設計の意図を一言添えるだけでも、理解が深まりやすくなります。

作品は少数に絞って深く見せる

作品の数を増やすことにこだわると、一つひとつの説明が浅くなりがちです。過程を丁寧に説明できる作品を少数に絞り、深く見せるほうが評価につながりやすい傾向があります。

公開の方法を選ぶ

ポートフォリオは、Webサイトとして公開する方法、PDFとして作成する方法、Figmaなどのデザインツールの共有リンクで見せる方法などがあります。応募先からの指定がある場合はそれに従い、そうでなければ、スマートフォンでも見やすく、リンク一つで共有できる形にしておくと便利です。

ポートフォリオ自体の使いやすさも確認する

ポートフォリオのサイトそのものも、UI/UXデザイナーとしての力を示す作品の一つとして見られます。文字と背景のコントラストやボタンの押しやすさを確認する際は、W3Cが公開しているWCAG 2.2の基準が参考になります。たとえば、通常の文字と背景のコントラスト比は4.5:1以上、クリックやタップの対象の大きさは24×24 CSSピクセル以上が、レベルAAの基準の一つとして示されています。

ケーススタディの中で、配色や文字サイズをアクセシビリティの観点から決めた理由を書いておくと、設計の根拠を示す材料にもなります。

守秘義務のある情報を載せない

実務で手がけた案件を載せる場合、クライアントとの契約で守秘義務が定められていることがあります。公開してよい範囲を事前に確認し、確認が取れない場合は、社名や画面の内容をぼかしたり、考え方の過程だけを架空の題材に置き換えて説明したりする方法を検討しましょう。

素材の権利を確認する

画面に使った写真やイラスト、アイコン、フォントが、ポートフォリオで公開してよい条件のものかを確認します。既存サービスの改善案で、そのサービスのロゴや画面を使う場合も、学習目的の提案であることを明記し、誤解を招かない見せ方を心がけましょう。

AIを使った部分を明らかにする

画像の生成や文章の作成にAIを使った場合は、どの部分にAIを使い、どこを自分で考えたのかを説明できるようにしておきましょう。AIが画面を作れる時代だからこそ、ポートフォリオでは自分の考えの過程を示すことの重要性が増しています。

生成AIで作った画像を載せる場合は、権利の面にも注意が必要です。文化庁のAIと著作権に関する考え方について（概要）では、生成物に既存の著作物との類似性と依拠性が認められる場合、権利制限規定の対象とならなければ著作権侵害となり得ると整理されています。既存の作品やサービスの画面に似ていないかを確認してから掲載しましょう。AIの使い方はUI/UXデザイナーのAI活用でも紹介しています。

完成した画面だけを並べる

見た目の良い画面だけを並べ、なぜその設計にしたのかの説明がないと、UI/UXデザイナーとしての考える力が伝わりません。画面ごとに設計の意図を添え、課題から結果までの流れを示しましょう。

作品の数を優先して説明が浅くなる

多くの作品を載せようとして、一つひとつの説明が浅くなるケースです。数を追うより、一つの作品を深く掘り下げるほうが評価されやすい傾向があります。

作って終わりにする

一度作ったポートフォリオを更新しないままにしておくと、成長が伝わりません。新しく学んだことや、応募先からの反応をもとに、定期的に見直しましょう。完成したら、デザインの経験がある人に見てもらい、伝わりにくい点を指摘してもらうのも効果的です。添削を受けられる学習先を探す場合はUI/UXデザイナーにおすすめのスクールも参考になります。