日本一2冠・卒業生4,000名のスクール監修 ▶︎ WEBデザイナーになる方法を無料公開中

ポートフォリオの作り方とは?必須項目・作成手順を徹底解説

ポートフォリオの作り方とは?必須項目・作成手順を徹底解説

WEBデザイナーやライターの案件に応募したとき、提出を求められるのが「ポートフォリオ」です。

しかし、いざ作ろうとすると「未経験だから載せる実績がない」「具体的に何をどう載せればいいのかわからない」と手が止まってしまう方は少なくありません。

本記事では、未経験からWEB業界へ飛び込んだ私の実体験をもとに、採用担当者の目に留まるポートフォリオの作り方と、評価される構成のポイントを解説します。

目次

ポートフォリオとは?転職・就職活動における役割

ポートフォリオとは、クリエイターが自分のスキルや実績を証明するために作成する「作品集」のことです。

WEBデザイナーやライターといった専門職において、ポートフォリオは「私はこんなことができます」と証明するための大切なツールです。

一般的な転職活動では履歴書や職務経歴書が重視されますが、クリエイティブな職種では「実際に何を作れるか」が問われます。

どれほど言葉で「熱意があります」「勉強しました」と言っても、実際に作品を見せないことには伝わりません。

私も活動を通して痛感しましたが、クリエイティブな業界ではスキルの確認が何より優先されます。

「履歴書などの書類は提出せず、ポートフォリオの提出だけで合否が決まる」という案件も珍しくありません。

つまり、ポートフォリオの出来栄え一つで、書類選考を突破できるかどうかが決まってくるのです。

ポートフォリオに載せるべき必須項目

採用担当者は限られた時間で多くの応募書類に目を通します。

そのため、ポートフォリオは「パッと見て必要な情報がすべて網羅されていること」が不可欠です。

ここでは、採用担当者が必ずチェックする7つの必須項目と、それぞれの記述ポイントを解説します。

表紙・タイトル

表紙はポートフォリオの「顔」であり、第一印象を決定づける重要なページです。

凝ったデザインにする必要はありませんが、以下の情報は必ず記載しましょう。

記載例
  • タイトル
  • 氏名
  • 最終更新日

日付を入れることで、情報が最新であることを伝えられます。

信頼性を重視する企業に応募するなら「誠実さ」が伝わるデザイン、制作会社なら「個性」が出るデザインなど、応募先に合わせて表紙のテイストを変えるのも有効な戦略です。

また、表紙のデザインに凝りすぎると、肝心の作品より目立ってしまうこともあるため、シンプルかつ丁寧に、読みやすいデザインを心がけてください。

目次

採用担当者が見たい情報へすぐにアクセスできるよう、目次(サイトマップ)を設置しましょう。

WEBサイト形式の場合は、ヘッダーに固定メニューとして配置するのが一般的です。

記載例
  • Profile(自己紹介)
  • Works(作品紹介)
  • Skills(スキル)
  • Contact(連絡先)

このように項目を整理し、クリック一つで該当箇所へ飛べるようにリンクを設定しておくと、ユーザビリティが高く評価されます。

採用担当者は毎日多くのポートフォリオを見ています。

「どこに何が書いてあるかわからない」というストレスを与えないことも、相手の手間を減らす気遣いとして重要なスキルの一つです。

プロフィール・自己紹介

「誰が作ったのか」という人柄や経歴を伝える項目です。

以下の基本情報はなるべく記載するようにしましょう。

記載例
  • 氏名
  • 顔写真(またはアイコンや似顔絵)
  • 経歴・職歴(簡潔に)
  • 活動拠点
  • SNSアカウント

自己紹介は『何者か/得意領域/できること』の3点が伝わることを意識しましょう。

また、異業種からの転職の場合、「なぜWEB業界を目指したのか」というストーリーを一言添えると、共感を得やすくなります。

スキルも大切ですが、「一緒に働きたいと思える人物か」も重要な採用基準です。

趣味や性格についても少し触れておくと、面接時の会話のきっかけにもなりますよ。

長くなりすぎないよう、400文字程度にまとめるのがおすすめです。

あなたという人間を知ってもらう最初のステップとして丁寧に書きましょう。

作品紹介

ポートフォリオの核となる部分です。

制作したWEBサイトやバナーの画像を掲載し、実際に制作物が確認できるURLを貼ります。

記載例
  • 作品のサムネイル画像
  • 作品タイトル
  • 公開URL

「まだ実績がない」という場合は、スクールの課題や架空のサイトで問題ありません。

このとき、パソコン表示だけでなくスマートフォンでの表示イメージ(モックアップ画像)も載せておくと、「スマートフォン対応も意識できている」と伝わり好印象です。

「どのようなジャンルのデザインができるか」が一目で伝わるよう、自信作をトップに配置し、あなたの実力をアピールしましょう。

制作意図・プロセス

採用担当者が重視するのがこの項目です。

単に作品を見せるだけでなく、「なぜその色や配置にしたのか」という思考のプロセスを言語化してください。

記載例
  • ターゲットと目的
  • デザインのコンセプト
  • 制作時のこだわり・工夫した点

特に実績が少ないうちは、ここを厚く書くことで「課題をどう捉え、目的に向けてどんな意図で設計・制作したか」が伝わります。

結果として、作品数が少なくても思考の筋道や再現性を示せるため、ボリューム不足を十分にカバーできます。

また、「制作中に苦労した点と、それをどう解決したか」を加えると、仕事における問題解決能力のアピールにもつながります。

「クライアントの要望をどう解決したか」という視点で書きましょう。

スキルセット・使用可能ツール

現在のあなたに「何ができるか」を客観的に示す項目です。

使用できるツールや言語を、経験年数や習熟度などで可視化して記載しましょう。

記載例
  • 使用可能ツール:Photoshop / Illustrator / Figma / Canva / WordPress
  • 使用可能言語:HTML / CSS

単にツール名を並べるだけでなく、「バナー制作が可能」「LPのコーディングが可能」といった具体的な作業レベルを記載し、スキル度合いを示すのがポイントです。

意外と見落としがちですが、WordやExcelなどのOAスキルや、Chatworkなどのコミュニケーションツールの使用経験も、リモートワークでは評価対象になります。

過小評価せず、自信を持ってできることをすべてアピールしてください。

ビジョン・将来の目標

最後に、あなたが今後どうなりたいかという「未来」を提示します。

「どのようなデザイナーになりたいか」「入社後にどう貢献したいか」を記載しましょう。

企業の方向性とあなたのビジョンがマッチしているかを確認する判断材料になります。

「貴社の事業に貢献したい」という意欲とともに、具体的なキャリアプランを示すことで、採用後の成長イメージを持ってもらいやすくなります。

例えば、「ユーザーが迷わない導線設計が得意なので、LP改善やUI制作で成果に貢献したい」のように、自分の強みから考えてみましょう。

熱意を伝える貴重なチャンスですので、積極的に活用していきましょう。

失敗しないポートフォリオの作り方

ここからは、実際にポートフォリオを作成するための具体的な手順を4つのステップで解説します。

いきなりデザインツールを開いて作り始めるのではなく、まずは「設計図」を作ることが、失敗を防ぐコツです

全体の構成が曖昧なまま進めると、途中で修正が重なり時間がかかってしまいます。

まずは情報を整理するところから、順を追って進めていきましょう。

Step1:ポートフォリオのコンセプトを決める

最初に、「誰に」「何を」伝えたいのかというコンセプトを明確にします。

志望する業界や職種によって、アピールすべきポイントは異なります。

たとえば、コーポレートサイト制作会社を志望するなら「情報の整理力や信頼感」を、広告制作会社なら「インパクトや発想力」を重視した構成にする必要があります。

私の場合、未経験からのスタートだったため、「即戦力には及ばなくても、指示を正確に形にできる丁寧さ」をコンセプトにしました。

「自分をどう見せたいか」という軸が決まれば、おのずと全体のデザインや配色の方向性も定まってきます。

Step2:掲載する作品を選定・整理する

コンセプトが決まったら、掲載する作品を選びます。 

「作ったものを全部見せたい」と思うかもしれませんが、すべて載せる必要はありません。

採用担当者は忙しい合間を縫って確認しているため、あまりに作品数が多いと、かえって一つひとつの印象が薄くなってしまうからです。

応募する企業とマッチしそうな作品や、自信のある作品を厳選しましょう。

例えば、企業のサイトが「スタイリッシュでシンプル」なデザインなら、同様のテイストの作品を中心に選ぶことで「うちの仕事に合いそうだ」と直感的に感じてもらえます。

逆に、ポップなデザインが多い制作会社なら、賑やかで楽しい雰囲気のバナーやLPを優先的に配置しましょう。

このように「相手が求めているテイスト」に合わせて作品を厳選することが、採用率を高めるカギです。

Step3:構成案(ラフ)を作成し、デザインに落とし込む

いきなり清書をするのではなく、まずはワイヤーフレーム(構成図)を作成します。

どのページにどの作品を配置し、どのような順番で見せるか、全体の流れを設計しましょう。

この段階では、手書きのメモやマインドマップツールなど、自分が使いやすいもので構いません。

要素の配置をあらかじめ決めておくことで、あとの制作作業がスムーズになります。

構成が固まったら、PhotoshopやFigmaなどのデザインツールを使って、実際のデザインに落とし込んでいきます。

文字のサイズや余白の取り方など、細部までこだわり抜きましょう。

Step4:第三者に見せてブラッシュアップする

ポートフォリオが完成したら、必ず第三者に見てもらってフィードバックをもらいましょう。

自分では「完璧だ」と思っていても、誤字脱字やリンク切れ、レイアウトの崩れなどのミスは意外と気付かないものです。

スクールの講師や現役のクリエイターからアドバイスをもらえる場合には、デザインや構成を見てもらうとよいでしょう。

また、そのような人が周りにいない場合でも、家族や友人に「見やすいか」「内容が伝わるか」を確認してもらうのがおすすめです。

特に重要なのが「スマートフォンでの表示確認」です。

スマートフォンでポートフォリオを確認される場合もあるかもしれません。

パソコンだけでなくスマートフォンでも崩れずに表示されるか、必ず実機でチェックを行いましょう。

媒体は「WEB」と「紙(PDF)」どちらで作るべき?

ポートフォリオは「目指す職種」と「提出のシチュエーション」によってWEBとPDFを使い分けるのが正解です。

大切なのは、採用担当者が見やすく、かつ自分のスキルが伝わる形式を選ぶことです。

では、具体的にどう使い分けるべきか、それぞれのケースを見ていきましょう。

Webポートフォリオが必須のケース

WEBデザイナーやエンジニアを目指す場合は、原則としてWEB形式(ポートフォリオサイト)での作成が必須です。

理由はシンプルで、ポートフォリオサイトそのものが「スキルの証明」になるからです。

スキルの証明となる要素
  • コーディングスキル(HTML/CSS/JavaScript)
  • サイト全体の構成力
  • レスポンシブ対応(スマートフォンで見やすいか)

また、URLひとつで手軽に共有できるため、オンラインでの選考が進む現在ではWEB形式がスタンダードになりつつあります。

紙(PDF)ポートフォリオが有効なケース

一方で、紙(PDF)形式が有効なケースもあります。

  • グラフィックデザイナー(DTP)志望の場合
    • WEB上の画像だけでは伝わらない「紙の質感」や「印刷の発色」「箔押しなどの特殊加工へのこだわり」を直接伝えられるためです。
  • 対面での面接に持参する場合
    • 面接官の手元に紙のポートフォリオを渡すことで、話のネタにしやすく、その場で指差しながらプレゼンができます。

WEBデザイナー志望であっても、面接時のバックアップとしてタブレットにPDFを入れておいたり、簡易的な冊子を用意しておくと、トラブルに強い人材として好印象を与えられますよ。

【職種別】採用担当者に響くポートフォリオのポイント

職種によって、採用担当者が「どこを重要視しているか」は異なります。

単に作品を並べるだけでなく、その職種特有のスキルセットを理解していることを示す必要があります。

ここでは、主要な3つの職種別に、プロとして評価されるためのアピールポイントを解説します。

Webデザイナー・UIデザイナー

WEB・UIデザイナーに求められるのは、「見た目の美しさ」以上に「使いやすさ(ユーザビリティ)」です。

ユーザーが迷わずに操作できる導線設計ができているか、スマートフォンなどの異なるデバイスでも崩れずに表示されるかが厳しくチェックされます。

また、コーディングも担当する場合は、ソースコードの記述が丁寧かどうかも重要な評価基準です。

デザインの理由を聞かれた際に、論理的に説明できるようにしておきましょう。

グラフィックデザイナー・イラストレーター

グラフィックデザイナーやイラストレーターの場合、「印刷の基礎知識」と「媒体に合わせた表現力」が重視されます。

WEBとは違い、印刷物は紙の選び方やサイズ感、インクの馴染み方ひとつで作品の印象がガラリと変わってしまいます。

そのため、単にデザインの元データを貼るだけでなく、実際にポスターやパッケージとして印刷された様子がわかる「モックアップ(合成画像)」を載せましょう。

「最終的にどう見えるか」まで計算して作られていることが伝われば、即戦力として高く評価されます。

動画クリエイター・編集者

動画クリエイターの場合、「テンポの良さ」と「テロップ・BGMのセンス」が重要です。

冒頭の数秒で視聴者を惹きつけられる構成になっているか、テロップのフォントや色が動画の世界観を壊していないかが見られます。

また、近年は媒体によって求められる技術が異なります。

YouTube向けの横長動画だけでなく、TikTokやInstagramリールなどの「縦型ショート動画」の実績も用意しておくと、トレンドに対応できる人材として対応幅の広さをアピールできますよ。

未経験・実績なしでも評価を上げるコツ

「実務経験がないから、ポートフォリオに載せるものがない」と諦める必要はありません。

採用担当者が見ているのは、過去の実績だけではなく「今のあなたに何ができるか」と「仕事への向き合い方」です。

実務経験がない場合には、以下の2点をおさえるとよいでしょう。

未経験・実績なしでも評価を上げるコツ
  • 架空の案件でスキルを証明する

スクールの課題や自主制作でも、ターゲットや目的が明確なら立派な実績になります。

  • 制作プロセスで思考力を証明する

なぜそのデザインにしたのかという「意図」を言語化することで、実務でも通用する論理的思考力をアピールします。

実務経験がなくても、ポートフォリオの見せ方を工夫することで、あなたの魅力を十分に伝えることは可能です。

ぜひ前向きに取り組んでみましょう。

おすすめのポートフォリオ作成ツール・サービス

ポートフォリオを作るためのツールは数多くありますが、自分のスキルや目的に合わせて選ぶことが大切です。

初心者でも使いやすく、見栄え良く仕上がるおすすめツールを比較しました。

おすすめのポートフォリオ作成ツール
  • STUDIO / Wix(WEB形式)
    • テンプレートが豊富で、コードが書けなくても直感的にWEBサイトが作れます。
  • foriio(WEB形式)
    • 画像をドラッグ&ドロップするだけで、誰でも最短30秒でおしゃれなポートフォリオが完成します。
  • Adobe Portfolio(WEB形式)
    • Adobe CCを契約していれば無料で使えます。Behanceなどの作品サイトとも連携がスムーズです。
  • Canva / PowerPoint(PDF形式)
    • スライド感覚で作成でき、印刷やPDF提出が必要な場合に最適です。

まずは「STUDIO」や「Canva」などの無料プランで触ってみて、自分に合うものを見つけましょう。

クオリティを劇的に高めるならプロの視点を取り入れよう

ポートフォリオが形になったら、最後に必ずやってほしいのが「プロによるフィードバック」を受けることです。

独学や自分ひとりの作業では、どうしても「自分が見せたいもの」ばかりが先行してしまい、「採用担当者が見たいもの」とズレてしまうことが多々あります。

また、誤字脱字やレイアウトの崩れ、ユーザビリティの欠如といったミスは、自分ではなかなか気付けません。

スクールの講師に見てもらったり、現役のデザイナーに添削を依頼し、「第三者の目」を入れることで、作品のクオリティは劇的に向上します。

厳しい意見をもらうのは怖いかもしれませんが、それが採用への最短ルートであり、あなたの成長を加速させる一番の近道ですよ。

まとめ

ポートフォリオは、未経験から理想のキャリアをつかみ取るための「最強の武器」です。

最初は「載せるものがない」と不安になるかもしれませんが、大切なのは「今の自分ができること」を丁寧に、正直に伝える姿勢です。

今回ご紹介した手順で、一つひとつの作品に意図を込めれば、必ずあなたの熱意は伝わります。

完璧を目指して立ち止まるより、まずは未完成でも形にすることから始めましょう。

その一歩が、新しい働き方への扉を開く鍵になりますよ。

WEBデザインに興味を持っているあなたへ

あなたも、デザインを仕事にしてみませんか?

家事や趣味のスキマ時間にデザインを作るだけで、副業で月に3~5万安定して稼げるようになります。

「私なんかにできるの?」
「もうデザイナーは飽和してるんじゃないの?」

という心配がある方は、ぜひ一度「WEBデザイナーという働き方セミナー」にご参加ください。

デザインを学べば安定した副収入が狙える理由
今からでも副業デザイナーを目指せる理由
正しいデザインの学び方と失敗事例
センスも経験も不要な理由

などをお話ししていて、このページからのお申し込みいただけたら、今だけ無料で参加できます。

「デザインを仕事にするのも悪くないかも」と思っている方は絶対に参加して損のない内容になっているので、ぜひ下のボタンをクリックして詳細をご覧ください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次