就職活動の時期にさしかかっているので就活生の皆さんは、特に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
KEN ARAI
http://kenarai.github.io/
シカゴを拠点に活躍されているデザイナーさんのようです。
UIやUX周りのデザインをされているだけあって、マウスポインタを効果的に使っています。
アプリを操作しているかのような錯覚をつくり出していますね。
めちゃくちゃクオリティ高いです。
Manato Kuroda
http://manato.ca/
ポートフォリオって自分の自己紹介をするサイトなので、経歴と得意分野をシンプルに伝える。
それには１ページのサイト構成はとっても理にかなっていると思います。
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/
クリエイティブコーダーの池田 亮さんのポートフォリオです。
みるからに変態じみたアニメーション！
制作実績が濃い！どの案件でもきもちいいインタラクションを実装されています。
転職＆フリーランスになりたい人向けサービス
転職のためにポートフォリオを作るなら、こちらの記事の方が役に立ちます。
フリーランスになりたいならエージェントに登録するのが間違いないです。
- 【レバテックフリーランス】：Web系エンジニア、デザイナーに仕事を紹介してくれるエージェント
- 【Workshipフリーランス】：サービス始めてから間もないから今が狙い目
：Web系エンジニア、デザイナーに仕事を紹介してくれるエージェント
：サービス始めてから間もないから今が狙い目就活生のためのポートフォリオの作り方
1.ページ数はすくなくてもいい
通常のHPも入れる内容が無いのに無駄にページを作ってもスカスカなショボいサイトになってしまうので1枚ものでワンカラムの読み物的なサイトにしてはどうでしょう。
2.自分のキャラクターがわかるように
Webデザイン以外でモノヅクリができるならそのこともたくさん載せたほうがいいですよ。
面接官は同じような人たくさん見てるし、例えば日曜大工好きな人は、きっとモノヅクリそのものが好きだから。
それはあなたのキャラクターになります。
3.驚く内容になるようにしよう！
できれば始めは自分でHTMLをいちから書いて作った方がいいです。
いちから作れないなら、HTMLテンプレートをフリーダウンロードして、それをカスタマイズして使ったほうがいいよ。
僕が面接官の時はWIXのようなWebサービスを使ってホームページを作るデザイナーは落としてました。
あれはWeb業界以外の人が使うものであって、業界人が使うと全く実務で使えません。
そしてその人の実力が全くわかりません。
だから一からデザインしてひどいサイトになるくらいなら、HTMLテンプレートダウンロードしてカスタマイズして作品の内容重視でいきましょう！
写真や画像、ボタンの素材作りで自分の色を出して、面接時はテンプレを使った事は伝えましょう。
依頼を受けてポートフォリオサイトを添削しました。
下記の記事も参考になるはずです。
まとめ
ポートフォリオサイトは情報設計の基本中の基本です。
なぜなら自分のいい部分を客観的に見て、情報に優劣をつけながら見せていけなければならない。
自分のことがわからない人に、これから合うクライアントさんの情報設計などできないもんね。
そして、ポートフォリオサイトを見た人にどういったアクションを起こして欲しいかまでをイメージして作ることが大切です。
「見ました。カッコよかったですよ。」
はい終わり。。。
ってそれじゃつまんないですから。
Webっぽく言うとコンバージョンを意識して作ろうよってことです。
企業や事務所、時にはクライアントさんに声をかけてもらえるように作ったほうがいいです。
また、これをきっかけにエンジニアはデザインを、デザイナーはエンジニアリングを考えて実装していくことも大切だと思います。
ほなね
- あわせて読みたい
- 参考にしたい海外のデザイナー、エンジニアのポートフォリオ2017
