Webデザイナーへ転職をする為にはポートフォリオや実績は必須。
コツコツと作品を集めて、ポートフォリオにまとめていくけど上手くまとまらない。
もしかすると、ポートフォリオの表現不足が原因かもしれません。
面接現場ではできるだけ簡潔なポートフォリオの方が情報を把握しやすいのですが、ちょっとインパクトにかけるというかせっかくのデザインセンスをそぎ落としたポートフォリオも多いのです。
私が推奨するポートフォリオも同じ部類ですが、今回はその中にできるだけ「インパクトを加えたい」、「少しでも目を引きたい」といったファーストインプレッションを前提にした提案を考えていきます。
デザインイメージは記事の中であれこれと書き続けてもなかなかイメージが伝わらないので、今回は現役クリエイターさんの作品サイトを参考にご紹介していきましょう。
目次
Webデザイナーのポートフォリオ ８選
今回は個人の紹介よりも、「このサイトのこの表現は目を引くよね」に重点をおいて解説していきます。まずは、Web業界で活躍する先輩達のポートフォリオです。
Joyce Van Herck
Joyce Van Herck
ロンドン在住ベルギー人のポートフォリオ。
作品を縦に並べたランディング的なポートフォリオで、作品画像に直接リンクを設置しています。
つくりとしては簡単なので、真似しやすいポートフォリオの作り方ですね。
良いテンプレが見つからない、時間がない時はこの手法をためしてみてはどうでしょうか。
oniguili
oniguili
ご自身のWebサイトの一部に実績紹介をしています。モノクロページで統一されたデザインは一定の品高い体裁が感じられるので遷移先のサイトのクオリティも期待できる印象です。もちろん実績サイトの質は最高ですね。
Webサイトをバリバリ作ってこられたWebデザイナーはご自身のキャリアにあわせられる構成ではないでしょうか。
逆に言うと未経験の方には向かない構成でもあります。
noromo.jp
normo.jp
シンプルでインパクトありますね。体裁的には自己紹介ページの参考にちょうどよいかもしれません。
できることを書き加えて、あとは実績ページをつくっておけば未経験の方でもこのWebデザインは扱えそうです。
FR／LAME MONGER BARON UEDA
FR／LAME MONGER BARON UEDA
国内外で活躍しているグラフィックデザイナーさんのポートフォリオサイトです。
イントロ部分の動きや遷移する度にちょっとしたアクションがあり、Webデザインのセンスが冴え渡っています。
Webサイト制作の実績が多い方は同じようなポートフォリサイトをチャレンジしてみてはいかがでしょうか。
STUDIO GRUB
STUDIO GRUB
モックアップ形式で作品を紹介しているポートフォリオサイトです。
この手法によって作品のイメージをリンクさせているので伝わりやすいで、Webデザイン以外でも作品をお持ちの人にはおすすめの表現方法です。
maima.me
maima.me
開閉式／アコーディオン形式のポートフォリオサイトです。Webサイトで詳しい情報をあえて省く為に使う手法ですが、逆の使い方で上手く活用しています。
htmlにjsで組み込めばたった1ページで作れてしまうというスマートな所もいいですね。もし、私が転職活動するなら、すぐに準備ができそうなこの手法を採用してしまうかもです。
KATOSHUN.com
KATOSHUN.com
モックアップ形式と横スライドを組み合わせたポートフォリオサイトです。
おや？ズレている？と思いましたが、ちゃんと横にスライドさせるアイコンも実装しているのでなるほどと関心してしまいました。
4430デザイン室
4430デザイン室
サイトトップに入口があるポートフォリオサイトです。
実績一覧はピンタレストのような構成なのでなんとなく「ここをクリックすればいいのかな」と操作しやすい構成になっています。
多方面で紹介されているWebデザイナーのポートフォリオ ６選
とりあえずポートフォリオで検索すると一度は出会うサイトを集めてみました。
Mana’s Portfolio Website
Mana’s Portfolio Website
ブロガーでありウェブクリエイターボックスの人のポートフォリオ。おそらくポートフォリオの作り方を勉強するときに一度はこのサイトに出会った事があるのでは？
近いテンプレを探してきてサイト構成を踏襲しながらポートフォリオサイトを作ってみてはいかがでしょうか。未経験の方も手始めにポートフォリオを作るならありかもしれません。
S5-Style
S5-Style
スクリプトバリバリのポートフォリオサイトです。
もちろんコードを書きまくれる人はご自身のスキルを紹介できる一つの手段なのでチャレンジしてみてもいいですよね。
コードに自身が無い人は有料テンプレとかで似たようなのを探してきて画像やテキストを差し替えていけば、雰囲気だけは寄せれるのではと思います。私はその方法でポートフォリオを用意して転職した経験ありますよ！
フクシマナオキ
フクシマナオキ
サムネイルをポップアップ形式で拡大して実績紹介をしているポートフォリオサイトです。余白を活かした丁寧なサイトデザインなので分かりやすいですよね。
htmlがかけてJsが少しできますというWebデザイナーさんはスキルの紹介もかねて同じような構成でポートフォリオをつくってみてもよいかもしれません。
TAIKI KATO
TAIKI KATO
アートディレクターさんのポートフォリオサイト。上流で仕事をしているので、Webデザイナーのポートフォリオとは違いデザイン技術やスキルの紹介ではなく、サイト作りの企画提案／ブランディングといった領域の説明を加えてご自身の実績を紹介している。
将来的にステップアップして同じようなポジションを考えている方は是非参考にしてみてはどうでしょうか。
moufdesign
mouefdesign
モックアップ形式のポートフォリオサイト。サムネイルをマウスオーバーするとちょっとしたかわいいアクションも実装されていてバランスの良い仕上がり。
もし、テンプレであるなら絶対使いたいサイトです。
hasegawahiroshi
hasegawahiroshi
自己紹介を最初に表示させて、「私が何者なのか」を伝えたポートフォリオサイトです。フリーランスの方なので同業に人はこの構成でポートフォリオを作ってみるのがよいのかなと思います。
未経験の方も最初に自己紹介やスキル紹介をしておくと面接時にどのような人なのか把握しやすいので同じ様にこのサイト構成を活用するのをお勧めします。
国内外で活躍する写真家のポートフォリオ ７選
1枚の写真で全てを伝えている写真家さんのポートフォリオはシンプルながら説得力のあるサイト構成で作品を紹介しています。個人的にはWebデザイナーのポートフォリオより参考になるのかもと思います。
写真家 青山裕企
写真家 青山裕企
写真家さんはひとつのテーマというか何かを軸に写真と取り続けるのですが、この方はガールズフォトです。同じテーマで取り続ける事で被写体の良さを引き出していきます。
なので、雑誌表紙撮影でも活躍している事がポートフォリオからも分かりますね。写真の切り取り方や見せ方でグッとくる方法もわかります。
小林大輔写真事務所
小林大輔写真事務所
初めて見たときはPCが壊れたのかと思いましたが、ポートフォリオサイトの演出なのですね。
サイト構成はサムネイルからのポップアップ形式で作品紹介をしています。ひとつひとつの作品をものすごく作り込んでいるので、ポップアップすると効果絶大です。
Takumi Taniguchi Photographer
Takumi Taniguchi Photographer
サムネイルを切り替える形のポートフォリオサイトです。ページ遷移が煩わしいと感じる方は、この形で作品紹介するとよいでしょう。
拡大画像を切り替える簡単なソースはjQ等でサンプルは沢山あるので静的ページに実装して似たようなポートフォリオサイトを作成する事は可能です。
Nagi Yoshida
Nagi Yoshida
トップページだけで作品紹介できそうなポートフォリオサイトです。
写真家さんの中では同じような形の構成でサイトを構築している人が何名かいました。
デザイン力を見せたい方は同じようなサイト構成でポートフォリオを用意してもいいかもしれませんね。
黒岩正和
黒岩正和
同じくトップページだけで作品紹介できそうなポートフォリオサイトです。
テーマが違うだけでこんなにも印象が変わるのですね。
山本タカシ
山本タカシ
立てスクロールでご自身の作品をサムネイルにしてまとめているポートフォリオサイトです。
最初はちょっと寂しい感じのページでしたが、単純なスクロールとクリックするだけなので扱いやすい構成です。
自動スクロールしているのも面白いですね。
SHUAKASHI.
SHUAKASHI.
この方のもとで私の知り合いがアシスタントで修行していたそうです。
被写体を引き立てる手法が独特で引き込まれますね。サイト構成はスライド型のサムネイル形式のみという無駄のなさ。
Webデザイナーのポートフォリオとしては真似できない部分が多いですが、作品に引き込ませす力があればこれくらい単純なサイトでも十分ですね。すごい。
その他のポートフォリオ ６選
ポートフォリオはWebデザイン以外でもさまざまな形で活用されています。以下の事例紹介もまとめておきます。
書家
宮村弦
宮村弦
田川悟郎
田川悟郎
Webデザインのキュレーション デザインギャラリー
foliofocus
foliofocus
choicely
choicely
io3000
io3000<
イケサイ
イケサイ
デザインはできるけど今はコードが書けないという人は
ウェブサイト制作はサイト構成、Webデザイン、コーディング、プログラムへのマージもやらないといけないのでかなりの時間がかかります！
今はまだここまでのサイトが作れないという方は、迷わずにテンプレを活用しましょう。
等サイトの記事でも厳選したテンプレを紹介しているので参考にしてください。
【関連記事】テンプレを活用したポートフォリオで面接対策をしておこう！
coffeebreakの中の人（@ra_cer_X）です。
転職に強いポートフォリオ作りたいよね！