「専門スキルを伸ばす VS 幅広い領域に挑戦する」フリーランスの生存戦略討論
- スキル
- フリーランス/個人事業主
- 座談会
「転職活動のためにポートフォリオサイトを作りたい!」
「そのために、有名なWebデザイナーのポートフォリオサイトをたくさん見て参考にしたい!」
という方へ。
複数の現役デザイナーへのヒアリングのもと厳選した、Webデザイナー、フロントエンドエンジニア、フォトグラファー、アーティストのおしゃれなポートフォリオサイトをご紹介します。
ぜひ、ご自身のポートフォリオサイトを作るときの参考にしてください。
(※ 取材協力:株式会社GIGのデザイナーの皆様)
(※ 掲載は順不同)
フリーランスのポートフォリオ作成方法。事例やおすすめの制作ツールも解説
Workship MAGAZINE
目次
アートディレクターでフロントエンドエンジニア、Webデザイナーの田渕将吾さんのポートフォリオサイト。画像にエフェクトをかけたり、シームレスにページが遷移したり、サウンドに合わせてビジュアライズしたり、これらのコーディングも田渕さん自身で手掛けています。
マウスの動きに合わせて背景が動いたり、マウスオンで画像の色が繊細に変化したり、遊び心が満載のサイトです。一部の画像だけでなく、ポートフォリオサイト全体にアニメーションが駆使されているので、どこにカーソルを動かしても楽しめます。
過去の仕事実績をただ並べるよりも、自分の時間と能力をフル活用してポートフォリオサイトのクオリティにこだわれば、もっともシンプルで分かりやすいポートフィリオができますね。
東京を拠点に、主にインタラクションデザイナーとして活動する代島昌幸さんのポートフォリオサイト。
アクセスした瞬間に登場する、人の顔を模したモジュールに注目してください。マウスの動きや方向に合わせて向きを変えたり、色やテクスチャまで変化します。音楽もスタイリッシュで格好よく、ページ遷移の動きまで各所に魅せる表現が満載です。
関連SNSは分かりやすくアイコンにし、右上にまとめて配列。分かりやすさとシンプルさ、デザイン性を兼ね備えた代表例といえるでしょう。
アートディレクター、グラフィックデザイナーであるHIROKA HASEGAWAさんのポートフォリオサイト。手掛けた広告ビジュアルが画面全体に表示されるデザインで、見やすくインパクトもありますね。白をベースカラーに据え、シンプルであるにも関わらず印象的です。
「hotel koe tokyo」のサイトデザインをはじめ「AGILE COSMETICS PROJECT」の全面プロデュースを手掛けるなどマルチに活躍されています。
コスメやファッションなど、第一印象で勝負するデザインが得意なデザイナーさんにおすすめの配置ですね。
デザイナーでアートディレクターのオオタタカヤさんのポートフォリオサイトです。オオタさんがディレクションしたWebサイトやロゴなど、18の作品がすぐに見られます。
サイトのメインカラーは白と明度が高いブルーの2色。作品にマウスを当てると、それぞれのメインカラーが背景に表示されるデザイン設計が特徴的です。
またそれぞれの作品をクリックすると、統一されたレイアウトで写真と説明文があらわれるため、オオタさんが「いつ」「どのような仕事に」「どんな立場で」関わったのかわかるようになっています。同ページには作品の制作過程も公開。デザイナーの制作理念やポリシーを理解してもらいやすくなりますね。
全体的にシンプルで無駄な情報がなく、余白をうまく使ったデザインが素敵です。
デザイン、ディレクション、コーディングを手掛けるトクダユウイチさんのポートフォリオサイト。
トップページにはご本人の写真とものづくりの信念を掲載していて、人との繋がりを大切にしていることが真っ先に伝わるデザインです。トップページにご自分の写真を載せていると、信頼感が増して今後のお仕事に繋げやすくなりますね。白を基調としたデザインは見る人が安心した気持ちになるだけでなく、「Works」で紹介している自身の作品そのものの良さを最大限に引き出しています。
またトクダさんは「About」と「Works」で自分と自分の実績を紹介してるのに加えて、「Blog」で普段やっていることを発信しています。「Blog」には、トクダさんが撮影した写真がメインで載っています。トクダさんの人柄が伝わってくるようなあたたかい内容のブログです。
仕事内容だけでなく、ご自身のことも知ってほしい方はトクダさんのポートフォリオサイトを参考にしてみてください。
Webデザイナー、フロントエンドエンジニアTakeshi Oideのポートフォリオサイト。グラフィカルなトップページが印象的です。
メニューは「WORK」「ABOUT」のみとシンプルながら、思わずいろいろなところをクリックしたくなったり、ずっと眺めていたりしたくなる意匠がいたるところに施されています。遊び心満載のデザインからは成果物のイメージもわきやすいため、依頼する側としてもメリットだらけですね。
こちらのポートフォリオサイトを訪れたら、ぜひさまざまなところをクリックしたり、ページ遷移したりしてみましょう。
インタラクティブデザイナーであるオカモトジュンイチさんのポートフォリオサイト。Webサイトの企画と制作を行いながら、インタラクティブアートの制作もしています。
ランダムに動く無数の赤い丸と、グレーの線が印象的なポートフォリオサイトです。過去実績も円形にトリミングされていて、統一感のあるデザインに仕上がっています。
「About」「Works」「Art & Design」「Contact」という項目のほか、一番上には「Message」という項目があります。
「The great human revolution in a one human being changes the fate in the world soon」がオカモトさんのメッセージ。自分が大切にしている言葉や信念、座右の銘などをこうしてポートフィリオサイトに表示すると、自分がどんな人間なのか深く知ってもらうきっかけになるかもしれませんね。
東京を拠点にフリーランスデザイナーとして活動する、フクシマナオキさんのポートフォリオサイト。クライアントとしっかりコミュニケーションをとり、クライアントの望むWebサイトかつユーザーが操作しやすいWebサイトを作ることを大切にしていらっしゃいます。
「Concept」という項目で、フクシマさんの仕事への姿勢や信念が伝わってくる文章が掲載されています。顔の見えない相手に自分自身をきちんと知ってもらう手段として、文章はとても良いツールですね。
他のポートフォリオサイトと異なって文章の割合が多いですが、余白を多く使ったり1ページ内でサイトを完結させる工夫をすることで、ストレスなく読み進められるようにデザインされています。
文章で表現することが好きな方に、とくにおすすめのポートフォリオサイトです。
イギリスを拠点に活動するWebデザイナーでフロントエンドエンジニアである、Mike Inghamさんのポートフォリオサイト。世界中のクライアントに、シンプルで使いやすいインターフェースを設計しています。
黒い背景に写真を配置したシンプルなデザイン。どんな仕事をしているかイメージがつかみやすく、すぐ下に連絡先フォームもあるためコンタクトも取りやすいのが特徴です。
メニューは「ABOUT」「CONTACT」の2つのみ。項目の内容はとてもシンプルで無駄がありません。一方で仕事ごとにメインカラーが異なっておりオレンジや水色など明るい色が使われています。シンプルながら鮮やかさも兼ね備えているデザインです。
カナダのバンクーバーを拠点に活動するWebデザイナーでエンジニアの、KurodaManatoさんのポートフォリオサイト。自らのスキルを、フロントエンドとバックエンドに分けグラフで表しているのが面白いですね。
背景の水玉がランダムに動き、大小の大きさがバラバラなので、サイトに奥行きを感じます。
また、「About」という項目では自分の好きなもののイラストをスライド式で紹介しています。ポップなデザインが魅力的な上に、自分のことを知ってもらうきっかけにもなるいい手段です。
スクロールするとサイトの全体カラーが変化するという遊び心も、見ている人を楽しくさせる粋な演出ですね。
WebデザイナーであるHasegawaHiroshiさんのポートフォリオサイト。
「サービス内容」や「ご依頼方法」のなかに、事前にできることとできないことやデザイン依頼前に準備してほしいもの、対応できるデザインの範囲などが詳しく記載されています。ユーザー目線に立ち、使いやすいWebサイト制作にこだわっていますね。
Webデザインを依頼するのが初めて、という人を対象にポートフォリオサイトを作りたい場合は、とても参考になります。
東京を拠点に活動するグラフィックデザイナーでWebデザインも手掛ける、尾花大輔さんのポートフォリオサイト。白を基調としたサイトはとてもシンプルで、無駄な情報はありません。
作成したWebサイトや作品は、線画や棒線、丸型の図形が散りばめられていて、シンプルながらも遊び心を感じさせます。
すべての作品に統一された「らしさ」があると、作風がより明確になり、クライアントが完成形を想像しやすくなりますね。
デザイナー・エンジニア・フォトグラファーのフリーランスとして活躍するYUTO TAKAHASHIさんのポートフォリオサイト。海外のアワードで多数受賞しているTAKAHASHIさんの作成するサイトは他を圧倒するアニメーションで独自の世界観を演出しています。
作品の見せ方まで徹底的にこだわっていて、見れば見るほどTAKAHASHIさんの世界へと引き込まれます。
最新の技術を駆使した世界レベルのポートフォリオサイトを参考にしたい方にはおすすめです。
Webデザイナーである加藤俊司さんのポートフォリオサイト。株式会社クライマークスの取締役でアートディレクターである加藤さんの自社サイトや制作したサイトを掲載しています。作品をデスクトップの形で掲載しているので、どのような完成形なのかクライアントは把握しやすいですね。
「Blog」をクリックするとレスポンシブWebデザインに関するまとめ記事が多くみられます。
記事というかたちで自分の強みを外にアピールするというのは、「〇〇ができます!」とただ書くよりも説得力がありますね。
Webデザインやディレクション、アプリデザインを手掛けるImakitaMaiさんのポートフォリオサイト。
ImakitaさんがデザインしたWebサイトが白を基調としてシンプルに並んでいるので、ポートフォリオとしてはとてもわかりやすいサイトです。
ページは1ページのみなので、わかりやすいポートフォリオの基本形として参考にしてみてはいかがでしょうか。
グラフィックデザイナーでWebデザインも手掛ける北尾知大さんのポートフォリオサイト。
「Work」「About」「News」などの項目にそれぞれついている、シンプルなイラストアイコンがおしゃれです。
シンプルでありながらも独特な世界観を表現しているポートフォリオサイトは見ていて面白いですね。
プランニング・ディレクターで、デザイナーとしても活動する宇都宮勝晃さんのポートフォリオサイト。
トップページに過去にデザインした作品の名前が掲載されており、カーソルを合わせると、背景にアニメーションが流れる細かいこだわりもあります。
自身が作成したWebサイトの概要をわかりやすく写真で説明し、PCの他にスマートフォンやタブレットで見たときのデザインも掲載しています。
余白をうまく使って無駄な情報をなくし、かつ飽きさせないデザインが素敵です。
東京を拠点にデザイナー、アートディレクターとして活動する加藤タイキさんのポートフォリオサイト。Webデザインをはじめ、ロゴやブックカバー、ポスターのデザインを手掛けています。
加藤タイキさんのポートフォリオサイトはグリットデザインを採用しています。全画面の3カラムをベースとしながら、画面幅を狭めていくごとに2カラム、そして最終的に1カラムのデザインです。
また仕事実績がすぐにわかるよう、ホームページに代表的な作品が並べられているので、クリックするとすぐに作品を見られるようになっています。クリックしなくてもカーソルを当てるだけで、作品のタイトルとポスターやロゴなどの作品カテゴリーがアニメーション表示されます。サイトを訪れたユーザーがストレスを感じないように、ページ遍移をなくす工夫がなされているのです。
グラフィックデザイナーでコンセプターの、カワセタケヒロさんのポートフォリオサイト。作品サンプル、プロフィール、連絡先、そしてカワセさんの哲学を1ページにまとめています。
カワセさんのポートフォリオサイトは縦書きの文字で構成されているのが大きな特徴。通常のWebサイトは横書きのイメージが強いため、サイトを見る人にインパクトを与えます。また文字を縦書きにすることで日本語の良さが際立ち、ひとつひとつの言葉に強さを感じます。
「Philosofy」という項目で綴られているのは、カワセさん自身が仕事に向き合う姿勢や信念。これらをシンプルに文章にまとめることで、読む人にストレートな思いを伝えられます。
「他人と違うような印象的なポートフォリオを作りたい」という人におすすめのデザインです。
Webやグラフィック、ゲームのインターフェースデザインを手掛ける勘村洋和さんのポートフォリオサイト。「Portfolio」「About」「Contact」の項目が1ページで全て見れるデザイン設計です。
仕事実績のページでは、Webサイトのデザインはパソコンのかたちのアイコン、スマホゲームデザインはスマホのかたちのアイコンというように、どのような媒体でどんなものを作ったのかが一目で分かるようになっています。
三角や丸、棒線などのシンプルな図形を、色を変えて散りばめることで、見ててわくわくする背景デザインが出来あがっています。
デザイナーであるえともじさんのポートフォリオサイト。グラフィックデザインだけでなく、スマホカバー、小さな置物、時計など、自身のデザインをもとに制作した雑貨も掲載しています。
「PRICE」の項目にはWebデザインや名刺デザイン、個人のロゴ制作にかかる費用を細かく記載しています。こうした配慮は仕事を依頼する側にありがたいですね。
企業や団体の依頼は基本的にNGで、個人の制作活動をサポートする活動のみをおこなっています。
無駄のないデザインで情報発信を重視したい方におすすめのポートフォリオサイトです。
グラフィックデザイナーの酒井博子さんのポートフォリオサイト。パッケージデザインやポスターの制作、グラフィックデザインを手掛けています。トップページに90以上の作品がすっきりとした配置で並んでいるので、仕事内容がひとめでわかります。
作品に色味が多く使われているため、背景はシンプルなグレーとなっています。左のカテゴリーボタンを押すと、そのカテゴリー以外の作品がグレーアウトし、作品が浮かび上がるようにデザインされているので見やすいです。
また、気になる作品をクリックするとその作品のポイントがわかりやすく写真で紹介されるので、数が多くてもストレス無く見ることができます。
ポートフォリオサイト自体はシンプルなので、回遊しやすいデザインですね。
『Progate』のWebデザインを担当しているWebデザイナーである、Kuon Yagiさんのポートフォリオサイト。ネイビーを基調とした少ない色味でデザイントーンがまとまっているところが印象的です。
アニメーションがスルスル動いてユーザーにとって使い心地もよく、シンプルかつおしゃれなサイトです。自分のスキルセットを棒グラフで表しているのは視覚的にもわかりやすく、面白い表現方法ですね。
作品はどんな媒体で、どんなものを作成したのかわかるように掲載されているので、クライアントは完成形がどのようなものになるか想像しやすいです。
ユーザー目線にとことんこだわっているポートフォリオサイトになっています。
デザイナーであるIshihara Yuさんのポートフォリオサイト。
できることを短い文章にシンプルにまとめて書いているので、初めて見た人がわかりやすいポートフォリオになっています。
スクロールすると内容が先に出てきて、背景が後からついてくるという斬新なアイデアを用いています。デザイナーの独自性をサイトにデザインとして組み込むと、作品集を見なくてもデザイナーの強みがわかりますね。
Webデザイナー兼エンジニアである、Ken Toshikuraさんのポートフォリオサイト。黒を基調としたシンプルなデザインは作品の良さを際立たせています。
一定時間経つと作品が自動的にスライドするところが特徴的。美術館に来たような気分で作品をついつい見入ってしまいます。
作品をクリックすると、「パソコンから見たデザイン」「タブレットから見たデザイン」「スマホから見たデザイン」など詳しく見れるので、デザイナーのこだわりや強みを把握することができます。シンプルなデザインにこだわりたい方にはおすすめのポートフォリオサイトです。
デザインとアニメーションを制作しているDOMASOさんのポートフォリオサイト。サイトに訪れた際の可愛らしいキャラクターのアニメーションが印象的です。
鮮やかな青を使った背景はDOMASOさん特有の可愛らしい作品をより一層魅力的なものにしています。ポートフォリオサイト全体が可愛らしく、デザイナーとしてのセルフブランディングが確立していることがわかりますね。
エンジニア兼テクニカルディレクターのハセガワタクミさんのポートフォリオサイト。ファーストビューは、四角形や円形の物体が、集まったり離れたり波うったりして、ハセガワさんのWebサイトのロゴの形になったり、不思議な四角形になったりします。
ハセガワさんへ簡単に依頼できるように「About」にはメールアドレスやInstagram、TwitterなどのSNSアカウントが記載されています。「Works」のページではハセガワさんの仕事内容をもちろん見ることができますが、このファーストビューを見ただけで圧倒されるくらいのスキルをお持ちのようです。
ソースコードがnoteで公開されているので、フロントエンドエンジニア色の強いポートフォリオサイトを制作したい方は一度訪れてみてください。
東京を拠点に活動するデザイナーである、平尾誠さんのポートフォリオサイト。黒を基調としたスタイリッシュなトップページと斬新な自己紹介が、ユニークで才気溢れる平尾さんの人柄を感じさせます。
「キャッチコピーは”戦うフロントエンド”」など実際に会って詳しく話を聞きたくなるようなフレーズが散りばめられています。強烈な個性をシンプルに文章であらわす、というのはストレートでとても伝わりやすいですね。
エンジニアとして活躍しているYoichi Kobayashiさんのポートフォリオサイト。頭蓋骨と花のアニメーションが鮮明で印象的です。
Kobayashiさんはこのサイトをただのポートフォリオにするのではなく、自身の内面性、世代、身体性などのアイデンティティを表現したものと語っています。ただの作品集にするのではなく、自身の心情を取り込むことでユーザーに作成者のことを知ってもらうきっかけになります。
また、作品は旗にかたどったアニメーションで掲載されていて、技術の高さがうかがえます。スライドする際に旗が燃え上がる演出も魅力的です。
アートディレクター・WebデザイナーのTAKAAKI ISHIKAWAさんのポートフォリオ。スクロールすると、これまでの代表的な仕事や連絡先が分かるようになっています。黒を貴重とし、余分な要素を削ぎ落としたようなデザイン。人柄を含め、成果物のイメージもつかみやすいですね。
ページ遷移もとてもオシャレ。こういった細かい部分にも手を抜かない姿勢は、仕事にも表れているといえるのではないでしょうか。
TAKAAKI ISHIKAWAさんは個人プロジェクト「design studio drop.」も担っており、精力的に制作の幅を広げる姿勢に好感が持てます。
トップページの、淡いパステルカラーの配色が印象的なOTANIJYUNさんのポートフォリオ。イラストレーター、アートディレクター、グラフィックアーティストとして活躍されており、それぞれの仕事はトップページにあるメニュー「DESIGN」「ILLUSTRATION」から見られます。
ポスターやCDジャケット、アートブックなどを中心に手がけられている様子。原色を大胆に使ったデザインから、イラスト貴重のもの、モデルや商品に焦点を当てたものなど仕事の幅が広いのが見て取れます。依頼の方向性がまだ定まっていないユーザーでも、具体的な成果物のイメージがわきやすいのではないでしょうか。
写真家として活動している山本タカシさんのポートフォリオサイト。
トップページの中央で自分の撮影した写真がアニメーションでスクロールしています。1番下までいったらもう1度上へ戻る仕組みです。「BLOG」も枠を設けずに中央揃えになっており、サイトデザインへの強いこだわりを感じます。
自分のポートフォリオサイトを訪れた人に、まず撮影した写真を一通り見せるデザインがフォトグラファーらしいですね。食べ物の写真から人物の写真、広告までも手掛けていることが最初の画面でわかります。
女性フォトグラファーであるヨシダナギさんのポートフォリオサイトです。ヨシダさんは主にアフリカをはじめとする世界の少数民族や先住民を撮影しています。
サイトのトップページには撮影した少数民族の動画が次々と表示されているので、ヨシダさんの仕事内容がひとめでわかりますね。
作品ページでは写真が民族ごとにカテゴリ分けされており、さまざまな国を渡り歩いたヨシダさんの経歴がうかがえます。海外に馴染みがあり、インパクトのあるポートフォリオサイトを制作したい人は参考にしてみてください。
Nagi Yoshida(ヨシダナギ)Official Web Site
国内外で多数の受賞経歴を誇るフォトグラファー、MIKIYA TAKIMOTOのポートフォリオサイト。写真をメインで見せるために不要な要素を削って作成されたシンプルかつ美しいサイトです。
背景を白にしたシンプルなポートフォリオサイトは写真そのものの美しさで勝負するというTAKIMOTOさんの強い意志が伝わってきます。
また、文字にカーソルを合わせると音がなるという遊び心のある演出があり、ユーザーを飽きさせない配慮も垣間見えます。
DJやプロデューサーとして多方面に活動を広げるアーティスト、MIDORI AOYAMAさんのポートフォリオサイトです。トップページの顔写真はポリゴン加工が施されており、SFの要素を感じるデザインになっています。
またファーストビューだけでなく、今までの実績が一目でわかるデザイン設計にしたり、サウンドクラウドのウィジェットにも影をつけるなど細かい部分にも工夫が凝らされています。
かっこよくて個性的なポートフォリオサイトを作りたい方は参考にしてください。
映像作家TAO TAJIMAさんのポートフォリオ。トップページから目を引く映像の数々に、思わず手を止め見入ってしまいます。どの映像も印象的で、ページ遷移も芸術的です。
画面下部に配置されているボタンで、見る映像を自由に選べます。「About」や「Creative」などのページへわざわざ移ることなく見られるため、ストレスフリーになっているのも大きな特徴でしょう。
TAO TAJIMAさんは映像・デザインの企画制作会社「TANGRAM」に所属しており、前衛的な表現をする映像作家・デザイナーとして注目されています。
以上で現役デザイナーおすすめの、参考にすべきポートフォリオサイトをご紹介しました。
では実際に転職に向けたポートフォリオサイトを作成する際に気をつけるべきポイントは何でしょうか。自分の魅力を最大限伝えられるポートフォリオサイトを作成するには、以下の5つのポイントに注目しましょう。
<魅力を伝えるポートフォリオサイト作成のコツ>
- 伝えたい情報を整理する
- 使いやすさ/分かりやすさを意識する
- 自分の個性を反映する
- SNSやnote、ブログを活用する
- 顔写真を入れる
ポートフォリオサイトの目的は閲覧したユーザーに自分のことを知ってもらうことです。そのため自分の経歴や作品、スキルを整理して適切にサイト内に盛り込むことが必要になってきます。
デザイナー/エンジニアが伝えるべき情報は、以下のようなものが挙げられます。
<伝えるべき情報>
- プロフィール
- 作品/作品の詳細
- スキルセット
- SNSやブログへのリンク
- 問い合わせ先
とくに実績や受賞経歴などの「自分の強み」や「興味があるもの」をサイト内に掲載することは、転職時の採用担当者へのアピールに繋がります。
たとえWebデザインの技術が高かったとしても、ページが煩雑としていてユーザーが使いにくいものであると、採用担当者から高い評価は受けにくいです。
常に「見るのは他人である」ということを意識して、よりユーザー目線に立ったWebデザインを心がけましょう。
ポートフォリオサイトに自分の個性を出すことは非常に重要です。ポートフォリオサイトのセルフブランディングがよくできていると、自分が他者とは違う魅力を持っていることが一目で分かります。
たとえば自分の得意なスキルを使ったアニメーションなどを埋め込むと、自分の強みをアピールするポイントになるため効果的です。
より多くのユーザーに自分のポートフォリオサイトを見てもらうためにはSNSやnote、ブログの活用は欠かせません。SNSなどで普段から発信したり、noteで充実したコンテンツを作成したりすることにより、新しい仕事を得るきっかけになる可能性もあります。
人材としての価値を高められる上に、ポートフォリオサイトへの新たな流入をはかれる有効な手段です。
プロフィールの項目にはなるべく自分の顔写真を入れましょう。相手の顔がわかるだけで、ユーザーからの信頼感は高まります。
今回ご紹介した中には、ポートフォリオサイトのトップページに自身の顔写真を入れている方もいます。魅力的な表現方法のひとつとして、ぜひご参考にしてください。
ポートフォリオを充実させることは、「あなた指名の仕事をもらいやすくなる」というメリットもあります。ポートフォリオに記載した成果をもとに、フリーランスとして独立する人も多いです。
実際、あなたが知り合い以外に営業する場合、あなたのことを知る材料はポートフォリオやSNSなどしかありません。そのため、フリーランスとして活躍したい場合はポートフォリオを魅力的なものにすることは欠かせないといえるでしょう。
(執筆:Emily 編集:Shinohara Kyohei 取材協力:株式会社GIG)