UI/UXデザインのポートフォリオの作り方｜見る人が知りたいこと

UI/UXデザインのポートフォリオを作ろうとして、手が止まる場所はだいたい決まっています。「どの作品を載せるか」ではなく、「その作品の何を書けばいいのか」で止まる。画面のスクリーンショットを並べたところで、見る側は判断できないからです。この記事では、採用担当と発注者がポートフォリオの何を、どの順番で見ているのかを起点に、載せる作品の決め方、ケーススタディの書き方、媒体とツールの選び方、提出前の確認までを手順として整理します。センスの話は出てきません。全部、手を動かせば埋まる項目です。

ポートフォリオは作品集ではなく「判断材料の束」

UI/UXデザインのポートフォリオでいちばん誤解されているのは、目的です。作品を見せるものだと思って作ると、きれいな画面が並ぶだけの資料になります。実際にポートフォリオを開く人がやっているのは鑑賞ではなく、選別です。「この人に任せて大丈夫か」を短時間で判断するために開いている。だから中身は、判断に必要な材料の束でなければ機能しません。

グラフィックデザインやイラストのポートフォリオとの決定的な違いがここにあります。イラストは成果物そのものが実力の証拠になりますが、UI/UXは違う。完成した画面が美しくても、それを作った人が要件定義から入ったのか、指示された通りに描いただけなのかは、画面だけでは分かりません。同じ画面に対して、関わり方が10通りあり得る。見る側はそこを確かめたがっています。

見る人が最初の数十秒で確認していること

実務で人を選ぶ側に立つと分かりますが、最初のスクロールで見ているのは作品の質ではありません。順番はおおむねこうです。

第一に、担当範囲です。この人はどこからどこまでをやったのか。リサーチ、要件整理、情報設計、ワイヤーフレーム、ビジュアル、プロトタイプ、実装への引き渡し、公開後の改善。この工程のうち何番目に立っていた人なのかを探しています。ここが書かれていないポートフォリオは、それだけで判断保留の山に積まれます。

第二に、案件の規模と種類です。BtoCのアプリなのか、社内で使う業務システムなのか、ECサイトなのか。UI/UXは領域によって作法がまったく違います。使う人が毎日何時間も触る業務画面と、初見の人が3分だけ触る申し込みフォームでは、正解の形が別物です。自分の領域と近いかどうかを確認しています。

第三に、思考の跡です。なぜその形にしたのか。何を検討して、何を捨てたのか。ここが書かれていると、次の案件でも同じように考えてくれるだろうと予測が立ちます。逆に完成形しか載っていないと、たまたまうまくいった1件なのか、再現性のある仕事なのかが分かりません。

きれいさの評価は、その後です。順番を間違えると、時間をかけたのに読まれないポートフォリオができあがります。

転職の選考と、発注者の選定では見る順番が違う

同じポートフォリオでも、読む人の立場によって重心がずれます。この違いを理解しないまま一つの資料を使い回すと、どちらにも刺さらないものになりがちです。

転職の選考で見られるのは、伸びしろとチーム適合です。企業は入社後に育てる前提で見ているので、現時点の完成度より、考え方の癖やコミュニケーションの取り方に目が行きます。プロセスを丁寧に書くほど有利になるのはこのためです。何に悩み、誰に相談し、どう決めたかを書けば、チームに入ったときの動き方が想像できます。

一方、業務委託で発注する側が見ているのは、着地の確実さです。育てる時間はないので、依頼した範囲を、決めた期日までに、揉めずに終わらせてくれるかを確認します。ここで効くのは、制約条件のなかで判断した記録です。予算が限られていた、既存のデザインシステムに合わせる必要があった、開発の実装コストを考えて機能を削った。こうした記述があると、発注側は安心します。

副業や独立を視野に入れているなら、両方の読み方に耐える構成にしておくのが現実的です。フリーランスとして案件を受ける場合に何が求められるかは、UI/UXデザインのフリーランスになるには？必要スキルと案件相場で職種の全体像を確認しておくと、ポートフォリオに何を書くべきかの解像度が上がります。

載せる作品を決める前に、自分の役割を棚卸しする

作品選びから始めると、たいてい失敗します。先にやるべきは棚卸しです。これまで関わった仕事を全部書き出し、それぞれで自分が何をしたのかを工程単位で分解する。この作業を飛ばして「良さそうな作品」を選ぶと、後からケーススタディが書けなくなって手戻りします。

担当範囲を工程で分解する

分解の粒度は、次の8工程くらいが扱いやすいところです。ユーザー調査、要件と課題の整理、情報設計とサイトマップ、画面設計とワイヤーフレーム、ビジュアルデザイン、プロトタイプと検証、実装者への仕様の引き渡し、公開後の計測と改善。

案件ごとに、この8つを「主担当」「一部担当」「関与なし」の3段階で埋めていきます。埋めてみると、自分の得意な区間がはっきり見えます。ワイヤーフレームから先は強いが調査は経験が薄い、あるいは実装との調整には慣れているが公開後の数字は追ったことがない、といった具合です。

この表は、そのままポートフォリオの各作品ページに載せる情報になります。8工程のどこを担当したかを明記するだけで、見る側の疑問の大半が解消します。書かない理由がありません。

出せない仕事をどう扱うか

実務経験がある人ほどぶつかるのが、守秘義務の壁です。社内システムのリニューアルや、公開前のプロダクト、クライアントとの契約で公開が禁じられている案件。これらは画面を出せません。

出せないものを無理に載せる必要はありませんが、存在ごと消す必要もありません。扱い方は3つあります。1つ目は、画面を伏せて工程と判断だけを文章で書く方法。2つ目は、色や文言をダミーに置き換え、レイアウトの構造だけを見せる方法。3つ目は、クライアントに確認を取って、公開範囲を限定して掲載する方法です。

3つ目が可能なら、それが最も価値の高い掲載になります。確認を取るときは、「ポートフォリオに掲載したい」と漠然と聞くのではなく、掲載したい画面、伏せる情報、掲載先の範囲、掲載期間を具体的に示して依頼します。これは受注後の実務でも同じで、曖昧な依頼は曖昧な返事しか返ってきません。

実績が少ない段階での埋め方

経験が浅い場合、既存サービスの改善提案が現実的な選択肢になります。実在するアプリやサイトを題材に、使いにくい箇所を特定し、改善案を設計して、なぜその形にしたかを書く。架空のサービスをゼロから作るより、既存のものを題材にしたほうが評価しやすいのは、制約が実在するからです。

ただし注意点があります。既存サービスの改善提案は、「勝手に作り直しただけ」に見えると逆効果です。避けるには、元の設計にも理由があった可能性を検討したうえで、それでもこう変えるべきだと書く必要があります。運営側が把握している事情を外部から知ることはできないので、断定は避け、「この前提が正しければ」という条件を明示する。この書き方ができているかどうかで、実務の勘所を分かっている人かどうかが透けて見えます。

ケーススタディの書き方が、評価の8割を決める

ポートフォリオの中身で最も差がつくのがケーススタディです。作品1件ごとの解説文のことですが、ここを埋められるかどうかで結果が変わります。書き方には型があります。

背景、課題、制約を先に置く

いきなり完成画面から始めないでください。読む人は前提を知らないので、画面を見ても評価軸がありません。最初に置くべきは3つです。

背景は、そのプロダクトが誰の何のためのものか。課題は、着手時点で何が問題だったか。制約は、使える時間、予算感、技術的な縛り、関わった人数、既存資産の有無です。特に制約は、書き忘れられがちですが最も効きます。制約なしで作られたデザインと、制約のなかで着地させたデザインでは、評価の意味が変わるからです。

たとえば「既存のデザインシステムに準拠する必要があり、新規コンポーネントの追加は不可だった」と書いてあれば、既存部品の組み合わせだけで課題を解いたことが伝わります。これは高い評価につながる情報です。書かなければ、単に地味な画面にしか見えません。

検討した案と、選ばなかった理由を残す

採用した案だけを載せるのは機会損失です。実務では必ず複数案を検討しているはずで、その比較こそが思考の証拠になります。

書き方は単純で、案A、案B、案Cを並べ、それぞれの長所と短所を1行ずつ書き、最終的にBを選んだ理由を書く。理由は「見た目が良かったから」ではなく、「操作回数が1回減り、既存ユーザーの学習コストも低いから」のように、判断基準を言語化します。

この部分は、後の面談や打ち合わせでそのまま話す内容になります。書いておけば口頭説明の準備も同時に終わります。逆に書いていないと、質問された瞬間に思い出しながら答えることになり、説得力が落ちます。

結果は数字がなくても書ける

「成果の数字を出せないから書けない」という声をよく聞きますが、書けます。数字は結果の表現方法の一つでしかありません。

数字が手元にあるなら当然使いますが、ない場合は、定性的な変化を具体的に書きます。問い合わせで多かった質問が減った、社内のオペレーション担当から手順の確認が来なくなった、開発側からの仕様確認の往復が減った。こうした変化は、実際にプロダクトを動かした人にしか書けない情報です。

さらに、結果が出なかった案件も書けます。想定と違った点、その原因の分析、次に同じ状況になったらどうするか。この3つが書けていれば、失敗事例はむしろ強い材料になります。うまくいった話しか載っていないポートフォリオより、信頼されやすい。

構成、分量、並び順の決め方

中身が決まったら、並べ方を決めます。ここは好みの問題ではなく、読まれ方から逆算するとほぼ答えが出ます。

掲載件数と並び順

載せる件数は、多ければ良いというものではありません。全部を丁寧に読む人はいないので、最初の2件でほぼ判断されます。ここに最も強いものを置き、以降は補強として並べる構成が合理的です。

並び順の基本は、応募先や依頼元との関連が高い順です。時系列で新しい順に並べたくなりますが、直近の仕事が相手の関心と一致しているとは限りません。BtoBの業務システムの案件に出すなら、業務システムの実績を先頭に置く。相手ごとに順番を入れ替える前提で作っておくと運用が楽になります。

冒頭には、自己紹介と対応範囲の要約を1ページ置きます。得意な工程、扱ってきた領域、使えるツール、稼働できる形態。ここで読み手が「自分の探している人か」を判断できるようにしておくと、以降が読まれる確率が上がります。

1作品あたりの情報量

1作品につき、画面の掲載は代表的な3枚から5枚程度に絞ります。全画面を並べると読み手の集中が切れますし、どこを見ればいいのか分からなくなる。絞ったうえで、その画面が全体のどの位置にあるのかを、遷移図や画面一覧のサムネイルで補います。

文章量は、1作品あたり800字から1,500字が読まれる上限だと考えて設計します。それ以上書きたい場合は、要約を先頭に置いて、詳細を折りたたむか別ページに逃がす。全部を同じ濃度で書くと、どこが重要なのか伝わりません。

媒体とツールの選び方

作る媒体は、Web、PDF、スライドの3種類が実質的な選択肢です。それぞれ向き不向きがあります。

Web、PDF、スライドの使い分け

Web形式は、更新が容易で、URLひとつで共有でき、プロトタイプへのリンクも自然に置けます。UI/UXの職種では、Web版を持っているだけで「作れる人」という前提が伝わる利点もあります。一方で、相手のネットワーク環境に依存し、印刷して回覧する運用には向きません。

PDF形式は、レイアウトが崩れず、オフラインでも開け、社内での回覧に強い。転職の応募では今もPDFの提出を求められる場面が残っています。欠点は、更新のたびに作り直しと再送が必要になることと、ファイルサイズが膨らみやすいことです。画像の書き出し設定を詰めないと、送れないサイズになります。

スライド形式は、打ち合わせで説明しながら見せる用途に最適です。1画面1メッセージで作れるので、口頭補足を前提にできる場面では最も伝わります。ただし単体で読ませると情報が足りません。

現実的な着地は、Web版を本体として持ち、提出用にPDFを書き出せる状態にしておく形です。両方を別々に作ると更新が二重になるので、片方から書き出せる作り方を最初に決めておきます。

無料で始める場合の選択肢

費用をかけずに始める方法は複数あります。デザインツールのプロトタイプ共有機能をそのままポートフォリオとして公開する、無料のノート系サービスで記事として書く、静的サイトのホスティングサービスに置く、デザイナー向けの投稿プラットフォームに載せる。いずれも無料の範囲で運用できます。

選ぶ基準は、独自ドメインが使えるか、閲覧にログインが必要か、パスワード保護ができるか、この3点です。特にパスワード保護は、守秘義務のある案件を限定公開するときに効きます。無料プランで保護機能が使えないサービスを選ぶと、後で載せられる作品が減ります。

ツール選びで悩む時間は、中身を書く時間に回したほうが結果につながります。見た目のテンプレートは後から差し替えられますが、ケーススタディの中身は書かないと永遠に埋まりません。

見せ方の技術的な部分を詰める

中身が揃ったら、読みやすさを整えます。UI/UXの職種では、ポートフォリオそのものが設計能力のサンプルとして見られるので、ここを雑にすると内容の評価まで下がります。

余白は、要素の関係性を示すために使います。関係が近いものは近く、遠いものは遠く。見出しと本文の距離が、本文と次の見出しの距離より広いと、どこまでが一つの塊か分からなくなります。まずこの距離関係だけを揃えるだけで、印象がはっきり変わります。

文字サイズの差は、本文を基準に決めます。見出しを大きくするのではなく、本文が読みやすいサイズを先に決め、そこから段階を作る。段階は3種類から4種類あれば足ります。多くすると、どれが上位なのか判別できなくなります。

視線誘導は、読ませたい順に強さを配置することです。強さは大きさ、色、余白、位置の4つで作れます。1画面のなかで最も強いものを1つに絞れているかを確認してください。強調が3つ以上あると、どれも強調として機能しません。

段組みは、1行あたりの文字数で決めます。日本語で1行が長すぎると視線が戻る位置を見失います。画面幅いっぱいに文章を流さず、読みやすい幅で止める設定を入れておきます。

スケジュールの立て方と、完成させるための現実的な計画

ポートフォリオが完成しない最大の理由は、能力ではなく計画です。まとまった時間が取れる日を待っていると、その日は来ません。

制作期間の見積もりでは、自分の見込みを楽観的に立てないことが重要です。ポートフォリオ制作の経験を公開しているデザイナーの記録にも、同じ趣旨の指摘があります。

1️⃣ 自分の本気を過信しないまず、手元にカレンダーを用意します。ポートフォリオをこの日までに完成させたいという大まかな目処は立ちましたか？おそらく、実際に手を動かしてその締め切りまでに作り上げることが自力でできる人はまずいないと考えたほうが気が楽になります。 他者がセットした期限には圧力が生じますが、いきなり本気を出してそれが持続するならば人間苦労しません。まずはベストの60~80%を毎日継続できたら上出来だと、スタンスを再認識するところから始めます。 出典: note.com

この指摘は実務の感覚と一致します。作業を分解して、1回あたり30分から60分で終わる単位に落とすのが、続けるための現実的な方法です。「作品Aのケーススタディを書く」は大きすぎるので、「作品Aの制約条件を箇条書きにする」まで割ります。

順番は、文章を先に書き、レイアウトを後にします。逆にすると、きれいな枠に入れる文章がなくて止まります。文章さえあれば、最悪テンプレートに流し込むだけで提出できる状態になる。この保険があるかないかで、締め切り前の精神状態が変わります。

私自身、最初にポートフォリオを作ったときは順番を間違えました。レイアウトから入って、余白の調整に何日もかけて、中身が空のページが並んだところで手が止まった。結局、全部を白紙のテキストファイルに書き直してから組み直すことになり、初回の作業がほぼ無駄になりました。同じ失敗をする人が多い工程なので、順番だけは先に決めてください。

使用ツールとスキルの書き方

ポートフォリオの後半に置くスキル一覧は、書き方次第で価値が変わります。ツール名を並べるだけの一覧は、ほとんど読まれません。読む人が知りたいのは「何が使えるか」ではなく「どの深さで使えるか」だからです。

深さを示すには、ツール名の横に用途を添えます。画面設計とプロトタイプまで作れるのか、共同編集でデザインシステムの運用まで担当したのか、他人が作ったファイルを引き継いで整理した経験があるのか。同じツール名でも、この3つは別のスキルです。用途を添えるだけで、読み手はどの工程を任せられるか判断できます。

デザインツール以外の記載も効きます。要件を整理するドキュメントツール、タスク管理、実装側とのやり取りに使う環境、簡易な計測ツール。UI/UXの仕事は一人で完結しないので、他職種と噛み合う道具を扱えることは実務上の強みです。特に実装者との引き渡しでどのような形式で仕様を渡していたかは、発注側が最も気にする部分の一つです。

学習中のスキルを書くかどうかは、書き方を分ければ問題ありません。「業務で使用」「個人制作で使用」「学習中」の3段階に分けて明示する。この区分をせずに全部を同列に並べると、面談で実務経験を確認されたときに食い違いが出ます。転職の選考では特にここを突かれるので、最初から正確に書いておくほうが安全です。

コーディングの可否も、書いておくと判断材料になります。HTMLとCSSがどこまで書けるのか、実装は行わないが実装コストを見積もれるのか、まったく触らないのか。触らないこと自体は減点ではありません。曖昧なまま進めて、着手後に「できると思っていた」となるほうが問題です。

提出前の確認と、フィードバックの受け方

完成したと思ってから、提出までに確認すべき項目があります。ここを飛ばすと、内容以外の理由で落ちます。

リンク切れの確認は必須です。プロトタイプの共有リンクは期限切れになることがあり、公開設定が変わっていることもあります。提出前に、ログアウトした状態のブラウザで全リンクを開いて確認してください。自分のアカウントでログインしたまま確認すると、閲覧できない設定でも開けてしまいます。

表示確認は、PC、タブレット、スマートフォンの3環境で行います。応募先が移動中にスマートフォンで開く可能性は十分にあります。文字が小さすぎないか、画像が読み込めているか、横スクロールが発生していないかを見ます。

ファイル名も見られています。「portfolio_final_2.pdf」のような名前は避け、氏名と職種が分かる名前にしておきます。受け取る側は複数のファイルを管理しているので、開かずに識別できる名前のほうが親切です。

フィードバックをもらう相手は、同職種の人と、そうでない人の両方に依頼します。同職種の人からは設計と表現の指摘が得られますが、採用担当や発注者は必ずしもデザイナーではありません。デザインを知らない人が読んで意味が通るかどうかは、非デザイナーにしか確認できません。

もらった指摘は、全部を反映する必要はありません。指摘には、事実の誤りの指摘、分かりにくさの指摘、好みの表明の3種類が混ざっています。前の2つは直し、3つ目は複数の人から同じことを言われた場合だけ検討する。この線引きをしないと、直すたびに軸がぶれます。

作った後に何をするかで差が開く

ポートフォリオは提出して終わりではありません。運用のしかたで結果が変わります。

更新のタイミングは、案件が終わったときです。記憶が新しいうちに、制約、検討した案、結果を書き留めておく。完成した画面のスクリーンショットも、公開前に手元に保存しておきます。時間が経つと、なぜその判断をしたのかを思い出せなくなり、書けることが減ります。

応募や提案のたびに全部を作り直す必要はありませんが、順番の入れ替えと冒頭の要約の調整はやる価値があります。相手が探しているものに合わせて先頭を変えるだけで、読まれる確率が変わります。

スキルの証明を補強したい場合、資格を組み合わせる方法もあります。UXの領域では設計プロセスの体系を証明できる資格があり、実務経験を補う説明材料として使えます。どの資格がどう案件につながるかは人間中心設計(HCD)専門家資格でUXデザインのフリーランス案件を獲得で整理されています。転職を視野に入れているなら、職種別の待遇の実態をデザイナーの年収データ｜Web・UI/UX・グラフィック分野別【2026年版】で把握しておくと、応募先の選定精度が上がります。

現場の観察から見えること

フリーランスと在宅ワークの市場を20年運営してきた立場から見ると、ポートフォリオで案件が決まる人と決まらない人の差は、作品の質よりも「読む人の手間をどれだけ減らしているか」に出ます。担当範囲が書いてある、制約が書いてある、判断理由が書いてある。この3つが揃っているだけで、依頼側は確認のやり取りを何往復も省けます。省けた分の安心が、そのまま依頼につながっています。

もう一つ、長く続いている人に共通する傾向があります。単発の作品を増やすより、「この人に任せると楽だ」と思われる状態を作ることに時間を使っている。ポートフォリオはその入口で、読み手の疑問を先回りして潰す資料になっているかどうかが分かれ目です。中間マージンの乗らない直接取引では、依頼側は同じ予算でより多くを頼めて、受け手の手取りは厚くなります。手数料0%という条件が効いてくるのは、単価の話としてではなく、この関係が長く続いたときの積み上がり方としてです。

案件の探し方と職種の実務範囲を先に把握しておくと、ポートフォリオに何を書けばいいかが逆算できます。UI/UXやアプリのデザインでどのような依頼が動いているかはUI/UX・アプリデザインのお仕事で確認できますし、隣接領域まで守備範囲を広げたい場合はAI・マーケティング・セキュリティのお仕事も見ておくと、書くべき実績の方向が定まります。実装側の工程まで理解しておきたいならソフトウェア作成者の年収・単価相場で開発職の役割分担を把握しておくと、引き渡しの記述に説得力が出ます。

ポートフォリオは、自分の仕事を他人が判断できる形に翻訳する作業です。翻訳の質は、センスではなく手順で上がります。棚卸しをして、制約を書き、判断理由を残し、順番を相手に合わせる。この4つを回していけば、更新するたびに強くなっていきます。

よくある質問

Q. UI/UXデザインのポートフォリオには何件くらい作品を載せるべきですか？

件数よりも、先頭の2件の完成度が重要です。全部を丁寧に読む人はいないため、応募先や依頼元との関連が高いものを先頭に置き、以降は補強として並べる構成が合理的です。件数を増やすより、1件ごとに担当工程、制約、判断理由を書き切るほうが評価につながります。相手に合わせて順番を入れ替えられる作りにしておくと運用が楽になります。

Q. 実務経験がない場合、何を載せればいいですか？

実在するサービスの改善提案が現実的です。架空のサービスをゼロから作るより、制約が実在するぶん評価しやすくなります。ただし勝手に作り直しただけに見えると逆効果なので、元の設計にも理由があった可能性を検討したうえで、「この前提が正しければ」と条件を明示して提案する書き方にしてください。断定を避けることが実務の勘所として伝わります。

Q. 守秘義務で画面を公開できない案件はどう扱いますか？

扱い方は3つあります。画面を伏せて工程と判断だけを文章で書く、色や文言をダミーに置き換えて構造だけ見せる、クライアントに確認して限定公開する、のいずれかです。確認を取る場合は、掲載したい画面、伏せる情報、掲載先、掲載期間を具体的に示して依頼します。曖昧に聞くと曖昧な返事しか返ってきません。

Q. 無料でポートフォリオを作れるツールはありますか？

デザインツールのプロトタイプ共有機能、無料のノート系サービス、静的サイトのホスティング、デザイナー向け投稿プラットフォームなど、無料の範囲で運用できる選択肢は複数あります。選ぶ基準は独自ドメインが使えるか、閲覧にログインが必要か、パスワード保護ができるかの3点です。特にパスワード保護がないと、限定公開したい作品を載せられなくなります。