WEBデザイナー必見！受注・転職に強いポートフォリオの作り方と参考サイト

WEBデザイナーになるうえで欠かせないポートフォリオ。

ポートフォリオとは自分の作品集のことであり、就職・転職活動や案件受注をするうえで自分の実力を示すとても大切なものです。

とはいえ、実際にポートフォリオを作るとなると

「どんなふうに作ればいいの？」
「どんな作品を載せるのが正解？」
「作品以外には何を書かないといけないの？」

といった疑問が多く浮かぶと思います。

そんな疑問を解決すべく、今回はポートフォリオの作り方や作るときのポイントを解説していきます。

当社が独自で集めたポートフォリオに関するデータや、面接担当者の声も載せているので、ぜひポートフォリオを作るときの参考にしてくださいね。

WEBデザイナーがポートフォリオに力を入れるべき理由

ポートフォリオの作り方をご紹介する前に、ポートフォリオの重要性についてお伝えしていきます。

なぜ重要かを知っておくことで、作成するときも何のために作っているかを意識できるようになり、より就職・転職活動や案件獲得が上手くいくポートフォリオを作れるようになります。

既にポートフォリオの重要性を知っているという方も、確認のためにぜひ読んでみてくださいね。

WEBデザインの実力を証明できるから

ポートフォリオが重要な理由として、WEBデザインの実力を示せることが挙げられます。

WEBデザイン業界は良くも悪くも実力主義の世界です。

年齢、性別、経歴はほとんど関係なく、スキルレベルで「採用されるか」「依頼されるか」が決まってきます。

そこで、重要になってくるのがポートフォリオ。

ポートフォリオに載せている作品のクオリティによって、どれくらいのWEBデザインスキルがあるかを採用担当やクライアントは判断します。

もちろん、ポートフォリオだけで合否を決めるわけではありませんが、判断に大きな影響を与えているのは間違いありません。

だからこそ、ポートフォリオに力を入れるのが大切なのです。

WEBデザインスキル以外の可能性も見せられる

WEBデザインスキル以外のポテンシャルを見せられるのもポートフォリオが重要な理由。

例えば、文章がわかりやすく心動かされるものであれば「文章力がある」と思ってもらえますし、ポートフォリオ全体の構成がよければ「WEBサイトの構成を考える力がある」と思ってもらえます。

面接官からすると、入社後の可能性が大きければ大きいほど良いです。

もし、WEBデザインスキルが同じくらいの人と数少ない枠を争った場合、WEBデザインスキル以外のことが採用の決め手になることもあります。

少しでも合格できる確率を高められるように、ポートフォリオに力を入れるのはとても大切なのです。

WEBデザイナーが知っておいたいポートフォリオの基礎知識

では、次にポートフォリオを作るときに知っておきたい、ポートフォリオの基礎知識をお伝えしていきます。

ポートフォリオの提出形式はWEBサイト型かPDF型が基本

ポートフォリオの形式は主にWEBサイト型かPDF型にわかれます。

それぞれ次のような特徴があります。

※この他にも、Instagramやピンタレストといった画像を投稿できるSNSを利用して、ポートフォリオを作っている人もいます。

提出形式は基本的に何でも構わない

ポートフォリオの主な提出形式を紹介しましたが、「どの形式で提出するのがいいの？」といった疑問を持っている方もいると思います。

結論、基本的には提出形式はどんなものでも大丈夫です。

重要なのは提出形式ではなく、ポートフォリオの内容であり、作品のクオリティだからです。

現に、当社に応募されたWEBデザイナーのポートフォリオにはさまざまな形式がありましたが、合格率が形式で変わるということはありませんでした。

▼応募された方が持ってきたポートフォリオの形式と合格者の割合

「この形式じゃないから落とす」ということは基本的にはないので、自分の作りやすい形式で作るようにしましょう。

※ただし「コーディングのスキルもみたいから、WEBサイト型のポートフォリオを見せて欲しい」という企業もあります。そんな企業を志望する場合は、WEBサイト型のポートフォリオを作りましょう。

提出する媒体はWEBでも紙でも構わない

ポートフォリオはWEB媒体で提出しないといけないと思われがちですが、そんなことはありません。

紙のポートフォリオでも十分採用されることはあります。

むしろ、企業や面接官によっては「紙のほうが丁寧さを感じる」と言っている人もいるくらいです。

WEB媒体と紙媒体はそれぞれメリット・デメリットがあるので、あらかじめ把握しておきましょう。

WEB媒体のメリット・デメリット

紙媒体のメリット・デメリット

現役WEBデザイナー

おすすめは両方作っておくことです！両方作っておくと面接官にやる気を感じてもらえます。

ポートフォリオ自体はテンプレートを使っても問題ない

ポートフォリオは必ずしもオリジナルである必要はありません。

何度もお伝えしているように面接官がメインで見ているのは、ポートフォリオに入っている作品のクオリティです。

そのため、作品のクオリティが高ければ、ポートフォリオ自体がテンプレートであることはそれほど気になりません。

もちろん、レベルの高いポートフォリオサイトを作れるなら、オリジナルを作るにこしたことはありませんが、

「自分で作ってポートフォリオサイトがダサくなるのを避けたい」
「ポートフォリオ自体に凝るよりも、中身の作品に時間をかけたい」

という方は、世の中にはすでにあるテンプレートを使いましょう。

あとからポートフォリオ作成に使えるテンプレートを紹介するので、ぜひそちらを参考にしてくださいね。

WEBデザイナーがポートフォリオに入れるべき3つの項目

ポートフォリオの重要性は理解していただけたでしょうか。

ここからは実際にポートフォリオについて詳しく解説していきます。

まず、お伝えするのはポートフォリオに入れるべき項目。

基本的にポートフォリオには「プロフィール」「自分の作品」「作品の説明」の3つを入れます。

それぞれについてポイントをお伝えしていくので、ぜひ参考にしてくださいね。

プロフィール

まず、載せたいのは、自身のプロフィールです。

就職・転職活動や集客において、ポートフォリオは履歴書のようなものです。

そのため、一般的な履歴書に載せるような「名前」「写真」「生年月日」「経歴」「持っているスキル」などを記載する必要があります。

就職・転職活動などにポートフォリオを使用するときは「自己PR」「志望動機」「入社後にやりたいこと」などを記載しておくと、面接のときに自然な流れでそれらを伝えることができますよ。

現役WEBデザイナー

「プロフィール写真の服でセンスを見ている」と言っていた採用担当者さんもいました！採用率を上げるためには、写真選びも大切ですよ！

応募企業に合わせた作品

2つ目は作品です。

まず、知っておきたいのは、作品には優劣があるということです。

実案件の作品が1番評価してもらえるので、既にWEBデザイナーとしていくつかの案件をこなしている場合は、その作品を掲載しましょう。

採用されなかったとしても、実案件を載せたほうがいいですよ。

実務未経験で自分の作品がない場合は、ポートフォリオ用に作品を作る必要があります。

これを作らなければいけないといった決まりがあるわけではないのですが、広告バナーだけではスキルレベルを正しく判断してもらえない危険性が高いです。

しっかりと実力を見てもらうためには、WEBサイトやランディングページを載せるのがおすすめです。

ランディングページ…1つの商品を売ることに特化した縦長のWEBサイト

作品の解説

ポートフォリオには作品だけではなく、その解説も載せておきましょう。

具体的には

を書いておきましょう。

WEBデザイナーにとって「なぜそのようなデザインにしたのか」を話せるのはとても大切な能力です。

作品の解説を書いておくことで、ポートフォリオを見た人に論理的に作品を作れる人だと思ってもらえますよ。

WEBデザイナーがポートフォリオを作るときのポイント

WEBデザイナーとしてポートフォリオを作るときにはいくつかのポイントがあります。

ポイントを把握して実践することで、より採用されやすいポートフォリオが作れるようになります。

ここからはそのポイントをご紹介していくので、ぜひポートフォリオを作るときの参考にしてくださいね。

これからお伝えする内容はこちらの動画でも知ることができます！

志望企業やクライアントをしっかり調べてデザインを寄せる

ポートフォリオを作るときには志望する企業やクライアントを調べて、ポートフォリオにどんなデザインを載せるか決めましょう。

例えば、美容系の会社に応募する場合は美容系のデザインを、教育系の企業に応募するときには教育系のデザインを作るのです。

応募した企業に合わせたデザインを持っていけば、面接官にも熱意を感じ取ってもらえますし、実際に自社でも活躍できそうと思ってもらえます。

志望している企業がいろんなデザインを作っている制作会社のようなところであれば、雰囲気の異なるデザインをいくつか掲載するのがおすすめです。

作れる作品の幅が広いことをアピールできれば、他の応募者に差をつけることができますよ。

ポートフォリオは量より質が大切にする

ポートフォリオに入れる作品は量より質のほうが大切です。

量を意識するあまり、質の低い作品をたくさん作る方もいますが、これはあまり意味がありません。

面接官が見ているのはどれだけたくさんの作品を作れるかではなく、どれだけ質の高い作品を作れるかです。

そのため、ポートフォリオ用の作品を作るときには、少し時間がかかってもベストの作品を作るようにしましょう。

本当に質の高いものを作れるのなら、作品の数は関係ありません。1つ2つしか作品がなくても合格できます。

どのレベルの作品を作ればいいか知りたい方は、ココナラと呼ばれるクラウドソーシングサービスを見にいくのがおすすめ。

高単価で受注できている人の作品は質の高いものが多いですよ。

現役WEBデザイナー

ポートフォリオに載せている作品は「自信のある作品」という見られ方をしています。

作品のクオリティがイマイチだと「この人に仕事任せて本当に大丈夫かな…」と思われてしまうので、自分が微妙だと思う作品は載せないようにしましょう！

熱意をしっかり伝わるポートフォリオを作る

ポートフォリオにはしっかり熱意が伝わるような要素を入れるようにしましょう。

ポートフォリオで一番重要視されるのは作品ですが、実際の採用現場では同じレベルのような作品がいくつか揃うこともよくあります。

そのときには合否を分けるのは「どれだけポートフォリオに熱量を感じられるか」です。

ポートフォリオで熱意を伝えるコツは次の4つ。

ひとつひとつはとても細かいことなので、本当に効果があるのかなと思うかもしれませんが、企業は意外とそのようなところをしっかり見ています。

転職に成功したり、案件を受注したりする可能性を1％でも上げるためにできることは全てやっておきましょう。

ポートフォリオは必ず更新し続ける

ポートフォリオを使っていくときに大切なのは、定期的に中身を更新していくことです。

ポートフォリオを最初に作った状態のままにしておくと、駆け出しの頃の実力が今の実力だと判断されてしまいます。

経験を重ねて実力がついているのに、それを汲み取ってもらえないのはもったいないですよね。

そのため、実務案件なので納得のいく作品やレベルアップできたなと思える作品を作れたときには、積極的にその作品をポートフォリオに入れていきましょう。

マメに更新していくことで、ポートフォリオの質が高くなり、どんどん仕事が取れるようになりますよ。

番外編：例外的にポートフォリオがなくても仕事が取れるWEBデザイナーもいる

基本的にWEBデザイナーにポートフォリオは重要なのものなのですが、実はWEBデザイナーのなかにはポートフォリオがなくても仕事を取れる人はいます。

特にフリーランスWEBデザイナーとして働いている人のなかには、そういった人も一定数います。

実際に、ポートフォリオを作っていない方にお話を伺ったところ、その方はGoogleドライブに作品を入れているだけでした。

それでも仕事が取れているのは、Googleドライブに入っている作品のクオリティが高いから。

作品を見せるだけで、仕事が取れるそうです。

かなり特殊な例はあるものの、ポートフォリオの有無よりも作品のクオリティが大切なことがわかりますね。

WEBデザイン未経験者がポートフォリオの作品を作る流れ

ポートフォリオに入れる項目は押さえられたでしょうか？

ご紹介した項目さえ入れることができれば、面接でも集客でも採用してもらえる可能性は一気に高まります。

とはいえ、一番の問題は実際にポートフォリオに入れる作品をどう作るかですよね。

特に作品を作ったことがない人は、本当に作品が作れるか心配だと思います。

そこで、ここからはポートフォリオの作品を作る流れをご紹介していきます。

1.作品のテーマを決める

まずは、作品のテーマを決めましょう。

テーマとはどのようなサイトを作るかということ。先ほどもお伝えしたように、基本的には応募した企業が作っているようなサイトを選ぶのがおすすめです。

応募企業のホームページをみれば、その企業がどんなデザインなのかを確かめられます。

まずは、どんな作品が求められているのかリサーチしてみましょう。

2.作品の目的・目標を決める

どんな作品を作るかを決めたら、次は作品の目的を決めましょう。

WEBサイトを作るのには何かしら目的があります。

商品を購入してもらうための場合もあれば、ブランドを認知してもらうための場合もあります。

目的によってどんなサイトを作るかが大きく変わってくるので、まずはしっかりサイトの目的を決めましょう。

3.作品のペルソナを決める

作品の目的と目標が定まったら、次はペルソナを設定しましょう。

ペルソナとはザックリいうとWEBサイトを見る人の詳細です。

ペルソナを設定することで、どのような人がどのような気持ちでサイトを見るかが明確になり、サイト制作がスムーズに進むようになります。

また、ペルソナを設定しておけば「なぜこのようなデザインにしたか」についても説明しやすくなるので一石二鳥です。

ペルソナ…WEBサイトを見る人の詳細。年齢、性別だけを設定するターゲットとは違い、年齢、仕事、生活、性格まで細かく設定するのがペルソナです。

4.ポートフォリオに載せる情報を決める

ペルソナを決めたら実際にポートフォリオに載せる情報を決めていきましょう。

ペルソナを決めると、サイトを見る人がどのようなことを知りたいかがわかってくるので、それに合わせてサイトに載せる内容を決めていきましょう。

例えば、採用サイトを見にくる読者が「実際、どのように働いているか知りたい」というニーズを持っているのであれば、「具体的な仕事内容」や「社員の声」をサイトに載せる必要があります。

ニーズはわかるけれど、実際にどのような情報を載せればよいかわからないという方は、類似のWEBサイトを参考にしましょう。

クオリティの高いWEBサイトが数多く載っているデザインギャラリーを知りたい方はこちら（↓）の記事がおすすめです！

5.サイトのイメージを決めていく

サイトの内容が決まったら、実際にサイトを作っていくのですが、一度その前にサイトのテイストイメージを固めていきましょう。

「自分が応募する企業のサイトの世界観」や「ペルソナ趣味嗜好」に合わせて、使えそうな素材を集めておきましょう。

デザインをするまではいきませんが、この段階でイメージをはっきりさせておくと、実際にデザインするときもスムーズに作業を進めることができます。

素材を探しに役立つサイトを知りたい方にはこちらの記事がおすすめです。

6.サイト全体のワイヤーフレームを作る

ここまで、細かく内容を決めてようやく制作が始まります。

ただ、いきなりデザインをしていこうとしてもどこに何を配置すればよいかわからないし、大変ですよね。

そこで、まずはサイト全体のワイヤーフレームを作成します。

ワイヤーフレームはサイトの骨格になる部分で、サイト全体のレイアウトや構成に当たります。

ワイヤーフレームが完成してしまえば、あとは「どんな配色にしようかな？」などデザインに集中できるので、先に作っておくようにしましょう。

ワイヤーフレームの作り方を詳しく知りたい方はこちらの記事がおすすめです。

7.デザインを作成していく

ワイヤーフレームが完成したら、おまちかねのデザインです。

これまで決めてきたことに沿って、サイトを装飾していきましょう。

デザインといっても「写真」「余白」「配色」「大きさ」などさまざまなことを考えることがあります。

デザインに正解はありませんが、より綺麗に見えるようにデザインの基礎は事前に押さえておくようにしましょう。

デザインの基礎を詳しく知りたい方は以下の記事がおすすめです！

【形式別】質が高く参考になるポートフォリオ8選

実際にポートフォリオを作るときには、参考があると助かりますよね。

ここからは質の高いポートフォリオを紹介していくので、ぜひ参考にしてください。

WEBサイト型ポートフォリオの参考5選

WEBサイト型からお伝えしていきますね。

UNDERLINE

デザイン、コーディング、ディレクションとマルチスキルを持ち、そのスキルを活かしてWEBデザイナーをしている徳田さんのポートフォリオです。

特徴的なのは、徳田さんの写真と仕事への想いがドンと載っているファーストビュー。

ポートフォリオを作っているのが、どんな人かがすぐわかる作りになっており、信頼感を一気に上げることができています。

サイト全体はものすごくシンプルで、無駄なものが一切ないといった感じです。

「スタイリッシュな作品を作ってもらえそう」という印象を与えることができます。

S5 Studios

アートディレクターである田渕将吾さんのポートフォリオも参考になります。

多くのところにアニメーションが施されており、見ていて飽きると言ったことがありません。

また、アニメーションもあいまって、作品全体が怪しいけれど引き込まれるようなデザインになっています。

BGMが流れており、視覚だけではなく聴覚でも世界観を感じられるのも魅力です。

tashi design

可愛くて温かみのあるポートフォリオサイトで勉強になるのが、イラストレーター兼WEBデザイナーであるtashi（たし）のポートフォリオです。

tashiさんがイラストレーターなのもあって、サイト全体に可愛らしいイラストがたくさん散りばめられています。

ポートフォリオを見るだけで「温かみがあってポップなデザインを作ってくれそう」と思わせることができます。

ファーストビューにある「おもって つくって おくって」という言葉が全てひらがなになっているのもこだわりを感じますね。

maima.me

星野源が出している楽曲の特設サイトや、一流ホテルのWEBサイトを作成したことがある、MAI IMAKITAさんのポートフォリオも参考になります。

MAI IMAKITAのポートフォリオに載っているのは作品のみ。

まるで「作品を見ればわかるでしょ」と言わんばかりの自信を感じさせられるポートフォリオです。

実際に作品のクオリティがとても高く、ぜひ仕事を依頼したいと思ってしまいますね。

平尾 誠

サイト構造の参考になるのが、ファーストビューの「Code is Design」が特徴的な平尾 誠のポートフォリオです。

基本的に、WEBサイトは下にスクロールしていくのですが、平尾さんのポートフォリオはスクロールすると右に動いていきます。

また、1つ1つのページにユーザーが回遊しやすいような仕掛けが作られており、サイトを見ていてもストレスを感じることがほとんどありません。

デザイン性と利便性のバランスがよく、「この人ならユーザーのためになるデザインを作ってくれそう」と思ってしまいます。

PDF型ポートフォリオの参考3選

ここまでは参考になる、WEBサイトのポートフォリオを紹介してきました。

続いてはPDF型ポートフォリオで参考になるものを紹介していきますね。

Portfolio Honami Muto

まず、紹介するのフリーランスWEBデザイナーの武藤帆南さんのポートフォリオ。

作品数がものすごく多いわけではないものの、1つ1つの作品について

など、作品を制作した過程が細かく書かれており、丁寧な仕事をしてくれるんだなという安心感があります。

スクロールだけで読めるため、少し長くなっても大丈夫なPDFの特徴を活かしたポートフォリオになっていますね。

Naoki KunoPDF Portfolio

熱量を強く感じられるのが、Naoki Kunoさんのポートフォリオです。

ポートフォリオのページ数はなんと66。

架空で使った作品と実務で使った作品の計4作品それぞれについて、どんな過程で作り上げていったかが書かれています。

ユーザーの分析からWEBサイトを作っていることがわかり、デザイン制作だけではなくディレクションができることも感じられるポートフォリオですね。

日本デザインスクール卒業生のポートフォリオ

作品のクオリティで勝負しているのが日本デザインスクール卒業生のポートフォリオ。

これまでお伝えした2つのように、WEBデザイン制作の過程が詳しく書かれているわけではなく、クオリティの高い作品がたくさん並べられています。

細かい説明なしに、作品のクオリティで勝負しているのは、作品への自信と潔さを感じますね。

【形式別】WEBデザイナーがポートフォリオに使えるテンプレートサイト4選

WEBデザイナーのポートフォリオはテンプレートでも問題ないことをお伝えしましたね。

時間をかけたくないからテンプレートを使おうと考えている人もいると思います。

そこで、ここではWEBデザイナーがポートフォリオ作成に使えるテンプレートサイトを紹介していきます。

WEBサイト型のテンプレートサイト2選

WEBサイト型のテンプレートサイトから紹介していきますね。

無料ホームページテンプレート.com

無料ホームページテンプレート.comは、ポートフォリオに使える無料のテンプレートがいくつもあるサイトです。

このサイトの良いところはさまざまテイストのサイトがあること。

いくつものテンプレートから、自分の個性にあったものを見つけられます。

また、サイトの構造が複雑でないため、初心者の方もアレンジしやすいですよ。

全てのテンプレートにデモサイトがついているので、それを見てどのテンプレートにするか選んでくださいね。

無料ホームページテンプレート.com

ポートフォリオHTMLテンプレート（ベーシック）

シンプルなポートフォリオを作りたい方におすすめなのが、「ポートフォリオHTMLテンプレート（ベーシック）」です。

ポートフォリオに必要な要素がテンプレートにまとめられていて、初心者でも簡単にポートフォリオを作れます。

「デモ（基本的なポートフォリオの形が見れるもの）」はもちろんのこと、検索すれば既にカスタマイズしているポートフォリオを見つけられますよ。

ただし、シンプルなデザインなので、中身を充実させないと少し寂しい印象を与えてしまいます。

プロフィールをモリモリに書いたりして、しっかり熱意が伝わるようにしましょう。

ポートフォリオHTMLテンプレート（ベーシック）

PDF型のテンプレート2選

続いてPDF型のテンプレートサイトを紹介していきますね。

Canva

テンプレートのバリエーションがたくさんあるのが、画像作成ツールの「Canva」です。

オシャレなテンプレートがたくさんあり、そのなかから自分の好きなものを選んで、ポートフォリオを作れます。

Canva自体が多機能な画像作成ツールなので、カスタマイズもしやすいです。

サクッとオシャレなポートフォリオを作りたい人にCanvaはとてもおすすめです。

Canva

Adobe Stock

Adobe Stockは「Photoshop」や「Illustrator」といったWEBデザインツールを出しているAdobe社が出している画像素材サイトです。

画像素材のなかにテンプレートもあり、それをカスタマイズすることでポートフォリオを作れます。

Adobe StockはAdobeのサービスなので、「Photoshop」や「Illustrator」を使って簡単にテンプレートをカスタマイズできますよ。

有料のサービスなので手軽に使うことはできませんが、質の高いテンプレートが手に入りますし、素材サイトとしての使い方も可能です。

Adobe Stock

まとめ

今回はWEBデザイナーになるうえで重要なポートフォリオについて解説しました。

この記事でお伝えした、ポートフォリオ作成で重要なこと次のようになります。

WEBデザイナーとしてスキルアピールをするのに、ポートフォリオは役立ちます。

会社からの内定、仕事の受注など、人生を変えるきっかけをもたらしますからね。

それは、あなたが仕事を通してキラキラしている生活をするために役立つもの。

WEBデザイナーとして活躍するために更なる1歩を踏み出すために、ポートフォリオを作りましょう！