ブログ/お知らせ Knowledge
参考にしたい日本人デザイナー・エンジニアのポートフォリオサイトまとめ
転職・フリーとして活躍したいWebデザイナーの方は、日夜ポートフォリオ作りに勤しんでるのではないでしょうか。
ポートフォリオは実績・実力がわかりやすい必須ツールです。
こんにちは、クリエイティブディレクターの平尾誠です。
かっこいい・可愛いサイトを集めたサイトはよくありますが、フリーランスや個人のポートフォリオは見つけにくい。
検索しても日本人に絞った、個人のポートフォリオサイトって出てこないんですよね。
そこで、デザイナーやエンジニア、アートディレクターの個人のポートフォリオを集めました。
参考にして面接官の脳みそをぶっ飛ばしましょう。
また、お知らせです。
弊社ARUTEGAでは、15年以上の業界経験を元にデザイナー＆エンジニアの転職をサポートする活動を始めました。
職務経歴書とポートフォリオの改善を超具体的に行い、企業とのミスマッチを減らすものです。ページの最後に詳細は記載があるので、興味がある方はご応募お待ちしております。
それでは多くのクリエイターのポートフォリオをご覧ください。
これが就職活動中の悩める子羊たちの一助になればと思います。
- 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
- SHINYA OKANO
- 転職支援始めました。
- 就活生のためのポートフォリオの作り方
- まとめ
SHOGO TABUCHI
まずは私が最も尊敬するデザイナーの中のデザイナー。
田渕 将吾氏のポートフォリオサイト
フロントエンド開発をできる人でなければ思いつかなかったであろうギミックが盛りだくさんです。
制作した作品をシンプルに分かりやすく見せながらも、サイト自体がそれを上回るくらいの作品に仕上がっております。
圧巻ですね。これだけ動いてるけどすごく動作が軽いです。
開発ができるデザイナーのお手本です。
MAKOTO HIRAO
https://arutega-db.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
海外トレンドが盛り込まれた、デザイン性の高いポートフォリオ
SHINYA OKANO
無機物と有機物が交互に移り変わる、ビジュアルの力がとても強いポートフォリオサイト。
RYDENを率いるアートディレクター岡野真也氏のサイト。
転職支援始めました。
冒頭でもご案内しましたが、ARUTEGAでは420名のメンタリングの実績を元に、転職支援を始めました。
ポートフォリオを充実したものにするために
近年、web制作に憧れを持って学習に取り組む方は急激に増えました。
制作会社を経営している以上、とても嬉しいことです。
どれだけ独学をしても、未経験から転職は難しいのが現実です。
ですが、社会人の未経験の方は少ないのではないでしょうか。社会人経験は必ずムダにはならず、かえって強みになることが多いと感じます。
そういった強みを活かし、なおかつ将来なりたい将来像が見えないと採用されづらいという事実があります。
だから転職支援を弊社は始めました。
具体的な内容はこのような感じです。
- ポートフォリオのアドバイス
- 職務経歴書のブラッシュアップ
- なんでも不安なことを聞ける
です。ここではこれから転職活動をするまでのリハーサルを私たちが変わってやろうといったものです。
これにより未経験者と企業側のミスマッチは減り、求職者・応募者がWINWINになれると考えました。
今も昔も未経験の方はとても多い。
経験者であれば、どのような経験が積めるかなどの別の悩みが出てきます。
アルテガは採用担当の立場にかわり、あなたのポートフォリオを現場の声を反映したものにします。
料金は現在は無料です。
件名に『ポートフォリオ添削』と記載し、職務経歴書とポートフォリオサイトのURLを添付ください。
※履歴書は必ずしも必要ではありません。
また、この企画はウェブスタッフ株式会社のご協力を得ています。
特に東京都内や地方の都市部での転職活動に強い転職エージェントで、Xでの発信をご覧になっている方なら既にご存知かもしれません。
ポートフォリオお化けのトムさんが所属されているあの会社です。
ポートフォリオ添削後にはウェブスタッフさんとタッグを組んで、あなたのキャリアに合った企業を一緒に探します。
就活生のためのポートフォリオの作り方
1.ページ数はすくなくてもいい
制作実績はたくさんありますか？
制作物が少ないと内容が薄くなります。
ページをたくさん作ってもスカスカなショボいサイトになってしまう。
だから1枚ものでワンカラムの読み物的なサイトにするのもアリです。
2.自分のキャラクターがわかるように
もしWebデザイン以外でモノヅクリができるならそのこともたくさん載せたほうがいいですよ。
面接官は同じような人たくさん見てるし、例えば日曜大工が好きな人は、きっとモノヅクリそのものが好きだから。
それはあなたのキャラクターになります。
3.驚く内容になるようにしよう！
もちろんHTMLをゼロから書いて作った方がいいです。
ゼロから作れないなら、HTMLテンプレートをフリーダウンロードして、それをカスタマイズして使ったほうがいいよ。
僕が面接官の時はWIXのようなWebサービスを使ってホームページを作るデザイナーは落としてました。
あれはWeb業界以外の人が使うものであって、業界人が使うと全く実務で使えません。
そしてその人の実力が全くわかりません。
だからゼロからデザインしてひどいサイトになるくらいなら、HTMLテンプレートダウンロードしてカスタマイズして作品の内容重視でいきましょう！
写真や画像、ボタンの素材作りで自分の色を出して、面接時はテンプレを使った事は伝えましょう。
まとめ
ポートフォリオサイトは情報設計の基本中の基本です。
なぜなら自分のいい部分を客観的に見て、情報に優劣をつけながら見せていけなければならないから。
そして、ポートフォリオサイトを見た人にどういったアクションを起こして欲しいかまでをイメージして作ることが大切です。
「見ました。カッコよかったですよ。」
はい終わり。。。
ってそれじゃつまんないですから。
Webっぽく言うとコンバージョンを意識して作ろうよってことです。
企業や事務所、時にはクライアントさんに声をかけてもらえるように作ったほうがいいです。
また、これをきっかけにエンジニアはデザインを、デザイナーはエンジニアリングを考えて実装していくことも大切だと思います。
転職活動で不安な方は、お気軽にお申し込みください。
デザイナーの初任給が大手代理店を超えますように！
Search
