かっこいいポートフォリオサイトを集めました!【2020年版】

Webデザイン

ポートフォリオサイト、どんなかっこいいサイトがあるのか、まとめてみました。
これからポートフォリオ作りたいなーと思ってる方に参考になれば、と思います。

ポートフォリオサイト2020年トレンド20選

1:takatsugushimazaki.com


https://takatsugushimazaki.com/
フォント:Yu Gothic・Meiryo
色:rgb(220.220.220)

2:logequal official site


https://logequal.com/
フォント:fot-tsukuardgothic-std
色:#D8E9EF

3:akinagafujii


https://akinagafujii.tokyo/
フォント:Cormorant Garamond・sans-serif
色:#FFFFFF

4:Rand


https://rand-d.com/
フォント:Hiragino Kaku Gothic ProN
色:#FAFAFA

5:暮らしとデザイン by おおつかわたる


https://otsukawataru.com/
フォント:Hiragino Kaku Gothic ProN・ヒラギノ角ゴ ProN W3・Meiryo・游ゴシック体
色:#FAFAFA

6:DRAFT


https://draft.co.jp/
フォント:Helvetica Neue LT W01_55 Roman・YuGo・YuGothic・ヒラギノ角ゴ Pro W3
色:#22658C

7:TAKAYA OHTA


http://takayaohta.com/
フォント:museo-sans・sans-serif
色:#d8ebe9

8:Takumi Hasegawa


https://tkmh.me/
フォント:MODERNESANS・YakuHanJP・NotoSansJP・sans-serif
色:#FFFFFF

9:ヘアメイクアーティスト Karly Yagi


http://karlymake.com/
フォント:Josefin Sans・sans-serif
色:#FFFFFF

10:DAIGO UMEHARA OFFICIAL SITE


http://daigothebeast.com/
フォント:Helvetica Neue・Helvetica・Arial・sans-serif
色:#475B6F

11:TAIKI KATO | 加藤 タイキ


http://taikikato.jp/
フォント:LinotypeUnivers-430Regular・Gothic Medium BBB
色:rgb(239, 239, 240)

12:備前焼 伊勢崎紳


http://shinisezaki.jp/
フォント:Hiragino Mincho ProN・游明朝
色:#FFFFFF

13:西尾維新

http://ni.siois.in/
フォント:YuMincho・游明朝・Hiragino Mincho ProN・ヒラギノ明朝 ProN W3
色:#FFFFFF

14:Glamuzina Architects

http://www.g-a.co.nz/
フォント:monospace-web・sans-serif
色:#FFFFFF

15:minico

http://minico.handmade.jp/
フォント:游ゴシック体・Helvetica
色:茶

16:akaru

https://www.akaru.fr/
フォント:autor
色:#FFFFFF

17:スズキアユミ

https://ayumi.design/
フォント:游ゴシック体
色:#0019D5

18:m.meguru

https://2019.m-meguru.com/
フォント:Open Sans・sans-serif
色:#E4CBAC

19:Dangel

http://kazuki-art.com/
フォント:Prata・serif
色:#B3D4FC

20:Aleks Faure

https://aleksfaure.com/
フォント:maison_neue・sans-serif
色:#FFFFFF

ポートフォリオサイトってどういうものでしょうか?

ポートフォリオサイトはデザイナーの営業ツールです。自分の成果物や得意をアピールする営業補助ツールです。
デザイナーやWebエンジニアの方は自分のポートフォリオ専用サイト制作するべきでしょう。
例えば無料でサイト制作ができるWixでポートフォリオを過去に作成していた先輩Webデザイナーの意見を聞いたことがありますが「正直掲載できる情報も限られてくるし、何よりオリジナリティーに欠ける」と言う意見でした。やはり同業他者との違いを見せないと、Web業界で勝ち残れる確率は落ちてしまいます。

・クライアントへの向き合い方

クライアントのよくある要望としては代表的なものとして

  • 他の同業他社より目立ちたい
  • アピール力を重視したい
  • デザイン性重視
  • 先進的なデザインがいい

という意見が多いのも事実です。
これらの要望はデザイナーのビジョンやポリシーにもよりますが、クライアントの要望やデザインのセオリーに忠実なデザイナーか、奇抜なアイデアを提案することに長けるデザイナーかという2極に分かれます。
この2つの方向性に正解はありませんが、自身のビジョンや大切にしていることを記しておくと「どのような心持でWeb制作をしているか」を伝えることができます。オールラウンドなWeb制作を目指すのが一番と言えますが、まずは基本に則った業務を日々の業務の土台にしておきたいところです。

ポートフォリオサイトを作る目的

ポートフォリオサイトを作ると転職や独立の際に非常に役立ちます。経歴や実務経験、言語は何が使えるのか、どのようなデザインセンスかをすぐに採用担当に理解してもらえます。転職の際の面接は時間が限られていますので「このサイトを閲覧していただければ」と申し出ることで、面接でPCを使って一つ一つ見てもらってという余計な時間を省くことができます。
クラウドソーシングにおいても実績がモノを言うので、独立を予定している方や副業をもっと加速させたい方にもポートフォリオサイトは必須と言っていいでしょう。ポートフォリオサイトで何が重要視されるかと言うと、アイデア力も勿論なのですが「丁寧さ」を見られる事が多いです。1pxのこだわりはあるか?余白に関しては意図したものか?配色に説明ができるか?という細かな部分まで見る方が多いです。
そのような要望や目利きに対応するためにもポートフォリオサイトは、今の自分の実力の100%を出して制作すべきだと言えます。Web制作のポートフォリオや業務に関しては自分の癖が出やすく、気を抜くと粗が目立つようになってきますので「自分の分身を作る」という気持ちで取り組みましょう。

・トレンドに則ったデザイン力はあるか

Web業界は日進月歩でトレンドが変化していることから、流行りに敏感なデザイナーかという点や積極的・継続的に自己スキルを高めるための努力をしているか。という部分も見られることが多いのがWeb制作の現場です。
ポートフォリオサイトを作る際にも、国内だけではなく海外からもいろいろなデザインを取り入れ、「自身のデザインの引き出しは多いということ」を主張することも重要です。

ポートフォリオサイトの使い方・広め方

ポートフォリオサイトにSEOをかけてスモールキーワードで上位表示を狙うとなると、競合他社に埋もれてしまうのは必至です。ですので、ポートフォリオサイトで成果物を公開すると見てもらう確率も上がります。
またただ掲載するのではなく、FacebookやTwitterなどのSNSを駆使したり、フリーペーパーに掲載したりという売り込みも集客に役立ってきます。
最近はYouTubeを利用した動画集客も行っているデザイナーも多いので、一度実践してみる価値は十分にあります。

代表的なポートフォリオサイト

Behance

https://www.behance.net/
海外のプロクリエイター御用達のポートフォリオサイトです。先進的な部分は見ているだけで勉強になります。

foriio

https://www.foriio.com/
国内のポートフォリオサイトになります。少しアニメーターやイラストレーターよりのサイトです。

UNDERLINE

https://u-d-l.jp/
個人にはなりますが関西を拠点としている「徳田優一」というデザイナーさんのポートフォリオサイトです。このクオリティーになると顧客も「頼もうかな」と思いますね。

maima.me

http://maima.me/
こちらも個人ですが「MAI IMAKITA」というデザイナーさんです。ポートフォリオサイトは賑やかで商売っ気が多いイメージがありますが、シンプルな部分は真似したいです。

ポートフォリオサイトの作り方

まずはWeb制作ならいろいろなサイトを仮定して制作していきましょう。実績がないと始まらないので、勉強と思ってとにかく数をこなしていくことが大切です。またサイトだけではなく、下書きの様子やラフ、構成書なども公開することでイメージ戦略になります。デザインに関わることはポートフォリオサイトにまとめておくといいです。
ポートフォリオサイトは自前でWordPressなどを使う方法と、ポートフォリオサービスを使う方法の2種類がありますが、WordPressの方が細かなカスタマイズも効きますし、勉強になりますのでサービスを使うよりもおすすめです。
WordPressのテーマも既存のテーマではなく自分で下書きから作成してサイトを構築していくと、相手にいい印象を与えます。その際もレスポンシブデザインを意識し、表示速度からロゴの作成まで、気を抜かずに制作すると評価も良くなります。

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

・portfoliobox
http://www.portfoliobox.net/</>
国内外あらゆるクリエイターが集まるポートフォリオサイトです。わずかな個人情報でポートフォリオサイトが完成します。
テンプレートの種類が豊富なのも特徴の一つですので、かっこいいポートフォリオサイトを手軽に作成したいという場合に便利です。駆け出しデザイナーや学生の時はポートフォリオサイトを利用することも一つの手です。

まとめ

ポートフォリオサイトがいかに重要かお分かりいただけたと思います。かっこいいポートフォリオサイトを手軽に作れるサービスも山のようにありますし、新卒の就活などには有効です。
しかしながら実力が上がってきたと自覚する時期が訪れたなら、自分でサイトを構築するという次のステップに進むべきです。Web制作の世界も人手不足ですので、自分にピッタリな企業で働くために早速丁寧なサイトを制作して、業界にアピールできるといいですね!