転職・フリーとして活躍したいWebデザイナーの方は、ポートフォリオ作りに勤しんでるのではないでしょうか。
ポートフォリオは実績・実力がわかりやすい必須ツールです。
こんにちは、Webデザイナーの平尾誠です。
駆け出しのwebデザイナーが現役の先輩メンターを見つけるCODEMENTORを共同運営しています。
かっこいい・可愛いサイトを集めたサイトはよくありますが、フリーランスや個人のポートフォリオは見つけにくい。
検索しても日本人に絞った、個人のポートフォリオサイトって出てこないんですよね。
そこで、デザイナーやエンジニア、アートディレクターの個人のポートフォリオを集めました。
参考にして面接官の脳みそをぶっ飛ばしましょう。
これが就職活動中の悩める子羊たちの一助になればと思います。
- SHOGO TABUCHI
- MAKOTO HIRAO
- HISAMI KURITA
- かまぼこ
- MASAYUKI DAIJIMA
- Takumi Hasegawa
- KEN ARAI
- Yuto Takahashi
- TAIKI KATO
- Jun Kata
- Kenta Toshikura
- TAKAYA OHTA
- HIROKA HASEGAWA
- Sayoko Nishimura / ONIGUILI
- DAISUKE OBANA
- UNDERLINE by Yuichi Tokuda
- IKERYOU
- Keita Yamada
- Yuta Takahashi
- KUON YAGI
- MEGURU MURAMOTO
- ポートフォリオを充実したものにするために
- 就活生のためのポートフォリオの作り方
- まとめ
SHOGO TABUCHI
まずは私が最も尊敬するデザイナーの中のデザイナー。
田渕 将吾氏のポートフォリオサイト
html5で音楽との同期やGreensockを使ったアニメーションなど思いつかないよねー。
フロントエンド開発をできる人でなければ思いつかなかったであろうギミックが盛りだくさんです。
制作した作品をシンプルに分かりやすく見せながらも、サイト自体がそれを上回るくらいの作品に仕上がっております。
圧巻ですね。これだけ動いてるけどすごく動作が軽いです。
開発ができるデザイナーのお手本です。
2020年に上記は更新が止まったので、こっちも合わせて見るといいです。
https://www.s5-studios.com/
MAKOTO HIRAO
https://arutega.jp の中の人、フロントエンドエンジニアの平尾 誠のポートフォリオサイトです。
僕です、大変恐縮です。
全く知らない外国人に自己紹介しようとした時に、自分の人柄がわかるようにしたかったので英語を混ぜました。
海外で働くことを前提に作っています。
CODE IS DESIGN
ページ遷移のアニメーションは階層ごとに違います。
メインビジュアルのコピーが画面からはみ出ているのは、違和感を感じスクロールさせるためです。
制作実績をたくさん見てもらえるようにスムーズスクロールを実装しています。
フロントエンドエンジニアこそが本当の意味でデザイナーなんだよ。って言いたかった。
HISAMI KURITA
フロントエンドが楽しみながら作ったのが伝わってきてます。
インタラクションでデザインしたおもちゃ箱のようなサイト。
みてて楽しい。イージングが気持ちいい。
かまぼこ
こちらもおもちゃ箱感が満載。
Blenderから書き出して作ってるに違いない。
Blenderを使えるエンジニアってだけで希少価値が高い。高すぎる。
どんな現場でそんな人材が育つのか。
MASAYUKI DAIJIMA
インタラクションデザイナー・プログラマです。
音楽がかっこいいですね。
飛び回るパーティクルがスキルの高さを物語ってます。
Takumi Hasegawa
こちらもフロントエンド色がとっても強いサイトです。
ご自身の強みはインタラクションです！ってすごく伝わります。
色のバランスとか余白とかすごくいいですけど、もともとデザインされていたんでしょうか。
フリーランスのインタラクションデザイナー・テクニカルディレクション周りの方のようです。
何と言っても、この方のブログはthree.jsやWebGL周りのラボを公開されていて、ソースコードを公開しています。インタラクションデザインってすごくとっつきにくいんですよね。難しい上に情報が少ない。RSSフィードに登録する価値ありです。
また、こちらはフリーランスとして活動するUNSHIFT名義で活躍しているもう一つのサイトです。
UNSHIFT
KEN ARAI
シカゴを拠点に活躍されているデザイナーさんのようです。
アプリを操作しているかのような錯覚をつくり出していますね。
めちゃくちゃクオリティ高いです。
Yuto Takahashi
写真がとても印象的なポートフォリオサイトです。
フリーランスのフォトグラファー・アートデイレクターのポートフォリオサイトです。
とても差別化されたサイトですね。
写真が得意だなんて初見でわかります。
TAIKI KATO
広告、グラフィックデザイン、WEBデザインなどを手掛け、東京を拠点にアートディレクター、デザイナーとして活動している加藤タイキさんのWebサイト。
ロゴのタイポグラフィーいいなぁ。
足しまへん。引きまんねん。
って感じですねLESS IS MORE的な感じです。全部がおしゃれなポートフォリオです。
Jun Kata
https://www.junkata.com/
Three.jsとReactでの表現してるwebデベロッパーのポートフォリオ。
確かなスキルがなければスベるデザイン。ここまで実力があるからこそできるデザイン。
Kenta Toshikura
ガーデンエイトの方だそうです。
画面のオブジェクトたちが生きているかのような、モーションがきもちいいです。
マウスストーカーを使ったアニメーション でトレンドを掴んでいます。
ページ遷移もきもちいですね。完璧だと思います。
TAKAYA OHTA
ストーリーとコンセプトを重視し、CI/VIを起点としたデザインを得意とするデザイナー／アートディレクターであるタカヤ・オオタさんのポートフォリオサイト
なにこれ並んでるだけでかっこいい。
それでいて大胆かつユニークな見せ方をしているサイトですね。
色も男性からも女性からも愛されるティファニーブルーに近い感じでとても清潔感があります。
HIROKA HASEGAWA
めっちゃ好きやなーこれ。
一瞬英文がNoto Sansかと思いきや、Camptonってゆう聞いたことないフォント（俺だけ？）。こだわってるわー。
アートディレクターの人って黒のパワーの使い方が上手。
でもこのデザインはなかなか初心者が真似すると痛い感じになるよね。
ベテランならではって感じ。
しっかし経歴からしてバッキバキの制作屋さんですね。
制作物を見ていると、”あれこの人が作ったやつやったんだ”ってゆうような話題になったものもある。
じっくり見ることをオススメする。
Sayoko Nishimura / ONIGUILI
グラフィックデザインがマークアップもできると、こうも心地いい。
それでいて、使用感・与える印象をコントロールできるプロってこういうことだと思います。
歴戦のフリーランス感がある。
DAISUKE OBANA
無印良品のリネンのシャツ着てそうですね。会ったことないけど。
そうやって見る側の都合がいいように、人柄まで想像させてしまうポートフォリオって素敵ですよね。
これってデザイナーに腕がないと不可能なことですから。
余白をたっぷりとってデザインされていますね。
デザイナーの作風がとてもわかりやすいです。
ここまでくると、このデザイナーにお願いしたいってなりやすいですね。
お願いする方が”この作風でデザインしてください”ってなると、デザイナーも持ち味を十分に発揮できてWinWinです。
UNDERLINE by Yuichi Tokuda
こちらも大阪でフリーランスでご活躍されている方のサイトです。
ブログが併設されていて、とても柔らかなお人柄が現れたサイトですね。
写真も美しくて、ブログ併設型のサイトの模範になります。
IKERYOU
クリエイティブコーダーの池田 亮さんのポートフォリオです。
みるからに変態じみたアニメーション！
制作実績が濃い！どの案件でもきもちいいインタラクションを実装されています。
Keita Yamada
https://experiments.p5aholic.me/
Webエンジニアの実験的コンテンツが盛りだくさん。アーティスト系のインタラクションデザイナーですが、レベル高すぎですね。
どれも新しいアプローチをしていて参考になります。
Yuta Takahashi
https://yuta-takahashi.dev/
3D表現が得意なフロントエンドエンジニアの方のポートフォリオです。
サクサクぬるぬるの非同期通信ですね。
さすが！軽い！
KUON YAGI
イラストとアニメーションで楽しい。
スクロールするたびにタイトルが気持ちよくでてきます。
また、非同期通信がユーザビリティいいですね。
UXの観点から考えられたデザインとエンジニアリングの二刀流ならでは。
MEGURU MURAMOTO
海外トレンドが盛り込まれた、デザイン性の高いポートフォリオ
ポートフォリオを充実したものにするために
近年、web制作に憧れを持って学習に取り組む方は急激に増えました。
だから実務経験がなく、いつまでも未経験の方はとても多いです。
どれだけ独学をしても、やはり未経験から転職や、フリーランスとしての独り立ちは難しいのが現実です。
そんな方はスクール行ったところで現場での知識は身につかないです。
コードメンターは、実務のリハーサルと位置付けたメンタリングのプラットフォームです。職場の先輩に質問する感じです。
現役のwebのプロに先輩となってもらい、実務のコーディングを習得することを目標にしています。
どんどんweb制作を目指す人は増える一方なので、早く実務に入れた方がライバルが少なくて済むと思います。
就活生のためのポートフォリオの作り方
1.ページ数はすくなくてもいい
制作実績はたくさんありますか？
制作物が少ないと内容が薄くなります。
ページをたくさん作ってもスカスカなショボいサイトになってしまう。
だから1枚ものでワンカラムの読み物的なサイトにするのもアリです。
2.自分のキャラクターがわかるように
もしWebデザイン以外でモノヅクリができるならそのこともたくさん載せたほうがいいですよ。
面接官は同じような人たくさん見てるし、例えば日曜大工が好きな人は、きっとモノヅクリそのものが好きだから。
それはあなたのキャラクターになります。
3.驚く内容になるようにしよう！
もちろんHTMLをゼロから書いて作った方がいいです。
ゼロから作れないなら、HTMLテンプレートをフリーダウンロードして、それをカスタマイズして使ったほうがいいよ。
僕が面接官の時はWIXのようなWebサービスを使ってホームページを作るデザイナーは落としてました。
あれはWeb業界以外の人が使うものであって、業界人が使うと全く実務で使えません。
そしてその人の実力が全くわかりません。
だからゼロからデザインしてひどいサイトになるくらいなら、HTMLテンプレートダウンロードしてカスタマイズして作品の内容重視でいきましょう！
写真や画像、ボタンの素材作りで自分の色を出して、面接時はテンプレを使った事は伝えましょう。
まとめ
ポートフォリオサイトは情報設計の基本中の基本です。
なぜなら自分のいい部分を客観的に見て、情報に優劣をつけながら見せていけなければならないから。
そして、ポートフォリオサイトを見た人にどういったアクションを起こして欲しいかまでをイメージして作ることが大切です。
「見ました。カッコよかったですよ。」
はい終わり。。。
ってそれじゃつまんないですから。
Webっぽく言うとコンバージョンを意識して作ろうよってことです。
企業や事務所、時にはクライアントさんに声をかけてもらえるように作ったほうがいいです。
また、これをきっかけにエンジニアはデザインを、デザイナーはエンジニアリングを考えて実装していくことも大切だと思います。
デザイナーの初任給が大手代理店を超えますように！
ほなね
