Webデザイナーやデベロッパーの就職・転職活動で必要なのが、これまで制作した作品をまとめたポートフォリオWebサイト。以前このブログでも「Webデザイナーになりたい！就活に打ち勝つポートフォリオWebサイトの作り方」という記事で作り方なんぞをまとめました。この記事を書いた2010年時点では「ポートフォリオサイトは日本では一般的ではない」なんてコメントされたりもしましたが、5年たった今、もはや必須となっていると思います。そこで改めてポートフォリオサイトについて書いてみます。

「さぁ、ポートフォリオサイトを作ろう！」と思っても、どんな内容のサイトにすればいいか悩みますよね。ここでは実例を見ながら、ポートフォリオサイトに盛り込むべき項目を挙げていきます！

制作した作品（Webサイト・サービス）

ポートフォリオサイトで一番見られるであろうページが、この実績集です。採用担当者さんはその人がこれまで作ってきたサイトやサービスを最も重要視します。ただし、クライアント向けのサイトを掲載する場合は、事前に掲載していいか許可をとっておきましょう。

PHPやJavaScriptの場合は、GitHubでソースコードを公開してもいいでしょう。デベロッパーの場合はどんなプロジェクトで、どんなコードが書けるのかが、採用のポイントになります。

スクリーンショット画像

制作したWebサイトのスクリーンショット画像を掲載しましょう。大きく打ち出すとより印象的です。昨今ではレスポンシブに対応しているかどうかも重要なポイントなので、様々なデバイスでのスクリーンショット画像を用意しておくといいですね。

Brian Nathan Hartwell氏のポートフォリオサイトでは、数多くのスクリーンショット画像の他、タブレットやモバイルデバイスでの見え方も表示しています。

ただスクリーンショット画像を掲載するだけではなく、実際に利用している場面に画面をはめ込んで表示してもかっこいいです。Placeitを使えば、画像をアップロードしたり、URLを入力するだけで、デスクトップやモバイルデバイスにスクリーンショット画像をはめ込んだ画像をダウンロードできます（大きなサイズは有料）。
同種のサービスは他にも、FrameやMockUPhoneなど、いろいろあるみたいです。

また、Isaac Paavola氏のポートフォリオサイトでは、実際にどのようにWebサイトの機能が動くのかをアニメーションで表示しています。動きのあるWebサイトやアプリのポートフォリオサイトでは、このような工夫があるとよりわかりやすいでしょう。

自分が担当した役割

例えば「ワイヤーフレーム制作」「Webデザイン」「HTML・CSSコーディング」「WordPress化」「THREE.js」などなど、自分がその作品のうち、どの部分で携わったのかを掲載しましょう。すべて自分で行った場合でも、そのサイトにどのような技術が使われているのかをわかるようにしておくと、自分の持っているスキルがより鮮明になります。

Jonny MacEachern氏のポートフォリオサイトでは、担当した役割や利用した技術が簡潔にまとめられています。

作品の数

時々、ポートフォリオサイトを見てみると、これまで制作した作品すべてを掲載しているサイトがあります。しかし、重要なのは数より質。あまりに数が多すぎると、その中の素晴らしい作品が埋もれてしまう場合があります。数にこだわらず、見てもらいたい、クオリティの高いものを3〜5個程度でいいかな？と思います。

制作にかかった時間

どんなに素晴らしいWebサイトでも、それを作るのに1年もかかっていたんじゃ、ポートフォリオサイトを見ている採用担当としては考えものです。より素早く！より美しく！

制作にかかった時間はHarvestや、私も愛用しているTogglなどのサービスを使って、どの作業にどれだけ時間がかかったのかを計る癖をつけておきましょう。

レビュー・コメント

実際に制作を依頼したクライアントから、作品のレビューがもらえるのであれば、ぜひポートフォリオサイトに掲載しましょう！心理学的にも、本人から直接聞くよりも、第三者を介して得られた情報のほうが、与えられる影響が大きくなるそうです（ウィンザー効果というらしい）。例えばAさんが自分で「私の作るWebサービスはすごいんですよ！」と言うよりも、誰かが「Aさんの作るWebサービスは本当に使い勝手がいい」と言っているのを聞いたほうが、なんだか信頼できますよね。

レビューコメントを掲載しているBrian Delaney氏のポートフォリオサイト。こういったコメントは、海外ではよく見られる項目なのですが、日本ではなかなか見られません。可能であれば、周りの人に協力してもらいましょう！

実働している作品がない場合は？

特にこれから就職活動を始めようと思っている学生さんだと、実際に作ったことのあるWebサイトがない！という人も少なくないはず。そんな時は、まず身の回りの家族や友人に、ポートフォリオサイトに掲載することを条件に、無料または低価格でWebサイトを作ってあげてみてはいかがでしょう？勉強にもなり、ポートフォリオサイトにも掲載でき、一石二鳥！

また、架空のサイトを制作するのもいいと思います。ただし、実際に存在する個人・団体等に迷惑がかからないように注意しましょう！

他にも、Webサイトに必要なテンプレートや素材を制作し、配布してみてもいいですね。

WordPressのテーマ
アイコンセット
フォント
HTML・CSSテンプレート
JavaScriptライブラリー
jQueryプラグイン

自己紹介ページ

実績の次に見られているのが、自己紹介のページ。自分のバックグラウンドや個性、どんな人間なのかを存分に公開しちゃいましょう！

自分のスキルをまとめて記載

自分ができることや持っているスキル、使えるソフトウェアをわかりやすく記載します。Web系クリエイターのポートフォリオサイトでは、以下のようなスキルをよく見かけます。

Photoshop
Illustrator
HTML
CSS
Sass
gulp/Grunt
WordPress
JavaScript
WebGL
PHP
Ruby

Daniel Fischer氏のポートフォリオサイトでは、Webに関する技術の他「スノーボーダー」「ゲーマー」など、趣味に関することもリストアップしています。その人をより知ることができていいかもしれませんね！

Adam Hartwig氏のポートフォリオサイトでも、自身の好きなもの、大切にしているものをまとめたページが。ミニマルなデザインが可愛らしいです。

経歴を記載

実務経験があれば会社名や在籍年数、学校に行った人は行った学校名や在籍年数を記載。LinkedInを利用している人は、そちらへのリンクを貼ってもいいですね。

Adam Rudzki氏のポートフォリオサイトでは、「初めてPhotoshopをいじった」「グラフィックデザインの学校に通い始めた」「就職した」など、デザインに関する経験をタイムラインで表示しています。

履歴書

履歴書をアップロードして公開してもOK。ただし、個人情報漏れすぎには注意です。海外では履歴書に画像や住所等を記載する必要がないので、履歴書をポートフォリオサイトからダウンロードできるようにしている人もいるようです。日本独自の形式の履歴書だと、なかなか難しいかもしれません…。

デベロッパーのポートフォリオサイトは必要？

以前「海外でWebデザイナー・Webデベロッパーとして働くために必要なスキル」という記事で調査したところ、多くの企業がGitHubやCodePen、Stack Overflow等のアカウント・URLを求めていました。このようなWebサービスの利用はデベロッパーにとってもはや必須といえるかもしれません。また、デベロッパーといえど基本的なHTMLやCSSの知識は必要だと思うので、上記アカウントをまとめたポートフォリオサイトがひとつあると便利ですね。

とは言え、素敵なデザインのポートフォリオサイトをデベロッパーに求めるのもなかなか難しいもの。そこで便利なのがStockroomというサービスです。Stockroomはデベロッパーのためのポートフォリオサイト制作支援ツール。GitHubやBitbucket、Stack Overflowのアカウントと同期させると、それっぽい素敵ポートフォリオサイトが完成しちゃいます。

これから就職、転職を考えている人も、そうでない方も、ポートフォリオサイトは持っていて損になるものではありません。自由に自分を表現できる場として、制作してみてはいかがでしょう？皆さんのポートフォリオサイト、ぜひ教えてくださいね！