内定をもらうWEBデザイナー就活用ポートフォリオ制作方法

ポートフォリオ

紙ポートフォリオについて詳しく書いた改訂版を新しく書きました。よろしければ…!!

長かった就職活動を終え、ヘトヘトになりながらもなんとか制作会社に内定を頂くことが出来ました。拾っていただいた恩はお仕事で返済していければ..と考えています。

そんな僕も、会社に入社してから2ヶ月経ち、母校からインターンシップ生がやってくる時期になりました。話を聞いてみると、丁度ポートフォリオを作成する時期だそうなので、僕が個人的に考える内定をいただけるようなポートフォリオの作り方をご紹介したいと思います!

個人的な考えが満載ですが、お役立ちできる所が少しでもあれば幸いです。

ポートフォリオとは?

portfolio

デザイナーが、企業に提出する作品集のことをポートフォリオと呼びます。
ポートフォリオには、自分ができることや得意なこと・実績をアピールします。

ポートフォリオは内定を勝ち取る為に必須のものです。
企業さんからしたら、スキル的に高い人を取りたいと思うのはごくごく自然なことなので、それを図ることができるポートフォリオがデザイナーの就職活動では重要視されています。
どの程度のスキルがあるのか、これからまだ伸びそうか?作品に対する向き合い方等、ポートフォリオに載っている作品達からそれを読み取るからです。

頑張って作った課題や、自主的に作った作品等、工夫した所はしっかり評価してくれるので、頑張って作品を制作してきた方は報われますので、安心してください。

WEBデザイナーのポートフォリオは2種類!?

WEBデザイナーのポートフォリオは理想は2種類用意することが望ましいと考えます。
紙等で作ったポートフォリオとWEBで見られるポートフォリオの2点です。

紙でのポートフォリオは必須とされることが多く、複数の会社を受ける場合おそらく必ず必要になると思いますので、作っておいたほうが良いと思います。
しかし、WEBの世界は紙だけで伝えきれない所が多いのも事実です。

最近では、WEBデザインも動きで魅せるデザインが多かったり、デジタルでしか表現出来ない技術が多くあります。

また、コーディングのコードの綺麗・汚い等もチェックします。
会社は複数人で作業することが多いため、汚いコードでは困るからです。

こうした紙だけで見ることが出来ない部分が多いのがWEBデザインの特徴の為、なるべく紙とWEB両方を作ることをおすすめします。ポートフォリオサイトの出来栄えが良ければ、もちろんそこも加味して評価してくれると思います。

実際に面接の際にはノートパソコンやiPad等のタブレット端末を用意して臨むとよいと思います。

ポートフォリオの作り方

ポートフォリオの作り方の手順を説明します。

Step1.ポートフォリオに載せる要素を全てリストアップする。

まずは自分がどれくらい作品を作ったか等をリストアップします。
基本的なポートフォリオの構成は、下記のような構成になると思います。

表紙+自己紹介+作品ページ+背表紙

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

自己紹介ページ
  • 名前や年齢等
  • 自己紹介文
  • 自分のスキルについて。Photoshop/illustrator/HTML/CSS/JacaScript等
  • 使用ツール等(例:Dreamweaver等)
  • 学校名、インターンやアルバイト経験の有無
  • 仕事上の工夫(例:SublimeText3をカスタマイズしている等)
  • WEB版ポートフォリオのURLやQRコード
作品ページ
  • 作品名
  • 作品のスクリーンショット
  • 担当箇所
  • コンセプト(工夫点等)
  • その他補足事項(WEB上にアップロードしてる場合、そのURLやQRコード等)

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

自己紹介ページ
  • 名前や年齢等
  • 自己紹介文
  • 自分のスキルについて。Photoshop/illustrator/HTML/CSS/JacaScript等
  • 使用ツール等(例:Dreamweaver等)
  • 学校名、インターンやアルバイト経験の有無
  • 仕事上の工夫(例:SublimeText3をカスタマイズしている等)
作品ページ
  • 作品名
  • 作品のスクリーンショット
  • 担当箇所
  • コンセプト(工夫点等)
  • 作品そのものをWEBに公開してる場合そのURL

だいたいこのような感じの要素が入ると思います。

作品は多く入れれば入れるほど良いというわけではありません。自分の自信があるものだけ入れたほうがよいと思います。
自信のない作品は面接時につっこまれた時にタジタジになります(笑)
面接時に味方になってくれるような作品を選定しましょう!

Step2.レイアウト作成

ポートフォリオレイアウト

入れ込む要素が決まったら、レイアウトを作成します。
僕は上記の画像のようにレイアウトしました。

紙のポートフォリオの場合必ず用紙サイズを決めてからレイアウトしたほうが良いです(T_T)

Step3.デザイン作成

portpholioレイアウト

レイアウトを元にデザインを作成します。
例として上記のように制作してみました。

WEBのポートフォリオの方は、YOUKNOWのポートフォリオをご覧ください。

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

WEBサイトを貼り付けてレイアウトを整えるのは以外と難しかったのを覚えています。
モックアップを利用することで、かなり見た目がよくなり、レイアウトを助けてくれます。

あとは基本的なことですが、要素の端を揃えたりすることで綺麗に魅せることが出来ます。

それでも少し物足りない方はフォントの問題かもしれません。
制作環境がMACの方はフォントでヒラギノ角ゴが入っているため綺麗に作りやすいですが、Windowsの方は良いフォントが入ってないことがあります。
そんな時はフリーフォントのNoto Suns FontM+Fontを利用して制作すると綺麗に制作することが出来ます。

ちなみに上記の例では多くの部分にM+Fontを使用しています。

Step4.カタチにする

紙のポートフォリオの場合

紙のポートフォリオにはいろいろなやり方でカタチにすることが出来ます。

  • 自分で手製本
  • キンコーズなどの製本サービスを利用する
  • クリファイルにファイリングする

クリアファイルと手製本では、手製本のほうが断然手にとってもらいやすいとは思います。
本当に受験者数が多い企業さんの場合、見てもらえない可能性もあるため、キンコーズなどの製本を利用し、他の受験者さんと差をつけたほうが良いと思います。

そういった非常に競争率が高い所を除けば、基本的に、クリアファイルにA4の用紙サイズで問題無いのではと考えています。
クリアファイルなら写真用のやつがオススメです!透明度が全然違います! また無印で売っているクリアファイルも良い感じですよ。

用紙サイズも規定はありません。美大の方はA3の方とかも多く見かけました。ここは個人の好みで良いかと思います。
僕は他の提出書類がA4が多かったため、まとめやすいようにA4のサイズで制作しました。

WEBのポートフォリオの場合

W3Cのバリデートチェックでエラーがないか確認したら、レンタルサーバーを借りて作ったものをアップロードしてWEB上に公開しましょう。
ポートフォリオサイトを見る人を制限したい場合.htaccessというファイルを作り、でパスワードをかけ閲覧者を制限することができます。
参考:アクセス制限ベーシック認証 ~パスワードでページを守ろう~

または上記のコードを.htaccessにコピペすれば、検索エンジンに乗らなくなります(完璧ではない)。
個人的にはこれだけでも十分だと思います。

さいごに

だいぶ長くなってしまいましたね..。読んでくださった方はありがとうございます。

まとめとして大事なことを一言言うなら、
もし自分が面接官ならどういう子を取るかを考えて作ることだと思います!

大変かと思いますがぜひがんばってみてください!