できるwebデザイナーが参考にするポートフォリオ5選

こんにちは！

ITエンジニア・webディレクター・webデザイナーなどのIT人材の自立・キャリアを支援するITプロパートナーズ編集部です。

弊社では、独立精神旺盛な優秀なエンジニアの方々の独立・起業サポートや、フリーランス支援を行っています。
こちらでは、日々の現場でサポートさせていただいている中でのプロの目線で、みなさんに役立つお話をしてまいります。

さて、今回はwebデザイナーのポートフォリオについてお話ししていきます。

webデザイナーにとってのポートフォリオは大変重要な役割を担いますよね。
今までの自分の成果物を証明するものなので、転職や案件を探すときにひつよおう不可欠なものになっております。

でもどうやってポートフォリオを作ればいいのか、あまりイメージが湧かないwebデザイナーの方もいると思います。

そこで、見本になるポートフォリオを紹介します！
この記事を読めば、webデザイナーのみなさんのポートフォリオ作成がスムーズに進むでしょう。

早速みていきましょう！

なお、フリーランスのデザイナーになる方法など総合的な情報については「フリーランスデザイナーになるには？年収や注意点、案件獲得方法も解説」で、Webデザイナーの総合的な情報は「フリーランスWebデザイナーになるには？年収・スキル・案件獲得法も紹介」で解説していますので、併せてご覧ください。

今更聞けない！そもそもポートフォリオって何？

初めてwebデザインを勉強しようとしている方、初心者のwebデザイナーの皆さんにとって、業界用語で恥をかかないようにしないといけません。「ポートフォリオ」もその一つの専門用語です。
このポートフォリオという用語、業界によって意味が変わってきます。

金融業界

今回の趣旨とは関係ないですが、豆知識程度に知っておいてもいいかもしれませんね。
金融業界では、株式・預金・債権・不動産等の投資家と言われる方が保有している金融商品の一覧でその組み合わせを表しています。

教育業界

同様に、教育業界においてもポートフォリオという言葉は使われます。
生徒が作成したレポートや成果物、試験結果等をファイルに入れて保存しておき、生徒達の総合的な学習評価として利用しています。

IT業界

今回の記事の趣旨としては、IT業界でポートフォリオはどのような役割を担うかですよね。
ポートフォリオとは、webデザイナー達が作成した作品集のことです。
自分が選択した職種に向けて、どれだけの技量があるかどうかを判断してもらう為に利用されています。

webデザイナーとして活躍している方、又はこれからなろうとしている方にとっては、転職活動における面接等の資料としてポートフォリオ（作品集）を利用して評価されます。
そして、フリーランスで活動している方にとっては、営業用資料として自身のポートフォリオを利用しています。
このポートフォリオを作成することで、実務経験やwebデザイナーの力量等を採用担当者に評価されるので履歴書や職務経歴書と同様の大事なものでもあるのです。

早速ですが、見本になるポートフォリオサイトについてみていきましょう！

見本になるポートフォリオサイト5選！

自分でこれからポートフォリオを作成しようとした場合には、まずはプロのwebデザイナーが作成したものを見本として閲覧してみるのも一つの勉強方法となります。以下に有名なポートフォリオサイト5つを紹介してみます。

①foliofocus

海外のサイトですが、約1,000以上のポートフォリオをまとめています。カテゴリー分けしてありますので、自分が望んだポートフォリオを探すことに大変便利です！

https://foliofocus.com/

②choicely

webデザインのキュレーションサイトとなっています。
日本語による注釈があるので、どのポートフォリオであるかがあらかじめ確認することができるでしょう！

http://www.choicely.jp/webdesign/

③io3000

レスポンシブウェブデザイン（閲覧者の画面サイズに合わせてウェブページが閲覧できる）に特化していて、スマホで確認できますので大変便利！サイト自体もシンプルな構成になっていて、気軽に閲覧することができます。

http://io3000.com/tag/portfolio/

④webクリエーターボックス

webデザイナーでしたら、一度は聞いたことがある、又は見たことがあるサイトかもしれません。
Manaさんのポートフォリオサイトはとてもクオリティが高いと言われていまして、海外で活躍しているということもあり英語も標準的に用意されています。なにか自分にとって必ずヒントを与えてくれるサイトとなるでしょう。

https://www.webcreatorbox.com/

⑤イケサイ

「ほぼ毎日2～4サイト追加」と記載されている通り、たくさんのサイトを閲覧することができます。どれも良質なデザイン構成で見本も必ず見つけることができるでしょう。

https://www.ikesai.com/

代表的なポートフォリオサイトを5つ紹介させていただきました。
個人的に見本になるようなポートフォリオサイトは他にもたくさんあります。
上記の他にも探してみて、ポートフォリオの見せ方や成果物の完成度等をモデリングしてみるのはとてもいい勉強になるので、ぜひ試してみてください！

次に、企業がwebデザイナーの採用時に注目しているポイントを紹介します。

企業が面接時に見ているポートフォリオのポイントとは？

就職活動をする際にはポートフォリオがとても重要になってきます。ほとんどの方は履歴書や職務経歴書を重点にして準備をするかと思いますが、それと同等あるいはそれ以上に企業サイドはポートフォリオをチェックしています。

その際に注意したいことについてみていきましょう。

ポートフォリオはプリントアウトが必要？

ポートフォリオを用意する場合にはweb上で用意することと併せて、紙でプリントアウトした成果物を採用担当者に見てもらうことが重要です。
web上のポートフォリオでプレゼンをする場合にはノートパソコン又は大きめのタブレットが必要になってきます。
操作性や採用担当者へ見てもらう為にはタブレット型がベスト。
面接官の手元には紙媒体の物、自分の手元にはタブレットに表示されているweb上の物ということになります。このような体制でプレゼンテーションをしていかに自分が製作したポートフォリオが秀逸なものであるかをアピールしましょう！

面接官を気遣う

紙媒体で準備する場合には、面接官がメモをできるような様式にすることも一つおススメします。
Web上のポートフォリオを説明している際に話している内容を紙媒体にメモしてくれるようであればとても印象を残してくれたことになります。
プレゼンでもポートフォリオを中心に話していくことが必要になってきますので、自己紹介は出来るだけ簡潔にいたしましょう。
自己アピールは己の性格等も必要になってきますが、アピールできるトーク力にwebデザイナーとしての技量がどれだけのものであるかを用意したポートフォリオをメインに説明していきましょう。

プレゼン中は、自分が扱える言語や技術的なものを話していくと思われますが、そのような内容はあわせて職務経歴書等に記載しておくことも必要になってきます。さらには自分が将来どのようなWebデザイナーを目指しているのかというビジョンも記載しておけばより効果は抜群となってあらわれてくるでしょう！

面接官はwebデザイナーとは限らない

就職活動で面接官と接する際に、その面接官もwebデザイナーなのか否かを考慮して追う必要があります。
というのも、採用担当者はほとんどの場合、総務部や人事部の方が多いという現実が実はあるのです。つまりポートフォリオ製作の初心者であるということになります。
そのような視点から考えると自身のポートフォリオを説明する場合には、専門的な説明を中心に話していくことではなく、わかりやすく自分の成果物をアピールしていくことが必要になっていきます。
相手が自分の作品にのめり込んでいくようなプレゼンがとても重要になってくるのです。

このような面接の練習を素人の第3者に協力をお願いしてプレゼンをやってみるというのも一つの手です。
素人目からみて自分のポートフォリオについて興味が湧くものであったかどうかを判断してもらいましょう！

複数のポートフォリオを作成する

準備していくポートフォリオサイトも一つということは無いようにしましょう。数点のポートフォリオを用意して、面接官にアピールすることもとても大事なこととなってきます。面接時間もありますが、対人間と接していますのでこちらの人間関係も値踏みされています。目の前に座っている面接官は、あなたの人間性もチェックしています。
いくら素敵で見やすいポートフォリオを製作してアピールをしていても、この人物は採用されて職場の仲間たちと上手くやっていけるだろうかということも判断材料となっています。
自分の満足できるポートフォリオを用意して、さらに自分磨きも同時に行って勝ち抜いていきましょう。

さて、採用時のポートフォリオについてお話ししていきました。しかし中には、
「ポートフォリオを作る時間がない」、「未経験でどこから手をつければいいかわからない」
という方もいるのではないでしょうか。

そこで、ポートフォリオの作成テンプレートについても紹介しておきます！

【未経験でも安心】役に立つポートフォリオ作成テンプレート紹介！

ここで代表的なポートフォリオを作成できるテンプレートサイトを紹介します。自分の感性にあったテンプレートが必ず発見できるでしょう。

①wix.com

世界中に会員数がいてその数はおよそ1億人と言われています！カテゴリー毎に分類されているため、いま自分が探しているテンプレートを探しやすくなっているので大変便利です！

http://ja.wix.com/website/templates/html/design/portfolio/1

②Bind Cloud

写真、イラスト、建築、デザイン等、その必要性に応じて分けられていてレイアウトをきれいに仕上がり易くなっています。

https://bindcloud.jp/template/portfolio/

③JAYPEG

サイトからポートフォリオを作成することができて、そのままサイト上に自分の成果物を投稿することができます。世界中の同業者であるwebデザイナーと交流を深めることができて意見交換の場としても最適な場所となっているので、ぜひ使ってみてください！

https://jypg.net/

④behance

アドビシステムが買収したサイトです。よってアドビのアカウントを保有していれば会員登録も比較的容易となっています。
グラフィックを重視している感がありますので、品質のあるポートフォリオを作成する場合には適しているでしょう。

https://www.behance.net/

⑤portfoliobox

http://www.portfoliobox.net/jp

日本語で構成されているので見やすいサイトとなっています。
レイアウトのテンプレート数もかなり充実していて、無料版でも満足できるようになっています。世界で約25万人以上のユーザーが利用している有名なサイトです！

上記のような有名なポートフォリオサイトで会員となり、自分で満足できるポートフォリオを作成してみましょう。
そのサイトが利用しやすくて今後も使いたいと思ったら有料会員になって、いままで以上のポートフォリオを製作しいかれたらいかがでしょうか。
初心者の場合、自分はどのようなポートフォリオサイトを作ることができるか難しく考えてしまいがちです。
最初は気軽に無料で利用できる環境から製作してみましょう！

まとめ

今回は見本となるポートフォリオサイト、テンプレートを利用できるサイトを紹介してみました。自分が求めているポートフォリオを製作する場合にはテンプレート集を利用して作成することも練習の一つです。
いくつかのポートフォリオを製作することで、おのずからwebデザイナーとしての技量もあがってくることでしょう。

自分をアピールできる武器として作成したポートフォリオは必ず役に立ちます。
これからプロになる皆さんにとって、とても価値のあるポートフォリオを製作できることを祈っています。