人と差が付くWebデザイナーのポートフォリオとは？必要な要素と作成時のテクニックを解説！

ポートフォリオとは

ポートフォリオとは、これまで手掛けたデザインやプロジェクトをまとめた”作品集”のことです。デザイナーのスキルやクリエイティブな能力、デザインスタイルなどを示すものとして、転職活動や案件獲得の際に必要となります。

本記事では、採用担当者がチェックしているポイントやテクニック、注意点などについて詳しく解説します。これから初めてポートフォリオを作る方、今よりももっと魅力的なポートフォリオを作りたいと考えている方は、ぜひ参考にしてみてください。

ポートフォリオが必要な理由

ポートフォリオは、クリエイティブ系の職種に転職をする際、履歴書と職務経歴書と合わせて提出します。その理由は、ポートフォリオは制作者の能力を文字よりも明確に示すことができるからです。

一般的に転職活動は経験ベースですが、Webデザイナーやグラフィックデザイナーは、企業が求める作品を作り上げられることが重要です。そのため、経験があっても企業が求める作品を作れなければ採用されません。反対に、未経験や経験が浅い場合でも、クオリティが高く、企業が求めるテイストに合ったポートフォリオがあれば、採用に繋がる可能性もあります。

つまり、企業が求める仕事をできる人なのかどうかを判断するためには、ポートフォリオが必要なのです。

紙媒体のポートフォリオも必要？

基本的に紙媒体のポートフォリオは必要のないケースが多くなってきています。ただし、特定の業界の選考や採用担当者にWebの知識がない場合は、Webサイトのポートフォリオと合わせて用意しておくと安心です。

紙媒体のポートフォリオを作った場合は、ポケット式ファイルに入れつつ、PDFとしても資料をまとめておくと選考時のやり取りをスムーズに行えます。

採用担当者がチェックする3つのポイント

ポートフォリオは人に見せる作品集であり、制作者の能力が測られるものです。特に転職においては、自分にとってどんなに良い作品だったとしても、採用担当者に伝わらなければ意味がありません。
そこで以下では、採用担当者がチェックするポイントを解説します。こちらを理解しておくと、転職に効果的なポートフォリオ制作に役立つでしょう。

1.スキルレベル

まずは当然ながら、仕事を任せる上で必要な技術的スキルを持っているかをチェックしています。使用できるツールは何か、どの程度まで使いこなせるのか、どのようなサイトに携わってきたのかなどから、応募者の実力や経験を推定することができます。

希望の企業に採用されるために「高いスキルをアピールしなくては！」と思う方もいらっしゃるかもしれませんが、あくまでも自身のありのままのスキルや経験を記載しましょう。

2.デザイン力

ポートフォリオ全体のデザインや作品の美しさから、制作者のデザインセンスが分かります。採用担当者は、デザインを形にするための表現力や企画力、文章スタイルなども含めた、デザイン力をチェックしています。

注意が必要なのは、どんなにデザインセンスが高くても、企業の社風や求める作風と大きく乖離していると、採用には繋がらないケースが多いこと。自身のスタイルや作風を無理に変えるのではなく、自身に合った企業を探すことが大切です。

3.課題解決力や伝える力

課題解決力や伝える力があるかも採用担当者が重視しているポイントです。
Webデザイナーの場合、“デザイン”の力でクライアントや社内の課題を解決するのが仕事です。そのため、どのような作品を作るにしても、まずは課題を解決するためには何が必要で、それを効果的に伝えるためにはどのようはデザインが適切かを考えなくてはいけません。

よって、自分が好きなものを作るだけでなく、目的を理解し、課題解決力や伝える力を活用して成果物を作り上げられる人物かをチェックしています。

ポートフォリオに必要な6つの要素

ポートフォリオに指定のフォーマットはありませんが、自らの能力やスタイルを明確に伝えるために入れておくべき要素があります。

1.目次

PDF形式や紙でポートフォリオを提出する場合は、まずはじめに目次をつけましょう。また、ポートフォリオサイトでも大規模なサイトや複数の作品が含まれている場合は、目次をつけたほうが丁寧です。

2.プロフィール

ポートフォリオの冒頭では、プロフィールを記載します。クリエイターとしての経歴や考え方など、人となりが伝わるよう端的にまとめましょう。

【主な記載事項】
・名前
・生年月日
・顔写真
・職務経歴や実績、受賞歴
・クリエイターとしてのこだわりや価値観、信念
・自己PR

3.将来のビジョン

クリエイターとしての将来のビジョンや目標、それに向けてどのようなスキルを磨いていきたいのかなどを述べます。転職活動の場合、採用担当者は、応募者が思い描くキャリアを自社で実現できるのか、求める人物像にマッチしているのかなどをチェックしています。
自身が思い描くキャリアのイメージを伝えることを意識しましょう。

4.作品紹介

基本的に1つのページに1つの作品を紹介します。それぞれの作品には必ず説明文を記載しましょう。説明文は、以下の主な記載事項のなかから、適切な項目をピックアップしてまとめるのがおすすめです。

【主な記載事項】
・URL（Webサイト以外の場合は作品タイトル）
・作品の写真、スクリーンショットなど
・クライアント名
・制作年月日、制作期間
・作品の背景や目的、クライアントの要望
・作品のコンセプトやポイント
・使用ソフト、言語などの環境
・工夫した点や難しかった点
・プロジェクトにおける役割と担当領域（プロジェクトチームで制作した場合）

5.仕事のスタイル・対応領域の紹介

作品制作にあたり、どのような手順・スタイルで進めていくのかを記載します。文章で説明する形でもよいですが、イラストや図を用いるとより伝わりやすくなるでしょう。

また、使用可能ツールやどの領域であれば対応可能なのかなどを整理しておくと、スキルレベルがより明確に伝わります。

6.連絡先・SNS・ポートフォリオサイトのURL

ポートフォリオの最後には連絡先を記載するのが一般的です。ポートフォリオを閲覧してくれた人がそのまま制作者にコンタクトを取れる動線になっていると、面接や仕事依頼のためのコミュニケーションがスムーズになります。

また、SNSに作品をアップしている方は、SNSのアカウント情報も記載するのがおすすめです。SNSは作品や制作活動を広く、簡単に発信できるので、自身のブランディングにもなります。

ポートフォリオ作成時のテクニック

続いてはポートフォリオの作成で使えるテクニックについて解説します。

作品の掲載順を工夫する

作品の掲載順は、応募先企業が求めるスキルや特性に合わせて調整するのが効果的です。そのためには、応募先企業が具体的にどのようなスキルを求めているのか、これまでどのようなデザインを作成してきたのかといった情報を把握しておく必要があります。
また、特にアピールしたい代表作品は優先的に掲載するのがおすすめです。

作品の数は10前後を目安にする

あなたの魅力を最大限伝えるために、“適度な情報量”であることが大切。作品数は10前後を目安にしましょう。作品数が少なすぎると能力やスタイルが伝わらないですし、多すぎると重要な作品やアピールポイントが不明瞭になってしまいます。
実績の多さをアピールしたい場合は、別途URLを記載しておくと良いでしょう。

自分のアピールポイントや強みの配置にこだわる

自分のアピールポイントや強みを伝える内容は、目につきやすい場所に配置するのがポイントです。ただし、ただ目立たせればいいというわけでもありません。
ポートフォリオは、全体を通してデザインスキルやスタイルを表すものなので、見る人がどのような導線をたどるのがスムーズかを考えつつ構成を決定します。

コーディング技術や経験もあれば記載する

Webデザイナーという職種名で募集していても、仕事内容にコーディングが含まれている求人は数多くあります。そのため、デザイン以外にもコーディング技術や経験があれば合わせて記載しましょう。
すぐに業務で使わなくても+αのスキルを持っていることで評価は高まりますし、将来的に業務幅を広げられることを見据えて採用に繋がるケースもあります。

人に「伝わる」ような説明を考える

基本的にポートフォリオを見るのは、あなたのことを何も知らない人です。まずは自らのデザインプロセスや考え方を整理し、持っているスキルやデザインアプローチを深く理解しましょう。
その上でそれぞれの作品制作の背景や過程を振り返り、人に伝わりやすい説明文を考えていきます。

UIデザインやWebマーケティングのスキルを身につけておく

ほとんどのWebサイトは、ユーザーへの情報提供や販売促進、ブランディングなどの目的を持っています。そして、それらの目的を果たすためのデザインを制作するのがWebデザイナーの役割。
ユーザー視点での操作性や利便性、ユーザーを目的のアクションに促すための戦略をWebデザインに取り入れられると、Webデザイナーとしての評価がより高くなります。

プロフィールには顔写真を入れる方がよい

プロフィールに顔写真を入れることで、制作者がどんな人物なのかが視覚的に伝わりやすくなります。
例えば、採用担当者が多くのポートフォリオを一度に確認するとき、個性やスタイルが伝わらないポートフォリオは、単なる作品の集まりになってしまいます。ポートフォリオを見る人が少しでもあなたの印象をつかみやすくなるように、顔写真を入れておくと良いでしょう。

遊び心で余裕を表現する

同じ作品を載せたものでも、フォントやレイアウトの違いで印象が大きく異なります。ポートフォリオは過去の作品を紹介するだけでなく、センスをアピールする場でもあるので、程よい遊び心はプラスの印象を与えます。
全体としては堅実さを感じさせつつ、部分的に遊び心を取り入れることで個性を表現し、他者との差別化を図りましょう。

ポートフォリオは更新する

ポートフォリオを作る目的は、転職をするためや良い案件を獲得するためです。一度作って終わりではなく、その時々の経験やスキルに合わせて更新していく必要があります。

おすすめはプロジェクトや案件が完了したタイミングでの更新です。これは自身のキャリアを振り返り、成長を確認するための良い機会にもなります。

Webデザイナー未経験者のポートフォリオの作り方

Webデザイナー未経験者やチームでの制作工程の一部のみを担当している場合、ポートフォリオに載せる作品が少ない方もいらっしゃるでしょう。以下では、作品がない・少ないときのポートフォリオの作り方をご紹介します。

サーバーの契約

レンタルサーバーを契約して、架空のWebサイトを制作するのがおすすめです。代表的なレンタルサーバーは「エックスサーバー」や「ロリポップ！」などですが、他にも数多くの種類があるので、機能や費用など重要視したいポイントを踏まえて選択すると良いでしょう。
サーバーの契約と合わせてドメインを取得することで、ポートフォリオをオンライン上で共有できます。

掲載用作品の制作

掲載用にいくつか作品を制作します。ここで重要なのが「どのようなクライアントなのか」「クライアントは何を求めているのか」「どのようなコンセプトなのか」など、設定を明確にすることです。これらの設定のもと、作品の意図や何の技術を使ったかなどを説明することで、実際のプロジェクトを見据えた作品を作ることができます。

知り合いの企業やお店があれば、練習用にサイトを作らせてもらうのも良いでしょう。

ポートフォリオ作成時の注意点

ポートフォリオを作成する上で注意しなくてはいけないポイントを確認しておきましょう。

デザインがわかりにくくなっていないか確認する

ポートフォリオそのもののデザインがわかりにくいと、作品の内容や説明が明確に伝わらなくなってしまいます。ポートフォリオを見る人の視点に立ち、相手が何を知りたいのかを考えながら全体のデザインを構成することが大切です。
また、個性やセンスを表現することは大切ですが、あまりにも凝ったデザインはかえって見づらくなってしまう可能性もあるので注意しましょう。

作品数や中身が薄くならないようにする

ポートフォリオはあなたを表現するものですが、中心となるのは作品です。そのため、肝心の作品の数が少なかったり、数は多くても一つ一つの中身が薄くなってしまうと、本来の目的を果たすことができません。
作品数は10前後を目安に、少なくても4～5作品ほど掲載しましょう。作品数が足りない場合は、前述した方法で掲載用の作品を制作してみてください。

著作権に気を付ける

どんな作品にも著作権があります。特に注意すべきなのが、基本的に著作権は企業の権利のもとにある点。つまり、過去企業に勤めていたときに制作した作品の著作権は、当時在籍していた企業にあるのです。このような作品をポートフォリオに載せる場合は、掲載許可を取っておきましょう。

ただし、前職で作った作品をポートフォリオを載せたとしても、すぐに情報漏えいとして訴えられるケースはほとんどなく、ある程度許されているのも事実です。作品制作の過程を伝える程度であれば問題ないので、外部に漏れることがないよう配慮と管理をすることが大切です。

情報漏洩や秘密保守に気を付ける

企業のプロジェクトは、NDA（秘密保持契約）を結んだ上で進行するのが一般的です。ポートフォリオも企業のプロジェクトに基づいて制作されることが多いので、ポートフォリオの説明をする際に、個人情報や企業の秘密情報を公開するのは厳禁です。

個人情報や秘密情報までいかなくとも、世の中に未公開の情報や企業で見送りになったプロジェクトが記載された作品などは公開しないほうが無難です。万が一に備えて、ポートフォリオサイトの場合は、アクセス制限を行うためのベーシック認証を設定しておくと安心でしょう。

未経験者はポートフォリオが制作できるサービスの利用がおすすめ

未経験者や経験が浅い方は、ポートフォリオ制作サイトの利用がおすすめです。ポートフォリオ制作サイトでは、使いやすいテンプレートや編集ツールが提供されているので、ドロップやテキスト入力などの簡単な操作でポートフォリオを作成することができます。
以下のサービスのなかから自身のスタイルやニーズに合ったサイトを選ぶと良いでしょう。

Ameba Owned

ABEMAやアメーバブログを運営するサイバーエージェント社のサービスです。独自のテンプレートやカスタマイズオプションを使用しており、スタイリッシュなデザインテーマやフォントが多い傾向にあります。
日本語での利用が主流であり、操作性にも優れていることから、初心者でも安心して利用することができます。

WordPress

WordPressは、世界中で最も人気のあるCMS（コンテンツ管理システム）の一つであり、多様なテーマやプラグインが利用可能です。その柔軟性とカスタマイズ性から、クオリティの高さを重視したい方に最適といえます。
また、自社のWebサービスにWordPressを利用する企業も多いので、WordPressを自在に扱えることは、効果的なアピールポイントになります。

Salon.io

Salon.ioは、直感的なドラッグ＆ドロップの操作で簡単にポートフォリオが作成できるサービスです。コーディングの知識は必要ないので、Webデザイナー未経験の方に特におすすめです。
HTMLやCSSを追加できるエディター機能を活用すれば、オリジナリティがあふれたポートフォリオを作成することができます。Salon.ioのスタイルは、モダンで洗練された印象を与えます。

PORTFOLIOBOX

シンプルだけど”デザイン”で魅せたい方なら、PORTFOLIOBOXも選択肢の一つ。豊富なカスタマイズオプションやレイアウトの柔軟性から、多彩なサイト構築を実現します。

世界150カ国、100万人以上で利用されていますが、日本語にも対応しているので使いやすさにも定評があるサービスです。

まとめ

Webデザイナーにとって、ポートフォリオは自らのスキルやアイデアを表現し、さらなる仕事の機会を切り開くための欠かせないツールです。
この記事では、ポートフォリオに必要な要素やテクニックなどをご紹介しました。これらを参考にしながら、自分らしいスタイルや個性を最大限に表現し、魅力的なポートフォリオを作り上げましょう！