Webデザイナーにとってポートフォリオは名刺代わり。私自身も、駆け出しの頃は形だけのサイトを持っていましたが、採用担当者の方にしっかりと“人柄やスキル”を伝えられるものに作り直しました。この記事では、採用担当者に安心していただけるポートフォリオを目指して取り組んだ、全体の制作プロセスをご紹介します。
これからポートフォリオを作る方にも役立つようにまとめていますので、ぜひご覧ください。
まずはポートフォリオの目的をまとめる

5W1Hで書き出す
何を作るにしても、まずは目的を洗いざらい書き出して明確化します。
とはいえ何から書こうか悩んでしまうので、まずは5W1Hでポートフォリオの目的を書き出してみました。
書き出してみると、とにかく「採用担当者の方に見ていただくため」という目的がはっきりしてきたので、それを深掘りしてみます。
採用担当者がポートフォリオでチェックしている5つのポイント
「採用担当者に見ていただくポートフォリオを作る」という目的ははっきりしましたが、見てもらってお仕事を頼みたい、もしくは一緒に働きたいと感じてもらわなくてはなりません。
- 見た目の印象
- 情報の整理力
- UX視点
- クライアントとの向き合い方
- 応募ポジションとの相性
深掘りしてみたらこんな感じです。
- 見た目の印象
- これはWebデザイナーとしての腕の見せどころですね。第一印象が「プロっぽい」と感じてもらえるデザインを意識しました。
- 情報の整理力
- 情報が整理されて読みやすいことは、Webサイト制作でもとても大切ですので、ポートフォリオでも情報を整理してわかりやすさを意識しました。
- UX視点
- ユーザー目線での工夫、サイトで迷わせないCTAの設置や動線などをしっかりチェックしました
- クライアントとの向き合い方
- 一緒に仕事をするパートナーとして信頼していただけるように、人柄や仕事に対する向き合い方などが伝わるようにしました。
- 応募ポジションとの相性
- これはもうその時見てくださった採用担当者の方がどんなポジションを求めているのか次第なのですが、自分ができることやスキルなどは全て伝わるようにしました
採用担当者に伝えたい8つのポイント
先ほどの「採用担当者がポートフォリオでチェックしているだろう5つのポイント」が整理できたので、今度はそんな採用担当者に伝えたいことをたくさん書き出してみました。それを分類したら8つに分類することができました。
- デザインスキルとセンス
- 思考力・提案力
- 制作プロセス・ワークフロー
- 使用スキル・ツール
- 実務経験・成果物・実績
- 得意分野
- コミュニケーション力
- 人柄・強み
深掘りしてみたらこんな感じになりました。
- デザインスキルとセンス
- 実際に制作した作品を掲載 見やすさ、使いやすさ、配色、タイポグラフィ、余白の統一、どんな目的のデザインなのか
- 思考力・提案力
- デザインの背景
- 課題設定
- ペルソナ
- 構成や配色の理由
- ユーザー目線への工夫
- クライアント目線への工夫
- 制作プロセス・ワークフロー
- 課題発見→ワイヤー作成→デザイン制作→納品
- 一連の流れを紹介する
- 仕事の進め方が見えると依頼しやすい
- 使用スキル・ツール
- Illustrator・Photoshop・PremierePro・Wordpress・chatGPT・HTML・CSS・Javasprict
- 使用したことのあるツールを全て明示する
- 実務経験・成果物・実績
- 実案件はポートフォリオ掲載可であれば惜しみなく掲載させてもらう
- 架空案件(自分で課題設定→解決策などプロセスも掲載)
- 得意分野
- どんな作品が作れるのかをポートフォリオデザインにも反映させる
- 施術経験から、サロン系、カフェ系、癒し系、女性向け、誰かに寄り添うデザイン
- 空気感まで伝えるデザイン
- お客様が安心してお越しいただけるようなサイト制作
- コミュニケーション力
- 在宅フリーランスでの経験・ネット上のコミュニケーションが得意
- チャットやタスクアプリなんでもすぐに対応できる
- 日中はリアルタイムでの返信や緊急zoom対応も可
- 人柄・強み ※何かの診断結果から
- 常識とらわれない考え方ができる
- 納得できるまでとことん突き詰める粘り強さ
- 丁寧で親密なコミュニケーション
- トライアンドエラーを繰り返した様々なアレンジをすることが得意
- 現実的な目標を立てて、真摯に頑張れる
- 細部までこだわることが得意、綺麗に整ったデザインができる
- 優しさ・癒し・丁寧な世界観
- 誰かにそっと寄り添う表現
この8つのポイントを詰め込んだポートフォリオを作成すれば、採用担当者の方に伝えたいことは全て伝わるぞ、というところまで目的を洗い出すことができました。
いよいよこの書き出した情報をポートフォリオに落とし込んでいきます。
ポートフォリオの構成

いよいよポートフォリオの構成を考えていきます。上記のポイントをふんだんに取り込める構成を考えました。
①Top
得意分野、人柄・強みが伝わるビジュアル
②Profile
略歴、得意分野、人柄・強みを文章で伝える
③制作実績
実際の制作物を惜しみなく見ていただく
制作プロセスを記載
デザインのこだわり(思考力・提案力の部分)を言語化して記載
使用ツールの記載
④制作プロセス
仕事の進め方、クライアント様とのやりとりを見える化
依頼した後の流れを具体的にイメージしてもらえるようにする
⑤お問合せ
ポートフォリオのイメージ

- 全体の雰囲気 (得意分野と人柄の掛け合わせから)
- ナチュラル・上品・プロフェッショナル
- カラートーン
- ベージュとくすみピンク
- 落ち着いた、寄り添った、話しかけやすい色合い
- フォント
- 読みやすさと洗練された印象
- NotoSans 游ゴシックあたり
まとめ
ポートフォリオ制作の全体像を整理すると、採用担当者の方に安心していただけるデザインの方向性が明確になります。
次の記事では、第一印象を決める
をご紹介します。ぜひご覧ください。
ここまでお読みくださり、ありがとうございました!
💁ポートフォリオ制作に関する記事一覧はこちら
こちらもぜひ合わせてご覧くださいませ
- 採用担当者に信頼が伝わるポートフォリオ制作の流れ|目的整理から完成まで
- 採用担当者が3分で安心できるデザイン|ポートフォリオTOPページの工夫
- 採用担当者が安心して依頼したくなるデザイン|ポートフォリオAboutページの工夫
- 採用担当者が信頼できるスキルを確認できるデザイン|ポートフォリオWorksページの工夫
- 採用担当者が不安なく依頼できるデザイン|ポートフォリオFlow & Contactページの工夫
- 【番外編】依頼したくなるデザインの裏側|ロゴ制作の方法と流れ
こんにちは、KURA Designの倉林あやねです。
普段はWeb制作やデザイン制作をしています。
サロンやお店の空気感や魅力を丁寧にキャッチアップし、それをデザインに反映させるのが得意です。
ページを訪れた方に心地よさや安心感を感じてもらえるよう、使いやすさにもこだわっています。
「自分の魅力を伝えたい」そんな想いを持った方と、一緒に世界観をカタチにできたら嬉しいです。








コメント
“採用担当者に信頼が伝わるポートフォリオ制作の流れ|目的整理から完成まで” への4件のフィードバック
[…] とにかく秒で私のことを伝えるカラムとして文章は二言だけに絞りました。二言だけで伝えることをどうしようと考えて、前の記事の伝えたい7つのポイントメモを見直し、得意分野と人柄・強みをバランスよく文章内に溶け込ませています。 […]
[…] […]
[…] 👉まとめ記事はこちら […]
[…] 作っていくうちに、ロゴで何を伝えたいのかがだんだん明るくなっていく感じがしました。ただアイデアを出すだけではなく、私は「私」の何を表現したいのかを考えるために、以前ブログでまとめたこちらの記事「目的整理」の情報を元に色々考えました。 […]