未経験Webデザイナーが参考にすべきポートフォリオサイトと作り方のポイント

こんにちは!侍エンジニア塾ブログ編集部のはやかわです。

この記事をご覧になっているあなたは、

ポートフォリオサイトってどんなサイトを作ればいいの?
架空の企業や飲食店のサイト?どうやって作ればいいの?

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

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

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

この記事では他にも、

  • ポートフォリオサイトに記載すべき内容
  • 簡単にポートフォリオサイトが作れるお役立ちサイト
  • ポートフォリオって紙とウェブ両方すべき?など細かい知識

なども解説いたします。

ポートフォリオとは?

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

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

未経験・フリーランスのWebデザイナーならポートフォリオ作りは必須!

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

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

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

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

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

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

Webデザイナーとしてポートフォリオを作る際の作り方・内容

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

  • 自分のプロフィール
  • デザインスキルやプログラミングスキルの一覧
  • これまでに制作した作品のまとめページ
  • これまでの制作物に関するコメントや工夫点


などです。

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

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


引用元:Ryo - Portfolio https://portfolio-d7ad3.firebaseapp.com/

自分のプロフィール


引用元:Ryo - Portfolio https://portfolio-d7ad3.firebaseapp.com/

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

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

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

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


引用元:Ryo - Portfolio https://portfolio-d7ad3.firebaseapp.com/

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

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

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

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


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

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

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

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


引用元:UNDERLINE https://u-d-l.jp/

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

このように、

  • 制作においてどのような貢献をしたのか
  • 何を意識(注意)して作品を作ったのか
  • サイトの「売り」となるものは何か
  • 制作の過程で学んだこと

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

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

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


引用元:UNDERLINE https://u-d-l.jp/


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

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

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

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

参考にしたいWebデザイナーポートフォリオのテンプレート・見本・例

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

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

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

UNDERLINE


引用:UNDERLINE https://u-d-l.jp/

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

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

Dinner for Five.


引用:Dinner for Five. https://dff.mitsugutakahashi.com/

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

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

KATOSHUN.com


引用元:KATOSHUN.com http://katoshun.com/

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

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

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

MIKE INGHAM


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

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

present.


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

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

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

jojo design


引用:jojo design http://www.jojodesign.jp/

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

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

musubime


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

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

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

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

Mana's Portfolio Website


引用:Mana's Portfolio Website http://www.webcreatormana.com/

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

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

S5-Style


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

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

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

Hasegawa Hiroshi


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

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

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

YUTO TAKAHASHI


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

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

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

DAISUKE OBANA


引用元: http://d-obana.com/

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

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

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

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

フクシマナオキ


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Q: ポートフォリオの作品数はどれくらいにすべき?

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

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

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

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

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

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

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

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

PORTFOLIOBOX


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

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

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

Strikingly(ストライキングリー)


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

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

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

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

Wix(ウィックス)


引用元: https://ja.wix.com/

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

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

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

WordPress(ワードプレス)


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

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

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

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

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

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

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

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

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

未経験からWebデザイナーに最短でなるなら

未経験から最短でウェブデザイナーになるなら、デザインも学べるプログラミングスクールもしくは、コーディングの学べるデザインスクールでの学習がおすすめです。

スクールだと最短でスキルアップがはかれるかつ、デザインだけだと形にはできないため、コーディングも学んでアイディアを形にするスキルを身につけましょう。

侍エンジニア塾では、

  • あなたの理想のスキルを持った講師によるマンツーマンレッスン
  • Webデザイナーになるという目標から逆算したフルオーダーメイドカリキュラム
  • オリジナルサービス・サイト制作支援

の3つの特徴を生かして、どんどんオリジナルの作品を作っていくことができます。未経験から6つもの作品を作って内定を獲得した卒業生の事例もございます。

Webデザイナーになるには、どれだけスキルをつけられるか、そのスキルでどれだけ作品を作ってポートフォリオを充実させられるかがとても大事です。

無料体験レッスンでは、そんな卒業生の事例と共に、あなたの理想の人生から逆算した最適なキャリアやおすすめのスキルと学習方法を提案いたしますので、下記カレンダーよりお気軽にお申し込みください。

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

早川弘晃

侍エンジニア塾ブログのマーケティングやライティングを担当しています。制作会社にてフロントエンドエンジニアをやっていた経験を生かして、現場で使える質の高い情報提供をモットーに、日々思考錯誤しながら過ごしています!

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー