就活の季節ですね、コロナの影響もありなかなか動けず悩んでいる学生さんもいるのではないでしょうか…
今回はデザイナーとして就職活動をするには必須となる、ポートフォリオについて紹介していきます。

ポートフォリオとは

ここで紹介するポートフォリオとは作品集のことを指します。
これまで作成してきた作品・実績をまとめたもので、自己アピールや履歴書にもなります。
ポートフォリオの中身でその人の実力や人となりがわかったり、面接時には採用の決め手になることもあります。

ポートフォリオの種類

ポートフォリオの種類は今回はWebデザイナーに、と決めているので
PDF・紙媒体・Webの3種類に絞られると思います。
どの形式でつくればいいのか？という人もいると思います、Webデザイナーを目指すのではあれば紙媒体、デジタル媒体のポートフォリオをどちらも用意しておくのが良いです。
データ送付で構わない企業と、印刷したものが必要な企業やどちらも用意していただけますか、という企業もあるので
柔軟に対応するためには紙媒体、デジタル媒体のものを両方用意しましょう！

紙媒体ポートフォリオ

紙媒体で多くみられるファイルに作品をまとめたポートフォリオの作り方について紹介します。

ファイルの選び方

目安は　20～40ポケットあるものが良いでしょう。このファイルの見た目も大事です。
就活で持ち歩いたりと出番が多くなるので、傷や汚れが付かない・目立たないもの、そのため値段が安すぎるものはやめておきましょう。
形はシンプルな方が良いと思いますが、色は単色で蛍光色でない限りあまり悪い印象はないのではと思います。
サイズとしてはWEB業界であればA4からA3が中心なのではないでしょうか？
A4サイズは持ち運びしやすく、印刷もしやすいのでオススメです

ページ構成

ポートフォリオの簡単なページ構成をまとめると
表紙→プロフィール→目次or見出しページ→作品ページ→見出しページ→作品ページ…
となっております。要素ごとに作り方や注意点を紹介していきます。

表紙

ポートフォリオの表紙は作りましょう。
この表紙がなく、作品のページがいきなり始まると「えっ、作品いきなり置いただけ…？」と
あまりデザイン性が良いとはいえない…と思われてしまうかもしれません
簡素に名前とポートフォリオと文字があれば成立するので作っておきましょう。

自分の作品集なので表紙を自分好みにするのもよいですが、就職活動で使用するポートフォリオは人に見せるものです。見る人によって印象が変わるものなので、派手すぎたり、ゴテゴテしたものは人事や会社の社風や好みによっては好まれるかもしれませんが…
沢山の企業に見せるものと想定して、見る人を選ばないシンプルなデザインにまとめるのが吉です。

プロフィール

次にプロフィールです。自分の写真を載せるのならば、いい写真を載せましょう。
写真は大きすぎても、自分を美化しすぎた加工も、変な構図の写真もダメです。
じゃあ履歴書に貼るような写真は？とおもいますよね。悪くはないと思いますが、そこまで固い印象のものにしなくても良いかなと思います。
大事なのは実際に対面したときと変わらない印象と、しっかり個人がわかりやすく、明るい雰囲気の写真が良いと思います。

パラメーターやレーダーチャートにまとめたスキルシートを載せるとよいと思います。
デザイナーとして必要なスキルの項目としては
Photoshop・illustrator・XD・HTML・CSS・JavaScript・jQuery等でしょうか。
他にも動画作成や写真撮影などのスキルがあると重宝されます。
自分の実力よりもついつい多めに見積もりたくなる気持ちはありますが水増ししすぎれば後々自分が苦しむことになります。やめましょうね。

見出しや目次

見出しや目次はあれば親切ですし、見る人の動きを考えていて良いなと思います。
Webデザインオンリーのポートフォリオならカテゴリごとの見出しページはなくてもいいと思います。
作品ページ1ページずつに番号ふるのはやめた方がいいです。ページ数を把握できるのはよいのですが、
作品のブラッシュアップや、新しい作品と古い作品を入れ替える際にページ数の変動が起きる為、ミスが生まれやすいのです…。
あまりオススメはしません～…

ポートフォリオの作品（中身）

Webデザイナーになりたいなら中身の作品が充実していないといけませんよね。
中身については今回こちらのブログの内容に入れると長くなってしまうので…
別にまとめました！もうすでにポートフォリオがあるよという方はこちらをチェックです▼
新卒でWebデザイナーになる為に必要なポートフォリオの中身とは！？

ページレイアウト

作品ができたらいよいよポートフォリオのページ作成です。
ポートフォリオに必要な項目を簡単に紹介します

レイアウト

まず作品のレイアウトは見やすさ重視。今回はわかりやすく良い例悪い例を用意しました。違いが分かりやすいように大げさにしていますがダメな箇所を拡大してみるとこんな感じです。

・めちゃくちゃな余白のルール（左右上下の余白の大きさが全部バラバラ！整えましょう）
・文字ずれや線がつながっていなかったり、大きすぎるサイトマップ（余白があると寂しく感じますが適切な大きさに調整しましょう）
・背景と同化してしまっているサイトの全体画像（境界線を付けて同化しないよう防ぎましょう）
・文字の多すぎる説明欄（必要な内容がわかるように添削しましょう。）

以上になります。最初に書いたように見やすさ重視を意識して欲しいので、文字や要素を大きくしようとするのは良いのですが、情報を詰めすぎてはいけません。
余白がありきちんと整列したレイアウトにしましょう。
線のウェイトやオブジェクトの配置など、細かくガイドを引いて制作することをおすすめします。
細かい部分がずれていると「詰めの甘さがあるな…」と思われてしまうので、なるべくガイドを引いてズレがないよう気を付けましょう。
1pxのズレもデザイナーは見ているので細部まで気を配りましょう。

作品の写真

載せる写真の画質は落ちていませんか？なるべく重くならない容量で、質の良いものを載せましょう。
※リンク配置などで写真を置かないよう注意！

モックアップ

サイトのファーストビューが見えるようにモックアップに入れて見せることも大切です。
PC・SP（スマホ）両方のモックアップがあるとよいですね。
そしてモックアップに使うPCやスマホの素材などは最新の機種のもの使用した方が良いのではないかなと思います。
探せば高クオリティで無料で使用できるものもたくさんあります。
私のオススメはこのFacebookDesignというサイトです。
こちらのページのデバイスページはアップル製品を中心にPCやスマホの沢山の機種が用意されており、他にもiPadやアップルウォッチなど素材もありオススメです。

サイトマップ

分かりやすくまとめておきましょう。ここはミスが多いポイントなのでデザインとサイトの構造は間違っていないか、図形と線がずれてしまっていないか等デザイナーは気づきますので、しっかり確認しましょう。

文章量

作品の紹介文などの文章量ですが、多すぎるものはだめです。簡潔に2行程にまとめておきましょう。
ポートフォリオの文章を読まずに流してみられる場合もありますので長く書く必要はありません。
※提案書のスタイルで載せる場合は例外です
ですが、力を抜いていい箇所ではないです。見ている人はしっかりと見ているので、誤字脱字や禁則処理などには気を付けましょう。
「自分の作品について語りたい…！」という場合は面接の時にとっておきましょう。
作品についてしっかりと語れれば好印象を持たれること間違いなしです。

作品数・ページ数

ページ数は多すぎず、少な過ぎないように。
基準としては、15ページから20ページで10作品ほど紹介できるとよいでしょう。
ページ数は少なすぎると寂しいポートフォリオだなという感じを受けますし、少ない分中身のクオリティを重視で見られます。
逆に「たくさん作った作品を見てほしい！」というのもよいですが、限られた面接の時間では全ててみることはできないですし、
力を入れた作品でも流し読みで印象に残らず…となってしまいます。
しっかり見てもらうためには力の入れた作品・出来の良いものを厳選するのが良いと思います。

作品を更新

新しく作品ができたら追加していきましょう。作品はなるべく最新のものを使用し、
ポートフォリオを提出し指摘を受けた際にはすぐに修正・更新ができるように更新しやすいページレイアウトを考えましょう。

自分らしいポートフォリオ

もちろんWebデザインを中心にしたポートフォリオになりますが、ポートフォリオの1割くらいでしょうか、自由な作品を入れても良いと思います。
イラストが得意な人や動画が得意な人はそういった方面の作品を入れ、自分の得意なものを知ってもらえるようアピールするのも良いですね。

ポートフォリオの表紙やプロフィールなど自分の好きな色を使ったり、文章や作品タイトルに使用するフォントにこだわってみるのも良いと思います。
作品を見せるためシンプルになりがちではありますが、自分らしさを考えてポートフォリオの中に落としこみましょう。
個性を出すことによって印象にも残りやすくなりますし、自分のポートフォリオに愛着もわきます。
　

デジタル媒体のポートフォリオ

PDFでまとめたりするのもよいですが、PFサイトを作成するのもよいでしょう。
「サイトを一からつくるのが難しい…」と感じる人達にお勧めしたいのは、無料で使用できるポートフォリオサイトです。
ポートフォリオ作成サイトはたくさんありますが、その中からいくつか紹介したいと思います。

PORTFOLIOBOX

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

Wix

Wixは世界で１億人以上が利用している有名なWebサイト作成サービスです。
豊富なテンプレートを自由に使用でき、サーバーやドメインの用意も必要なく登録してすぐにサイト作成をすることができます。
テンプレートの画面上でプレビューを見ながら、ドラッグ＆ドロップして素材を移動させたり、拡大縮小させたりすることができ、CSSやJavaScriptでしか表現できない「Webサイトの動き」までワンクリックで追加できるので、コーディングに時間をとられずコーディングが苦手な人でもポートフォリオが作れます。
基本は無料ですが、有料プランにすることで独自ドメインを設定したり広告を非表示にしたりすることも出来ます。

salon.io

Salon.ioはドイツ発のポートフォリオ作成サービスで、コードの知識がなくともドラック＆ドロップ誰でも簡単にポートフォリオサイトを作成できるサービスです。
HTMLやCSSの編集も可能で、Youtube、Vimeoなどの動画を埋め込むこともできるのが利点です。
無料のプランではサイト内のページを3ページまで、画像は150枚登録することができ、広告表示が無い為、広告表示が気になるという方にはおすすめです。

まとめ

新卒でWebデザイナーとして応募をするならばポートフォリオは必要不可欠です。
新卒さんのポートフォリオは「実務経験はないけれど、自分はこんなサイトが作れますよ！」と今自分の持っているスキルと入社後、どのように成長するか、という可能性を感じてもらう必要があります。

なので、無理に背伸びはせず、自分の出来る範囲の技術を最大限に使ってポートフォリオに落とし込みましょう。
ポートフォリオというのは時に履歴書よりもその人がどんな人物であるかが知れるものになります。
この人と一緒に仕事がしたいと思ってもらえるようなポートフォリオを作るように頑張ってください！