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

Web制作 , デザイン系 1月 17, 2017 No Comments

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

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

SHOGO TABUCHI

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

fwa-900x575_01-0C9B

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

Takumi Hasegawa

https://tkmh.me/

20160713174807

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

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

Nobumitsu Hata

http://nobumitsu-hata.com/

20160921212905

エンジニアの方でしょうか。秦 頌光氏のポートフォリオサイトです。
内容は少ないですシンプルでかつアイデアが詰まったとっても見やすいサイトですよね。
エンジニア経験は2年だそうですが、どうやったらこんなコード書けるんでしょうか。
私はjavascriptがとても苦手なので勉強方法から勉強したいです。
恐れ入ります。

Manato Kuroda

http://manato.ca/

20160920100921

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

MAKOTO HIRAO

http://mako.red/

20160917191033

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

CODE IS DESIGN

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

Yasuhiro Yokota

http://yasuhiroyokota.com/

1493524201

まるで海外サイトのようですね。優しい色使いが”この人、いい人そうやな”ってなります。
一つ一つの作品の写真がめちゃくちゃキレイ。作品にとってもこだわりを持って制作・企画しているのがとってもよく伝わります。
もし僕がクライアントであればブランディングまで丸ごとお願いしたくなります。

”東京都で活動するフリーランスのWebディレクター・デザイナー・デベロッパー。在学中にデザイン事務所勤務後、都内地方自治体の情報政策部門を経てフリーランスに。現在はデザインチーム・LAUNDRYに参画しています。”
とのことです。
一人三役なんて私には務まりません。

TAIKI KATO

http://taikikato.jp/

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

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

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

YOSHIYUKI KUBO

http://kbkbkb.org/

953926677

ロゴも可愛い。赤の差し色がいい!
そして写真の構図がとってもいい!!!

スクロールした時にロゴが同じ場所にあり続けて、写真と重なるあたり、すごくツボです。
撮影もできるデザイナーさんは頼もしいですよね。
これからデザイナーを目指すならカメラができるってのはとても強みです。

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のカラーパレットに”オシャレ”ってゆう名前で登録しておきたいぐらいです。
ちなみにこの類のレイアウトはスマートフォンで見た時の方がわかりやすいです。

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

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

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

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

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

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

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

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

まとめ

ポートフォリオサイトは情報設計の基本中の基本だと思います。
なぜなら自分のいい部分を客観的に見て、情報に優劣をつけながら見せていけなければならない。
自分のことがわからない人に、これから合うクライアントさんの情報設計などできないもんね。

そして、ポートフォリオサイトを見た人にどういったアクションを起こして欲しいかまでをイメージして作ることが大切だと思います。

「見ました。カッコよかったですよ。」
はい終わり。。。

ってそれじゃつまんないですから。

Webっぽく言うとコンバージョンを意識して作ろうよってことです。企業や事務所、時にはクライアントさんに声をかけてもらえるように作ったほうがいいです。
また、これをきっかけにエンジニアはデザインを、デザイナーはエンジニアリングを考えて実装していくことも大切だと思います。

海外デザイナーのポートフォリオのまとめはこちらから

Webアワードを狙っている方はこちらにエントリー費用や表彰状のことが書いています。

ほなね

【PR】 社会人のための<格安>語学留学【寮・食事付き】172,000円/1ヶ月 の完全マンツーマン留学 フィリピン政府公式認定語学学校【NILS】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です