参考にしたい日本人デザイナー・エンジニアのポートフォリオまとめ

就職活動の時期にさしかかっているので就活生の皆さんは、特にWebデザイナーの方なんかはポートフォリオ作りに勤しんでるのではないでしょうか。

かっこいい・可愛いコーポレートサイトはたくさんありますが、フリーランスや個人のポートフォリオってどうやって作ったらいいんだろうと思いますよね。
そしてなかなか検索しても日本人に絞った個人のポートフォリオサイトって出てこないんですよね。

最初の頃は検索の仕方がわからなくて私自身はとっても苦しみました。

そこで会社のではなく、デザイナーやエンジニア、アートディレクターの個人のポートフォリオを集めました。
これが就職活動中の悩める子羊たちの参考になればと思います。

SHOGO TABUCHI

http://www.s5-style.com/

fwa-900x575_01-0C9B

まずは私が最も尊敬するデザイナーの中のデザイナー。
田渕 将吾氏のポートフォリオサイト
html5で音楽との同期やGreensockを使ったアニメーションなど思いつかないよねー。
フロントエンド開発をできる人でなければ思いつかなかったであろうギミックが盛りだくさんです。
制作した作品をシンプルに分かりやすく見せながらも、サイト自体がそれを上回るくらいの作品に仕上がっております。
圧巻ですね。これだけ動いてるけどすごく動作が軽いです。
開発ができるデザイナーのお手本です。

MAKOTO HIRAO

http://mako.red/

20160917191033

https://arutega.jpの中の人、フロントエンドエンジニアの平尾誠のポートフォリオサイトです。
大変恐縮です。
全く知らない外国人に自己紹介しようとした時に、自分の人柄がわかるようにしたかったので英語を混ぜました。あとデザインは極端に脳裏に残るようにしたかった。

CODE IS DESIGN

フロントエンドエンジニアこそが本当の意味でデザイナーなんだよって言いたかった。ようです。

MASAYUKI DAIJIMA

https://www.daijima.jp/

インタラクションデザイナー・プログラマです。
音楽がかっこいいですね。

飛び回るパーティクルがスキルの高さを物語ってます。

Takumi Hasegawa

https://tkmh.me/

20160713174807

こちらもフロントエンド色がとっても強いサイトです。
ご自身の強みはインタラクションです!ってすごく伝わります
色のバランスとか余白とかすごくいいですけど、もともとデザインされていたんでしょうか。
フリーランスのインタラクションデザイナー・テクニカルディレクション周りの方のようです。

何と言っても、この方のブログはthree.jsやWebGL周りのラボを公開されていて、ソースコードを公開しています。インタラクションデザインってすごくとっつきにくいんですよね。難しい上に情報が少ない。RSSフィードに登録する価値ありです。

また、こちらはフリーランスとして活動するUNSHIFT名義で活躍しているもう一つのサイトです。
UNSHIFT

KEN ARAI

http://kenarai.github.io/

シカゴを拠点に活躍されているデザイナーさんのようです。
UIやUX周りのデザインをされているだけあって、マウスポインタを効果的に使っています。
アプリを操作しているかのような錯覚をつくり出していますね。
めちゃくちゃクオリティ高いです。

Manato Kuroda

http://manato.ca/

20160920100921

ポートフォリオって自分の自己紹介をするサイトなので、経歴と得意分野をシンプルに伝える。
それには1ページのサイト構成はとっても理にかなっていると思います。
1ページの場合スクロールするたびに変化をつけたりすることが多いですが、このサイトの場合は背景色を徐々に変化させていますね。飽きさせない工夫がされたシンプルサイトです。
全部英語なので、きっと海外進出を目論んでいるのでしょう。
ターゲットがわかりやすいです。

TAIKI KATO

http://taikikato.jp/

広告、グラフィックデザイン、WEBデザインなどを手掛け、東京を拠点にアートディレクター、デザイナーとして活動している加藤タイキさんのWebサイト。
ロゴのタイポグラフィーいいなぁ。

足しまへん。引きまんねん。

って感じですねLESS IS MORE的な感じです。全部がおしゃれなポートフォリオです。

Kenta Toshikura

https://kentatoshikura.com/

ガーデンエイトの方だそうです。
画面のオブジェクトたちが生きているかのような、モーションがきもちいいです。

マウスストーカーを使ったアニメーション でトレンドを掴んでいます。
ページ遷移もきもちいですね。完璧だと思います。

TAKAYA OHTA

http://takayaohta.com/

ストーリーとコンセプトを重視し、CI/VIを起点としたデザインを得意とするデザイナー/アートディレクターであるタカヤ・オオタさんのポートフォリオサイト

なにこれ並んでるだけでかっこいい。
それでいて大胆かつユニークな見せ方をしているサイトですね。
色も男性からも女性からも愛されるティファニーブルーに近い感じでとても清潔感があります。

HIROKA HASEGAWA

http://hirokahasegawa.com/

めっちゃ好きやなーこれ。この記事の中で唯一の女性のポートフォリオですね。
一瞬英文がNoto Sansかと思いきや、Camptonってゆう聞いたことないフォント(俺だけ?)。こだわってるわー。

アートディレクターの人って黒のパワーの使い方が上手。
でもこのデザインはなかなか初心者が真似すると痛い感じになるよね。
ベテランならではって感じ。

しっかし経歴からしてバッキバキの制作屋さんですね。
制作物を見ていると、”あれこの人が作ったやつやったんだ”ってゆうような話題になったものもある。
じっくり見ることをオススメする。

DAISUKE OBANA

http://d-obana.com/

無印良品のリネンのシャツ着てそうですね。会ったことないけど。
そうやって見る側の都合がいいように、人柄まで想像させてしまうポートフォリオって素敵ですよね。
これってデザイナーに腕がないと不可能なことですから。

余白をたっぷりとってデザインされていますね。
デザイナーの作風がとてもわかりやすいです。
ここまでくると、このデザイナーにお願いしたいってなりやすいですね。
お願いする方が”この作風でデザインしてください”ってなると、デザイナーも持ち味を十分に発揮できてWinWinです。

MITSUGU TAKAHASI

http://mitsugutakahashi.com/

この方の得意分野はファッションブランドのブランディングだということがはっきりわかりますね。
個性的な欧文タイポグラフィを使って、上品さを印象的に表現しています。

スクロールするごとに変わるブロックエフェクトの色のトーンは、photoshopのカラーパレットに”オシャレ”ってゆう名前で登録しておきたいぐらいです。
ちなみにこの類のレイアウトはスマートフォンで見た時の方がわかりやすいです。

Atsuhiro Kataoka

http://atsuhiro.jp/

Wantedlyへのリンクがあるというとてもコンバージョンの在りかがわかりやすサイトですね。

“丸”と”線” 丸と丸を見極め、線で繋ぐ。 人のニーズと本質的な価値をデザインで結ぶ、一過性ではなく永続的に

ときちんと言葉にしてコンセプトを語れるというのはとても素晴らしいことです。
Webデザイナーらしいシンプルで可愛らしい動きのあるサイトです。

Nitta.Studio by Soishiro Nitta

https://nitta.studio/

音とアニメーションがすごくあっていて、それでいて軽快。
かっこいいですね!しかもプロフィールを見るところお若いです!末恐ろしいエンジニアさんですね。

Takeshi Oide

http://takeshioide.com/

カナダでWebデザインとデベロップメントをするフリーランスのポートフォリオ。
フロントエンドだけどグラフィカルなので、こちらも両刀な感じがひしひしと。
グラフィックもユニークです。自分の写真を大きく載せているのはとても好感度が持てますね。



UNDERLINE by Yuichi Tokuda

https://u-d-l.jp/

こちらも大阪でフリーランスでご活躍されている方のサイトです。
ブログが併設されていて、とても柔らかなお人柄が現れたサイトですね。
写真も美しくて、ブログ併設型のサイトの模範になります。

IKERYOU

http://ikeryou.jp/

クリエイティブコーダーの池田 亮さんのポートフォリオです。
みるからに変態じみたアニメーション!

制作実績が濃い!どの案件でもきもちいいインタラクションを実装されています。

就活生のためのポートフォリオの作り方

1.ページ数はすくなくてもいい

通常のHPも入れる内容が無いのに無駄にページを作ってもスカスカなショボいサイトになってしまうので1枚ものでワンカラムの読み物的なサイトにしてはどうでしょう。

2.自分のキャラクターがわかるように

Webデザイン以外でモノヅクリができるならそのこともたくさん載せたほうがいいですよ。
面接官は同じような人たくさん見てるし、例えば日曜大工好きな人は、きっとモノヅクリそのものが好きだから。

それはあなたのキャラクターになります。

3.驚く内容になるようにしよう!

できれば始めは自分でHTMLをいちから書いて作った方がいいです。
いちから作れないなら、HTMLテンプレートをフリーダウンロードして、それをカスタマイズして使ったほうがいいよ。

僕が面接官の時はWIXのようなWebサービスを使ってホームページを作るデザイナーは落としてました。

あれはWeb業界以外の人が使うものであって、業界人が使うと全く実務で使えません。
そしてその人の実力が全くわかりません。

だから一からデザインしてひどいサイトになるくらいなら、HTMLテンプレートダウンロードしてカスタマイズして作品の内容重視でいきましょう!
写真や画像、ボタンの素材作りで自分の色を出して、面接時はテンプレを使った事は伝えましょう。

依頼を受けてポートフォリオサイトを添削しました。
下記の記事も参考になるはずです。

あわせて読みたい
Web業界未経験のポートフォリオサイトの作り方【Webデザイン添削 vol.01】

まとめ

ポートフォリオサイトは情報設計の基本中の基本です。

なぜなら自分のいい部分を客観的に見て、情報に優劣をつけながら見せていけなければならない。
自分のことがわからない人に、これから合うクライアントさんの情報設計などできないもんね。

そして、ポートフォリオサイトを見た人にどういったアクションを起こして欲しいかまでをイメージして作ることが大切です。

「見ました。カッコよかったですよ。」
はい終わり。。。

ってそれじゃつまんないですから。

Webっぽく言うとコンバージョンを意識して作ろうよってことです。
企業や事務所、時にはクライアントさんに声をかけてもらえるように作ったほうがいいです。

また、これをきっかけにエンジニアはデザインを、デザイナーはエンジニアリングを考えて実装していくことも大切だと思います。

ほなね

あわせて読みたい
参考にしたい海外のデザイナー、エンジニアのポートフォリオ2017