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

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

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

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

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

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

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

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

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

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

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

UNDERLINE

UNDERLINE

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

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

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

参照:UNDERLINE

PRESENT

PRESENT

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

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

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

参照:PRESENT

S5-Style

S5-Style

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

まずなんといっても目を引くのは、画面全体を駆使したアニメーション。マウスオーバーすることで色と動きが出るポートフォリオページなど、サイト全体に行き渡った動きが、訪れたユーザーをワクワクさせてくれます。そしてBGMにもこだわりが。音響に合わせた動きがなされていたり、下層ページに遷移するとBGMの音質が変わったりと、工夫を凝らしています。技術をふんだんに用いつつ、プロフィールページではご自身の顔写真を掲載している点も、信頼性を高めていると感じます。

なお、ポートフォリオサイトのデザインコンセプトは「Hello world.」なのだそう。あらゆるものづくりにおいて、しっかりとコンセプトを立てる習慣のある方には、仕事を頼みやすいもの。コンセプトだけでなく「トップページなどにレイアウトしているグリッチグラフィックは、WORKSのサムネイルを元にCANVASタグで生成しています」といったように、どのように作ったかも記載されていますので、ぜひ参考に訪れてみてください。

参照:S5-Style

MITSUGU TAKAHASHI

MITSUGU TAKAHASHI

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

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

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

参照:MITSUGU TAKAHASHI

Mike Ingham

Mike Ingham

イギリス中部の都市、ダービーを拠点にWebデザイナー、グラフィックデザイナー、フロントエンドエンジニアとして活動しているMike Inghamさんのポートフォリオサイト。

ファーストビューのメニューバーをクリックすると、上部にメニューバーが出現。ちょっと珍しい仕様が目を引きます。それでいて、いずれのページでも下部に「WORK」「ABOUT」「HELLO」と遷移できるボタンを設置。真新しさだけでなく、「メニューは下部にあるもの」という従来の認識を踏まえたページづくりに親切さを感じます。とりわけ「HELLO」、つまりコンタクトをとれる入力フォームのあるページに、どのページからでも遷移できるところが良いですね。アニメーションの動きも自然でありつつ、目を引くものとなっています。

参照:Mike Ingham

maima.me

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

Mana

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

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

参照:Mana

hasegawahiroshi

hasegawahiroshi

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

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

ブログの部分にカーソルをもっていくと、最新の記事タイトルが出るなど、ムダのないデザインと利便性も素敵です。

参照:hasegawahiroshi

フクシマナオキ

フクシマナオキ

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

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

参照:フクシマナオキ

中井颯人

中井颯人

Webデザイナーの中井颯人さんが作成したポートフォリオサイトです。スクロールをするとプロフィールやキャッチコピーが現れるなど、視差効果を上手に利用した完成度の高いサイトです。コンセプトも分かりやすく、実績も必要最低限の説明文に収められており、一目で分かるように掲載されています。

また、顔写真も大きく載せており、信頼性も高いサイトに仕上げていると思います。スキルや自己紹介にも、自分がどのようなWebデザインをしたいかということが吹き出しメッセージとして現れるため、サイト全体のページデザインを壊すことなく、ユーザーに必要な情報を必要なタイミングで提供しています。よく考えていらっしゃるなと、感心してしまいます。

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

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

mouf design

mouf design

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

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

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

参照:mouf design

musubime

musubime

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

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

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

参照:musubime

4430デザイン室

4430デザイン室

グラフィック、エディトリアルデザイナーして活動しているヨシザワアヤノさんのポートフォリオサイト。ハートフルで可愛らしいイラストで構成されたトップページをクリックすると、1ページに「portfolio「about」「service」「contact」がまとまっていて、アンカーリンクでページ内遷移できるようになっています。

雑誌のデザインは表紙のみを表示し、ポップアップのスライドで数ページを表示させるため、ページが長くならずに詳細をみることができるのも良いです。

ページをスクロールした際、ちょっと上にスライドするアニメーションも、ページ全体の楽しげな雰囲気にマッチしている印象を受けます。細かなところでは、ツイッターやフェイスブックに飛ぶアイコンも、デザインモチーフとして多用しているチェック柄になっているのも素敵です。きめ細かく全体のバランスを整えているところは、さすがエディトリアルデザイナーだなと感じました。

参照:4430デザイン室

coton design

coton design

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

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

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

参照:coton design

TAIKI KATO

TAIKI KATO

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

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

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

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

参照:TAIKI KATO

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

ヨシダ ナギ

ヨシダ ナギ

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

トップページを訪れたときに出現するフルサイズ写真、そのインパクトは絶大です。目を引くと同時に、どのような写真を撮るのか、一目瞭然で伝わってきます。サイトの構成は至ってシンプル。ローディング時のアニメーションなども含め、見やすさを覚えると同時に、主役である写真作品がしっかりと引き立っています。

「PORTFOLIO」ページでは、それぞれの写真にマウスオーバーするとカメラのフォーカスを彷彿とさせるエフェクトがかかります。また、「African」「Tanzania」など国によってカテゴライズされているのも、ヨシダさんならでは。それぞれのカテゴリーをクリックした際、写真がシャッフルされるように並ぶ動きも、シャープな印象を与えています。

参照:ヨシダ ナギ

山本タカシ

山本タカシ

写真家として活動している山本タカシさんのポートフォリオサイト。トップページを訪れると、右上にお名前、左下にメニュー。そして中央で、作品がゆっくりとアニメーションでスクロールしています。一番下の作品が終わったら、一番上にリピートされる動きです。白を基調とし、余白をふんだんに使うサイトデザインも相まって、おのずと視線が中央に据えられた作品にフォーカスされます。

なお、他のページにおいても、この“センター揃え”のコンセプトで作られています。「BLOG」も枠を一切設けず、サイトデザインに溶け込むようにして中央配置。サイト全体の統一感が生まれています。

「PORTFOLIO」ページをクリックした際のみ、「WORK」「PERSONAL」「MOVIE」とカテゴリーごとのリンクが現れる仕様にしているのも、なるべくシンプルにみせるコンセプトゆえと言えそうです。

参照:山本タカシ

Ittetsu Matsuoka

Ittetsu Matsuoka

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

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

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

参照:Ittetsu Matsuoka

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

MIDORI AOYAMA

MIDORI AOYAMA

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

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

参照:MIDORI AOYAMA

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

img_pc_cool-web-design-portfolio-sites_24.jpg

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

Point1

分かりやすさを追求する

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

Point2

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

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

Point3

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

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

Point4

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

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

Point5

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

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

Point6

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

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

まとめ

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

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

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

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

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

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