イケてるWebデザインで作られたポートフォリオサイト20選まとめ

  • このエントリーをはてなブックマークに追加

Webデザイン ポートフォリオサイト まとめポートフォリオサイトに載せたい作品は決まっても、肝心のポートフォリオサイト全体のデザインが思いつかない、なんてご経験もあるのではないでしょうか。

転職においては、ポートフォリオサイト自体のWebデザインも評価の対象となります。決して手を抜かず、魅力的なデザインと構成にすることが大切です。

であれば、一流の人が作成したクオリティーの高いポートフォリオサイトを参考にすることが、そのためには近道でしょう。

世の中には一体どんなポートフォリオサイトが存在するのか、今回は、ぜひ参考にしたい魅力的なポートフォリオサイトの紹介と、アピール力を増すために押さえておきたい6つのポイントについて解説します。

一流を目指すなら、一流から学ぼう

ポートフォリオサイトは、ただ作品を掲載するだけにとどまらず、それ自体で、自分の個性やセンス、スキルをアピールできるアイテム。したがって、こだわればこだわるほど、その作成者のデザイン性を色濃く表現することができるでしょう。

自分らしいポートフォリオサイトを作成するために、世のクリエイターたちは、さまざまなアイデア、Webデザイン、構成の仕方を熟慮しています。これまでにポートフォリオサイトを作ったことがない人でも、一流のクリエイターが作ったポートフォリオサイトを参考にすることで、新しい切り口やWebデザインを勉強することができるかもしれません。

それでは、早速参考にしたい20のポートフォリオサイトをご紹介できればと思います。

Webデザイナー・Webディレクターのポートフォリオサイト

UNDERLINE

UNDERLINE

フリーランスとしてディレクション、デザイン、コーディングを手がけている徳田優一さんのポートフォリオサイト。そのトップページは、アイコンや画像を効果的に配置することによって“何をしてくれる人なのか”というポートフォリオサイトにおいて最も素早く伝えたいことがわかりやすく一目瞭然になっています。

加えて、WebデザイナーWebディレクターのポートフォリオサイトでは比較的珍しく、Aboutページだけでなく、ファーストビューにご自身の顔写真とひと言メッセージを載せています。これにより個性や信頼性が伝わってくるのも素敵です。

白を基調としたWebデザイン自体はシンプルでありつつも、ブログ記事の収まりも含めて統一感があり、ページ下部に各ページへ遷移するボタンを設置している点など、サイト内の回遊もしやすい作りになっていると言えます。

参照:UNDERLINE

平尾 誠

平尾 誠

デザイン会社ARUTEGAを主宰するWebデザイナー平尾誠さんのポートフォリオサイト。トップページには「Code is Design」という自身のコアとなる考えが大胆にレイアウトされており、Webデザイナーとして大事にしているポリシーが伝わってきます。また、ファーストビューであえて文字を画面右側に大きくはみ出すことで、目線を誘導。横スクロールを予感させるデザインになっているのにもこだわりを感じます。

構成はシンプルに過去実績をまとめた「Works」と自身の紹介である「About」。画面右上には常に「Works」「About」いずれかのページへの導線が設けられており、いつでも迷わずに遷移できるような設計になっているのもポイントです。

「Works」のサムネイル画像をクリックすると実績の詳細へ。ここでは制作領域・制作ポイント・プロセスなどが詳しくまとめられています。ポートフォリオの大事な要素である「どのような意図で制作したのか」もしっかり言語化できているので、見せ方を含め、とても参考になるでしょう。次の制作実績に遷移する際の、ページ全体を使ったアニメーションもテンポがよく印象的です。また「About」ページでは、スキルセットや自身のWebデザインに関する信念が日本語と英語で併記されており、海外からのオファーを視野に入れている点も注目です。

参照:Makoto Hirao / ARUTEGA Inc.

present.

プランニング・ディレクター、デザイナーとして活動している宇都宮勝晃さんのポートフォリオサイト。スクロールエフェクトと、画像にマウスオーバーした際の動きが目を引きます。その動きは派手ではなく、あくまでもシンプル。“品のよいちょっとした動き”が心地よさを演出していると言えます。

また、トップページに過去の実績が表示されていて、どんなことをしているのか伝わりやすい構成となっています。実績が案件ごとにていねいに紹介されている点にも注目。プロジェクトの概要だけでなく、自身が何を目指した結果、こうしたデザインに仕上がったのかが簡潔に記されています。

Aboutページにおいても、制作における自らのコンセプトを飾らない言葉で記しつつ、余白をふんだんに用いることで読みやすさも備わっています。文字と画像のバランスのよさも十分感じられるポートフォリオサイトです。

参照:present.

S5 Studios

アートディレクション、Webデザイン、空間デザイン、フロントエンドエンジニアリングなど、多方面で活躍している田渕将吾さんのポートフォリオサイト。

まずなんといっても目を引くのは、画面全体を駆使したアニメーション。スクロールすることで動きが出るWorksページや心地よく流れるBGMなど、サイト全体に行き渡った工夫が、訪れたユーザーをワクワクさせてくれます。技術をふんだんに用いつつ、Aboutページでご自身の顔写真を掲載している点やInfoページでメディア掲載情報や受賞歴を掲載している点も、信頼性を高めていると感じます。

参照:S5 Studios

maima.me

Webディレクション、デザインを手がけているMAI IMAKITAさんのポートフォリオサイト。掲載されているのは、自己紹介と実績のみ。1ページで完結していて、まさにシンプルの極みといえるポートフォリオサイトです。

過去の実績が縦1列で中央に並び、シンメトリカルで目を引くデザインになっていることに加え、手がけたWebディレクション、Webデザインはカラフルなものが多く見受けられます。ポートフォリオサイト自体が白を基調にしているので、これら実績がとても引き立つようになっているんですね。

個々の実績は、画像をクリックすると折りたたみが開かれて詳細がわかる仕組みになっています。どんなプロジェクトで、何を担当したのかが簡潔に記され、時には「景色が昼、夕、夜と、イラストが変化するような画面設計」といったように、画像だけでは伝わらない仕様も文章にしてしっかり伝えています。また、案件に関わった企業や団体、他のクリエイター名をクレジット表記しているところも、信頼性につながっているといえるでしょう。

参照:maima.me

KATOSHUN.com

KATOSHUN.com

Webデザイナーとして活動している加藤俊司さんのポートフォリオサイト。「WORKS」「ABOUT」「MESSAGE」が1ページ構成になっていて、左のメニューバーからアンカーリンクで遷移することができます。目を引くのは、スクロールするごとに、メニューバーとメインの情報の間の画像が変化すること。ちょっとした遊び心を加えながらのサイト作りがなされています。

また、「Blog」にはレスポンシブWebデザインに関する記事を多く掲載。当然ながらご自身のサイトもレスポンシブ対応がなされていて、スマートフォンで閲覧した場合、過去の実績がスライドで見ることができます。自らの“強み”が明確にあるクリエイターは、加藤さんのようにBlogを格納したり、自らのポートフォリオサイトでその技術を体現することは、とても有効だと言えます。

参照:KATOSHUN.com

jojo design

jojo design

jojo design名義でインタラクティブデザイナーとして活動中の岡本順一さんのポートフォリオサイト。Webサイトの企画、制作を担いつつ、インタラクティブアートの制作を手がけています。「Message」「About」「Works」「Art&Design」「Contact」が1ページ構成になっていて、左側のメニューバーからアンカーリンクで遷移できるようになっています。

サイトで多用されているモチーフは円。背景では円と線が印象的な動きを見せ、過去実績も円形にトリミングされていたりと、統一感のあるデザインとなっています。スタイリッシュかつ、見やすさも兼ね備えたポートフォリオサイトの好例です。

参照:jojo design

Mana

Webデザイナーなら一度は見たことがあるブログ『Webクリエイターボックス』。海外でも活躍するそのオーナーのManaさんは、ポートフォリオサイトのクオリティーの高さでも有名です。ポートフォリオ作成経験のない人は、まずは、このManaさんのポートフォリオを参考に着手してみてはいかがでしょうか。

転職活動においても、もしこのようなポートフォリオサイトを準備できれば、WordPressの基礎知識を持っていることが企業に伝わりますし、何よりも、これまでにどんな作品(成果物)を制作してきたのかが一目瞭然に伝わります。英語サイトも標準的に用意されていることから、グローバルな視点でポートフォリオサイトを作成していることもわかります。簡単そうに見えますが「これまでの実績を直感的にユーザーに伝える」ためのWebデザインが施されていると言えます。

参照:Mana

hasegawahiroshi

Webデザイナー長谷川寛さんのポートフォリオサイトです。無駄のないシンプルな構成に、大胆なフォント使いで遊び心を入れる余裕も感じさせるサイトです。トップページなどは、実際のポートフォリオのファイル(冊子)が連想されるようなデザインです。

このポートフォリオサイトで気が付くのは、提供サービスの種類や内容、これまでの実績が、「ユーザー目線」で配置されており、遷移に迷うことが全くないということ。これは、サイト設計をするWebディレクターWebデザイナー、UI/UXデザイナーなら、誰しもが押さえておきたい技術ですが、なかなか簡単にできるものでありません。ユーザーが欲しい情報をユーザー目線の切り口で説明されているため、ひと目で、どのような実績を持ち、どのようなサービスを展開しているのかがわかります。

参照:hasegawahiroshi

フクシマナオキ

フクシマナオキ

多くのポートフォリオサイトは複数のページに分けて作品やプロフィールを紹介していますが、フクシマナオキさんのポートフォリオサイトは珍しい「1ページ」構成です。シンプルながら洗練されたWebデザインで、伝えたいことがギュッと凝縮されています。Webフォントを上手に活用し、長すぎずシンプルすぎず、センスの高さがしっかりと伝わるポートフォリオサイトです。

モーダル表示で登場する実績も、携わった作品のトップページのファーストビューだけでなく、ページ全体、サイト全体が伝わるように細かく紹介していますし、ポートフォリオとしてあるべき姿に忠実なWebデザインが魅力的です。

参照:フクシマナオキ

MITSUGU TAKAHASHI

MITSUGU TAKAHASHI

デザイナー、エンジニアとして活動しているMITSUGU TAKAHASHIさんのポートフォリオサイト。白と黒、そしてグレー。画像、サイトともにモノトーンを基調としたデザインが、シンプルな統一感を醸し出しています。シンプルゆえに右側のメニューボタンや、下層ページの左側に出てくる「BACK(戻る)」が程よく目立ち、遷移しやすいところも魅力です。

また、ファーストビューで、右下に小さく「SCROLL DOWN TO SEE MORE」の文字が載っているところも、細かい配慮がうかがえます。そのまま下にスクロールしていくと、ご自身の使用言語・ツールもしっかり記されてるのも、仕事を依頼する側としては有難いところ。

「Projects」のページでは、マウスオーバーした際に画像が出現します。その動きと方向がそれぞれアレンジされているのも特徴的です。

※現在は閉鎖されています。

その他デザイナーのポートフォリオサイト

mouf design

mouf design

ウェブ、グラフィック、ゲームUIデザイン制作を行っている勘村洋和さんのポートフォリオサイト。勘村さんのサイトも、「Portfolio」「About」「Contact」が1ページで完結しているデザインで、右上のメニューバーでも回遊をフォローしています。

スクウェアなデザインの中に組み込まれた実績はアイコンのようで、マウスオーバーすると実績名が表示され、クリックすると詳細に飛ぶ仕組みです。可変グリッドレイアウトは、スマートフォンでも閲覧しやすいという利点もあります。

また、スクロールしていくとご自身の住所がポイントされたGoogleマップが組み込まれています。遊び心であると同時に、地方にお住いの方は「このあたりです」とユーザーに直感的に知らせる手だてとして面白いです。

参照:mouf design

musubime

musubime

グラフィックデザイナー、コンセプターとして活動するカワセ タケヒロさんのポートフォリオサイト。

サイトを訪れると出現する、縦書きのお名前。ここだけグラフィック処理された縦書きなのかな?と思いきや、その下に出現する理念など、テキストベース部分も縦書きとなっていて新鮮な印象をもたらしています。

基本は縦スクロールの1ページ完結で、それぞれの実績は横スクロールで展開。シンプルな構造でわかりやすいのも魅力です。また、カワセさんご自身の仕事の領域が広いため、実績部分においてもコンセプトなどを明確かつ簡潔に文章化されています。ビジュアルだけでは伝えきれない部分は、カワセさんのようにきちんと明記することも、ポートフォリオサイトとしては大切だと言えるでしょう。

参照:musubime

yasudatakahiro

yasudatakahiro

アートディレクター/グラフィックデザイナー安田昂弘さんのポートフォリオサイト。広告やプロダクトのブランディングやアートディレクション、デザインなど、幅広く手がける著名なデザイナーで、とにかく掲載実績が豊富です。サイトのデザインにグリッドレイアウトを用いることで、数多くの制作実績が、無駄なくすっきりとまとめ上げられています。一覧性に優れているため、バリエーション豊かな実績を網羅的に見せることができるのも、このポートフォリオサイトの特徴ではないでしょうか。

また、画像にカーソルを合わせると、制作領域や制作スタッフのリストなどが表示されるので、ページを遷移することなく、気になった制作実績の詳細情報を簡単に確認することができます。一部、枠内がムービーになっていたり、突如、制作実績に紛れてプロフィールや個展実績をまとめた「About」がレイアウトされていたりと、そのメリハリのある表現が、見る者を飽きさせません。

紹介したい実績が数多くある方は、こういったグリッドでの見せ方もぜひ参考にしてみてください。

参照:yasudatakahiro/

coton design

グラフックデザイナーとして活動している酒井博子さんのポートフォリオサイト。

トップページのサムネイルで、どのような作品を制作しているのかがひと目で伝わるようになっています。グラフィックデザイナーの場合、その方の実績・作品がポートフォリオサイトではそのまま名刺代わりになりますので、サイトを開いて真っ先に見られる構成はとても有効だと感じます。

なお、トップページ左のカテゴリーボタンを押すと、そのカテゴリー以外の作品がグレーアウトし、作品が浮かび上がるようになっていて、とても見やすい仕様です。作品をクリックすると、使用シーンや別アングル、別タイプのグラフィックなど画像点数が豊富で、仕事を依頼する側としてもイメージしやすいと言えるでしょう。受賞歴が多いクリエイターの場合は、酒井さんのように「about」「news」で訴求することがおすすめです。

参照:coton design

TAIKI KATO

アートディレクター、デザイナーとして活動している加藤タイキさんが運営しているクリエイティブスタジオ『TAIKI KATO』のサイト。

「WORKS」の一部がトップページに掲載されているので、どんな作品をつくるのか、素早くわかるようになっています。「WORKS」ページでは、まず「ALL」として実績がズラリと並びます。同時に、「BRANDING」「PRINT」「ADVERTISING」などカテゴリーごとに見られるようにもなっていて、各カテゴリーをクリックすると、作品がアニメーションでソートされて並びます。

ちょっとした動きではありますが、ユーザーからすると「ページが別の階層に飛んだ」という印象がなくなります。単なる遊びとしての動きではなく、以前見ていたページとの関連付けを表現しているので、サイト内で迷いにくくなるメリットが生まれています。

なお、作品の詳細ページの見せ方も、とてもていねい。作品を大きくしっかりと、質の高い画像を使っていることはもちろん、作品によってはその制作過程の写真も掲載していて、真摯なものづくりへの姿勢が伺えます。

参照:TAIKI KATO

フォトグラファーのポートフォリオサイト

ヨシダ ナギ

フォトグラファー、ヨシダナギさんのポートフォリオサイト。メディアにもたくさん登場しているので、ご存じの方も多いのではないでしょうか。

トップページにはヨシダさんの撮影シーンを収めた動画がいくつか用意されており、リロードするたびにランダムに表示されるようになっています。

サイトの構成は至ってシンプル。下層ページに遷移することなく、「ABOUT」「WORK」「NEWS」といったすべてのメニューがトップページ内で完結しています。それぞれのメニューはトップページをスクロールしても見ることができ、その際、メニューごとに背景色が切り替わっていくので、印象としてメリハリがあると同時にとても見やすいです。もっとも目を引く「WORK」では、ヨシダさんならではの視点で切り取ったパワフルな作品を大きくレイアウト。代表作として知られる少数民族の作品も数多く掲載されており、作品のサムネイルをクリックすると、1枚1枚が大きく表示され、写真のダイナミックさや美しさが鮮明に伝わってきます。

参照:ヨシダ ナギ

鈴木 陽介

鈴木 陽介

写真家鈴木陽介さんのポートフォリオサイト。風景や人物、プロダクトなど、さまざまな被写体を独自の空気感で切り取った作品が数多くまとめられています。冒頭では一定の時間内で、写真がランダムに入れ替わる仕様となっているので、ジャンルに縛られない仕事の幅の広さや作風のバリエーションがおのずと伝わってくるでしょう。

そのほかの作品は「写真一覧」にカテゴリー別でまとまっており、サムネイル画像によって、作品全体がひと目で確認できるようになっています。気になる作品をクリックすれば下層ページに遷移し、大きく表示されるのでじっくり鑑賞することができます。また遷移先のページではクリック領域が広く設定されており、ページ送りを示すマークが出ていればどこをクリックしても次の作品に表示が切り替わるので、直感的な操作ができストレスを感じません。

多くの作品が掲載されたポートフォリオなので、サイト全体を通して、いかにより多くの作品を効率よく見てもらうかということに工夫がされている印象です。

参照:写真家 鈴木陽介

Ittetsu Matsuoka

Ittetsu Matsuoka

写真家として活動している松岡一哲さんのポートフォリオサイト。訪れるたびに、ファーストビューで見られる写真や位置がランダムで変わる仕様になっているのが特徴的です。なおかつマウスでスクロールすると、背景の写真が上から不規則に流れ落ちてきます。思い出を刻んだ写真が、頭の中で次々と巡っているような印象を与える動きでインパクトがあります。

サイト構成はシンプルに、「Work」と「About」のみ。「Work」ページでは写真をカテゴリー分けした案件ごとにまとめられていて、これまでの実績ジャンルや作品のテイストがわかりやすいようになっています。

作品の配列や大きさも規則ただしく並べるのではなく、時に左に、時に大きく右にと変化をつけています。アニメーションを用いてフワリと現れるところも、どこか温かみを感じさせてくれます。

参照:Ittetsu Matsuoka

アーティストのポートフォリオサイト

MIDORI AOYAMA

MIDORI AOYAMAさんは、東京を拠点にDJやプロデューサーとして幅広く活動を行うアーティスト。これは、オフィシャルサイトでもありますが、ポートフォリオサイトとしても参考になるWebデザインなので、ご紹介です。モバイルファーストでの構築も勉強になりますし、清潔感のある動きに無駄のないレイアウトが、より情報を視認しやすくしています。他要素と合わせて、サウンドクラウドのウィジェットにも影をつけるなど、シンプルなあしらいが目を引きますし、ページ下部に設置してある問い合わせフォームのデザインもクールです。

また、このサイトに初めて訪れた人でも、MIDORI AOYAMAさんが「何をしている人なのか」「どんな活動をしているのか」がすぐに理解でき、ポートフォリオ作成の視点からも、とても重要なポイントを押さえていると言えます。

参照:MIDORI AOYAMA

アピール力のあるポートフォリオサイトを作るために押さえておくべき6つのポイント

以上、代表的なポートフォリオサイトをご紹介させていただきましたが、では転職の際のポートフォリオサイトで自分の人材価値や実績を最大限アピールをするためには、具体的にどのようなポイントを基準に作成すればいいのでしょうか。アピール力のあるポートフォリオサイトを作るためのポイントを確認しておきましょう。

Point1

わかりやすさを追求する

どれだけWebデザインの技術力が高くても、ページ内の要素がごちゃごちゃとしていて、どこを見れば知りたい情報がわかるのかがひと目で理解できなければ、採用担当者の評価は下がってしまうでしょう。クオリティーの高いWebデザインとは、相手にとってわかりやすく情報を伝える力があるデザインです。

Point2

自分の強みを印象に残させる

受賞歴や実績など、自分が他人には負けないと思っている強みをしっかりアピールできることが大切です。打ち出したい情報をただ全て含ませるのではなく、閲覧者に合わせて取捨選択しながら、掲載の配置や、プロフィールの入れるタイミングなどによって、ポートフォリオで、今自分が一番アピールしたい部分を明確にするようにしましょう。

Point3

遊び心を入れる余裕を持つ

ポートフォリオサイト自体の完成度はもちろんですが、しっかりとサイトを作ったうえで、フォントや構成で遊ぶ余裕があるだけでも印象は大きく変わります。作品だけではなく、自分の個性をデザインでアピールすることも大切です。ほかの人と差をつけるためにも、自分らしいデザインを目指しましょう。

Point4

プロフィールにはなるべく顔写真を入れる

コーポレートサイトの社長挨拶ページでもそうですが、ポートフォリオのプロフィールに顔写真を入れていると信頼性が高まるでしょう。また同時にインパクトも大きくなります。魅力的なポートフォリオサイトの多くは、自身の顔写真を、大切なデザインの1要素として取り入れていたり、プロフィールページに差し込んだりしているのがわかります。

Point5

SNSやブログの活用も忘れない

多くのユーザーから多くの経路で流入してもらうためには、SNSやブログの活用はマストです。また普段からそのようなサービスを積極的に活用し、制作活動につなげているというのは人材としても強みになります。もしSNSやブログ等でコンテンツを持っている場合は、ボタンの埋め込みなど、積極的にポートフォリオサイトとも連携していきましょう。

Point6

見るのは他人であることを常に意識する

ポートフォリオサイトはついつい自己満足で作成しがちです。しかし、実際にそのサイトを見るのは、あなたのことを何も知らない人です。このことを常に念頭に置き、作品のコメント1つをとっても言葉足らずにならないよう、ユーザーに十分な情報が伝わるように心がけましょう。

まとめ

ポートフォリオサイトは作成者によって、そのWebデザインや構成の仕方がさまざまです。魅力的なサイトの中には技術が高く、ちょっと真似するのは難しいポートフォリオサイトもあるかもしれません。しかし、そのようなサイトでもデザインや切り口など、学べる部分は多くあります。たとえば、メニュー構成。今回ご紹介した中にも多かったのが、細かく階層を設けずに「ABOUT」「WORKS」「CONTACT」の3つを柱に、アンカーリンクなどを駆使して1ページで完結させるスタイルのポートフォリオサイトです。

この基本を軸に「このボタンのデザイン、いいな」「この見せ方、うまいな」と、部分的にでも真似してみたいポートフォリオサイトがあればリストに入れておくとよいでしょう。また、常にWebデザインや技術の流行は変わっていくものです。ポートフォリオサイトを作り終えた後も参考となるサイト探しを続けると、Webデザイナーとしての自分もさらに成長していくことでしょう。ぜひ、たくさんのポートフォリオサイトを見て、自分のポートフォリオサイト作成の参考にしてみてください。

ポートフォリオ作成サービス 『MATCHBOX』のご紹介

マイナビクリエイターがクリエイター集団「PARTY」と共同開発したポートフォリオ作成サービス『MATCHBOX(マッチボックス)』。

どなたでも簡単にポートフォリオを作成でき、紙・Web両方に対応可能です。ご利用は無料ですので、ぜひお気軽にご登録ください。

MATCHBOXの詳細についてはこちらをご覧ください。
MATCHBOXは、マイナビクリエイターへお申し込み後、ご利用いただけます。

サービスに関するお問い合わせ
0120-410-470 マイナビクリエイター事務局 受付時間 9:15〜17:45

サービスに関してご不明な点がありましたら、マイナビクリエイター事務局までご連絡ください。

Facebookページ - マイナビクリエイター編集部
Web・ゲームクリエイターにとって、少し得した気分になるティップス(情報)を配信しています。

転職ノウハウ
おすすめ記事コンテンツ
初めての方へ
企業の皆さまへ
ソーシャルメディア
TOPへ戻る