【改訂版】就活用WEBデザイナー用紙ポートフォリオの作り方

ポートフォリオ デザイン レイアウト

こんにちは!YOUKNOWです。

以前書いた記事が読まれているので、よりわかりやすく書き直したいと思います。

以前の記事は、WEBと紙がごっちゃになっていてわかりづらかったですね….。
なので今回は反省し、紙とWEBを別々に書くことにしました。

今回はWEBデザイナーのポートフォリオ..ののほうについて、レイアウトやデザイン等の事も含めて書きたいと思います。

ポートフォリオとは?

WEBデザイナー ポートフォリオ 作り方

MAC DESIGN ACADEMY様より引用

デザイナーが今まで作ってきた作品等をまとめた作品集をポートフォリオと呼びます。
ポートフォリオは自分ができることや得意な事・実績をアピールすることが出来、採用時の取っ掛かりになる大事なものです。

デザイナー等の就活時に求められることが多く、企業側は大体のスキルをこのポートフォリオで判断します。

WEBデザイナーの紙ポートフォリオの作り方

WEBデザイナーの紙ポートフォリオの作り方の手順です。(人よって手順は違います。以下はあくまで一例です。)
ステップごとに説明していきます!

  1. どのような紙ポートフォリオにしたいのかを決める
  2. 自分が載せることができる作品のリストアップ
  3. クオリティが低い作品や、やり残した作品のブラッシュアップ
  4. レイアウト作成
  5. デザイン
  6. 完成

Step1.どのような紙ポートフォリオにしたいのかを決める

キンコーズ様より引用

キンコーズ様より引用

どのような紙ポートフォリオにしたいのかを、まず作り始める前段階に決めておくと良いと思います。

出来上がりを考えるまだ楽しいと思えるギリギリの時期です。

サイズ

サイズはA4、WEBデザインは縦長が多いので縦のレイアウトをオススメします。

A4サイズをオススメする理由は、他の書類サイズと同じサイズで、相手が保管しやすいかなという考えからです。

サイズが大きいので載せる作品も大きく出来、かつ縦長になりやすいWEBデザインを全て入れやすいA3もありだとは思います。

しかしA4サイズは面接時に持っていくのにもラクなサイズだし、郵送時にもラクかつ安い。履歴書とかのサイズとも一致します。
肝心の内容もA4サイズでもレイアウトをキチンとすればA3サイズに負けない迫力になります。

出来上がりの種類

  • 自分で手製本
  • キンコーズ等の製本サービス
  • クリアファイルでファイリング

出来上がりの種類も様々です。

自分はクリアファイルでファイリングして行きました。
なるべく透明度が高いクリアファイルのほうがキレイに見えるのでオススメです。

自分はセキセイ プレゼンホルダー スーパークリヤーを使わせて頂きました。
透明度も高いし、表紙も無地なのでシンプルで良かったです。

表紙を付けたい同級生たちは無印で購入している人が多かったです。

Step2.自分が載せることができる作品のリストアップ

ポートフォリオ デザイン 作り方

クリ博ナビ様より引用

自分がいったいいくつの作品を載せることができるのかを確認しましょう。
少なかった人も多いのではないでしょうか…!もちろん僕も少なかったです。

だからといって闇雲に作品は多く入れれば入れるほど良いというわけではありません。自分の自信があるものだけ入れたほうがよいと思います。

自信のない作品は面接時につっこまれた時にタジタジになります(笑)
面接時に味方になってくれるような作品を選定しましょう!

作品の内容にもよりますが、大体10作品-20作品の間で良いと思います。
特にWEBサイトだと作業量が多いので、そこまで数は作れないと思います。グラフィックとかバナーとかで作品数を増やしましょう!

作品数が少ないなーと思っても、数は少なくても魅せ方でなんとでもなります!大丈夫です!

ただ最低10作品ほどはあったほうがよいと思います。(WEBサイト以外を含め)

ポートフォリオの参考要素

WEBデザイナー ポートフォリオ 作り方

自己紹介ページ

  • 名前や年齢・出身学校等の情報
  • 自己紹介・自己アピール文
  • スキル(Photoshop/illustrator/HTML等)
  • WEB版ポートフォリオのURL等
  • その他アピールしたいこと等

どこまでやるのか正解か?なんて議論が出るほど多様化しているWEBデザイナー
デザインスキル、adobe製品の使い方、HTML.CSS.JavaScript.jQuery…Git…..Sass..php..wordpress…うっ頭が…

そんなこんなで多様化しすぎてるので、自分ができることを自己紹介ページに添えておくと親切だと思います。

作品ページ

  • 作品名
  • 作品スクリーンショット
  • 担当した箇所
  • 工夫点やコンセプト
  • 補足事項(URLやQRコード等)

Step3.クオリティが低い作品や、やり残した作品のブラッシュアップ

意外と勘違いしてしまいがちなのがここ。
当時の自分からここまで成長したんだ!とあえて当時作ったままで出してみようと考える方多いと思います。(自分もそうでした)

出す直前で、他の人にポートフォリオを見てもらった時に直したほうが良いと言ってくれたので、気づくことが出来ました。

確かに成長具合を見せて、伸びしろを感じさせるというのは割りと理にかなっている気がするのですが、今思うと

そもそもそこまで考慮して見てくれる人は多くないという問題と、
学生時代に作るデザインとお仕事で作るデザインは全然違う為、ポートフォリオでより重要になるのは、この子できるな…!大丈夫そうだな…!という安心の部分が欲しいんだろうなと思うためです。

Step4.レイアウト作成

とりあえず2案サンプルとして作ってみました。(1案は以前の記事と同じ)

A案
ポートフォリオ レイアウト デザイン

B案

ポートフォリオ デザイン レイアウト

ポートフォリオに載せたいと思っていた要素を全て載せつつ、キレイに見やすくなるようにレイアウトします。
今回は参考要素として、作品名、作品スクリーンショット、担当箇所、工夫点やコンセプト、補足事項を入れました(B案)。

Step5.デザイン作成

レイアウトを元にデザインを作っていきます。

A案
portpholio デザイン レイアウト

B案

ポートフォリオ デザイン レイアウト

試しにこんな感じでデザインしてみました。

B案の方は自分が仕事上の案件ごとに作ったものを実際にまとめているカタチです。

WEBデザイナーのポートフォリオデザインのコツ

モックアップの利用
WEBサイトをブラウザ意外で見せるってなかなか難しい気がします。
今回もモックアップを利用して制作しました。モックアップを利用するといっきにそれらしくなります。

フォント

ポートフォリオ デザイン フォント

mplus 2-light mplus-fonts.より引用


フォントでも印象が大きく変化します。

オススメはMacに標準で入っているヒラギノ角ゴです。
フリーフォントでオススメはNotoSunsFontM+Fontです。

ちなみにA案では多くの場所にM+Fontを利用しています。

整列
ポートフォリオ デザイン レイアウト
要素の高さを揃えてみたり、端を揃えることでキレイに魅せることが出来ます。

Step5.完成

完成です。

作品まとめるだけだし、簡単っしょ!と思いがちなポートフォリオですが、なかなか地味で大変な作業です。

早め早めから手を付けておいたほうが…いや…手を付けられないんですよね…。自分もかなりギリギリで作った記憶が…。

以外とポートフォリオの作り方ってなかったのを覚えているので、これから作る人はぜひ参考にしてみてください。