ポートフォリオは主にプロフィールや制作実績などを載せて、面接の際に企業に提出する履歴書よりも大事なものです。
Webデザイナーにとってポートフォリオは、どんなスキルがあるのかアピール出来るツールなので就職や転職の際に必ず用意しなければなりません。

ポートフォリオはあなたのWebデザイナーとしてのスキルを表すだけではなく、「あなたがどういった人間なのか」示すものでもあります。
むしろ、企業は素晴らしいポートフォリオを求めているのではなく、ポートフォリオからあなたの何が伝わってくるかを重要視しています。
そのため、出来ないことを無理矢理ポートフォリオに載せるのではなく自分が今、自身をもって出来る範囲のことを載せるのが良いポートフォリオを作るコツです。

しかし、そもそもポートフォリオがどういったもので、どう作れば良いのかわからない人もいるでしょう。
そこで、今回の記事ではWebデザイナーとしてポートフォリオを作成する際に、ポートフォリオを載せると良い項目をお伝えします。
実際に、どのようにしてポートフォリオを作れば良いのかも解説するので、参考にしてください。

目次

• 1.ポートフォリオとは
  • 1-1.自分にどれだけのスキルがあるのか伝える履歴書のようなもの
  • 1-2.作り方は様々で特に決まっていない
• 2.ポートフォリオは紙とWebのどちらで準備すべき？
  • 2-1.志望する企業によって紙とWebどちらが良いか異なる
  • 2-2.紙もあればポートフォリオの解説がしやすい
• 3.企業が面接でポートフォリオを見るときにチェックしていること
• 4.ポートフォリオに載せると良い項目
  • 4-1.自分のプロフィール
  • 4-2.コーディングやデザインなどのスキル
  • 4-3.自分の作品
• 5.ここからはWebデザイナーのポートフォリオの作り方を解説していきます。
  • 5-1.自分のスキルを洗い出す
  • 5-2.参考になるポートフォリオを見つける
  • 5-3.参考にするポートフォリオを自分なりにアレンジする
  • 5-4.最初から最後まで作れないならポートフォリオ作成サービスを利用する
• 6.ポートフォリオが簡単に作れるサービス3選
  • 6-1.PORTFOLIOBOX
  • 6-2.Wix
  • 6-3.Adobe Portfolio
• 7.参考になるポートフォリオのまとめサイト
• 8.まとめ

1.ポートフォリオとは

まずは、ポートフォリオが一体どのようなものなのか解説していきます。

もっとも勘違いしやすいのが「ポートフォリオを作品集」だと思ってしまうことです。
ポートフォリオは単なる作品集ではなく、あなたにどれだけWebデザイナーとしてのスキルがあるんだということを伝えられる履歴書以上に重要なものです。

このことがわかっていないと就職や転職の際に役立つポートフォリオは作れないでしょう。

※ここで解説するのはあくまでもWebデザイナーのポートフォリオについてです。

※ここで解説するのはあくまでもWebデザイナーのポートフォリオについてです。

1-1.自分にどれだけのスキルがあるのか伝える履歴書のようなもの

ポートフォリオとは簡単にいうと作品集や画集のことです。
自分の過去の実績や作品をまとめて「何が出来るのか」相手に伝えることが出来るので、Webデザイナーの面接では履歴書よりも重要視されます。

ただし、実績や作品をまとめただけでは本当の意味で「ポートフォリオ」とは言えません。
ポートフォリオは「あなたがどういう人」で「どんなことが出来るのか」が相手に伝わって初めてポートフォリオと言えます。
これを勘違いして、ただ作品を載せるだけのポートフォリオを作ってしまうと、相手にはWebデザイナーとしてのスキルがあることしか伝えることができない可能性があります。

特に就職や転職の際は、あなたがどういう人なのか、知りたいというのが面接の担当者の気持ちでしょう。
このことからもポートフォリオを作る際は、ただの作品集にならないように気をつけるべきです。

1-2.作り方は様々で特に決まっていない

ポートフォリオは作り方が特に決まっていません。
ある程度載せるべき項目などはあるものの、どのようにして作るのかはその人次第です。

例えば、プロフィールから制作実績まで全て載せる人もいれば、制作実績だけを載せている人もいます。
しかしながら、決まった型のようなものがないので、初めてポートフォリオを作る際はどうすれば良いかわからず悩んでしまうことも事実です。

逆を言えば、どんな形であれあなたがどういう人か、Webデザイナーとしてのどんなスキルがあるのか伝わればどんなポートフォリオを作っても良いと言えます。

逆を言えば、どんな形であれあなたがどういう人か、Webデザイナーとしてのどんなスキルがあるのか伝わればどんなポートフォリオを作っても良いと言えます。

2.ポートフォリオは紙とWebのどちらで準備すべき？

ポートフォリオは紙で作る「紙ポートフォリオ」と、Webで作成する「Webポートフォリオ」の2通りに分かれます。

紙ポートフォリオは作成したポートフォリオをクリアファイルなどにファイリングして、相手に見やすく出来る特徴があります。
反対に、WebポートフォリオはJavaScriptなどでコーディングしたWebならではの「動き」を表現出来てネット環境があればいつでもどこでも見てもらえるので、Webデザイナーとして必須のポートフォリオと言えます。

結論としては、両方のポートフォリオを用意しておけば間違いないでしょう。
その理由をここからお話していきます。

2-1.志望する企業によって紙とWebどちらが良いか異なる

まず、志望する企業によって要求されるポートフォリオの形式が違うので、どちらのポートフォリオを作成するかは志望する企業によって変わります。

しかし、ほとんどの企業では履歴書と一緒にポートフォリオの提出が求められますが、紙ポートフォリオは企業から提出を求められることがほとんどないと言って良いでしょう。
このことから、webポートフォリオを作成すれば間違いありません。

2-2.紙もあればポートフォリオの解説がしやすい

Webだけではなく紙でもポートフォリオを用意しておくと、面接の際にポートフォリオの解説がしやすいです。

例えば、作品の比較をして面接官にその作品の良さや違いを伝えたい場合、Webポートフォリオだけではモニターの大きなパソコンが無い限り比較しにくいでしょう。

ですが、面接会場にそのような環境が用意されていることはほぼありません。
その点、紙のポートフォリオがあれば瞬時に作品の比較をすることができ、面接官の手を煩わすこともないです。

そうすれば面接官はあなたのポートフォリオを見ることに集中できるので、よりポートフォリオの良さが伝わるでしょう。

3.企業が面接でポートフォリオを見るときにチェックしていること

企業がWebデザイナーの面接でポートフォリオを見る際、チェックしているのはポートフォリオの素晴らしさではありません。

企業がチェックしているのは、そのポートフォリオから伝わってくるあなたという人物像です。
どんなに素晴らしいポートフォリオでも、自分の作品をただ見て欲しいという状態ではあなたが一体何を出来るのか伝わってきません。

むしろ、完成度の低いポートフォリオでも「HTMLでこんなことが出来る」「御社でこういうことがしたい」ということが伝われば採用してもらえる可能性はグンと上がるでしょう。
そのため、素晴らしいポートフォリオを作ろうと思うのではなく、どうやって自分の良さを伝えるかを考えてポートフォリオを作ることをおすすめします。

4.ポートフォリオに載せると良い項目

自分の良さを伝えるポートフォリオを作るといっても、イメージが湧かない人もいるかもしれません。

そこで、ここではポートフォリオに載せると、あなたという人物像が伝わるであろう項目をご紹介します。
実際に色々な企業の採用担当者の方とお話して私が感じたことでもあるので、参考にしてください。

4-1.自分のプロフィール

まずはポートフォリオにあなたのプロフィールを載せましょう。

プロフィールを載せると、ポートフォリオを見るだけであなたという人間がどういう人なのか面接官に伝えることが出来ます。
履歴書でもあなたのプロフィールを確認することはできますが、ポートフォリオなら履歴書よりも詳細にプロフィールを伝えられるはずです。

例えば「スクールに通ってスキルを身につけた」「略的を含めた挨拶文」といったように、履歴書では伝えられないことを記載しましょう。
あなたが面接官に補足説明をすることなく、ポートフォリオを見るだけでわかるようにするのがプロフィールを載せる際のコツです。

・載せると良い項目を下記の表にまとめたので、参考にしてください。

• 名前
• 顔写真
• 生年月日
• 略歴を含めた挨拶文
• 仕事への姿勢や意気込み
• 自己PR

4-2.コーディングやデザインなどのスキル

あなたにWebデザイナーとしてどのようなスキルがあるのか、一目でわかるように記載をしましょう。

スキルの項目を記載することで面接官に何が出来るのかをアピールして、どれだけ自分という人間がその企業に必要かということを伝えることが可能です。
ポートフォリオに作品を載せれば面接官はあなたの力量を判断できますが、作品を見た上で考える必要があるので瞬時には伝わりません。

それではポートフォリオの意味がないので、あなたのスキルをすぐに分かってもられるようにどのようなスキルがあるか記載をしましょう。
もしデザインやコーディングなどに得意分野があるなら、そこは詳細に記載することをおすすめします。

4-3.自分の作品

最後に、あなたが今まで作成した作品を載せましょう。
Webデザイナー未経験の人は1つでも良いので記載することをおすすめします。

作品は実際にあなたがどんなWebデザインが出来るのか、視覚的に捉えられる材料です。
そのため、作品の良し悪しであなたのスキルが評価されると言っても良いでしょう。

どんなスキルがあるのか文章で見るだけでは、あなたが本当にそのスキルがあるのかわかりません。
つまり、作品がなければ説得力に欠けるということです。

作品についてのコメントを記載することも忘れてはいけません。
例えば、制作期間や作品に注力したところ、工夫したポイントなどを記載しましょう。

5.ここからはWebデザイナーのポートフォリオの作り方を解説していきます。

今回ご紹介する作り方であれば、ポートフォリオ作りに悩むこともなくなるはずです。
なぜなら、ここでご紹介する作り方がもっとも効率よくポートフォリオを作れるからです。

ポートフォリオは決まった型がなく、いざ作ろうと思っても何から始めて良いのかわからないでしょう。
ここでは、ポートフォリオを作り始める順番と、どのようにしてポートフォリオを作っていけば良いのかを解説するので参考にしてください。

5-1.自分のスキルを洗い出す

ポートフォリオを作り始める前に、自分のスキルを紙に書き出しましょう。
そして、その情報をまとめておきます。

・スキルの一例

• illustrator
• Photoshop
• XD
• Sketch
• HTML
• CSS
• JS
• jQuery
• レスポンシブ
• PHP
• WordPress

そうすると、あなたは何が得意でどんなスキルがあるのかを明確にすることができます。
明確にしておくことでポートフォリオに載せる項目が整理されて、伝えたい情報だけを伝えることができるはずです。

整理された情報であればデザインの基本の「構成力がある」と企業からも判断されるので、面接の際は有利になるでしょう。
特に「デザインのここが得意」「コーディングのここが得意」といった得意分野があればそれが強みになるので、ポートフォリオに必ず載せるべきです。

5-2.参考になるポートフォリオを見つける

自分のスキルを洗い出せたら、参考にするポートフォリオを見つけます。

最初から自分で作ろうと思うと、Webデザイナー未経験の人では難しくて作成が進まない可能性があるからです。
Webデザイナーの世界では、他のサイトのデザインを参考にすることは頻繁に行われているので参考にするためにポートフォリオを選びましょう。

実際にポートフォリオを作るときは、そのポートフォリオを真似して作るようにします。

5-3.参考にするポートフォリオを自分なりにアレンジする

ポートフォリオを真似して作るだけでは盗作になり、独自性(オリジナリティ)もないのでポートフォリオとして成立しません。

まずは、ポートフォリオを真似して作って、洗い出したスキルやプロフィール、作品などをポートフォリオに加えます。
そして、その上でポートフォリオをアレンジしましょう。

例えば、自分らしさをPRするためのアレンジの方法は多岐に渡ります。
あなたの個性や強みが出るようにポートフォリオをアレンジしましょう。

5-4.最初から最後まで作れないならポートフォリオ作成サービスを利用する

自分の参考になるポートフォリオが見つからない場合は、ポートフォリオ作成サービスを利用しましょう。

ポートフォリオ作成サービスは、誰でも簡単に手早くポートフォリオを作れるサービスです。
元からある画像をドラッグして配置を決めることが出来たり、テンプレートを使ったりしてポートフォリオを作成できます。

自分でゼロから作った方がスキルをアピールできるのでは？と思う人もいるでしょう。
ここで忘れてはいけないのは、ポートフォリオはあなたという人物像を伝えるための手段でしかないということです。

ポートフォリオの内容やデザインに悩んで時間をかけたりポートフォリオが完成しないくらいであれば、ポートフォリオ作成サービスを使ってまず作ってみるのが一番大事です。
あなたの伝えたいことが伝えられるのであれば何も問題ありません。

6.ポートフォリオが簡単に作れるサービス3選

ポートフォリオの作成に不安がある人のために、ポートフォリオを簡単に作ることが出来るサービスを3つご紹介します。

基本は無料で使うことが出来ますが、サービスによっては機能を全て使うなら有料になるものもあります。
もし満足いくポートフォリオを作りたいなら有料プランを使うことも検討してみてください。

6-1.PORTFOLIOBOX

PORTFOLIOBOXは100万人以上に利用されているポートフォリオ作成サービスです。
このサービスは、HTMLやCSSを使ったコーディングを使わずにポートフォリオを作ることが出来ます。
しかも、作ったポートフォリオはスマートフォンやタブレットなど様々なデバイスへ自動的に調節してくれるので、レスポンシブ対応させる必要がありません。
ただし、無料のプランでは30枚の画像と10ページまでしか使えないという制限があります。
有料のプラン(約780円)では1000枚の画像を使えてページ数は無制限なので、10ページ以上のポートフォリオを作る人は有料プランに登録しましょう。

公式サイトはこちら

6-2.Wix

Wixは500種類以上のテンプレートが用意されていて、誰でも簡単にポートフォリオを作ることが出来るサービスです。
画像も40種類以上あるので、画像をドラックするだけで配置することが可能です。
通常であればCSSやJavaScriptでしか表現できない「Webサイトの動き」までボタン1つで追加できることからコーディングに時間をとられずポートフォリオが作れます。
基本は無料ですが、有料プランにすることで独自ドメインを設定したり広告を非表示にしたりすることも出来ます。
特別必要と感じない人は無料プランで問題ないでしょう。

公式サイトはこちら

6-3.Adobe Portfolio

Adobe Portfolioは8つのレイアウトを使い、ポートフォリオを作成出来るサービスです。
作成途中でレイアウトを変えたい場合はすぐに変えられるので、自由度が高いといえます。
しかも、また設定をやり直す必要はなく、以前の続きから始めることが出来ます。
スマホにも対応(レスポンシブデザイン)しているので、コーディングが苦手な人にもおすすめのサービスです。
ただし、Adobeと契約して有料(980円〜)で使う必要があるので注意しましょう。
すでにPhotoshopやIllustratorを使用している人は、無料で使うことが可能です。

公式サイトはこちら

7.参考になるポートフォリオのまとめサイト

ポートフォリオはなるべく多くのものを見て参考にする必要があります。
特に初心者のうちは色々なデザインに触れて、ポートフォリオの参考にしましょう。

そのために、ポートフォリオがまとめてあるWebサイトをいくつかご紹介します。
ご紹介する3つのサイトに載っているポートフォリオを合わせると全て合わせて50種類以上あります。

まず、見比べてみて自分好みのポートフォリオを見つけてください。

・Workship様（転職活動に！Webデザイナーのおしゃれなポートフォリオサイトまとめ30選）
・ferret様（ポートフォリオをもっとカッコよく！上手なポートフォリオサイト20選）
・CHOICELY様（Webデザインギャラリー : ポートフォリオサイト）

8.まとめ

Webデザイナーとして就職・転職をするならポートフォリオは必要不可欠です。

ポートフォリオはあなたのWebデザインのスキルを証明するだけではなく、あなたがどういう人間なのか履歴書以上に知れるものだからです。
ここで背伸びをして自分が出来ないような技術を使ってポートフォリオを着飾っても、面接官にはその意図が伝わってしまい良い評価は得られないでしょう。

企業は素晴らしいポートフォリオを求めているのではなく、素晴らしい人材を求めています。
まずは自分が出来る範囲の技術を使って、この人と一緒に仕事がしたいと思ってもらえるポートフォリオを作るように心がけましょう。

最後にデジタルハリウッドSTUDIO横浜についてご案内!!

STUDIO横浜は駅直結の好立地で学習ができます！

渋谷駅 – 横浜駅　約30分

茅ヶ崎駅 – 横浜駅　約25分

横須賀駅 – 横浜駅　約45分

武蔵小杉駅 – 横浜駅　約10分

川崎駅 – 横浜駅　約10分

乗り継ぎなし！駅直結で雨に濡れる心配なしの好立地はSTUDIO横浜だけ！

神奈川県初のデジタルハリウッド STUDIOへどうぞお越しください♪