おしゃれなWebデザインのポートフォリオサイト32選。転職活動時の実績アピールに!

BUSINESS

転職活動のためにポートフォリオサイトを作りたい。そのために、有名なWebデザイナーのポートフォリオサイトをたくさん見て参考にしたい!という人へ。

Webデザイナーをはじめ、フォトグラファーやエンジニア向けのおしゃれなポートフォリオサイトを32個集めました。ぜひ、ご自身のポートフォリオサイトを作るときの参考にしてください。

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

1. Mana

Mana

『Webクリエイターボックス』を運営するManaさんのポートフォリオサイトです。WebデザイナーやWeb制作関係の方なら一度は目にしたことがあるでしょう。

ManaさんはバンクーバーのWeb制作学校を卒業し、現在はWebデザイナー・Webデベロッパーとして海外で活躍しています。英語版の紹介ページのを作るのは、「英語を使う仕事を受注できます」という意思表示になりますね。

Manaさんのポートフォリオサイトのデザインは「About」「Works」「Contact」の項目が1番上に表示されています。ポートフォリオサイトにおいて重要な、人物像、実績、連絡先がひとめでわかるサイトデザインです。

またサイト全体の植物模様と、まるみを帯びた英語フォントが、見るひとに優しい印象を与えます。使うフォントや模様ひとつひとつが、自分を表すものであることがよくわかります。

Mana

2. oniguili 

https://www.oniguili.jp/

グラフィックデザイナーの西村沙羊子さんのポートフォリオサイト。西村さんは、東京と長崎を拠点にWebデザインやグラフィックデザインを手掛け、フォトグラファーとしても活動しています。

西村さんが製作したWebサイトはどれも素敵なデザインばかりですが、「Works」のページではどれもモノクロ。クリックして初めて鮮やかな色合いが確認できるようになっています。ついクリックしたくなるような仕掛けが面白いですね。

全体にスタイリッシュなフォントを使用したり、余白を上手に使うことでスッキリとした見やすいデザインです。

oniguili

3. OHTA TAKAYA

OHTA TAKAYA

デザイナーでアートディレクターのオオタタカヤさんのポートフォリオサイトです。オオタさんがディレクションしたWebサイトやロゴなど、18の作品がすぐに見られるようになっています。

サイトのメインカラーは白と明度が高いブルーの2色ですが、作品にマウスを当てると作品のメインカラーが背景に表示されるデザイン設計が特徴的です。

またそれぞれの作品をクリックすると、統一されたレイアウトで写真と説明文があらわれるため、オオタさんがいつどのような仕事にどんな立場で関わったのかわかるようになっています。同ページには作品の制作過程も公開されています。自分の制作理念やポリシーを見る人に理解してもらいやすくなりますね。

全体的にシンプルで無駄な情報がなく、余白をうまく使ったデザインが素敵です。

OHTA TAKAYA 

4. UNDERLINE

UNDERLINE

デザイン、ディレクション、コーディングを手掛けるトクダユウイチさんのポートフォリオサイト。

トップページにはご本人の写真とものづくりの信念を掲載していて、人との繋がりを大切にしていることが真っ先に伝わるデザインです。トップページにご自分の写真を載せていると、信頼感が増して今後のお仕事に繋げやすくなりますね。

白を基調としたデザインは見る人が安心した気持ちになるだけでなく、「Works」で紹介している自身の作品そのものの良さを最大限に引き出しています。

またトクダさんは「About」と「Works」で自分と自分の実績を紹介してるのに加えて、「Blog」で普段やっていることを発信しています。「Blog」には、トクダさんが撮影した写真がメインで載っています。トクダさんの人柄が伝わってくるようなあたたかい内容のブログです。

仕事内容だけでなく、ご自身のことも知ってほしい方はトクダさんのポートフォリオサイトを参考にしてみてください。

UNDERLINE

5. TAKAHASHI MITSUGU

TAKAHASHI MITSUGU

東京を拠点に活動するデザイナーでエンジニアの、タカハシミツグさんのポートフォリオサイト。ミニマルデザインのWebサイトの制作を多く手掛けています。

タカハシさんのポートフォリオサイトには、Javaspript、CSS、PHPなどの得意な言語や、UI/UXデザイン、アートディレクションなどの主な仕事内容といった、仕事でできることがサイト内に記載されているので初めてサイトを訪れた人もタカハシさんの腕前を理解しやすいです。

サイトのデザインは白と黒を基調としており、写真もモノクロなため全体に統一感が生まれています。

「Projects」では、マウスオーバーした際に画像が出現します。アニメーションの動きや動く方向がそれぞれアレンジされているのも細部にまでこだわっている証拠です。

TAKAHASHI MITSUGU

6. S5-Style

 S5-Style

アートディレクターでフロントエンドエンジニア、Webデザイナーの田渕将吾さんのポートフォリオサイト。URLをクリックした瞬間に音楽と大胆なアニメーションが同時にに展開されます。

画像にエフェクトをかけたり、シームレスにページが遷移したり、サウンドに合わせてビジュアライズしたり、これらのコーディングも田渕さん自身で手掛けています。

タブをクリックしてから目的のページに飛ぶまでに、タブが回転したり画面自体が揺れたりと、サイト内に遊び心が満載です。一部の画像だけでなくポートフォリオサイト全体にアニメーションが駆使されているので、どこにカーソルを動かしても飽きることはありません。

過去にやってきた仕事実績をただ並べるよりも、自分の時間と能力をフル活用してポートフォリオサイトのクオリティにこだわれば、一番シンプルでわかりやすいポートフィリオができますね。

S5-Style

7. jojo design 

jojo design 

インタラクティブデザイナーであるオカモトジュンイチさんのポートフォリオサイト。Webサイトの企画と制作をおこないながら、インタラクティブアートの制作もしています。

ランダムに動く無数の赤い丸と、グレーの線が印象的なポートフォリオサイトです。過去実績も円形にトリミングされていて、統一感のあるデザインに仕上がっています。

「About」「Works」「Art & Design」「Contact」という項目のほか、一番上には「Message」という項目があります。

「The great human revolution in a one human being changes the fate in the world soon」がオカモトさんのメッセージ。自分が大切にしている言葉や信念、座右の銘などをこうしてポートフィリオサイトに表示すると、自分がどんな人間なのか深く知ってもらうきっかけになるかもしれませんね。

jojo design

8. フクシマナオキ

フクシマナオキ

東京を拠点にフリーランスデザイナーとして活動するフクシマナオキさんのポートフォリオサイト。クライアントとしっかりコミュニケーションをとり、クライアントの望むWebサイトかつユーザーが操作しやすいWebサイトを作ることを大切にしていらっしゃいます。

「Concept」という項目で、フクシマさんの仕事への姿勢や信念が伝わってくる文章が掲載されています。顔の見えない相手に自分自身をきちんと知ってもらうために、文章はとても良いツールですね。

他のポートフォリオサイトと異なって文章の割合が多いですが、余白を多く使ったり1ページ内でサイトを完結させる工夫をすることで、ストレスなく読み進められるようにデザインされています。

文章で人に表現することが好きな人におすすめのポートフォリオサイトです。

フクシマナオキ

9. Mike Ingham

Mike Ingham

イギリスを拠点に活動するWebデザイナーでフロントエンドエンジニアである、Mike Inghamさんのポートフォリオサイト。世界中のクライアントに、シンプルで使いやすいインターフェースを設計しています。

トップページには「GET IN TOUCH」のボタンが中心にデザインされていて、サイトを訪れた人がすぐに連絡ができるように工夫されています。

ポートフォリオサイトでは「About」「Works」「Hello」という3つの項目で自分と仕事について紹介しています。項目の内容はとてもシンプルで無駄がありません。一方で仕事ごとにメインカラーが異なっておりオレンジや水色など明るい色が使われています。シンプルながら鮮やかさも兼ね備えているデザインです。

Mike Ingham

10. Kuroda Manato

Kuroda Manato

カナダのバンクーバーを拠点に活動するWebデザイナーでエンジニアのKurodaManatoさんのポートフォリオサイト。自らのスキルを、フロントエンドとバックエンドに分けグラフで表しているのが面白いですね。

背景の水玉がランダムに動き、大小の大きさがバラバラなので、サイトに奥行きを感じます。

スクロールするとサイトの全体カラーが変化するという遊び心も、見ている人を楽しくさせる粋な演出ですね。

Kuroda Manato

11. hasegawahiroshi

hasegawahiroshi

WebデザイナーであるHasegawaHiroshiさんのポートフォリオサイト。「サービス内容」や「ご依頼方法」のなかに、事前にできることとできないこと、デザイン依頼前に準備してほしいものなどが、詳しく書かれています。

Webデザインを依頼するのが初めて、という人を対象にポートフォリオサイトを作りたい場合は、とても参考になります。

hasegawahiroshi

12. DAISUKE OBANA

DAISUKE OBANA

東京を拠点に活動するグラフィックデザイナーでWebデザインも手掛ける、尾花大輔さんのポートフォリオサイト。白を基調としたサイトはとてもシンプルで、無駄な情報はありません。

作成したWebサイトや作品は、線画や棒線、丸型の図形が散りばめられていて、シンプルながらも遊び心を感じさせます。

すべての作品に統一された「らしさ」があると、作風がより明確になり、クライアントが完成形を想像しやすくなりますね。

DAISUKE OBANA

13. Joyce Van Herck

Joyce Van Herck

ロンドンを拠点に活動するWebデザイナーで、フロントエンドエンジニアであるJoyce Van Hercさんのポートフォリオサイト。自己紹介文と作品集のみの、シンプルでわかりやすいサイトです。

ファーストビューの文章「Hi! I’m@joycevherck」 の@joycevherckをクリックするとJoyceさんのツイッターアカウントに飛ぶことができます。自己紹介としてツイッターを見てもらうというのも面白いですね。

Joyce Van Herck

14. KATOSHUN.com

KATOSHUN.com

Webデザイナーである加藤俊司さんのポートフォリオサイト。株式会社クライマークスの取締役でアートディレクターである加藤さんの自社サイトや制作したサイトを掲載しています。

「Blog」をクリックするとレスポンシブWebデザインに関するまとめ記事が多くみられます。

記事というかたちで自分の強みを外にアピールするというのは、「〇〇ができます!」とただ書くよりも説得力がありますね。

KATOSHUN.com

15. maima.me

maima.me

Webデザインやディレクション、アプリデザインを手掛けるImakitaMaiさんのポートフォリオサイト。

ImakitaさんがデザインしたWebサイトがシンプルに並んでいるので、ポートフォリオとしてはとてもわかりやすいサイトです。

ページは1ページのみなので、わかりやすいポートフォリオの基本形として参考にしてみてはいかがでしょうか。

maima.me

16. STUDIO GRUB

STUDIO GRUB

グラフィックデザイナーでWebデザインも手掛ける北尾知大さんのポートフォリオサイト。

「Work」「About」「News」などの項目にそれぞれついている、シンプルなイラストアイコンがおしゃれです。

独特な世界観を表現しているポートフォリオサイトは見ていて面白いですね。

STUDIO GRUB

17. PRESENT

PRESENT

プランニング・ディレクターで、デザイナーとしても活動する宇都宮勝晃さんのポートフォリオサイト。

自身が作成したWebサイトの概要をわかりやすく写真で説明し、PCの他にスマートフォンやタブレットで見たときのデザインも掲載しています。

余白をうまく使って無駄な情報をなくし、かつ飽きさせないデザインが素敵です。

PRESENT

18. TACT.

TACT.

近畿地方、大阪を拠点としてフリーランスでWebサイトを作成している西田誉さんのポートフォリオサイト。トップページがカラフルで印象に残りやすいデザインです。

制作実績をクリックすると西田さんがデザインしたWebサイトの写真を閲覧できます。1ページでスクロール式になっていて、簡単な説明文と一緒にストレスなく見ることができます。

Webサイトの設計はシンプルながら、目を引くトップページで個性を表現しているのが斬新ですね。

TACT.

19. Matsumoto Rumiko

Matsumoto Rumiko

大阪を拠点に、フリーランスのWebデザイナーとして活動するMatsumotoRumikoさんのポートフォリオサイト。ファーストビューは、スカートを履いた少女が画面上をくるくるまわる姿で、インパクトがありますね。スクロールすると背景がグラデーションになっていくのもとても美しいです。

以前Matsumotoさんは壁紙を作る「Parallel Wallpaper」というプロジェクトを手掛けており、その経験がご自身のポートフォリオサイトにしっかりと反映されています。厚みのある背景デザインと、淡い色合いが、Matsumotoさんの作風を表していますね。

Matsumotoさんが制作した素敵な壁紙は、ポートフォリオサイトからPCやスマホ用にダウンロードできるようになっています。壁紙のデザインにこだわりたい方におすすめです。

Matsumoto Rumiko

20. KATO TAIKI

KATO TAIKI

東京を拠点にデザイナー、アートディレクターとして活動する加藤タイキさんのポートフォリオサイト。Webデザインをはじめ、ロゴやブックカバー、ポスターのデザインを手掛けています。

加藤タイキさんのポートフォリオサイトはグリットデザインを採用しています。全画面の3カラムをベースとしながら、画面幅を狭めていくごとに2カラム、そして最終的に1カラムのデザインです。

また仕事実績がすぐにわかるよう、ホームページに代表的な作品が並べられているので、クリックするとすぐに作品を見られるようになっています。クリックしなくてもカーソルを当てるだけで、作品のタイトルとポスターやロゴなどの作品カテゴリーがアニメーション表示されます。サイトを訪れたユーザーがストレスを感じないように、ページ遍移をなくす工夫がなされているのです。

KATO TAIKI

21. musubime 

musubime 

グラフィックデザイナーでコンセプターの、カワセタケヒロさんのポートフォリオサイト。作品サンプル、プロフィール、連絡先、そしてカワセさんの哲学を1ページにまとめています。

カワセさんのポートフォリオサイトは縦書きの文字で構成されているのが大きな特徴。通常のWebサイトは横書きのイメージが強いため、サイトを見る人にインパクトを与えます。また文字を縦書きにすることで日本語の良さが際立ち、ひとつひとつの言葉に強さを感じます。

「Philosofy」という項目で綴られているのは、カワセさん自身が仕事に向き合う姿勢や信念。これらをシンプルに文章にまとめることで、読む人にストレートな思いを伝えることができます。

「他人と違うような印象的なポートフォリオを作りたい」という人におすすめのデザインです。

musubime

22. mouf design 

mouf design 

Webやグラフィック、ゲームのインターフェースデザインを手掛ける勘村洋和さんのポートフォリオサイト。「Portfolio」「About」「Contact」の項目が1ページで全て見れるデザイン設計です。

仕事実績のページでは、Webサイトのデザインはパソコンのかたちのアイコン、スマホゲームデザインはスマホのかたちのアイコンというように、どのような媒体でどんなものを作ったのかがひとめで分かるようになっています。

三角や丸、棒線などのシンプルな図形を、色を変えて散りばめることで、見ててわくわくするような背景デザインが出来あがっています。

mouf design

23. えともじ

えともじ

デザイナーであるえともじさんのポートフォリオサイト。グラフィックデザインだけでなく、スマホカバー、小さな置物、時計など、自身のデザインをもとに制作した雑貨も掲載しています。

「PRICE」の項目にはWebデザインや名刺デザイン、個人のロゴ制作にかかる費用を細かく記載しています。こうした配慮は仕事を依頼する側にありがたいですね。

企業や団体の依頼は基本的にNGで、個人の制作活動をサポートする活動のみをおこなっています。

無駄のないデザインで情報発信を重視したい方におすすめのポートフォリオサイトです。

えともじ

24. coton design

coton design

グラフィックデザイナーの酒井博子さんのポートフォリオサイト。パッケージデザインやポスターの制作、グラフィックデザインを手掛けています。トップページに90以上の作品がすっきりとした配置で並んでいるので、仕事内容がひとめでわかります。

作品に色味が多く使われているため、背景はシンプルなグレーとなっています。左のカテゴリーボタンを押すと、そのカテゴリー以外の作品がグレーアウトし、作品が浮かび上がるようにデザインされているので見やすいです。

また、気になる作品をクリックするとその作品のポイントがわかりやすく写真で紹介されるので、数が多くてもストレス無く見ることができます。

ポートフォリオサイト自体はシンプルなので、回遊しやすいデザインですね。

coton design

25. 4430デザイン室

 4430デザイン室

神奈川県を拠点に活動するグラフィック・エディトリアルデザイナーの、ヨシザワアヤノさんのポートフォリオサイト。ポスターやパンフレット、Webサイトのデザインを手掛けています。サイト名の「4430」は、ヨシザワさんの名前を数字に変換してできた名前のようです。

上記の画像はファーストビューでの、Webサイトの入り口です。クリックするとヨシザワさんの仕事の内容や実績を見ることができます。

4430デザイン室

26. normo.jp

normo.jp

デザイナーであるIshihara Yuさんのポートフォリオサイト。

できることを短い文章にシンプルにまとめて書いているので、初めて見た人がわかりやすいポートフォリオになっています。

スクロールすると内容が先に出てきて、背景が後からついてくるという斬新なアイデアを用いています。デザイナーの独自性をサイトにデザインとして組み込むと、作品集を見なくてもデザイナーの強みがわかりますね。

normo.jp

27. DANIEL LISS

DANIEL LISS

ベルリンを拠点に活動するUX、UIデザイナーの、Daniel Lissさんのポートフォリオサイトです。作成したWebサイトや、制作した作品の写真を掲載しています。

Lissさんの作成したWebサイトをクリックすると、そのままサイトに飛ぶのではなく、全ページが写真で表示されます。サイトの構成や統一感を有効的に見せる手法です。

URLを貼り付けるやり方はシンプルで簡単ですが、余裕があれば上記の写真表示をやってみると、成果がよりわかりやすく示せます。

また「PHOTOGRAPHY」をクリックするとLissさんが撮影した写真を閲覧できます。写真はメインページと同様に全て正方形で並べられており、サイト全体の統一感を損なわない工夫がなされています。写真をクリックするとLissさんのInstagramアカウントに飛ぶため、興味を持った人により多くの写真を見せることができます。

DANIEL LISS

フロントエンドエンジニアのポートフォリオサイト

28. Hasegawa Takumi

Hasegawa Takumi

エンジニア兼テクニカルディレクターのハセガワタクミさんのポートフォリオサイト。ファーストビューは、色が変わる折り紙のような三角形が、集まったり離れたり波うったりして、ハセガワさんのWebサイトのロゴの形になったり、不思議な四角形になったりします。

「About」にはHTML、CSS、Sass、SCSS、JavaScriptなど、ハセガワさんの使えるスキルがに書かれています。

「Works」のページではハセガワさんの仕事内容をもちろん見ることができますが、このファーストビューを見ただけで圧倒されるくらいのスキルをお持ちのようです。

ソースコードが「Blog」の欄で公開されているので、フロントエンドエンジニア色の強いポートフォリオサイトを制作したい方は一度訪れてみてください。

Hasegawa Takumi

29. MAKOTO HIRAO

MAKOTO HIRAO

東京を拠点に活動するフロントエンドエンジニアである、平尾誠さんのポートフォリオサイト。奇抜なビビッドカラーと斬新な自己紹介が、ユニークで才気溢れる平尾さんの人柄を感じさせます。

「私のイメージフルーツはバナナです」「キャッチコピーは”戦うフロントエンド”」「私の人生のゴールはクリエイターの村長です」など、実際に会って詳しく話を聞きたくなるようなフレーズが散りばめられています。

強烈な個性をシンプルに文章であらわす、というのはストレートでとても伝わりやすいですね。

MAKOTO HIRAO

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

30. 山本タカシ

写真家として活動している山本タカシさんのポートフォリオサイト。

トップページの中央で自分の撮影した写真がアニメーションでスクロールしています。1番下までいったらもう1度上へ戻る仕組みです。「BLOG」も枠を設けずに中央揃えになっており、サイトデザインへの強いこだわりを感じます。

自分のポートフォリオサイトを訪れた人に、まず撮影した写真を一通り見せるデザインがフォトグラファーらしいですね。

食べ物の写真から人物の写真、広告までも手掛けていることが最初の画面でわかります。

山本タカシ

31. ヨシダ ナギ

女性フォトグラファーであるヨシダナギさんのポートフォリオサイトです。ヨシダさんは主にアフリカをはじめとする世界の少数民族や先住民を撮影しています。

サイトのトップページには撮影した少数民族の写真が画面いっぱいに表示されているので、ヨシダさんの仕事内容がひとめでわかりますね。

作品ページでは写真が民族ごとにカテゴリ分けされており、さまざまな国を渡り歩いたヨシダさんの経歴がうかがえます。

海外に馴染みがあり、インパクトのあるポートフォリオサイトを制作したい人は参考にしてみてください。

Nagi Yoshida(ヨシダナギ)Official Web Site

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

32. MIDORI AOYAMA

DJやプロデューサーとして多方面に活動を広げるアーティスト、MIDORI AOYAMAさんのポートフォリオサイトです。トップページの顔写真はポリゴン加工が施されており、SFの要素を感じるデザインになっています。

またファーストビューだけでなく、今までの実績がひとめでわかるデザイン設計にしたり、サウンドクラウドのウィジェットにも影をつけるなど細かい部分にも工夫が凝らされています。

かっこよくて個性的なポートフォリオサイトを作りたい方は参考にしてください。

MIDORI AOYAMA

まとめ

個人が持っているスキルやセンスによって、ポートフォリオのデザインはさまざまです。見ているだけで面白いですね。

この記事が、読んでくださるみなさまのポートフォリオサイト作成の参考になれば幸いです。

 

あわせて読みたい!▼

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ