web系転職で役立つ!ポートフォリオの作り方

web系転職で役立つ!ポートフォリオの作り方

転職の準備の中でも、ポートフォリオ サイトって一番大変ですよね?

センスを見られそうでアチコチ気になって進まないし、要領もよく分からない。一流デザイナーのカッコいいポートフォリオを参考に右往左往したあげく、デザインに凝って迷走しがちです。

さらに、エンジニア・ディレクター・ライターのポートフォリオも流行りつつあります。こうなるとデザインだけじゃなく、持てる技術の全てをポートフォリオに組み込みたくなってきます。結果、何だかよく分からないサイトが出来上がります。

そうならないために、ウェブ業界で転職する際に役立つポートフォリオ サイトの作り方をまとめました。
難しく考えず、楽しんで作るのがコツだと思います。ポートフォリオの役割さえ果たしていれば、割と何でもオッケーです!


ポートフォリオの作り方
  • まずは確認!ポートフォリオって何だろう?
  • ポートフォリオは自由でいい
  • 転職ではポートフォリオのどこを見られてる?
  • 実績がない人のためのポートフォリオ作り
  • ポートフォリオは難しくない!

まずは確認!ポートフォリオって何だろう?

web業界の転職で使うポートフォリオは、言うなれば「作品集」です。過去の実績をまとめるために使うものです。

ポートフォリオ自体の出来栄えが評価されることもありますが、一番大事なのは実績です。

「何をしてきたのか?」

「何ができるのか?」

この2点がメインコンテンツになります。
顧客のコーポレートサイトを作るときの、会社案内や実績のようなコンテンツです。

転職の採用担当は「何を作ったのか」が知りたいだけです。
ポートフォリオサイトで使われている細かい技術まで見られることは、滅多にありません。

実績をアピールするだけでいいので、LPのような1枚物でもいいですし、トップ・自己紹介・実績・コンタクトくらいの3~4ページの軽いものでもいいです。

面倒なら、HTML,CSSを手打ちでサラッと書いて、実績をグリッド表示して、Facebookリンクでも貼っておけば全く問題ありません。

ポートフォリオは大げさなものじゃなくていいんです。

面接で実績を説明する時に、リンクや画像がまとめてあった方が説明しやすいので必要なだけです。難しく考えず、何でもいいので作っておきましょう。

ポートフォリオがなくても受かる時は受かりますが、ポートフォリオは「あると便利」です。

ポートフォリオを作って良かったことはありますか?

アンケート調査では、約94%のクリエイターが「ポートフォリオを作って良かった」と回答しています。

株式会社ロフトワーク 2009年10月5日~10月21日 クリエイターアンケート調査

ポートフォリオは自由でいい

前述のように、ポートフォリオは単に「何を作ったか」を一覧で表示するだけのものです。

一流デザイナーのポートフォリオを見るとカッコイイですが、あんなにクールじゃなくてもいいんです。そもそも一流デザイナーは実績が一流です。
もちろん真似をするのも勉強になるので、一流デザイナーのポートフォリオを参考にするのもアリでしょう。

要するに、自分の好き勝手に装飾するといいと思います。悩まないで、存分に楽しんで自分の個性を発揮してください。(面倒なら個性を発揮しなくてもいいですよ!)

一覧表と自己紹介さえあれば、あとは自分が好き勝手に作るだけです。

転職ではポートフォリオのどこを見られてる?

私たちが人のポートフォリオを見るとき、サイト構成やデザインや機能に目を奪われがちですよね?

でも、採用担当者は違います。採用担当の役割は「会社に貢献しそうな人を見つけること」です。

採用担当者は、必ず実績を見ます。「過去にどんな制作を担当して、どんな仕事をしてきたのか」が最も大切です。
実績の一覧をできるだけ見つけやすく、分かりやすく表示してあげると良いでしょう。

次に大切なのが「自己紹介」です。自己紹介ページの代わりにFacebookやLinkedInでも構いません。その人の趣味とか考え方とか、なんとなく人柄が分かればそれでいいと思います。
採用担当も人間なので、やっぱり人柄が分かっていると安心なんです。できれば顔写真があると、よりホッとしてもらえます。

「親しみやすくて実績がある人」ということをアピールできれば、それで十分ポートフォリオの役割は果たしています。難しく考える必要は全くありません。

実績がない人のためのポートフォリオ作り

ポートフォリオで最も大切なのは「実績」です。
では実務でアピールできるような実績が少ない人はどうすればいいでしょう?

実績がないなら、実績を作ればいいのです。

ここでは「実績がない人のポートフォリオの作り方」を3つご紹介します。どのやり方を試してもいいし、意欲的な方は全部の方法を試してもいいでしょう。

1.webサービスを作る

webサービスを作っている例

デザイナーなら画像素材サイト、エンジニアならwebサービスを作って、それを実績としてポートフォリオに掲載する方法です。
実務経験がない方でも実務で通用するスキルがあることを証明できれば、採用される確率はかなり上がります。

例えば、エンジニアの場合、新しいライブラリ等を使ってwebサービスを作ると、短期開発でも評価を得やすいと思います。作ったときに使った技術をQiita等で紹介するのも効果的です。

リンクは学生さんが作っているwebサービスの例です。シンプルなサービスですが、中身は良くできています。

このようなサービスを作ってポートフォリオに載せれば、実績として十分評価されるでしょう。

同様に、デザイナーなら無料素材サイトを作っておけば、立派な実績になります。時間がない場合は、画像点数は少なくていいんです。形だけのサイトでも大丈夫!

2.クリエイター向けサービスを使う

Dribbbleを使った例

クリエイター向けのコミュニティーサイトなどを使うのも有効です。

デザイナーならBehanceやDribbble、deviantARTなどのポートフォリオサイトやコミュニティーサイトを実績に入れるといいでしょう。
特にイラストレーターの募集ならBehanceやDribbbleをそのまま提出してもいいんです。

エンジニアの場合、バックエンドならGithub、フロントならCodepen、コーダーならjsdo.itあたりもいいですね。使い分けても、全部で活動しててもいいですね。Qiitaの技術解説でもOKです。OSS参加でもいいでしょう。

外部サイトで「何らかの活動をしている」というのも、意外と効果があります。
採用担当が同じサイトを使っていると、会話も弾むかもしれませんね。

3.自分を売り込むLPを作る

自分を売り込むLPを作っている例

「自分という商品を売り込む」という目的のLPを作るのも一つの手段です。

リンクはライターのポートフォリオの例です。職務経歴ゼロの方が作っているサイトなのですが、アピール力の強いサイトになっていますね。「ライターとして面白いコンテンツを作る」という観点で、企画力やライティング能力が上手くアピールされています。

このように、自分自身の経歴や写真などをLPとしてまとめても、効果的なポートフォリオを作ることができます。

まとめ|ポートフォリオは難しくない!

これまで見てきたように、ポートフォリオ作りを難しく考える必要はありません。

ポートフォリオを作る側は「デザインの1ピクセル」や「美しいソース」にこだわりがちですが、残念ながら企業の採用担当はじっくり見ていません。

デザインをざっくり見て、実績と自己紹介を見て、それで終わりです。5分程度の流し読みです。

そもそもポートフォリオ自体は、そんなに重要視されていません。実績を見るための単なるリンク集や自己紹介をちょっと見る程度の場所としてポートフォリオがあるのです。

難しく考えて引っ込み思案にならないで、自分の好きなもの、得意なものを作るといいでしょう。

どうせ作るのですから、何か一つでも勉強になるような、実験的なサイトにするのもいいですね。
作るのが面倒ならポートフォリオサイトを活用するだけです。

まずポートフォリオサイトで試しに作ってみて、時間があれば遊びでチャレンジするくらいで大丈夫。
ポートフォリオがなくても、受かる時はちゃんと受かります。

自己紹介をするのにポートフォリオがあると便利なので、気軽にチャレンジしてみましょう!

ポートフォリオ作りに使えるサイト一覧

ポートフォリオ作りの参考になりそうなサイトをまとめました。良かったら使ってみてください。

ポートフォリオをまとめたサイト

国内の素敵なwebデザイナーさんのポートフォリオのまとめ

webポートフォリオを制作する時のポイント、参考サイト、デザイン

イケてるWebデザインで作られたポートフォリオサイト5選まとめ

Webデザインギャラリー : ポートフォリオサイト

ポートフォリオ作成サービス

便利すぎる!ポートフォリオ作成サービス8選まとめ

デザイナー向け

Dribbble-作品投稿コミュニティーサイト

Behance-ポートフォリオサイト

deviantART-ポートフォリオサイト

コーダー向け

jsdo.it-コードコミュニティサイト

フロントエンドエンジニア向け

Codepen-コード共有サイト

バックエンドエンジニア向け

Github-プロジェクト共有サイト

ポートフォリオのハウツーで分かりやすかったもの

エンジニアだけどポートフォリオサイト作ってみた

デザインに困った時に使えそうなもの

MUUUUU.OR-デザインまとめサイト