【面接に効く】「結果」が超出るポートフォリオの作り方

「面接や案件獲得でポートフォリオが必要」と知ってはいても、実際にどう作るのが正解なのかよくわかりませんよね…。

オシャレな雰囲気を重視して作る方が多いですが、ただおしゃれなポートフォリオでは面接を勝ち抜けません。

この記事では、「面接や案件獲得で結果が出るポートフォリオの作り方」をご紹介します♪

ポートフォリオで面接の結果（人生）が大きく変わるので、丁寧に作りましょう！

ポートフォリオとは、実績やスキルをアピールし「会社に貢献できることを証明するための作品集」です。

ポートフォリオとは「これまでの実績や保有するスキルをアピールするための作品集」のことです。

WEBデザイナーにとっては、面接などでスキルや実績をアピールするための最強の武器となります。

ポートフォリオを見せることで「自分はこんなことができますよ〜」と、保有スキルなどを証明できるのです。

言葉でスキルを説明するよりも、実際に作品を見せた方が伝わりやすいため、クリエイター職では面接時にポートフォリオが必要になることがほとんど。

しかし、ポートフォリオは「結果が出るポートフォリオ」と「結果が出ないポートフォリオ」に分かれます。

結果が出るポートフォリオって？どんな違いがあるの？

では、「結果が出るポートフォリオ」とはどんなものでしょうか？

「結果が出るポートフォリオ」とは、「私を雇えばビジネスを成長させられます！」とアピールできるポートフォリオのことです。

「センス抜群のオシャレなポートフォリオじゃないの！？」と思ったかもしれませんが、残念ながら違います。

というのも、企業はビジネスを成長させるために人を雇うからです。

オシャレなポートフォリオを作れる人より、「デザインでビジネスを成長させてくれる人」が欲しいのです。

つまり、いくらオシャレデザインでも「ビジネスを成長させられる」というアピールができないと、あなたの就活は上手くいかない可能性が高まります。

よっぽどオシャレな実績が多数あれば、結果は出ますが…駆け出しの時点でそれは難しいですよね？

ただ作品を掲載するだけの「結果が出ないポートフォリオ」ではなく、「結果が出るポートフォリオ」を作りたくはありませんか？

質問です。あなたにポートフォリオは本当に必要ですか？

実は、ポートフォリオは絶対に必要というわけではありません。

採用担当者が見たいのは、応募者が主張する”スキル”を証明できる作品であって、ポートフォリオサイトそのものではないのです。

もしあなたが作品をまだ1~2個しか作っていない場合、ポートフォリオサイトを作るより作品数を増やすことの方が重要と言えます。

実際の面接でも未経験者はポートフォリオの提出を求められないこともありますし、1~2個の作品であればpdfで提出しても十分です。

作品が少ないと時間の無駄になる可能性があるので、まずは「あなたには本当にポートフォリオが必要か」を確認しましょう！

紙とWEB、どっちで作ればいい？

WEBデザイナーのポートフォリオは、原則「WEB」で作りましょう！

というのも、コーディングができることや、jQueryなど動きの実装、WordPressサイトを作れることもアピールできるためです。

企業の担当者にサイトを共有しやすいという点でも、WEBで作成するのがおすすめと言えますね！

採用側はここを見ている！ポートフォリオ作成で意識したい3つのポイント

ポートフォリオは「面接官」や「クライアント」に見せるものです。

そのため面接官やクライアントが「ポートフォリオの何を見ているか？」を知っておく必要があります。

先に答えを知っておいた方が良いですよね？

具体的には以下の3点を特に見ています。

ウチの会社で働けるスキルがあるか？

当然ですが、まずは「うちの会社（案件）で働ける最低限のスキルがあるか」を見られます。

WEBデザイナーの仕事は業務範囲が多岐に渡るため、1から教育するのは大変だからですね。

「未経験OK」という求人は多数ありますが、実際は1秒でも早く成果をあげて欲しいと考えています。

「未経験OK」=「本音は即戦力の経験者が欲しい」というニュアンスが含まれているのです。

実際、未経験者は面接を通りにくいどころか、書類選考をパスするのも骨が折れます。

そのため、未経験でも「働けるスキルがある」とアピールすることが、土俵に立つためには超重要と言えるのです。

問題解決のためのデザインを作ろうと意識しているか？

2つ目は、「問題解決のためのデザインを作ろうと意識しているか？」です。

WEBデザイナーの仕事の本質は「デザインで企業やクライアントの問題を解決して、目的を達成すること」と言えます。

そのため、「ただオシャレなデザインを作れる人」なのか「デザインの本質を理解し、問題解決できる人なのか」を面接官は見極めているのです。

ポートフォリオでは、「問題解決するためにどんな部分を工夫したか」をしっかりアピールしましょう！

行動力があるか（細かい部分までデザインしてくれるか）

「成果を出すために積極的に行動してくれる人なのか？」というポイントも、ポートフォリオでチェックしています。

というのも、こだわってデザインする「行動力」が成果につながるからです。

例えば、「ドロップシャドウでボタンっぽさを表現するとクリック率が高まる」というデータがありますが、このような細かい部分もデザインすることで成果が上がります。

WEBデザイナーは納期に追われる中でも細かい作業をすることが多く、「面倒だな…」と感じる作業も少なくありません。

そんな時でもしっかり行動してくれる人はとても重宝されます。

ポートフォリオでも「行動力あります！」とアピールできると、評価が高くなりやすいですよ♪

特に未経験者の場合は、「行動力」=「熱意」と判断される可能性も高く、どれだけWEBデザイナーになりたいかを判断されることもあります。

「自分PR用のLPを作る」というコンセプトでポートフォリオを作成しよう！

「結果が出るポートフォリオ」を作るときは、「自分PR用のLP（ランディングページ）を作る」というコンセプトで作成するのがおすすめです。

※LPとは「商品やサービスを売るためのページ」と捉えていただければ問題ありません。

というのも、ポートフォリオは「あなたを売るためのページ」だから。

実際、企業は商品を売る時はLPを作り込みます。

就職・転職活動の商品はあなたなので、「自分PR用のLPを作る」という意識はとても大切でしょう。

「あなたの強み」を設定しよう！

「結果が出るポートフォリオ」を作るためには、まず「あなたの強み」を設定する必要があります。

強みを設定していないと量産型ポートフォリオとなり、採用担当者にグサっと刺さらないためですね。

例えば、以下の2人だったらどちらを採用したいですか？

Aさん：WEBサイトをキレイに作れます！ Bさん：SEOとユーザーの行動心理を意識したデザインができるので、売り上げにつなげることができます！

間違いなくBさんの方が企業にメリットがありますよね。

デザインできるだけでなく、サイトの上位表示を意識したコーディングができ、ユーザーがどう行動するかまでデザインできるのですから。

そのため、まずは「あなたの強み」 = 「アピールする最大のポイント」をハッキリと設定しましょう！

ポートフォリオに最低限載せるべき内容

さて次は、「結果が出るポートフォリオ」に載せるべき内容を解説していきます！

「ポートフォリオに何を載せればいいかわからないィィぃ〜」という人は参考にしてくださいね♪

具体的には以下の5つです。

理想はひつじウェブさんのポートフォリオですかね！

イメージを固めるために、一度完成形を見ておきましょう！

キャッチコピー

1つ目は「キャッチコピー」です。

なぜキャッチコピーが必要かというと、採用側に一瞬で「どんなWEBデザイナーなのか」を伝えるためです。

実は、採用担当者は多くのポートフォリオをチェックするので、1つ1つを細かく見ていません。

つまり、採用担当者にパッとインパクトを与えないと「見てもらえない」ということにつながります。

せっかく作ったのに、そもそも見てもらえないなんて最悪ですよね。。。

また、サクッと「どんなWEBデザイナーなのか」が伝わるようにしてあげると、面接官にも親切です♪

そのため、キャッチコピーは必ず掲載しましょう！

キャッチコピーの具体例

キャッチコピーは、「え？そんなことやってるの？」みたいな驚きを含める形にしたいですね。

作成例としては、以下のようなものです。

みたいな、言い方ができると良いです。

実績がないうちは、スピードや安さぐらいしかウリに出せることがないので、表現難しいですけどね。。。

キャッチコピーの作り方は以下サイトを参考にしてみましょう♪

目次

ポートフォリオにも、目次を設置しましょう！

ポートフォリオサイトは作品を複数掲載するため、ごちゃっとしやすいからです。

採用担当者をあなたのクライアントだと思って、おもてなし精神でポートフォリオサイトを作成しましょう！

自己紹介

ポートフォリオには作品だけでなく、自己紹介も掲載しておきましょう！

面接以外でも使う可能性がありますし、履歴書だけでは伝えきれない情報もあるためです。

一般的な内容の他に、以下の3点は自己紹介として載せておきたいところですね！

実名・顔出しはマスト

ポートフォリオには「実名・顔出し」はマストです。

というのも、実名・顔出しじゃないと「この人、過去にやましいことでもしたのかな…？」とあらぬ疑いをかけられる可能性があるからですね。

スーパーの野菜に生産者の実名・顔写真を載せるのと同じです。

実名・顔写真があるだけで信頼度が大幅アップしますので、やましいことをしてない人はぜひ実名・顔出ししましょう！

持っているスキル

「何ができるか」伝えるために、WEBデザインに関係するスキルも記載します。

Photoshop、Illustrator、Adobe XD、HTML/CSS、 jQuery（JavaScript）、PHP、WordPress、ライティング、Gitなどですね♪

勉強した期間や、コーディングなら具体的にどんな機能を実装できるか（ハンバーガーメニューやスライダーなど）もわかりやすく記載しましょう！

職務経歴書

これまでの仕事歴やどんな実績があるのかも採用では大切な要素なので、職務経歴書も掲載しましょう！

ポートフォリオを見れば、あなたの全てが理解できるように作れると最高です♪

「そんなこと言われても、自分にすごい経歴はないよ…」と思ったかもしれませんが、問題ありません。

正直に経歴を表示して信頼感を得て、作品で勝負しましょう！！

挨拶文やプロフィール文で意識したいこと

挨拶文やプロフィール文は、少し個性を出したり、自信を見せたりしておきたいですね。

• 「高品質なWebデザインをご提供いたします」
• 「ご満足いただけるよう尽力いたします」

上記のような表現は、よくある文章なので、クライアントに刺さりにくいです。

人間性も重視したいので、以下のような文章を入れられると良いですね。

• こういうきっかけや想いがあって、Web業界に飛び込みました！想いだけは絶対誰にも負けません！
• 毎日〇時間の勉強、案件アプローチを〇件、など、やることを決めたら突き進む”超行動派”です！
• 営業経験で培われた”ご満足いただけるまで尽力する姿勢”は、きっとあなたのお役に立てるかと思います。
• 土日でもかかさずメールチェック！常にWebとクライアントのことを考えているWebマニアです！
• 夢の中でもWebデザインをしている男、四六時中Webデザイナーのさかしと申します。

こんな感じで個性や自信の強さが見えると、「この人センスありそうだな」と印象に残りやすくなります。

作品紹介

作品は3~10個掲載するようにしましょう！

多すぎても採用担当者は見てくれないため、多くても10個までにしてください。

載せる作品はなるべく同じようなデザインではなく、いろいろなデザインに挑戦したことがわかるような作品を掲載すると良いでしょう。

また、ただ作品を並べるだけでなく「どんな考え・流れでデザインしたか」も記載するとより良いですね！

• クライアントのざっくりした要望を、具体的にどんな形で反映したか？
• リニューアルをした場合は、旧デザイン・サイトの問題点と新サイトでの解決策
• どんなことを積極提案したか？
• どんな結果を生み出せたか？

「目的を達成することを考えてデザインしました」とアピールすることが大切だからです。

コーディングまで実装した場合は、GithubやQiitaでコードを見れるようにしておくのもおすすめですよ！

連絡先やSNS、ポートフォリオ情報など

連絡先やあなたのSNS、ポートフォリオ情報も掲載しておきましょう！

せっかく良いと思ってもらえても、連絡手段がないと意味がありませんよね。

電話番号、チャットワークID、メールアドレス※、リンクなどは忘れないようにしましょうね♪

※フォームを設置しておけば、メールアドレス掲載は不要です。

他の人と差別化できる情報

コンテンツでライバルと差別化することも、あなたを見てもらうためには重要です。

そのため、以下のようにコンテンツを工夫して差別化を図りましょう！

超秀逸！参考にしたいポートフォリオサイト5選

イメージが深まるよう、実際に公開されている超秀逸なポートフォリオを見てみましょう♪

参考にしたいポートフォリオサイトを複数紹介しますので、良さそうなものを探してみてくださいね！

以下を参考に作成すれば、結果が出るポートフォリオサイトを作れます。

長岡 勇輝さんのポートフォリオ

こちらはエンジニアの就職用ポートフォリオなので、デザイン的にはダサいです。

※エンジニアポートフォリオにデザイン性は求められないのでOKです。

このポートフォリオが秀逸なのは、すさまじい行動量がPRできていることですね。

さらっと見ても、「おお、アクティブだな～！」と感じますよね。

制作実績となっているアプリ自体は、おそらく他のライバル達と同程度のものですが、勉強量や行動量が多いことがしっかりわかる内容になっています。

採用する企業側からすると、「これだけ動ける人なら、育てがいがあるな！」と感じるわけです。

ひつじウェブさんのポートフォリオ

デザインも情報も綺麗にまとめられているポートフォリオサイト。

特に注目したいのが、キャッチーな文章です。

何が得意なのかがぱっと見でわかりやすかったり、「思いやりデザイン」というキャッチーでどんなデザインかが伝わる文言は秀逸すぎます。

サービスをパッケージ化するというアイデアも、思いやりが詰まっていますよね♪

もちろん、実績のレベルも高いです。

TNGC Graphics

こちらはLPですが、ポートフォリオの構成として使いやすいです♪

イラストを使うことで個性が出ていますし、とても見やすいですよね！

また、KVで「ホームページ制作会社レベルのデザイン・SEO・Wordpressを安価に」と、個人事業主やできたてホヤホヤの法人代表者に刺さりやすいワードを表示しています。

やれることやターゲットが明確になっていますね。

BUROKIさんのポートフォリオ

こちらはデザインレベルが高いのと、情報発信コンテンツがあるので、検索からの流入も見込めますね。

情報発信が今後も定期的におこなわれるかが注目ポイントではあります。

すぐに見て欲しい部分を「PICK UP！」のように目立たせるなどのアイデアも、参考にしたいところです♪

遠水イッカンさんのポートフォリオ

デザインレベルが高い＋個性が出てます。

画像やコンテンツに強くこだわっており、「もっと詳しく見たい！」と感じますよね？

エンタメ系に刺さりそうなポートフォリオサイトです。

要注意！載せてはいけないダメダメポートフォリオ例

今度は逆に、ダメダメポートフォリオ例をご紹介します。

あなたが作成する際は、以下に当てはまらないか最終チェックしましょう。

模写を載せている（低品質な作品を載せている）

ポートフォリオに「模写」を掲載するのは意味がないので、注意しましょう。

模写とは「練習」だからです。

模写は答えを見られるので、スキルの証明書としては弱いです。

ゴールド免許のペーパードライバーのようなものですね。

また、作品数を増やすために「低品質の作品」を掲載するのもやめましょう。

評価が下がる恐れがあるため、低品質であるなら載せない方がマシです！

オシャレさだけを追求している（ポートフォリオは自己満足ではダメ）

オシャレさだけを追求しても、ポートフォリオの役割は果たせません。

何度もお話ししてきましたが、WEBデザイナーを募集するのは「デザインでビジネスを成長させて欲しい」という思いがあるから。

WEBデザインは「商用デザイン」なので、オシャレだから良いデザインとは言えないのです。

極端な話、ビジネスの問題を解決して初めて良いデザインと判断されます。

なので、オシャレさを追求する自己満足なポートフォリオにならないように注意しましょう！

「駆け出しWEBデザイナー」のような素人アピールの文言を入れる

「自分、まだ素人です」という文言をポートフォリオに掲載するのはやめましょう！

twitterのタグでよく見かける「駆け出しWEBデザイナー」などですね。

採用側は「プロ」に仕事を依頼したいのです。

「自分、まだ素人です」という文言は「ミスしても許してね」という自己防衛のように捉えられるので、絶対にやめましょう！

「素人だから責任はとらないけど、仕事ちょうだいね♪」という人に、仕事を依頼したくないですよね？

「高品質なコーディングをします！」のような、アピール文言がフワッとしている

アピール内容は具体的に書かないと、採用担当者に刺さりません。

例えば、「高品質なコーディングします！」という文言はぱっと見良さそうですが、採用側は多くのポートフォリオを見ているので「具体的には？」と感じます。

ポートフォリオは「採用者の目に留める」「グサっと刺さることをアピールする」ということが大切なので、具体的な文言を用意しましょう！

あなたの強みが「UI/UXデザイン」と「安い費用で受けられること」であるなら以下のような感じ。

「私はUI/UXデザインが得意なので、御社のサービスの満足度を好きなだけアップできます。しかも、今だけ5万円。」

このように、デザインをして得られる結果をアピールすると良いでしょう。

おすすめのポートフォリオ作成ツール

「急にポートフォリオが必要になって、力を入れて作る時間がない」「思うように作れなくて困っている。。。」

こんな方にはポートフォリオ作成ツールを使うのがおすすめです♪

テンプレートが用意されているので、あとは画像や文言、作品を埋め込むだけなので簡単に高品質なものを作成可能になります。

Adobe Portfolio

知らない方も多いですが、Adobeもオシャレなポートフォリオ作成ツールを提供してくれています。

Adobe CCを契約していれば無料で使えるもので、Photoshopが使える最安プラン「フォトプラン」以上を契約している人が利用対象です。

ノーコードでのサイト作成ができる点、5つのWEBサイトを作れる点、自動でレスポンシブ化してくれる点などが特に優れています♪

もちろん工夫しなければ「結果が出るポートフォリオ」の作成はできませんが、サクッと作れるのでPhotoshopなどを使っていて急ぎの人におすすめです。

studio

STUDIOも、ノーコードで簡単にポートフォリオ作成ができる無料ツールです（無料プランは全ての機能を使えるわけではありません）。

かなりハイクオリティなものを無料で簡単に作れるだけでなく、CMSの導入や独自ドメインなども反映可能♪

スタイリッシュな印象もグッドですね！

他のクリエイターと共同で作成することもできるので、ポートフォリオ作成ツールとしてとても優秀と言えそうです。

Portfoliobox

portfolioboxは、世界55万人以上が利用しているスウェーデン発のポートフォリオ作成ツールです。

オシャレなデザインを、ドラッグ&ドロップのノーコードで作れます。

2021年現在は無料ではなく、一番安いプランで月額0.9ドルが必要ですが、SSLやネットショップ機能などもあるので費用対効果は高いと言えるでしょう。

Strikingly（ストライキングリー）

Strikingly（ストライキングリー）もノーコードでポートフォリオサイトを作成することができます。

比較的カジュアルなテンプレートが多い印象ですね！

ページ数制限がないので、複数ページを作成したい場合にとても便利です♪

基本的に無料で使うことができますが、「月間の帯域幅5GB」という制限があることは知っておきましょう！

まとめ：ポートフォリオで人生決まる

いかがでしたか？

「結果が出るポートフォリオ」とは、「企業のビジネスを成長させるといかに約束できるか」をアピールすることが大切ということが理解できたと思います。

「これまでの勉強の成果を見てもらうぞ…！」というような消極的なポートフォリオでは、ライバルに勝てないどころか、見てもらうことすらできません。

恥ずかしがらずに、ポートフォリオでもバチバチに自分を表現していきましょう！！

【転職エージェントをご存知ですか？】 高品質なポートフォリオを作れれば、採用確率はドンッと高まります。 とはいえ、どこでも良いわけではないですよね？ 給料・休み・リモートが多いなど、できるだけ条件の良い求人に応募したくないですか？ 転職エージェントなら、一般には出回らない好条件の非公開求人を無料で紹介してくれます。 人生のターニングポイントなので、上質なチャンスを見逃すのはもったいないです。 完全無料なので、気になった方は以下記事でメリットだけでもチェックしておくのがおすすめですよ〜。 ⇒【これで無料？】WEBデザイナー向け転職エージェントが超便利。おすすめ8社も厳選。