
初めてWebデザイナーへの転職をする時に、自分の作品を紹介する場合は次のような感じでやってました。
- ①事前にURLを投げておく
- ②その後、面接に望む
当時は「ポートフォリオって何?」のレベルで転職活動をしていたので
結果は散々でした。
どうやらWebデザイナーの転職活動にはポートフォリオという作品をまとめた資料やサイトが必要だと言う事がわかったので、すぐ制作に取りかかったけど次の面接まで時間がなくて、結局何を伝えたいのか分からない自己紹介サイトのようなものを作っていた思い出があります。

それでもなんとか転職はできたけど、あの時の「ポートフォリオはひどかったな」と反省するばかりです。
次にキャリアアップする時には、計画を持って分かりやすく伝わりやすいポートフォリオを作っておこう思いました。
何度も転職し、その度にポートフォリオをブラッシュアップしていくと、結局一番強いポートフォリオの作りってこのような構成なのかと一定のコツを掴んだのです。何年も時間を費やしお金も浪費して気がついたけど、できれば記事を見ていただいている人にはさっさと転職に強いポートフォリオを作ってもらいたいなと思ってます。

目次
ポートフォリオの作り方
Web制作会社へ面接にいくのなら、ポートフォリオはかっこいいページデザインで用意しておきたいですよね!
あなたのデザインセンスも紹介できるので、一石二鳥と思っていませんか?
考え方は効率的で良いのですが、それだけではいけません。採用担当は限られた時間でしか面接できないのです。さらにポートフォリオはもっと限られた時間で確認するわけです。だからかっこいいページデザインよりも、短時間で目に止まる工夫されたデザインや構成が必要なのです。
ポートフォリオのデザインは雑誌媒体のデザインを参考にする
おすすめしたいのは、Webデザイン誌のサイト紹介ページのような統一されたページデザインにする方法です。
この作り方だと、新たにページデザインを考える時間は必要ないので、Webデザイン誌を少々踏襲するだけで作れます。
ポートフォリオのWebデザインはテンプレートを参考にする
ポートフォリオのテンプレートを活用するのも良い方法です。当サイトでも厳選したWebページのテンプレを3つ紹介しているのでこちらの記事を参考にしてみてください。
【関連記事】テンプレを活用したポートフォリオで面接対策をしておこう!
ポートフォリオのページ構成
ある程度ページデザインが決まってくれば、ページ構成を考えていきましょう。
当サイトでは代表的な各項目をご紹介していきます。応募する企業に合わせてページ構成を変えたり省いたり、追加したり検討してみてください。
表紙は限りなくシンプルに
ポートフォリオやmy worksといったシンプルなテキストとイメージ画像でまとめておきましょう。
シンプルな表紙が良い理由
面接官さんには自己紹介からしっかり読んでもらいたいので、見ればわかる程度のページには力をいれなくていいと考えています。それでも何か付け加えたいのであれば、目次を加えておくと、スペースの無駄も省けて良いでしょう。
自己紹介は別の書類と被らない
履歴書があるので経歴を各必要はありません。SNSやブログのような短い自己紹介であなたが何をやっている人なのか分かる文章でまとめておきましょう。

実際にSNSで発信している人は
同じアイコンと文章を活用しておくといいでしょう。SNSの文章が個性的な人は修正しておくのを忘れないように。私の場合なら(@ra_cer_X)、名前をちゃんとして、SNSでアドバイスしている事、資格がある事、出版したいとかをピックアップして体裁を整えます。
作品紹介
さぁ、ポートフォリオにあなたの作品を相手が見やすい形で紹介していきましょう。
実績をイメージしやすくするページデザインもあるのでこちらの記事も参考にしてください。

【関連記事】ポートフォリオの作品を上手く見せてる人と見せてない人の違い
①作品のメイン画像は綺麗なものを
目に止まる大きな画像を配置しますが、解像度には注意してください。荒い画像はWebデザイナーとしてのセンスを疑われます。イメージ画像と合わせて、サイト名やタイトルを付け加えておくのを忘れずに。②プロジェクト紹介は正直に書く
ジョインが少なめでもかまいません。どの領域をカバーしたのか、どこにジョインしたかがわかればいいです。正直に担当したポジションを書き込みましょう。例えば、wordpressの操作でジョインしたならどこまでカバーしたか(※部分はエンジニアのフォロー有り)をまとめます。
- サーバーにインストール
- 記事編集のテンプレ
- CSSでサイトデザインをカスタム
- プラグインの愛称を考慮してインストオール
- founctionの直接編集(html部分)
- (※)founctionの直接編集(php部分)
- (※)新規機能の実装
- (※)有料テーマ
③コンセプト
制作意図はここにまとめましょう。Webサイトやバナーデザインの概要を紹介してから細かい部分はポイントを分けて紹介していきます。例えば、デザイン制作でこだわった事とか。あなた自身のこだわりというより、「クライアントニーズや市場傾向からどのようなデザインが好ましいのか
考えて◯◯風デザインを軸に考えいった」とか全体を見渡してどのようなデザインですすめたのか書いておくと伝わりやすいです。
【関連記事】採用担当のWebデザイナーはポートフォリオのどこを見て面接をしているか?
他にはデザイン制作で学んだ事、失敗した事、挽回した事といった部分があれば書き込みましょう。
面接官との会話のネタにも使えますし、しっかり経験を積んだのもの伝わりますよ。
面接でのポートフォリオ活用方法
ポートフォリオに作品はまとめれましたか?ここからは準備したポートフォリを活用していくコツを2つにまとめてご紹介します。
ポートフォリオを活用してあなたのデザインスキルを紹介しよう
あなたのデザインスキル紹介する為にポートフォリオを活用しますが、同時にどれくらいのスキルを備えているのかがバレます。
スキルを盛った状態で採用され、入社しても試用期間で正体がバレて終了です。だからウソは書かずに正直な内容にしておきましょう。
熟練のWebデザイナーさんなら、質問に対する答えの検討がついているので、数分のやり取りで会話のズレがあればすぐにあなたの正体を見破りますよ。
あなたのスキルや経験を面接官は様々な角度で確認していきますが、代表的な項目を以下にまとめました。箇条書きで説明をつけているので確認だけしておいてください。
どんなスキルが備わっているのか
ソフトウェアやコーディング技術の経験年数から他の応募者や職場のWebデザイナーとの比べ、あなたのスキルがどの程度なのか確認します。

どのようなデザインの勉強をしているか
普段の生活でもデザインを意識しているかを確認します。例えば「休日の過ごし方は?」みたいな質問です。
生活のONとOFFも確認する質問ですが、効率的に勉強する人なのかもわかります。

そもそもデザイン力があるか
ポートフォリオの作品をみて使われているフォントや作品の配置等を確認します。
基本的にデザインのコツを理解しているのかが分かるので作品集といえ、企画書くらいの意気込みでポートフォリオを作っておく方がいいです。
インプット(情報収集力)しているか
Webデザインのトレンドは毎年変わるし、あたらしい技術やソフトウェアの情報も入ってきます。
ちゃんと時代にあわせてWebデザイナーの立ち位置を変えているのか確認します。
他にも良い印象に見える方法はあるので、こちらの記事も参考にどうぞ。
【関連記事】面接時にポートフォリオで良い印象に映る3つの理由
ポートフォリオを活用して業務における提案力や推進力といったビジネスクオリティを伝えよう
ポートフォリオの中に、プロジェクト名やコンセプトを書き込むのはこの領域が分かるからです。作るだけのWebデザイナーさんなのか、さらに業務領域を広げて活躍したいのかがわかります。
採用担当者は何人も面接してきているので良い人材と悪い人材の比較は可能です。将来活躍しそうな人材はすぐ分かっちゃうのです。
【関連記事】Webデザイナーのポートフォリオは面接をした誰が判断している?
以下は、デザイン以外の角度から分かる事です。
同じ様に箇条書きでまとめているので参考にしてみてください。
課題解決する行動をとっているか
会社の繁忙期やプロジェクトごとに様々な問題や課題がありますよね。
あなた自身も何かの課題に対して解決策を考えて案件をこなしてきたのかどうかは重要なポイントです。
現場をどれくらい広くみているか
もちろんWebデザイン制作中心でかまわないのですが、どれくらい周りと連携して動くのかが分かります。
他のデザイナーさんの進捗が遅れている、工数がギリギリとか気がついて出来る範囲でフォローにまわっているとか、チーム全体をWebデザイナーから見て動けているかも重要なポイントではないでしょうか。
予算や工数をどれくらい意識しているか
ポートフォリオの各作品のボリュームから予算や工数にマイナスがないかわかります。無理の無い範囲の作品であれば大丈夫です。
アウトプット(発信)しているか
デザイン上達法といった教えていく、情報を共有していく動きがそなわっているのかもポイントが高いです。
Webデザインの没頭するあまり、おろそかにする人が多いのでポートフォリオの作品を紹介しながら、ご自身で仕入れてきた情報や技術、効率化などを共有して全体のスキルアップに繋がったとか面接ではなせれたら会話が進むかもしれませんね。
coffeebreakの中の人(@ra_cer_X)です。
転職に強いポートフォリオ作りたいよね!