などと思っていませんか？

「ポートフォリオ作成は大事だ」と言われても、具体例などがないと、いまひとつどんなものを作ればいいかわからないですよね。

そこで本日は、有名Webデザイナーのポートフォリオ例や、未経験から学習開始し内定獲得をした方のポートフォリオサイトを紹介しながら、転職活動で評価されるポートフォリオサイトの作成方法を解説します。

この記事では他にも、

なども解説いたします。

ポートフォリオとは？

ポートフォリオとは、自分が今までに制作した作品の一覧です。今までの制作実績が一目でわかるように、作品をわかりやすく、センスよくまとめたもので、クリエイティブ系職のマストアイテムと言えます。

ポートフォリオには、ポートフォリオサイトを制作して、そこに必要な情報を載せるやり方と、今までの作品を紙媒体に印刷して、一冊の大判本やフォルダにまとめるやり方の２種類があります。

未経験・フリーランスのWebデザイナーにポートフォリオは必須

ポートフォリオは、クライアントや採用担当に自分のデザインスキルやデザインセンスをアピールする上で、非常に重要なツールとなります。

特に、Web制作会社などで制作実績の無い、未経験Webデザイナーが、フリーランスとして仕事を受注したり、転職活動を行う時などは、ポートフォリオの用意は必須です。

実績が無い分、あなたのスキルを実際の成果物で証明する必要があるからです。

実際、Webデザイナーの就・転職活動の時には、応募書類を提出する際に、ポートフォリオの提出が義務となっていることが一般的です。

フリーランスでも、コンペの際に一番に重視されるのは、ポートフォリオと言っても過言では無いでしょう。

それでは、ポートフォリオには、どのような内容を載せるべきなのでしょうか。

Webデザイナー向けポートフォリオの作り方

ポートフォリオにまず含めるべきなのは、

などです。

もしSNSなどを使って情報発信をしている場合は、そうした項目を含めるのも効果的です。

実際に、侍エンジニアで学習開始し、未経験から内定6社を獲得したRyo Sugimotoさんのポートフォリオサイトをみながら、それぞれの項目でどんなことを書けばいいのかを確認していきましょう。

自分のプロフィール

まずは、自分の簡単なプロフィールを載せましょう。いつから学習を開始したのか、どのような言語を学習したのか、どのような作品を作ってきたのかなど、自分の経歴を簡潔にまとめます。

もし、実際に受注した案件などがあれば、どのくらいの規模・金額で、どのようなことを担当したのかを具体的に記述しましょう。

また、資格や学歴、顔写真などもきちんと載せましょう。顔写真を載せることで、信用性をアップできますし、採用側の記憶に残りやすくなります。

デザインスキルやプログラミングスキルの一覧

自分のデザインスキルやプログラミングスキルを載せましょう。

プロフィールの中で言及しても良いですが、写真のように一目でわかるように工夫するとより効果的です。

このように図になっていると、自分の強みとなるスキルを強調することもできますし、各スキルのレベル感もクライアントや採用側に伝えられるので、実際に仕事を始めた後でのミスマッチなども防ぐことができます。

これまでに制作した作品のまとめページ

これまでに制作したWebサイトの一覧を載せましょう。

それぞれのサイトのファーストビューをわかりやすく配置した上で、実際のサイトに飛べるようにリンクを貼っておくのがベストです。

これまでの制作物に関するコメントや工夫点

こちらのポートフォリオサイトでは載せていませんが、制作物に関するコメントや工夫点を簡単に載せるのも効果的です。

こちらは、後に紹介する、Webクリエイターの徳田優一さんのポートフォリオサイトから引用してきた物です。制作のどの工程に関わったかが一目でわかりますね。

このように、

などを記述することで、あなたの世界観や、クライアントの要望を汲み取るセンス、成長過程なども相手に伝えることができます。

情報発信や作品を公開しているSNS

今までの成果物の他に、情報発信をしているSNSなどあれば、そちらもポートフォリオサイトに載せておきましょう。

こちらも、先ほどご紹介した徳田優一のポートフォリオサイトおよびインスタグラムからの引用です。

こちらのアカウントに掲載された写真を見ても、徳田さんのデザインセンスや写真スキル・画像加工スキルなどが伝わってきますよね。

また、現在はSNSと連動したWebマーケティングが主流になっています。

あなたのアカウントに一定のフォロワーがついていることを見せることで、あなたのデザインスキルの担保にもなりますし、SNSを使ったマーケティングにも強いことをアピールすることもできます。

参考にしたいWebデザイナーポートフォリオ例13選

ポートフォリオに載せるべき内容が一通り理解できたところで、次はお手本となるような例を見ていきましょう。

ポートフォリオサイトは、あなたの創造性を表現する場ですので、必ずこうでなければならない、という決まりはありません。

できるだけ多くの良質なポートフォリオサイトに触れる中で、あなたにぴったりのポートフォリオサイトのアイディアを膨らませてみてください。

UNDERLINE

大阪でウェブ制作のディレクション、デザイン、コーディングとマルチに活躍する徳田優一さんのポートフォリオサイトです。

ファーストビューにご自身が載っていることで「誰の」ポートフォリオサイトなのかということが伝わりやすく、ブログ機能もあることで、作品だけでなく人柄まで伝わるポートフォリオサイトとなっています。

Dinner for Five.

デザイナー、エンジニアとしても活躍するMitsugu Takahashiさんのポートフォリオサイトです。

白と黒のシンプルなカラーリングに大胆なコピーが個性的で、シンプルで洗練されている印象を受けます。

KATOSHUN.com

制作会社を運営する加藤俊司さんのポートフォリオサイトです。

上下左右に画面が移動する動きのあるデザインと、独特の色使いが印象的ですね。

また、ファーストビューで、今までの制作実績や概要がわかるようになっていることも、ぜひ参考にしたい特徴です。

MIKE INGHAM

イギリスでグラフィックデザイナーとして活躍しているMIKE INGHAMさんのポートフォリオサイトです。

シンプルな作りで、作品を一眼で確認することができます。シンプルで無駄を削ぎ落としたウェブサイトですね。

present.

デザイナーの宇都宮 勝晃さんのポートフォリオサイトです。

海をイメージさせる、青を基調としたモダンなサイトデザインが特徴です。

また、MENUアイコンのちょっとしたアニメーションや、上下左右に画面が動くアニメーションなども、さりげないながら、スキルの高さがうかがえるサイトになっています。

jojo design

東京でインタラクティブデザイナーとして活躍するjojoさんのポートフォリオサイトです。

背景に動く赤い円と、作品紹介の円がリンクしていて細部までこだわりを感じるサイトになっています。

musubime

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

シンプルな白黒のファーストビューと、新聞の社説のような縦書きのデザインが特徴で、印象に残り安いですね。

また、どのようなコンセプトでWebデザインを行っているのか、今までどのようなクライアントとどのような仕事をしてきたのかが「Phillosophy」の部分に簡潔にまとめられています。

このような工夫をすることで、カワセさんの世界観や受注できる仕事内容などが一目でわかりますね。

Mana's Portfolio Website

Webクリエイターボックスを運営するManaさんのポートフォリオサイト。

Webデザインだけでなく、講演や本など様々な実績が載せられており、Manaさんの発信力の高さが伝わってくる構成になっています。

S5-Style

アートディレクターやフロントエンドエンジニアとして活躍する田渕将吾さんのポートフォリオサイトです。

サイト全体に様々なアニメーションがつけられていて、非常にワクワクするデザインになっています。また、読み込み中にもアニメーションがついているので、飽きることなく、サイトを閲覧できます。

プログラミングが強みで、自分のアニメーションスキルをアピールしたい人は是非参考にしたいポートフォリオサイトです。

Hasegawa Hiroshi

WebデザイナーのHasegawa Hiroshi氏のポートフォリオサイトです。

今までの制作実績がきれいにレイアウトされているだけでなく、WordPress案件、オンラインショップ案件など、案件内容ごとにフィルタリングできるようになっているのも特徴です。

また、依頼方法の詳細（どんな情報を提供してほしいか）や、対応できない案件などについての情報もあり、仕事を進める上でトラブルが起きないように、様々な工夫がされているのも非常に勉強になる点です。

YUTO TAKAHASHI

Webデザイナー・グラフィックデザイナー・フロントエンドエンジニアのYuto Takahashiさんのポートフォリオサイトです。

項目ごとに表示の変わるポインター、スクロールすると画像が溶けるように移動するアニメーション、回転する「閉じる」画面、スクロール終了時に出てくる「You are Tired」画面と猫の画像...など遊び心たっぷりのサイトです。

最新のフロントエンドプログラミングの知識が凝縮されたポートフォリオサイトなので、エンジニアとしてのスキルアップとしても参考にしたいサイトです。

DAISUKE OBANA

グラフィックデザイナー・Webデザイナーの尾花大輔さんのポートフォリオサイトです。

シンプルな作りになっている分、制作物の鮮やかさが目立つサイトになっています。

プロフィール部分が下ボタンになっていて、クリックすると画面の上半分が移動するアニメーションもオシャレです。

作品の良さを伝えることに重きをおきたい人におすすめの参考サイトです。

フクシマナオキ

Webデザイナーのフクシマナオキさんのポートフォリオサイトです。

ファーストビュー・制作物一覧・コンセプト・プロフィールという、非常にベーシックな作りになっています。

ポートフォリオサイトに必要なものだけがシンプルに載っているサイトなので、特に初めてポートフォリオサイトを作るという人にとっては、参考になるサイトです。

Webデザイナーがポートフォリオサイトを作る時のFAQ

ポートフォリオを作る際には、「これってどうしたらいいの？」という疑問が浮かんでくるもの。

ここでは、よくある質問をQ＆A形式でまとめてみました。

Webデザイナーのポートフォリオは紙とサイトのどっちがいいの？

Webデザイナーならポートフォリオはサイトで制作しよう

ポートフォリオには、ポートフォリオサイトを作る場合と、印刷物として作る場合の２種類があります。

どちらにも長所・短所がありますが、もしまだどちらのポートフォリオも作っていなければ、ポートフォリオサイトの制作から始めましょう。

就・転職活動の際には、ほとんどのケースでWeb版のポートフォリオの提出が求められます。

また、Web版であれば、実際に制作したサイトのリンクを貼ることができるので、より具体的にサイトの良さを伝えられます。

さらに、最近は動きのあるWebサイトがトレンドなので、そうしたサイトを作るスキルがあることを示すためにも、ポートフォリオサイトは必ず作成しておきましょう。

面接のために、紙のポートフォリオも用意しておこう

もし、ポートフォリオサイトをすでに持っているなら、紙のポートフォリオも併せて制作することをおすすめします。

特に面接の際には、大勢の面接官に対してPCの画面上で作品を見せることが難しい場合がありますし、仮にモニターなどがあったとしても、機器の不具合などで、思わぬトラブルが生じることがあります。

そうした予期しないトラブルを未然に防ぐためにも、紙のポートフォリオを準備しておくといいですよ。

紙ポートフォリオを作るなら、用紙やレイアウトにもこだわろう

紙のポートフォリオは、Web版のポートフォリオとは本質的に異なります。

サイトの動きが表現しづらかったり、紙面の大きさやページ数に制限がある一方で、見開きが使えたり、こちらの意図する順番でページをめくってもらうこともできます。

そうした紙ならではの利点を最大限に利用するためには、ポートフォリオサイトをただ印刷するのではなく、紙版ポートフォリオ用にレイアウトをきちんと工夫することも重要です。

また、一般的な印刷紙ではなく、写真用の光沢紙を使ったり、上質な紙を使うなど、質感などにもこだわると、グッとグレードがアップしますよ。

PinterestなどのSNSで「紙ポートフォリオ　テンプレート」などと検索すると、様々なアイディアが掲載されていますので、興味のある人は、ぜひ一度探してみてください。

ポートフォリオなしでもWebデザイナーに転職できる？

特に未経験ならポートフォリオなしはキツイ

先ほども述べたように、Webデザイナーは応募の時点でポートフォリオの提出を求められることが多く、ポートフォリオが無い時点で、選考から外されてしまうことも珍しくありません。

また、自分のスキルを相手に効果的に伝える上でも、ポートフォリオは必須のアイテムです。

この後にも説明しますが、ポートフォリオサイト自体は、テンプレートなどが揃ったWebサイトビルダーなどを使えば簡単に作成できますので、転職を考えている人は、必ず用意しておきましょう。

ポートフォリオに掲載する作品数はどれくらいにすべき？

掲載作品数は10-20個程度がベスト

ポートフォリオに掲載する作品数は、10−20個程度が一般的なようです。様々なデザイン・仕様に対応できることを示すためにも、最低10作品は載せておくことをおすすめします。

クオリティの高い作品が揃っているなら、もちろん20以上作品を載せても構いませんが、ポートフォリオサイトはあくまでも、「自分のデザインセンス・スキルの一覧」です。

似通ったサイトをたくさん載せたり、低クオリティのサイトを数多く載せるよりは、どこに出しても恥ずかしく無いクオリティの作品を厳選して載せる方が効果的だと言えます。

もし、数多くの制作に携わったことをアピールしたい場合は、自己プロフィールなどに今までの制作件数などを載せるのと良いでしょう。

未経験・フリーランスWebデザイナーにおすすめのポートフォリオサイト4選

時間が無い人にとっては、できるだけ実際の仕事や、制作実績として掲載できるサイト作りに時間をかけたい人も多いでしょう。

そんなあなたにおすすめなのが、短時間で簡単にポートフォリオサイトを作れるお役立ちサイトです。

PORTFOLIOBOX

ポートフォリオに特化したウェブサイトビルダーです。ギャラリーのカスタマイズの多さが特徴で、世界100万人以上のユーザーに使われています。

また、様々なクリエイターのポートフォリオサイトを公式ウェブサイトから閲覧することができるので、自分のサイトのアイディア探しにも使うことができます。

独自ドメインを取得しても無料なので、とにかく時間もコストもかけたく無い人におすすめです。

Strikingly（ストライキングリー）

Forbes、TechCrunch、The New York Timesなど、様々なメディアでも取り上げられているホームページビルダーです。

操作性の良さが評判で、30分から1時間ほどでWebサイトを制作することができます。

とにかく時間をかけずにサイトを作りたい人におすすめです。

ただ、無料版の場合は20ページまでの制限があるので、後にブログなどを追加することを考えている人は、別のビルダーを使った方が良いと言えます。

Wix（ウィックス）

Wixは、要素をドラッグアンドドロップするだけで、Webサイトを作れるホームページビルダーです。

テーマや機能、プラグインも豊富にあるので、簡単に自分の思い通りのカスタマイズができます。

何より、サーバーの契約や連携の手間なく、すぐにWebサイトを作れるのが特徴です。独自ドメインを取得しなければ、無料で使うことができます。

WordPress（ワードプレス）

WordPressは、実際のWeb案件で非常に使われるCMS（コンテンツ管理システム）です。

サーバーの契約やドメインの取得といった手間はかかりますが、豊富なテンプレートを活用することで、時間をかけることなく、オシャレなポートフォリオサイトを作ることができます。

また、プラグインなども豊富なので、後ほどポートフォリオサイトにSNSの投稿を載せたり、ブログを併設したりしたいと思った時にも簡単に対応することができます。

ポートフォリオにおすすめのWordPressテーマは以下の4つです。

早速Webデザイナーのポートフォリオを作ってみよう

それでは早速ポートフォリオを作ってみましょう。

作品のない人は作品作りから、作品はすでにあってポートフォリオサイトを作る人は外部サービスまたは、自分でデザインして作っていきましょう。

まだ作品が揃っていない人は、最初は身近なものからヒントをもらってWebサイトを作ってみましょう。

作品作りから入る人は最初はどんなアイディアでもいいので、これまでに欲しかったサービス、あなたの好きなものを集めたサイト、身の回りで紹介したいお店などなんでもいいので形にしてみましょう。

未経験から挫折なくWebデザイナーを目指すなら

これからWebデザイナーを目指そうとしている人のなかには、

と不安な人もいますよね。

いざ独学でWebデザインを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「思っていたよりもスキルを身につけるのって難しいんだな...」とスキルの習得自体を諦めかねません。

仮にわからないことを飛ばしながら勉強を進めたとしても、Webデザイナーへの転職や副業での収入獲得を実現できる実践的なスキルが身につかなければ、結局後悔することになります。

そこで、おすすめしたいのが「SAMURAI ENGINEER（侍エンジニア）」です。

料金	月分割4.098円~
実績	・累計指導実績3万5,000名以上 ・受講生の学習完了率98% ・受講生の転職成功率99%

侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。

先ほど述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役Webデザイナーのようなプロに質問や相談できない状況で、スキルを習得するのは非常に難易度が高いといえます。

しかし、侍エンジニアでは

といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%」「転職成功率99%」という実績からも、侍エンジニアなら挫折しづらい環境で学習を進められるといえます。

侍エンジニアのサポート体制

また、侍エンジニアではカウンセリングにて受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でもWebデザイナーへの転職や副業での収入獲得に必要なスキルだけを効率的に習得可能です。

侍エンジニアのカリキュラム例

最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。

なぜ侍エンジニアが挫折せずWebデザインスキルを習得できるのか気になる人はぜひ公式サイトをご覧ください。

公式サイトで詳細を見る