一目置かれるWebデザイナーのポートフォリオ！作り方や注意点について解説

更新日 : 2024/07/24

Webデザイナーのポートフォリオ作りには、必須とされる項目がいくつかあります。今回はWebデザイナー歴が長い人、実務未経験でWebデザイナーを目指す人、双方に参考になるポートフォリオの作り方や参考になるサイト、活用できるサービスを紹介します。Q&Aも参考になるでしょう。

ポートフォリオとは？

ポートフォリオとは、クリエイティブ職人材が転職・就職活動や営業の際に必要となる作品集です。現在まで手がけた作品や制作意図、本人のセンスなどを視覚的に応募先にアピールするのがポートフォリオの役割です。

ポートフォリオに必須な項目とは？

基本的にポートフォリオの形式は自由です。下記3点は、必ずポートフォリオに載せましょう。

自分のプロフィール
スキル
自身の作品（ポートフォリオ用に制作したサイトやデザインなど）

プロフィール・スキル内容のまとめ方

履歴書だけでは伝わらない人物像や自己PRをプロフィールページに記載し、前職で身に着けたスキル、経験はしっかり記載しましょう。たとえば、マーケティングやWebディレクション、SEO、広告施策などに携わった経験があれば明記するのがおすすめです。

一見、Webデザインとは無関係だと感じたり「マーケター職やディレクター職を進められるのではないか」と不安になったりするかもしれませんが、こうした経験があるWebデザイナーは「包括的なサイト構築ができる」「顧客理解が早い」など好意的な捉えられ、書類選考が有利になることがほとんどです。

Webデザイナーこそマーケティング知識が重要！学ぶべきマーケ施策やポートフォリオの内容

作品ページのまとめ方

作品ページには、実際に制作したWebページなどのスクリーンショットやリンクURLなどを掲載します。ここでポイントになるのが、載せ方です。自信がある制作物や応募先企業のテイストに合う制作物から上部に載せるようにしましょう。制作時期が新しいものの方が上に来るようにした方がよいのは確かですが、多少昔に制作したものでも出来がよい作品を上部に掲載した方が採用担当者の目を引きます。コーディングまで行なったサイトは、コーディングページのスクショも添えるなどするとさらに好印象です。

また、チームで制作したもの、サイトの一部の制作に携わったものがあれば、しっかりと明記しましょう。「一人ではサイト構築できないと思われるのでは？」と心配する人もいるようですが、ポートフォリオを少し見ればセンスやWebデザインのスキルは、採用担当者なら見抜けるものです。チームで制作したサイトがあれば「チームやプロジェクト単位で仕事ができる人材」として高評価につながる可能性が高いです。

Webデザイナーこそマーケティング知識が重要！学ぶべきマーケ施策やポートフォリオの内容
 Webデザイナーとは？年収や将来性と求められるスキルとは？「やめとけ」って本当？向いてる人ってどんな人？

Webデザイナーにポートフォリオが必要な理由

すでに運用中のサイトを手がけたWebデザイナーであれば、ポートフォリオがなくても職務経歴書に実績サイトのURLをリンクさせるだけで事足りると思われがちです。しかし、書類選考の際、少しでも採用担当者の負担を減らし、関心を集めるためにもポートフォリオの提出が効果的です。

現在は、Webデザイナー職への応募には「履歴書・職務経歴書・ポートフォリオの提出はセット」という見方が一般的なため、ポートフォリオがないWebデザイナーはその時点で選考を落とされる場合もあります。

MOREWORKSのような案件紹介サイトでも、ポートフォリオの登録がない場合はスカウトされるチャンスが0に等しいといえます。すぐの転職は考えていない人も、時間があるときに普段からポートフォリオ制作やブラッシュアップを心がけましょう。

Webデザイナー実務未経験者にもポートフォリオは重要

Webデザイナーとしての実務経験がない人でもポートフォリオは制作すべきです。そもそも、Webデザイナーの求人上での「未経験」とは「実務経験がない」ことを指しており、最低限のスキルや知識、趣味や学びの範囲でもWebサイトの制作経験はある人を対象にしています。

求人情報に「未経験可」「先輩が指導してくれるので初心者でも安心！」という文言を見かけても、Webデザインに対しての知識がまっさらな状態でも評価してもらえるのは新卒や第2新卒くらいの年齢層までです。つまり、企業が「未経験可」として求めているのはこれまでデザイナーとして働いたことはないものの、

・独学やスクールでコーディングやWebデザインの勉強をしていた
・趣味でサイトやアプリを作ったことがある

といった、Webデザイナーとして働くための基礎的なスキルや知識と制作経験、そして意欲がある人を想定しています。Webデザイナー未経験からポテンシャルを示すには、ポートフォリオの制作が欠かせません。

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

Webデザイナー経験者も未経験者も、ポートフォリオを初めて制作するなら、もしくは採用担当者の目を引くポートフォリオにしたいなら、セオリーに沿ってポートフォリオ作成に挑むのがよいでしょう。冒頭と重複する部分もありますが、ポートフォリオ作りの工程を見ていきましょう。

ターゲットを絞り構成を考える

ポートフォリオ制作の理想は、提出する企業に合わせた内容にすることです。しかし、転職・就職活動などの最中、すべての転職・就職希望の企業のカラーに合うポートフォリオを毎回制作するのは難しいでしょう。

そのような場合は「自分がどのような企業でWebデザイナーとして迎え入れられたいのか」を基準にターゲットを絞り、ポートフォリオに掲載する作品のテイストや構成を考えましょう。

幅広いテイストのWeb制作を手掛けるWeb制作会社を受ける場合は、女性向けサイト、男性向けサイト、ECサイトなどさまざまなWebデザインを掲載したポートフォリオを作りましょう。

企業内のデザイナー、つまりインハウスデザイナーを募集する企業には、業界のサービスや企業のホームページにあったテイストのWebデザインができるとアピールすることが大切です。

プロフィールページを用意

ポートフォリオにはプロフィールページを設けましょう。学歴やWebデザイナーとしての経験だけでなく、スキルや操作できるツールも明記しましょう。Webマーケなどの知識があれば、マーケに使用するツールについても箇条書きでよいので明記するのがおすすめです。

すでにWebデザイナーとして実績がある人は、コーポレートサイト、ECサイト、LPサイトなどコンバージョンが異なるさまざまなサイトの実績をプロフィールページでも示せるとよりいいでしょう。

また、手がけたWebページの管理画面などを掲載し、担当したコーディングをプロフィールページに掲載できると、Webデザインだけでなく、コーディングのスキルもあるとして評価を受けやすいです。

実績や作品のURLを記載

ポートフォリオの要である作品ページを作成していきます。掲載する作品は10点ほどが望ましいそうです。ポートフォリオに掲載する作品は「自信作」「制作時期が新しい」「チームでの制作物」の順に配置しましょう。自信作でも3年以上前など、かなり前に制作したものは掲載しない方がベターです。また、掲載する作品のクリエイティビティには、あまり差がないよう配慮しましょう。

運用の一部しかしていない、載せられないものが多い場合は、サンプルサイトでアピールするか「チームで制作し、どこを担当した」とわかるような一文を加えるのがおすすめです。「すべて自分でやったことにした方が採用担当の目を引くのではないか」と考えがちですが、1パートだけ担当した実績がある場合、チームでも仕事ができるWebデザイナーだとアピールできます。

制作物の要点やコンセプトを説明

求人応募用のポートフォリオに載せる制作物には、実際に存在する製品のプロモーションサイトという架空の設定で制作・掲載しても問題ありません。ただし、必ず実在のプロジェクトではなく架空・練習用で制作したことを明記するようにしましょう。

実際に運用されているWebサイトをポートフォリオに載せる際は、短くて構わないので「手がけた範囲」「何をポイントに制作したか」などの一文を入れましょう。ポートフォリオは見やすいことが鉄則なので100文字程度にまとめるのがおすすめですが、マーケティングの知見がある人は「ABテストとして制作」「UI/UXを意識した構成」「SEO対策の一環として制作した図表」など、マーケティングの施策にまつわる簡単な一文を加えるのもよいでしょう。

Webサイト制作だけでなくページのデザインやロゴデザインといったデザイン力を見られるような作品を載せるのもセンスを伝えるのに役立ちます。制作期間や注力したポイントも一緒に解説すると、説得力が増します。重要なのはそのデザインをするに至った課題感と制作の意図やコンセプトをしっかり伝えることです。

改善を繰り返す

ポートフォリオは一回制作すれば終わりではなく、実績が増えた際や新たに作品を作った際などに改善を繰り返しましょう。運用されているWebサイトを載せる際は「現時点でこのSEOキーワードの表示順位が何位」などといった施策後の情報を加筆するなどもおすすめの改善方法です。

実績や作品が増えたら、応募企業によってカラーの異なるポートフォリオを制作するのもよいでしょう。ECサイトを持つ企業にはECサイトの制作物ばかり集めたポートフォリオ、女性向けの商品を作る企業には女性向けのWebサイトをペルソナの年代別で制作するなどが分かりやすいです。

ポートフォリオを魅力的に伝えるプレゼン手法

ポートフォリオの見せ方も採用担当者に好印象を与える重要な要素です。作品の魅力を最大限に引き出すためには、視覚的に見やすく、整理されたプレゼンテーションを心掛けましょう。

ストーリーテリングを取り入れる

各作品の制作過程や背景を説明することで、デザインに対する考え方やアプローチを示しましょう。例えば、「このデザインはクライアントの〇〇という要望に応えるためにこういうプロセスを経て完成させた」など、ストーリー性を持たせることで、より記憶に残るポートフォリオになります。

成功事例を強調する

これまでに手掛けたプロジェクトで特に成功した事例やクライアントから高評価を得た作品を強調しましょう。具体的な数字や成果（例：売上が〇〇％増加、ユーザーエンゲージメントが〇〇％向上など）を挙げると、信頼性が高まります。

使用ツールをアピールする

使用したツールの具体的な機能や、それらをどのように活用したかを詳しく説明します。例えば、「Adobe XDでワイヤーフレームを作成し、クライアントとの初期段階でのフィードバックを反映しました」「Figmaを使ってデザインシステムを構築し、チーム全体での一貫性を保ちました」など、具体的なプロセスを共有します。

フィードバックを求める

プレゼンが終わった後には、採用担当者からのフィードバックを求めましょう。自分の強みや改善点を把握し、次回以降のプレゼンに活かすことができます。

単に「フィードバックをください」と言うだけでなく、具体的な質問を用意しておくと効果的です。例えば、「デザインのプレゼンテーション方法について、もっと強調すべき点はありましたか？」「ポートフォリオの中で特に印象に残った作品はどれですか？」など、具体的な質問をすることで、より詳細なフィードバックを得ることができます。

Webデザイナー未経験者がポートフォリオを作るには？

Webデザイナーとしての実績がない人でもポートフォリオは作った方がよいです。ポートフォリオが存在すれば、Webデザイナー未経験者でもMOREWORKSのような企業と人材のマッチングサービスなど経由して企業からスカウトが来る可能性が高まります。

Webデザイナー未経験者のポートフォリオの作り方は、基本的には現在活動中のWebデザイナーのポートフォリオ制作と何ら変わりありませんが、ポイントとなる手順について詳しく見ていきましょう。

サーバーを契約

未経験者やWebサイト制作工程の一部のみ担当しているなど「自分の作品」として、ポートフォリオに載せられる制作物が少ない人もいるでしょう。その場合はレンタルサーバーを契約し、架空のWebサイトを制作するのもおすすめです。

レンタルサーバーの中には、同時にドメインを取得できるものやセットで割引が存在するものもあり、価格なども参考にして選ぶとよいでしょう。レンタルサーバーとして有名なのは「ロリポップ！」「エックスサーバー」などです。

「ポートフォリオにサーバーは特に必要ない」という人もいます。しかし、パワーポイントを使ったりブログサイトを利用したりすると選考の際、採用担当者に余計な手間がかかることも考えられます。実務未経験者にとっては、サイトをサーバーにアップする練習にもなります。サーバーを契約するには、コストや時間がかかりますが、採用担当者がより見やすいポートフォリオを制作できる、実務の練習になるといった価値があります。

掲載用作品の制作

未経験者の場合、ポートフォリオに載せる制作物は、知り合いの企業やお店のサイトを作らせてもらったり、架空の商品やサービス、企業を宣伝するダミーサイトを作ったりするのが一般的です。制作期間や注力したポイントも一緒に解説すると、説得力が増すでしょう。　

ポートフォリオに掲載する作品が多ければ多いほど、採用担当者の負担にもなりえるため「自信作を絞る」「スクールなどでの制作物はメインにしない」などが重要です。また、ポートフォリオに載せる制作物に対し、注意点が3つあります。

①デザインの4原則　②常時SSL化　③ダミーテキストの量

①ですが、ポートフォリオに載せる制作物はデザインの4原則「近接」「整列」「反復」「対比」にのっとって制作します。この原則を理解していないポートフォリオを提出すると面接までこぎつけるのも至難の業です。自信がない場合は、スクールの講師や実際にWebデザイナーとして活動している人などにチェックをしてもらいましょう。

続いて、ポートフォリオにアクセスする企業側にセキュリティ面で負担が掛からないよう、SSL化しましょう。SNSにポートフォリオを載せるのは個人の自由ですが、ポートフォリオに載せたSNSリンクから余計な情報が漏れることがないよう、SNSはアカウントは載せない方がよいでしょう。

ポートフォリオに架空のサイトを載せる場合、文章が「テキストテキスト」「ここにリンクを張る」など、ダミーテキストばかりだと採用担当者が見る気をなくす可能性もあります。ライターのようなオリジナルで完璧な文章は目指さなくてもよいので、ダミーテキストではなく、意味が通じる文章を考えて入力しましょう。

ポートフォリオ制作サイトを活用

Webデザイナー未経験者でも、スクールや独学で学んだことを活かせば、それなりのものが作れるはずです。ポートフォリオ制作には、パワーポイント、いわゆるPPTを使用して作る方法とWebページ制作サイトを利用する方法の2つがあります。Webデザイナーの場合はやはり専門でもあるポートフォリオサイトで作成するのが一般的です。

簡単にポートフォリオを制作できるサイトは？

未経験者にもポートフォリオを持たないWebデザイナーにもおすすめのポートフォリオ制作サイトをご紹介します。自分のテイストや応募企業のカラーによって選ぶのがよいでしょう。

PORTFOLIOBOX

PORTFOLIOBOXは。世界で55万人以上が利用しているサービスです。シンプルで洗練されたデザインが揃っているのが持ち味ですが、操作が簡単な点もおすすめのポイントです。
月額3.5ドルの低価格のプランでも、10ページ・50画像まで使用できます。パソコン表示用だけでなく、モバイル用サイトも制作できるのが、PORTFORIOBOXの売りです。

PORTFOLIOBOX

Salon.io

Salon.ioはドラッグ＆ドロップで、簡単にポートフォリオが作成できるサービスです。コーディングの知識がなくても使用できるため、未経験の方や制作経験の浅い方におすすめです。

また、無料で3ページ・150画像まで掲載できるのもポイントが高く、提出する企業が絞られているポートフォリオ制作には、Salon.ioの無料サービスの枠内で十分なものが制作できるかもしれません。

HTMLやCSSを追加できるエディター機能でカスタマイズを楽しむこともできるため、短い時間でポートフォリオを制作したい人にぴったりではないでしょうか。

Salon.io

Ameba Owned

アメーバブログでおなじみのサイバーエージェントが提供するサービスです。スタイリッシュでおしゃれなデザインテーマやフォント、カラーを組み合わせることで簡単に統一感のあるデザインに仕上げられます。

SNSと連携し、投稿を表示させることもできるため、今までの作品をSNS上で投稿していた人にとっては嬉しい機能でしょう。

Ameba Owned

Jimdo

Jimdo（ジンドゥー）は、専門知識がなくても簡単にウェブサイトやポートフォリオを作成できるオンラインサービスです。

「Click & Type!」というキャッチコピーが示すように、画面をクリックして文字を入力するだけの簡単な操作でサイトを作成できます。また、40種類以上のテンプレートが用意されており、ビジネス、個人ブログ、ポートフォリオなど、様々な用途に対応可能です。

Jimdo

Wix

Wix（ウィックス）は、HTMLやCSSの知識がなくても簡単にホームページを作成できるコンテンツ管理システム（CMS）です。

900種類以上のテンプレートがあり、自由にカスタマイズできます。また、SEO（検索エンジン最適化）機能が充実しており、検索順位を改善するためのツールが提供されています。

Wix

STUDIO

STUDIOは、日本発のノーコードWebサイト制作ツールです。コーディングの知識がなくても、ドラッグ&ドロップなどの簡単な操作でWebサイトを制作できます。

デザインの自由度が高く、おしゃれで見栄えの良いWebサイトを作成可能です。プロのデザイナーからも高い評価を受けています。

STUDIO

WordPress

自社のWebサービスにWordPressを利用する企業は多いです。そのため、WordPressでポートフォリオ制作を行うと「WordPressが自在に使える」というアピールになります。

また、WordPressはカスタマイズ機能が充実しており、無料版のみの利用でもポートフォリオとして十分な質のものができますが、テーマやプラグインといった機能を利用して一段とクオリティが高いポートフォリオを作り上げるのもおすすめです。

WordPress

参考にできる素敵なポートフォリオサイト集

ポートフォリオ制作では、優秀なWebデザイナーのポートフォリオ、よい作品を真似するのも大事な工程です。参考にできる素敵なポートフォリオサイトをいくつか紹介します。

NAOKI FUKUSHIMA

フクシマナオキさんのポートフォリオは、白黒を基調としたシンプルかつスタイリッシュなのが持ち味です。作品ページの掲載数は25作品、文章のボリュームも多めなのにそれを感じさせないのも特徴のひとつ。

できるだけ多くの作品を掲載したい人には、見本にするのにおすすめのポートフォリオです。
NAOKI FUKUSHIMA

S5 Studios

著名なアートディレクター田渕将吾さんのポートフォリオサイトは、高度な技術が駆使されているものの、ポートフォリオという枠を超えたアート作品に近く、デザイン重視のWebデザイナーは必見です。

アニメーションや空間の使い方、BGMなど真似したくなるポイントがたくさんあります。

S5 Studios

maima.me

ミュージシャンやハイブランドの公式Webサイトも手掛けるWebデザイナーMai Imakitaさんのポートフォリオサイトです。白を基調にしたシンプルな作りですが、作品の魅力が最大限伝わる見せ方は「Webディレクターとしての腕も一流」と引き込まれます。

作品をたくさんのせるのではなく、スキルやセンスがしっかり伝わるポートフォリオを目指す人には参考になるでしょう。

maima.me

KATOSHUN.com

Webデザイナーの加藤俊司さんのポートフォリオサイトは、1ページに「WORKS」「ABOUT」「MESSAGE」がまとめられており、左側のメニューバーからアンカーリンクを使って各セクションに移動できます。

特に目を引くのは、スクロールに応じてメニューバーとメインコンテンツの間に表示される画像が切り替わる点です。遊び心を取り入れたデザインが印象的にアピールされています。

KATOSHUN.com

TAKAAKI SATO

フリーのWebデザイナー兼カメラマン、佐藤タカアキさんのポートフォリオサイトです。「WORKS」をクリックすると、プロジェクトのサムネイル画像が一覧表示されます。PCサイトやスマートフォンサイト、写真撮影の事例がカテゴリーごとに整理されており、スクロールするだけで簡単に閲覧可能です。

また、サムネイルには使用したカラーが反映されており、サイト全体に統一感があります。

TAKAAKI SATO

Webデザイナーのポートフォリオの作り方に関するQ&A

Webデザイナーのポートフォリオ作りにまつわるQ&Aを紹介します。

紙のポートフォリオは必要？

原則としては必要ありません。しかし、選考の段階で、Web関連の知識がない人事・労務といった部署にも実力が一目でわかる資料として、紙のポートフォリオを作っておいても損はないでしょう。

その場合はWebサイト形式のポートフォリオを印刷するのではなく、パワーポイントでまとめる方がベターです。資料作成能力やプレゼン能力を示す良い機会になるでしょう。

ポートフォリオに掲載する作品は何点くらい？

基本的に、1次選考の時点で採用担当者に見てもらえるのは、ポートフォリオの最上段に掲載した作品です。多くても3作品程度と心得ておいた方がよいでしょう。

それ以外は「こんなものもできる」とスキルの汎用性を見せるための作品です。多くても10作品程度がベターだといわれています。

ポートフォリオをパワーポイントで作るのはあり？

もちろんパワーポイントやGoogleスライドでパワーポイントを作るのも悪くありません。しかし、動作性がWebのポートフォリオに比べて落ちるのは否めないでしょう。未経験のWebデザイナーがパワーポイントを使うのなら一定の理解は得られそうですが、ポートフォリオはないもの実務経験があるWebデザイナーにはおすすめできません。

ただし、先の設問でもお伝えした通り、紙のポートフォリオを作る必要性が生じた場合はパワーポイントを活用しましょう。

Webデザイナーのポートフォリオ作りにまつわるQ&Aを紹介します。

紙のポートフォリオは必要？

ポートフォリオに掲載する作品は何点くらい？

それ以外は「こんなものもできる」とスキルの汎用性を見せるための作品です。多くても10作品程度がベターだといわれています。

ポートフォリオをパワーポイントで作るのはあり？

ただし、先の設問でもお伝えした通り、紙のポートフォリオを作る必要性が生じた場合はパワーポイントを活用しましょう。

未経験者がポートフォリオ制作で意識すべきこととは？

「スクールで作成したものをポートフォリオに載せてはいけない」とまことしやかにささやかれていますが、採用担当者が見ているのは、センスやどの範囲の作業ができるか、などなので、特に問題ありません。

第一、Webデザイン事務所の採用担当者ともなると、一目みれば、どの程度のスキルレベルで制作したものなのか、モデルがあるWebデザインなのか、見抜くものです。ごまかそうとせず、採用担当者の負担が減るよう「見やすいポートフォリオ」を心がけましょう。

また、なぜ応募企業に就職したいのか、プロフィールページに書き記すのもよいでしょう。実務未経験者を採用する際には「基本はできていても育成は必須」と企業側は心得ています。安心して熱意をぶつけるつもりでポートフォリオ制作に挑みましょう。

未経験者がポートフォリオ制作前に揃えるものは？

Webデザインの作業に適したスペックのパソコン、PhotoshopとIllustratorなどデザインに使用するソフト、テキストエディターなどです。詳しくは下記記事を参考のしてください。

未経験者がポートフォリオ制作前に学ぶべきスキルとは？

PhotoshopやillustratorはWebデザイン業務に重要なソフトです。サイトやバナーのデザインをするときに使うため、使用頻度が最も高くなるのではないでしょうか。

Photoshopは慣れれば簡単に操作できるようになります。最初のうちはいろんなツールやメニューバーを選択肢して、どこに何が配置されているか覚えるところから始めましょう。画像の補正や切り抜きといった基礎的な使い方は理解しておくべきです。
Illustratorも学んでおきましょう。ベタやグラデーションのオブジェクト作成、アウトライン化で形を変えるといった簡単な操作やベジェ曲線を身に着けるとよいでしょう。

ポートフォリオのスキルシートに書き込めるように、HTML/CSSを学ぶのもおすすめです。サイト制作の仕組みを理解できるのでポートフォリオ制作でも役立ちます。

HTMLはWebページを制作するためのマークアップ言語です。ページに表示する文字や画像、リンクなど文書の構造を指定する役割を担います。一方、CSSはWebページのスタイルを指定するものです。レイアウトやデザインの調整はCSSで行うことが主流です。具体的には以下のような修正はCSSで行います。

・border-radiusプロパティを活用して角の丸い枠を作る
・text-shadowプロパティやbox-shadowプロパティを駆使して文字やボックスに影をつける

HTMLとCSSは言語の中でも最も基礎であるため、短期集中で学ぶのがおすすめです。