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

就職活動の時期にさしかかっているので就活生の皆さんは、特にWebデザイナーの方なんかはポートフォリオ作りに勤しんでるのではないでしょうか。
かっこいい・可愛いコーポレートサイトはたくさんありますが、フリーランスや個人のポートフォリオってどうやって作ったらいいんだろうと思いますよね。
そしてなかなか検索しても日本人に絞った個人のポートフォリオサイトって出てこないんですよね。

最初の頃は検索の仕方がわからなくて私自身はとっても苦しみました。
そこで会社のではなく、デザイナーやエンジニア、アートディレクターの個人のポートフォリオを集めました。
これが就職活動中の悩める子羊たちの参考になればと思います。

SHOGO TABUCHI

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

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

MAKOTO HIRAO

http://mako.red/

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

CODE IS DESIGN

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

MASAYUKI DAIJIMA

https://www.daijima.jp/

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

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

Takumi Hasegawa

https://tkmh.me/

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

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

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

2018年はこちらも注目ですね。

KEN ARAI

http://kenarai.github.io/

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

Manato Kuroda

http://manato.ca/

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

TAIKI KATO

http://taikikato.jp/

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

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

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

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デザイナーらしいシンプルで可愛らしい動きのあるサイトです。

Takeshi Oide

http://takeshioide.com/

カナダでWebデザインとデベロップメントをするフリーランスのポートフォリオ。
フロントエンドだけどグラフィカルなので、両刀な感じがひしひしと。

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

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

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

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

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

・インテリアデザインにのめり込む
・それからデザインに目覚めてデザイナーを目指す
・Webデザインに興味を持つ
・コーディングをする
・これからどんなデザイナーになりたいか
というような内容で。

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

できれば始めは自分でHTMLをいちから書いて作った方がいいですよ。いちから作れないなら、HTMLテンプレートをフリーダウンロードしてそれをカスタマイズして使ったほうがいいよ。
僕が面接官の時はWINMXのようなWebサービスを使ってホームページを作るデザイナーは落としてました。あれはWeb業界以外の人が使うものであって、業界人が使うと全く実務で使えません。そしてその人の実力が全くわかりません。たとえすごく立派なサイトを作っていたとしてもソースコード見たらわかるから。
一から作ろうとしてひどいサイトになるくらいならHTMLテンプレートダウンロードしてカスタマイズするとか、作品の内容重視でいきましょう！
写真や画像、ボタンの素材作りで自分の色を出して、面接時はテンプレを使った事は伝えましょう。