事務局の視点から、SNSやお知らせでは
伝えきれない
スクールの情報や
魅力を発信しています。

2026.08.10

webデザイン
ポートフォリオ

ポートフォリオの構成、どう決める? 転職や案件獲得につなげる選び方・並べ方

ポートフォリオの構成、どう決める? 転職や案件獲得につなげる選び方・並べ方|nestsブログ記事のアイキャッチ

ポートフォリオを更新しようとして、手が止まったことはないでしょうか。
どの仕事を載せるか。どういう順番で並べるか。1件あたり、どこまで説明を書くか。作品そのものは手元にあるのに、この3つを毎回ゼロから決め直している。そんな進み方になりがちです。

決め方の基準を先に持っておくと、この迷いはかなり減ります。しかも基準は、次に何を任されたいかが変わっても、そのまま使い回せます。

この記事で扱うのは、実績・作品の部分をどう組み立てるかです。プロフィールやスキル一覧といった、ポートフォリオサイト全体のページ構成は扱いません。選考の進め方や面接での伝え方、載せる作品をどう作るかという話も扱いません。
すでに手元にある仕事を、何を選び、どの順に並べ、どこまで説明するか。 ここに絞ります。

ポートフォリオが答えているのは、「何を任せられるか」

ポートフォリオを見る人が知りたいことは、突き詰めると一つです。この人に、何を任せられるのか。
作品は、その答えそのものではありません。答えを裏づける根拠として置かれています。だからポートフォリオを組む作業は、作品を並べる作業ではなく、「任せられること」を作品を根拠にして伝える設計になります。

学ぶ段階では、作品が完成していれば成果でした。仕事として見せる段階では、その作品から何が読み取れるかまでが成果物に含まれます。ここが、学習と実務で要求の変わる場所です。

読み取れるかどうかを決めているのは、作品の出来だけではありません。どれを載せ、どの順に置き、どこまで説明するか——つまり構成です。同じ作品群でも、構成が変われば読み取れることは変わります。
これは、対象を自分の仕事に置き換えた情報設計にあたります。設計そのものの考え方は情報設計とワイヤーフレームは何が違う?で扱っているので、ここでは繰り返しません。

この記事では、構成を3つの判断に分けて考えます。何を載せるか(選定)、どの順に並べるか(順序)、どこまで書くか(粒度)です。

何を載せるかを決める ― 選定

まず、全部載せる形をいったん外します。
手元にある仕事をすべて並べると、点数は増えますが、1件あたりに割ける説明は減ります。載せる基準を先に決めておくと、選ぶ作業が「どれを削るか」ではなく「どれを選ぶか」という判断に変わります。

前提として、見せられる状態に仕上がっていること

作品の完成度は、実際に見られています。ここを下げてよいという話ではありません。見せられる水準に達しているものの中から選ぶ、というのが出発点です。
そのうえで、選ぶときに効く基準が2つあります。近さと、証明していることの違いです。

基準1:これから任されたい仕事に、どれだけ近いか

思い入れの強さでも、新しさでもありません。近さです。
近さは、3つに分けて測れます。

  • 扱ったもの:業種、領域、サービスの種類
  • 担当した範囲:どこからどこまでを引き受けたか
  • 解いた問題の種類:何を良くするための仕事だったか

3つのうち2つが重なっていれば、十分に近いと言えます。逆に、見栄えがしても3つとも遠い仕事は、載せると焦点がぼやけます。

基準2:その作品が、ほかの作品にはない何を証明するか

近さだけで選ぶと、似た仕事が5件並んで、すべてが同じ能力しか証明していないという状態が起こります。
同じUIの仕事でも、要件整理から入ったもの、情報設計を組み直したもの、公開後に検証して直したもの。証明していることが違うなら、3点を載せる意味があります。似た画面を作っただけの3点なら、代表となる1点に絞ったほうが強くなります。

2点目以降を足すときは、「これは何を新しく証明するか」を先に確かめます。 答えられないものは、載せても構成を薄くします。

点数を絞ると、1点あたりに説明を置ける

点数と説明の厚さは、トレードオフの関係にあります。目安として3〜5点あれば、それぞれに判断の説明を添えられます。ただしこれは決まった数字ではなく、1点あたりにどれだけ書きたいかで変わります。

個人制作・課題も載せられる。ただし前提を明記する

個人制作、スクールの課題、仮想の案件も掲載できます。実際に依頼があったかどうかより、そこに判断が残っているかで決まります。
ただし、実際に依頼された仕事のように見せるのは避けます。 どんな課題と制約を自分で置いたのか、その前提を書いたうえで、何を決め、何を確かめたかを説明します。前提が書いてあるほうが、判断の根拠は伝わります。

守秘義務のある仕事は、公開できる範囲の確認から

成果物を見せられない仕事もあります。この場合、いきなり伏せ字にして載せるのではなく、まず契約内容を確認し、どこまで公開できるかをはっきりさせます。
守秘の対象は画面だけとは限りません。案件の存在、クライアント名、担当した範囲、扱った課題そのものが対象になることもあります。

公開の許可が得られる場合に限って、社名・数値・画面といった特定につながる情報を伏せ、担当範囲とそこで下した判断を説明する形が取れます。許可が得られなければ、載せません。 ここは構成の判断より前の話です。

どの順に並べるかを決める ― 順序

最初の1点で、何の人かが決まる

見る人は、上から順に読み進めながら「この人は何の人か」を組み立てていきます。先頭に置いた仕事が、その最初の枠組みになります。
任されたい仕事にいちばん近いものを、先頭に置く。 順序の中で最も効くのは、この判断です。

時系列に並べない

制作順は作り手の都合であって、読む人の関心の順ではありません。新しい順に並べると、直近の仕事=いちばん見せたい仕事、という偶然に構成を預けることになります。

途中で読むのをやめても伝わる順にする

最後まで読まれる前提をいったん外して、上から順に、伝えたいことの重要度が下がる並びにしておきます。そうしておくと、どこで読むのをやめられても、伝わる中身が大きく崩れません。

同じ種類の仕事は、まとめて置く

似た仕事が複数あるときは、間に別の種類を挟まないほうが、「この領域の人だ」という読み取りが速くなります。
種類を散らして並べると、幅広さは伝わりますが、専門性は伝わりにくくなります。どちらを取るかは、次に何を任されたいかによって変わります。

例:BtoBサービスのUI設計を任されたい場合

手元に4件あるとします。

  • A:業務管理ツールの画面設計(要件整理から担当)
  • B:BtoB企業のコーポレートサイト(ビジュアル中心)
  • C:社内向けダッシュボードの改修(利用状況を見て改善)
  • D:飲食店のLP(デザインのみ)

近さで測ると、AとCが残ります。 Bは業種こそ近いものの、担当した範囲も解いた問題も遠い。Dは3つとも遠い。
次に、AとCが別々の何を証明しているかを見ます。Aは要件整理から入れること、Cは出したあとに検証して直せること。 証明していることが違うので、2点とも載せる意味があります。

並べるときは、いちばん近いAを先頭に。Cを2番目に置くと、「設計から入って、出したあとも見直せる人」という並びになります。Bを3点目に加えるかどうかは、任されたい仕事にビジュアルの比重があるかで決めます。

4つの作品を、任されたい仕事への近さと新しく証明できることで比較し、掲載する順番を決めた表
選ぶ基準は近さ、並べる基準は証明できることの違い。近さだけで絞ると同じ能力の証明が並ぶため、2点目以降は「何を新しく証明するか」で置き場所を決める

並びから伝わる人物像を、一言で言えるか

並べ終えたら、その並び全体から伝わる人物像を、自分の言葉にしてみます。上の例なら「BtoBサービスの画面設計を、要件整理から任せられる人」といった一文です。
ここが言葉にならないときは、選定か順序のどちらかが、まだ決まりきっていません。

どこまで書くかを決める ― 説明の粒度

1作品あたりに書くことを、4つに絞ります。

1. 目的と課題 ― 誰の、どんな課題に対するものだったか
2. 担当した範囲と制約 ― どこからどこまでを引き受けたか。期間・体制・与えられた条件
3. 判断が分かれた箇所と、選んだ理由
4. 結果と、どこまで確かめたか

3が要になる

ここが、作品を仕事に変える項目です。
書くのは、見た目の説明ではありません。選ばなかった案があったこと。そのうえで、選んだ理由があったこと。 この2つが伝われば足ります。

なぜ思考の過程まで見せる必要があるのかは、採用されるポートフォリオの作り方セミナーのレポートで詳しく扱っています。

1作品の説明に書く4項目と、作品の冒頭に短く置くメタ情報を並べた図
4項目はどれも省けないが、厚さを揃える必要はない。③だけが、完成した画面からは読み取れない制作時の判断を伝える

4は、3つに分けて書く

「結果」と言っても、確かめられている度合いは仕事によって違います。同じ欄にまとめて書くと、確かめていないことまで成果に見えてしまいます。 分けて書きます。

  • 数値で確認できた成果:問い合わせ数、離脱率、対応時間など。出せる場合は具体的に
  • 定性的に確認できた変化:ユーザーテストで目的の操作を完了できた、関係者の判断基準が揃った、更新時の迷いが減った、など
  • 計測していない場合:無理に結果を作らず、「未計測」としたうえで、何を満たせば目的を達したことになるかを、設計時にどう置いたかを書く

3つ目は結果の代わりにはなりませんが、どんな目的を持って設計したかを示す材料にはなります。数字がないことを理由に欄ごと空けるより、確かめた範囲を正確に書くほうが、判断のできる人だと伝わります。

説明の長さは揃えない

4項目すべてを、全作品で同じ密度で書く必要はありません。任されたい仕事に近い作品ほど厚く、遠いものは1〜2行で足ります。
全部を同じ厚さで書くと、どれが本命なのかが伝わらなくなります。

メタ情報と説明は、置き場所を分ける

期間・体制・担当範囲・使用ツールは、応募条件と照らして見られることがあります。書かない、ではなく、作品の冒頭に短くまとめるのがおすすめです。
そのうえで、本文は課題・判断・結果に使います。工程を最初から順に記録していくと、量は増えますが、読む人が探している判断は埋もれます。説明を増やすほど伝わるわけではありません。

受け取られ方を、外から確かめる

書いた説明文をAIや第三者に読んでもらい、「この人には何を任せられそうか」を答えてもらう方法があります。
返ってきた答えが、自分が伝えたかったことと違っていれば、そこが説明の足りていない場所です。意図したとおりに受け取られるかを、提出する前に一度確かめられます。

AIを使う場合は、守秘義務のある情報や個人情報を入力しないよう気をつけてください。 公開できる範囲に直したあとの文章で試します。

構成は、任されたい仕事が変われば決め直せる

作品を1点増やす前に、いま手元にあるものの選び方・並べ方・説明を見直す。順番としては、こちらが先です。手元に近い仕事が1件もないなら新しく作るほうが早いこともありますが、その判断も、構成を一度決めてみると見えてきます。

選定・順序・粒度。この3つは、一度決めたら守り続けるものではありません。次に何を任されたいかが変わったら、同じ手順でもう一度決めればいい。基準を持っておくと、そのたびの組み直しが軽くなります。
ポートフォリオは、作品の置き場ではありません。自分の仕事を伝えるための設計物です。

提出前のチェックリスト

□ 載せる作品が、見せられる水準に仕上がっている
□ 載せる作品を、「任されたい仕事にどれだけ近いか」で選べている
□ 2点目以降について、「これは何を新しく証明するか」を言える
□ 先頭の1点が、いちばん任されたい仕事に近いものになっている
□ 並び順を、制作順ではなく伝えたい順で決めてある
□ その並びから伝わる人物像を、一言で言える
□ 各作品について、目的と課題・担当範囲と制約・判断と理由・結果の4つを書いてある
□ 判断が分かれた箇所で「何を選んだか」を、作品ごとに書けている
□ 結果を、数値・定性・未計測に分けて書いてある
□ 個人制作・課題について、自分で置いた前提を明記してある
□ 守秘義務のある仕事について、公開できる範囲を契約で確認してある
□ 期間・体制・使用ツールを、作品冒頭に短くまとめてある

まずは気軽に、話してみませんか? ― 無料カウンセリング

「学んできたことを、仕事として見せる形にまとめきれていない」「どれを載せるかで毎回迷う」「レビューしてくれる人が社内にいない」——こうした悩みは、一人で考えていても、なかなか整理がつかないものです。

nestsの無料カウンセリングでは、これまでの経験やスキル、いま抱えている課題を一緒に言語化していきます。売り込みの場ではありませんし、しつこい勧誘もありません。完全無料・オンライン(30分〜1時間)、予約は約3分で日程が決まります。

この記事では構成を決める3つの判断を示しましたが、次に何を任されたいかは人によって違います。課題を言語化し、分解して、デザインに落とし込む。その進め方を自分の仕事に合わせて身につけたいということであれば、1対1で伴走するパーソナルコースという選択肢もあります(コースの詳細はこちら)。
どのコースが合うかも含めて、まずは無料カウンセリングで話してみてください。

nests無料カウンセリングの案内バナー。あなたの現場の課題に専属講師を。無料カウンセリングの申し込み

無料ウェビナー開催中!AIを使ったデザイン実務、実際に見てみませんか?

記事の中で、書いた説明文をAIに読ませて、受け取られ方を確かめる話に触れました。では実際の制作現場では、AIをどこに入れているのか——これは、記事で読むだけではイメージしにくい部分だと思います。

nestsでは、現役デザイナーによるAI活用デザイン実務の無料ウェビナーを定期開催中です。Claudeをはじめとする生成AIを制作フローのどこで使うのか、実例を交えながらリアルに解説します。参加は無料です。セミナー一覧から最新の開催情報をチェックしてみてください。

nests無料ウェビナーの案内バナー。AI時代のデザイン実務をプロから学ぶ。Claude活用から制作フローまで無料ウェビナーで解説。nestsAcademy主宰 井上大器

この記事をシェアする

この記事を書いた人

nests編集部

制作会社がプロデュースするクリエイティブ・アカデミー nests の編集部。現役・準現役のクリエイターに役立つ、デザインとAIの学びの情報をお届けします。

関連記事

まずはお気軽に
無料オンライン相談会
までお越しください

各コースの詳細はもちろん、
特待生制度のことや、業界についての質問等、
個別で対応させて頂きます。
入学をご検討中の方はお気軽にご予約ください。

あなたに合う学び方を、
一緒に決めましょう。

オンライン・所要30分〜1時間。無理な勧誘はありません。まずは気軽にご相談ください。

あなただけの! 1:1のパーソナルコース 募集開始!