参考にしたいWebデザインのポートフォリオ22選|作成のポイントも詳しく説明

CXBOTTLE編集部
18

Webデザインのポートフォリオとは



Webデザインのポートフォリオとは、過去の作品を集めたWebサイト・ファイルのことを指します。自分の感性や個性をアピールすることも可能です。具体的には、クラウドソーシングで受注した案件や企業で残した実績を掲載します。

ポートフォリオに作品をまとめることで、どのようなスキルを持っているのかを顧客に提示することが可能です。内容を濃くするほど顧客に見つけてもらいやすくなり、スムーズに案件を受注できます。

参考にしたいWebデザインのポートフォリオサイト22選



この章では、参考になるウェブデザインのポートフォリオサイト例をご紹介します。ポートフォリオには、構成や配色など色々な工夫が施されています。著名なサイトからポートフォリオの作り方・かっこいい実績の載せ方の見本が欲しいという方は、ぜひ参考にしてみてください。

1:present.

ウェブデザイナー 、ディレクター・プランナーとして活躍している宇都宮勝晃さんが作成したポートフォリオです。海の写真を背景に、青と白で統一されたデザインとなっています。

サイトを開くと、過去に様々な企業・大学に向けたデザインを作成した経験があることが分かる仕様です。案件ごとに、どのような目的でそのデザインを作成したのかが細かく記載されています。

2:yasudatakahiro

グラフィックデザイナー ・アートディレクターとしても活動している安田昂弘さんのポートフォリオです。自己紹介などの文章が一番上に掲載されておらず、すぐに作品を閲覧できます。

デザインはグリッドになっており、自動で動く設定であるため長時間眺めていると様々な視覚情報が入ってくるところが特徴的です。カーソルを乗せると、作品名や製作時期を確認できます。

3:maima.me

marina.meとは、WebデザインとWebディレクションの仕事をしているMAI IMAKITAさんが作成したポートフォリオサイトです。サイトは1ページにまとめられており、 白の背景を用いてシンプルに作成されています。

それぞれの画像を押すと「どのような目的で作られたのか」「プロデューサーは誰なのか」を確認することが可能です。関わりを持った企業についても記載されているため、信頼度の高いポートフォリオであると言えます。

4:coton design

こちらのポートフォリオを作成した酒井博子さんは、グラフィックデザイナーとしても活動しています。過去の作品が一眼で分かり、クリックすると他のタイプ・デザインが掲載されているため、顧客側も依頼をしやすいと言えるでしょう。

「news」「about」の欄には、過去の受賞歴が掲載されています。受賞歴が多いWebデザイナーの方は権威づけをするためにも、酒井博子さんのように一覧にしてまとめると良いでしょう。

5:S5 Studios

S5 Studiosというポートフォリオサイトを運営している田渕将吾さんは、Webデザインだけでなく空間デザインやアートディレクションのお仕事もしています。サウンドをオンにすると、ゆったりとしたBGMが流れるため、世界観に入り込むことができるのです。

背景画像が動いたり、作品が斜めにスクロールできたりと、様々な工夫が施されています。1つ1つの作品の詳細を見ると、受賞歴やメディアへの掲載歴を確認することも可能です。

6:musubime

musubimeは、グラフィックデザイナー として活動しているカワセ タケヒロさんが作成したポートフォリオです。白のシンプルな背景に、縦書きで名前と自身が大切にしている哲学が書かれています。プロフィールや略歴も全て縦書きです。

サンプルを見ると、Webサイトのデザインだけでなく店舗設計やVI製作にも携わっていることが分かります。サイトの一番下にはコンタクトフォームがあり、案件を依頼しやすい構造です。

7:jojo design

jojo designはインタラクティブデザインのお仕事をしている岡本順一さんが作成したポートフォリオです。ホームページには、英語で人類や世界の変化に関する一文が記載されています。

背景では、様々な大きさの赤い円が左上の一角から全体に広がる形で動いており、遊び心があると言えるでしょう。「Message」「Art & Design」「Works」 といった複数の項目に分けられており、小分けにして見やすい仕様です。</p>

8:TAIKI KATO

Webデザイナー 、アートディレクターである加藤タイキさんが運営しているポートフォリオサイトです。プロフィールは英語・日本語の両言語で記載されており、会社の所在地もGoogle Mapを用いて明記されています。

1つ1つの作品を紹介する写真が大きく見やすい仕様です。また、過去の作品だけでなく、インターン生の募集などに関する情報も載せられているという特徴もあります。左下のアイコンからは、SNSやメールアドレスも確認できます。

9:KATOSHUN.com

KATOSHUN.comは、Webデザイナーである加藤俊司さんのポートフォリオサイトです。メニュー欄と右側のコンテンツの間に蝶の画像があり、スクロールするたびに動くところが特徴的だと言えます。

さらに、ページを左に動かすと、それぞれの作品がタブレットやスマートフォンにも対応していることが分かるようになっているのです。パソコンを使用している人だけでなく、幅広いユーザーを対象としてデザインしていることが分かります。

10:mouf design

mouf designは、ウェブデザインやグラフィックデザイン、ゲームデザインを行う勘村洋和さんが作成したサイトです。ホームページから、過去の作品や連絡先、所在地の全てを確認できます。

サイトを開くと、初めは白い背景のみが映し出されますが、mouf designという文字とともにカラフルな背景が表示されるのです。スマートフォンでも見やすいレイアウトであるため、様々な顧客のニーズに対応していると言えます。

11:シンデザイン

フリーランスのWebデザイナーとして活動している「Shin Design」さんのポートフォリオサイトです。東京の国分寺・小金井専門で活躍されています。

「事業概要」「サービス紹介」といったメニューバーには、黒で統一されたアイコン画像が載っているため、分かりやすいデザインであると言えるでしょう。Web製作に関するコラムも掲載されているため、今後フリーランスとして働きたい方は閲覧してみることがおすすめです。

12:遠水イッカン

WebデザインやDTPデザイン、動画製作、ディレクションといった仕事をしている遠水イッカンさんのポートフォリオサイトです。過去作品に加えて、趣味のカレーや仕事をする上での哲学・こだわりについて記載されています。

鍋を持ち歩いていたり、鍋の中のカレーをひっくり返して浴びている絵は何ともユニークです。こうしたユーモアを前面に押し出しているところが他のサイトとは一味違うと言えます。

13:UNDERLINE

UNDERLINEは、デザイナー・コーダー・ディレクターのフリーランスとして活動している徳田優一さんが作成しています。最初のページには、ご自身の写真・挨拶のコメントとSNSアカウントなどが掲載されているのが特徴的です。

仕事内容に関する詳細や、過去のデザインの一覧を一眼で閲覧できます。さらに、下にスクロールすると、ブログ記事が掲載されており日々起こったこと・感じたことについても写真つきで発信されているのです。親近感が湧きやすいデザインであると言えるでしょう。

14:TNGC GRAPHICS

フリーランスでWebデザインの仕事をしている「TNGC GRAPHICS」さんのWebサイトです。自分の強みや、フリーランスだからできることについて詳しく書かれています

例えばやすく依頼できる・相談しやすいといった点です。サイトを開くと、すぐに「無料相談・見積もりをする」というボタンがあるため、仕事を依頼したい人にとって使いやすいデザインとなっています。

15:小高雄平

ビデオグラファーとしてフリーランスで活動する小高雄平さんのサイトです。それぞれの作品を押すと、大きな画面で映し出すことができるため、細部まで見やすい仕様となっています。案件を依頼した後の流れについても書かれており、ユーザーに優しいサイトです。

16:フクシマナオキ

フクシマナオキさんのポートフォリオサイトは、1ページで完結しているのが特徴的です。過去作品の下には3つの段落があり、Web製作会社ではなくWebデザイナーに依頼することのメリットが書かれています。

それぞれの作品は小さく掲載されていますが、拡大して詳細まで見ることが可能です。フクシマナオキさんの過去の職務経験や連絡先も提示されています。

17:RYOJI YAMADA FILM

映像製作に携わっている山田遼志さんのWebサイトです。サイトを開くと、一面に白黒のフィルムの映像が映し出され、少しずつ色づいていく様子を見ることができます。クリックすると、実際に映像をYouTubeで閲覧することが可能です。

18:Mana

海外でwebデザインの仕事をしながら「Web Creator Box」というブログを運営しているManaさんが作成したポートフォリオです。日本語と英語の両言語に対応しているため、幅広いクライアントから案件を受注できると言えます。

在住経験がある国や、趣味と言ったプライベートについても記載されていることが特徴的です。デザインしたテーマだけでなく、ブログや本、YouTubeチャンネルのアカウントも掲載されています。

19:Ittetsu Matsuoka

写真家として活動している松岡一哲さんのサイトです。ホームページの背景は濃いグレーであり、中心には過去作品の写真が1つ掲載されています。写真は次々と移り変わるため、見る人の興味を惹きつけるでしょう。

中心の写真を押すと、様々なフォトブックを閲覧することが可能です。また、「Information」のページには、生まれ年や学歴が載せられています。

20:BUROKI

大阪で、Webデザインのフリーランサーをしている黒木大輔さんのポートフォリオです。サイトの更新率が高く、デザインのコツについても詳しく解説されています。デザイン一覧の部分には、お客様からのコメントも載せられている点が特徴的です。

21:hasegawahiroshi

長谷川寛さんが運営するポートフォリオサイトは、保有スキルが一目で分かるデザインとなっています。例えばHTMLやJavaScriptといったコーディングやコンサルティングも可能であると記載されているのです。

ホームページは、「方針」「サービス内容」「実績」といった項目に分けられています。さらに、ブログや事業概要についても記されているのです。コンタクトの部分には、依頼方法まで詳しく書かれており、ユーザー目線を意識したサイトであると言えます。

22:ひつじウェブ

大阪でWebデザインを手がけるひつじWebさんのポートフォリオサイトです。Webデザインだけでなく、SEOというWebマーケティングの知識を持っているところが魅力だと言えます。どのようなサービスを展開しているのかについて、明確に記述されている点も特徴です。

Webデザインのポートフォリオで入れるべき項目7つ


Webデザインのポートフォリオサイトに入れるべき項目を7つご紹介します。特に大切な項目は自己紹介・スキルや顔写真です。これからサイトを作る方は、ぜひ参考にしてみてください。

1:自分の顔写真

プロフィールに自分の顔写真を入れることで信頼度が上がると同時に、どのような人なのかを認識してもらいやすくなります。顔写真はデザインの要素の1つとなるため、吹き出しやコメントを加えることもおすすめです。

プライバシーの側面に不安がある方は、顔写真をもとにイラストを作成すると良いでしょう。自分の雰囲気・顔の特徴を覚えてもらえることを期待できます。

2:自分の自己紹介とスキル

自分の自己紹介とスキルも、サイトのホームページに必要な項目です。自己紹介には経歴や仕事内容の詳細だけでなく、趣味・好きなことについても記載することをおすすめします。個人的な趣味についても触れることで、顧客に親近感を持ってもらえる可能性が高いです。

スキルを書く際は、どのようなプログラミング言語を用いることができるか・Web以外のデザインは可能かについても書くと良いでしょう。プラスアルファのスキルがあると、評価されやすいと言えます。

3:プロジェクト

過去のプロジェクトについても、できる限り写真付きで提示しましょう。自分がどのようなサービスを提供しているのかが分かりやすくなります。プロジェクト名だけでなく、プロジェクトに携わった人の一覧も載せることで、周りの人への敬意を示すことも可能です。

4:見る人を惹きつけるキャッチコピー

日本語や英語でキャッチコピーを加えることで、見る人を惹きつけることが可能となります。どのような目的でデザインを製作しているのか、どのような想いを込めているのかを一文でまとめることがおすすめです。

キャッチコピーに共感してもらえると、案件を依頼される可能性が高まります。フォントを工夫したり、文字に動きを加えることも良いサイトを作る手法の1つです。

5:目指したデザインのコンセプト

目指したデザインのコンセプトを説明することで、作品の意図が伝わりやすくなります。何をイメージしてデザインしたのか・どのようなことを伝えたかったのかを解説しましょう。モデルとなったものがあれば、出典の部分に書いておくと便利です。

6:サイト制作時に工夫したこと

サイト製作時に工夫したことについて記述すると、自分が持っているスキルが相手に伝わりやすくなります。例えば、配色やテーマ・フォントについて書くことが可能です。使用したツールやプログラミング言語についても説明することで、アピールポイントの説得力が増すと言えます。

7:問い合わせ項目

問い合わせ項目を付け加えることで、顧客からの仕事依頼を受けやすくなります。メールアドレスから連絡する手間が省けるためです。さらに問い合わせ・仕事依頼後の流れについても解説すると、スムーズにやり取りができると言えます。

Webデザインのポートフォリオ作成ポイント7つ


この章では、Webデザインのポートフォリオの作成ポイントを7つご紹介します。初心者・新卒の方や未経験の方も、以下のポイントを把握することで、自分のスキルを有効的にアピールできます。

1:自分がアピールしたいことを明確にする

ポートフォリオを作成する際は、自分がアピールしたいことを明確にして際立たせることが大切です。ホームページで、一番にアピールしたいことがすぐに分かるように工夫する必要があります。

例えば、アピールしたい部分が自分の哲学やモットーである場合、それらが引き立つように色を付けて、他の要素はシンプルにデザインするのも良いでしょう。アピールポイントが明確になっていることで、他のサイトとの差別化できるようになります。

2:一目で見てわかるデザインにする

ユーザーが知りたい情報をどこから手に入れられるのか、一目で見て分かるデザインにすることもポイントです。サイトの構造が分かりづらいと、多くのプレビューを獲得することが難しくなってしまいます。

例えば一番上にメニュー欄を加え、他のページに飛べるようにすると良いでしょう。サイトの一番下にはコンタクトフォームを取り入れることで、案件の依頼がしやすくなります。

3:SNSと連携する

SNSとポートフォリオを連携させることで、より多くの場所から顧客の流入が見込めます。SNSマーケティングの知識を活かして、サイトを見てもらえるよう工夫する必要があるのです。特に、InstagramやTwitterとの相性が良いと言えます。

SNSのプロフィールには、自分の得意分野・これまでの実績などを簡潔にアピールしましょう。Webデザインを始めた頃の裏話について投稿するのもおすすめです。ポートフォリオサイトを経由してSNSを見た方にも、親近感を感じてもらいやすくなります。

4:自分の個性を入れたデザインにする

自分の個性を入れたデザインのサイトにすることも、他のWebデザインを仕事にしている方と差別化するポイントです。例えば背景に動きを加えたり、フォントを工夫したりすることができます。他にも、自分のコンセプトに合うBGMを付け足すことで独創的なサイトになるでしょう。

5:常に最新の情報を載せる

ポートフォリオサイトには、最新の情報を載せるようにすることで過去作品からの変化や自分の成長をアピールできます。更新率が上がるとSEOの順位にも影響が出て、サイトを見つけてもらいやすくなるのです。

メールアドレスやSNSアカウントを変更した場合も、忘れずに記載するようにしましょう。今も積極的に活動していることが分かれば、ユーザーに興味を持ってもらいやすいです。

6:制作したデザインのこだわりを載せる

作成したデザインのこだわりを載せることで、着目すべき点が明確となります。例えば背景画像の動きにこだわったのであれば、そのことを記載しましょう。自分の強みとこだわった点が一致していると、説得力が増すと言えます。

7:見てほしい人のターゲットに合わせる

ポートフォリオを見て欲しいターゲット層に合わせることで、情報が適切に伝わりやすくなります。ターゲットに合わせない限り、自己満足のサイトになってしまうのです。

例えば、Webデザイン制作会社の人に見てもらいたい場合は、コンタクトフォームを分かりやすい位置に提示すると良いでしょう。さらに製作に携わった人を明記することで、信頼度が上がります。

魅力的なサイトを参考にして自分の個性を生かしたポートフォリオを作ろう



魅力的なサイトの写真の載せ方や例文を参考に、自分の個性を活かしてポートフォリオを作りましょう。自分の感性や個性をアピールしたり、これまでに受注した案件や企業で残した実績を掲載したりすることで、今後の糧となります。

ポートフォリオに作品を載せることで、保有するスキルを顧客に提示することが可能です。内容を充実させることで、顧客に見つけてもらいやすくなり、直接依頼を受けることも可能となります。

LPやWebデザインを効率的に検索するには


たくさんのサイトを検索して参考になるデザインを探すのは時間がかかって大変です。
そこでおすすめなのが、LeanGoの提供する「Dejam」です。

https://leango.co.jp/dejam/
「Dejam」は、豊富なデザインデータベースを無料で公開している、LP・Webデザインの参考事例サイトです。
業種や画面名などでデザインを検索することができます。
デザインを検索したい方は活用してみましょう。

記事スコア: 18

CXBOTTLE編集部の他の記事も読む

  • LPとは?運用のメリットとデメリット・特徴などを細かく解説!

    LPとはLPとは、ランディングページのことを指しています。ランディングページとは、検索結果や広告からの訪問者が最初にアクセスするページのことを言います。ちなみに、着地する(land)という意味からこの名前がついています。LPには、広義の意味合いと狭義の意味合い 続きを読む

  • プロセスマネジメントの意味|導入する利点や結果を出すコツとは?

    プロセスマネジメントの意味「プロセスマネジメント」という言葉をよく耳にすることでしょう。プロセスマネジメントは、結果を最大化させると言われています。このコラムではプロセスマネジメントの基本について解説し、その成功事例を紹介します。プロセスマネジメントが必要な理 続きを読む

  • LPの制作会社おすすめ12選|メリットやデメリット・依頼時の注意点を紹介!

    LP(ランディングページ)とは?LP(ランディングページ)は、もともと検索や広告経由で最初に見るページで、ホームページに着地するイメージからこのように呼ばれるようになりました。しかし、一般的には、縦長の情報量が多いページのことをLPと呼ぶことが多いです。商品の 続きを読む

  • LPの作り方の8つの手順とは?構成の要素や注意したいポイントも解説

    LPとはどのようなものかLP(ランディングページ)とは、集客を目的とした縦長1枚で完結するWebページのことです。Webページと聞くと、「TOPページ」「会社概要」「商品紹介 」「問い合わせ」等、複数のページから成るホームページを連想する方も多いでしょうが、そ 続きを読む

  • デザインの参考になるギャラリーサイト16選│自社にぴったりなLPの作り方も

    自社にぴったりなLPを作成する4つのコツLPとはランディングページのことです。最初にユーザーがアクセスするため、直訳すると着地ページという意味になります。サイトの顔となるLPは自社商品やサービスの特徴や利点が伝わりやすく、ユーザーの心をつかむデザインにするのが 続きを読む

  • おすすめWebデザインのテンプレート41選|無料と有料のものを幅広く紹介

    Webデザインのテンプレートとは?Webデザインのテンプレートとは、Webサイトのデザインやレイアウトの雛形のことです。サイトの用途や予算に合わせた、様々なテーマやパッケージのものが販売されており、未経験者でも簡単に自分のサイトを作成できます。しかし、ひとくち 続きを読む

  • 無料で使えるWebデザインツール11選!選ぶ際のチェックリストも紹介

    Webデザインとは?Webデザインは、Web上に存在するホームページを制作することを意味します。他のデザインの仕事とは違い、Webデザインにはデザインだけではなくホームページとして表示するためのコーディングが必要です。Webをデザインするときは、コーディングを 続きを読む

  • Webデザイン業務が副業におすすめな8つの理由|在宅で副収入を得よう

    副業フリーランスの市場規模企業の副業解禁にも相まって、副業フリーランスの市場規模は、年々増えています。2020年に発生したコロナウイルスの発生も相まって、ここ数年で人々の働き方に対する意識が大幅に変化しました。また、ランサーズによる、フリーランス・副業・複業ワ 続きを読む

  • Webデザインの参考になるサイト37選|流行りのデザインの動向についても解説

    Webデザインの幅を広げる方法とはWebサイトを作る上でWebデザインのスキルは大変重要です。デザインによってWebサイトの見やすさ、企業やサービス内容の伝わりやすさ、ユニークさなど、見る人に与える印象が大きく変わります。多種多様なサイトデザインを研究すること 続きを読む

  • LPデザインの参考おすすめ17サイト!成功に導くポイント・見せ方のコツも紹介

    LPデザイン決定までの5つの流れLPとはランディングページの略で、Webサイトにおいてユーザーのアクションを誘導するためのページです。具体的には商品紹介ページやサービス紹介ページなどがLPになります。LPのクオリティはサイト売り上げに大きく影響するため、LPは 続きを読む

  • Webデザインを独学で学ぶには?6つの勉強方法や学習手順を解説

    独学でもWebデザインを学ぶことはできる優秀なWebデザイナーは引く手あまたで、高収入が得られる場合もあります。そのようなWebデザインを学んでみたいという人も少なくありません。しかし、専門のスクールに通わなければ学べないのではと考えている人も多くいるでしょう 続きを読む

  • BPMを導入するメリットを解説|必要な理由や海外との違いとは?

    BPMとはBPMとは「Business Process Management」を略した言葉で、業務管理手法の1つです。BPMは業務の流れをモデル化することで課題の分析を行い、課題解決のための新しい業務プロセスを作ることで、継続的に業務改善を行うというものです。 続きを読む

  • LPを構成する大切な10個の要素をご紹介|基本を押さえよう!

    LP(ランディングページ)の役割LP(ランディングページ)の役割は、webページ上の広告をクリック・タップして誘導された最初のページに対して効果的に商品やサービスの宣伝をする重要なものとなります。来訪してきたユーザーに対して購入意欲・資料請求・問い合わせといっ 続きを読む

  • 2021年Webデザインのトレンド15選|アニメーションを駆使したものも登場

    2021年のWebデザインのトレンドの傾向2021年はコロナウィルス蔓延による影響で、外出自粛やリモートワークが促進され、より長い時間を家で過ごす人が急増しました。必然的に人々がWebサイトを見る時間も長くなり、Webサイトを工夫することによる効果は大きくなっ 続きを読む

  • Webデザイン初心者におすすめの勉強法4選|おすすめの本15選も紹介

    Webデザインとは?ホームページ作成やデザインに興味がある人は、Webデザインを学んでみたいと思う人も多いでしょう。そもそも、Webデザインとはどんなことをするのでしょうか。Webデザインとは、パソコンやスマホなどのネット上に掲載されるホームページの文字や色の 続きを読む

  • Webデザインの勉強におすすめの本総合18選|独学やスキルアップにおすすめ

    WebデザインとはWebデザインとは、PCやスマートフォンなどの画面に表示されるもののデザインを作成することです。具体的には、企業などのホームページや商品紹介のWebサイトなどに、どのようなコンテンツを掲載するのか、配置や見出し、テキストの文字のフォントをどう 続きを読む

  • Taskworldが持つ特徴8つとメリット4つ!料金プランや使い方も解説

    TaskworldについてTaskworldとはタスク管理ツールです。その特徴は充実した機能と、洗練され使いやすくデザインされたひとつひとつのツールの使い易さです。 機能性と使いやすさの2つを追求した、総合タスク管理、プロジェクト管理ツールとしてTaskwor 続きを読む

  • QuickSolutionの4つの特徴|7つの導入メリット・料金プランを紹介

    QuickSolutionとはQuickSolutionは、日本の産学官連携による共同研究によって開発された純国産の企業内検索ソフトです。QuickSolutionのコア・アルゴリズムは豊橋技術科学大学で開発され、その後、住友電工・住友電工情報システムが評価や 続きを読む

  • AdFlowとは?AdFlowの特徴7つに制作に必要な搭載機能7つを紹介

    AdFlowとは?AdFlowは、創業の2007年からインターネット広告を中心に10万本を超える広告クリエイティブを手掛けてきた株式会社クリエイターズマッチが、自社の業務を効率化するために開発した、制作現場から生まれたプロジェクト管理ツールです。アパレル・化粧 続きを読む