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デザインの参考事例サイトです。
業種や画面名などでデザインを検索することができます。
デザインを検索したい方は活用してみましょう。