就職活動の時期にさしかかっています。
Webデザイナーの方はポートフォリオ作りに勤しんでるのではないでしょうか。
Webデザイナーの平尾誠です。
かっこいい・可愛いサイトを集めたサイトはよくありますが、フリーランスや個人のポートフォリオは見つけにくい。
検索しても日本人に絞った、個人のポートフォリオサイトって出てこないんですよね。
そこで、デザイナーやエンジニア、アートディレクターの個人のポートフォリオを集めました。
参考にして面接官の脳みそをぶっ飛ばしましょう。
これが就職活動中の悩める子羊たちの一助になればと思います。
目次
- SHOGO TABUCHI
- MAKOTO HIRAO
- MASAYUKI DAIJIMA
- Takumi Hasegawa
- KEN ARAI
- TAIKI KATO
- Kenta Toshikura
- TAKAYA OHTA
- HIROKA HASEGAWA
- DAISUKE OBANA
- MITSUGU TAKAHASI
- Nitta.Studio by Soishiro Nitta
- Takeshi Oide
- UNDERLINE by Yuichi Tokuda
- IKERYOU
- Yuto Takahashi
- Keita Yamada
- KUON YAGI
- MEGURU MURAMOTO
- ポートフォリオを作るサービスを使えばいい
- 就活生のためのポートフォリオの作り方
- まとめ
SHOGO TABUCHI
まずは私が最も尊敬するデザイナーの中のデザイナー。
田渕 将吾氏のポートフォリオサイト
html5で音楽との同期やGreensockを使ったアニメーションなど思いつかないよねー。
フロントエンド開発をできる人でなければ思いつかなかったであろうギミックが盛りだくさんです。
制作した作品をシンプルに分かりやすく見せながらも、サイト自体がそれを上回るくらいの作品に仕上がっております。
圧巻ですね。これだけ動いてるけどすごく動作が軽いです。
開発ができるデザイナーのお手本です。
MAKOTO HIRAO
https://arutega.jp の中の人、フロントエンドエンジニアの平尾 誠のポートフォリオサイトです。
僕です、大変恐縮です。
全く知らない外国人に自己紹介しようとした時に、自分の人柄がわかるようにしたかったので英語を混ぜました。
海外で働くことを前提に作っています。
CODE IS DESIGN
ページ遷移のアニメーションは階層ごとに違います。
メインビジュアルのコピーが画面からはみ出ているのは、違和感を感じスクロールさせるためです。
制作実績をたくさん見てもらえるようにスムーズスクロールを実装しています。
フロントエンドエンジニアこそが本当の意味でデザイナーなんだよ。って言いたかった。
MASAYUKI DAIJIMA
インタラクションデザイナー・プログラマです。
音楽がかっこいいですね。
飛び回るパーティクルがスキルの高さを物語ってます。
Takumi Hasegawa
こちらもフロントエンド色がとっても強いサイトです。
ご自身の強みはインタラクションです！ってすごく伝わります。
色のバランスとか余白とかすごくいいですけど、もともとデザインされていたんでしょうか。
フリーランスのインタラクションデザイナー・テクニカルディレクション周りの方のようです。
何と言っても、この方のブログはthree.jsやWebGL周りのラボを公開されていて、ソースコードを公開しています。インタラクションデザインってすごくとっつきにくいんですよね。難しい上に情報が少ない。RSSフィードに登録する価値ありです。
また、こちらはフリーランスとして活動するUNSHIFT名義で活躍しているもう一つのサイトです。
UNSHIFT
KEN ARAI
シカゴを拠点に活躍されているデザイナーさんのようです。
UIやUX周りのデザインをされているだけあって、マウスポインタを効果的に使っています。
アプリを操作しているかのような錯覚をつくり出していますね。
めちゃくちゃクオリティ高いです。
TAIKI KATO
広告、グラフィックデザイン、WEBデザインなどを手掛け、東京を拠点にアートディレクター、デザイナーとして活動している加藤タイキさんのWebサイト。
ロゴのタイポグラフィーいいなぁ。
足しまへん。引きまんねん。
って感じですねLESS IS MORE的な感じです。全部がおしゃれなポートフォリオです。
Kenta Toshikura
ガーデンエイトの方だそうです。
画面のオブジェクトたちが生きているかのような、モーションがきもちいいです。
マウスストーカーを使ったアニメーション でトレンドを掴んでいます。
ページ遷移もきもちいですね。完璧だと思います。
TAKAYA OHTA
ストーリーとコンセプトを重視し、CI/VIを起点としたデザインを得意とするデザイナー／アートディレクターであるタカヤ・オオタさんのポートフォリオサイト
なにこれ並んでるだけでかっこいい。
それでいて大胆かつユニークな見せ方をしているサイトですね。
色も男性からも女性からも愛されるティファニーブルーに近い感じでとても清潔感があります。
HIROKA HASEGAWA
めっちゃ好きやなーこれ。この記事の中で唯一の女性のポートフォリオですね。
一瞬英文がNoto Sansかと思いきや、Camptonってゆう聞いたことないフォント（俺だけ？）。こだわってるわー。
アートディレクターの人って黒のパワーの使い方が上手。
でもこのデザインはなかなか初心者が真似すると痛い感じになるよね。
ベテランならではって感じ。
しっかし経歴からしてバッキバキの制作屋さんですね。
制作物を見ていると、”あれこの人が作ったやつやったんだ”ってゆうような話題になったものもある。
じっくり見ることをオススメする。
DAISUKE OBANA
無印良品のリネンのシャツ着てそうですね。会ったことないけど。
そうやって見る側の都合がいいように、人柄まで想像させてしまうポートフォリオって素敵ですよね。
これってデザイナーに腕がないと不可能なことですから。
余白をたっぷりとってデザインされていますね。
デザイナーの作風がとてもわかりやすいです。
ここまでくると、このデザイナーにお願いしたいってなりやすいですね。
お願いする方が”この作風でデザインしてください”ってなると、デザイナーも持ち味を十分に発揮できてWinWinです。
MITSUGU TAKAHASI
この方の得意分野はファッションブランドのブランディングだということがはっきりわかりますね。
個性的な欧文タイポグラフィを使って、上品さを印象的に表現しています。
スクロールするごとに変わるブロックエフェクトの色のトーンは、photoshopのカラーパレットに”オシャレ”ってゆう名前で登録しておきたいぐらいです。
ちなみにこの類のレイアウトはスマートフォンで見た時の方がわかりやすいです。
Nitta.Studio by Soishiro Nitta
音とアニメーションがすごくあっていて、それでいて軽快。
かっこいいですね！しかもプロフィールを見るところお若いです！末恐ろしいエンジニアさんですね。
Takeshi Oide
カナダでWebデザインとデベロップメントをするフリーランスのポートフォリオ。
フロントエンドだけどグラフィカルなので、こちらも両刀な感じがひしひしと。
グラフィックもユニークです。自分の写真を大きく載せているのはとても好感度が持てますね。
UNDERLINE by Yuichi Tokuda
こちらも大阪でフリーランスでご活躍されている方のサイトです。
ブログが併設されていて、とても柔らかなお人柄が現れたサイトですね。
写真も美しくて、ブログ併設型のサイトの模範になります。
IKERYOU
クリエイティブコーダーの池田 亮さんのポートフォリオです。
みるからに変態じみたアニメーション！
制作実績が濃い！どの案件でもきもちいいインタラクションを実装されています。
Yuto Takahashi
写真がとても印象的なポートフォリオサイトです。
フリーランスのフォトグラファー・アートデイレクターのポートフォリオサイトです。
とても差別化されたサイトですね。
写真が得意だなんて初見でわかります。
Keita Yamada
https://experiments.p5aholic.me/
Webエンジニアの実験的コンテンツが盛りだくさん。アーティスト系のインタラクションデザイナーですが、レベル高すぎですね。
どれも新しいアプローチをしていて参考になります。
KUON YAGI
イラストとアニメーションで楽しい。
スクロールするたびにタイトルが気持ちよくでてきます。
また、非同期通信がユーザビリティいいですね。
UXの観点から考えられたデザインとエンジニアリングの二刀流ならでは。
MEGURU MURAMOTO
トレンド全部入ったwebデザインらしい動きが特徴のサイト。
・マウスストーカー
・砂嵐背景
・くるくる回るアテンション
・ゆらゆらしたWebGL
スマホからは見れないみたいですが、webデザインのいい例ですね。
ポートフォリオを作るサービスを使えばいい
サイトをゼロから作るのは大変です。それに時間がかかりますよね。
マイナビクリエイターが運営する『MATCHBOX（マッチボックス）』ならポートフォリオを簡単に作ることができます。
IllustratorやPhotoshopなどのツールを使わなくても大丈夫で、実績の画像データやURLなどの素材があれば、あっという間にポートフォリオが完成します。
動画だったりSlideshareなんかも連携しており、様々なタイプのクリエイターのポートフォリオに対応しています。
また、管理画面内からPDFを作成でき、印刷資料も作成できます。
これはめっちゃありがたいです。
とても実戦向きですね。
MATCHBOXは、マイナビクリエイター
へ申し込み後、使うことが可能なので転職活動とセットで使うのもあり。
就活生のためのポートフォリオの作り方
1.ページ数はすくなくてもいい
制作実績はたくさんありますか？
制作物が少ないと内容が薄くなります。
ページをたくさん作ってもスカスカなショボいサイトになってしまう。
だから1枚ものでワンカラムの読み物的なサイトにするのもアリです。
2.自分のキャラクターがわかるように
もしWebデザイン以外でモノヅクリができるならそのこともたくさん載せたほうがいいですよ。
面接官は同じような人たくさん見てるし、例えば日曜大工が好きな人は、きっとモノヅクリそのものが好きだから。
それはあなたのキャラクターになります。
3.驚く内容になるようにしよう！
もちろんHTMLをゼロから書いて作った方がいいです。
ゼロから作れないなら、HTMLテンプレートをフリーダウンロードして、それをカスタマイズして使ったほうがいいよ。
僕が面接官の時はWIXのようなWebサービスを使ってホームページを作るデザイナーは落としてました。
あれはWeb業界以外の人が使うものであって、業界人が使うと全く実務で使えません。
そしてその人の実力が全くわかりません。
だからゼロからデザインしてひどいサイトになるくらいなら、HTMLテンプレートダウンロードしてカスタマイズして作品の内容重視でいきましょう！
写真や画像、ボタンの素材作りで自分の色を出して、面接時はテンプレを使った事は伝えましょう。
依頼を受けてポートフォリオサイトを添削しました。
下記の記事も参考になるはずです。
転職＆フリーランスになりたい人向けサービス
転職のためにポートフォリオを作るなら、こちらの記事の方が役に立ちます。
フリーランスになりたいならエージェントに登録するのが間違いないです。
まとめ
ポートフォリオサイトは情報設計の基本中の基本です。
なぜなら自分のいい部分を客観的に見て、情報に優劣をつけながら見せていけなければならないから。
そして、ポートフォリオサイトを見た人にどういったアクションを起こして欲しいかまでをイメージして作ることが大切です。
「見ました。カッコよかったですよ。」
はい終わり。。。
ってそれじゃつまんないですから。
Webっぽく言うとコンバージョンを意識して作ろうよってことです。
企業や事務所、時にはクライアントさんに声をかけてもらえるように作ったほうがいいです。
また、これをきっかけにエンジニアはデザインを、デザイナーはエンジニアリングを考えて実装していくことも大切だと思います。
デザイナーの初任給が大手代理店を超えますように！
ほなね
