Webデザインの仕事をするなら、スキルや実績を証明できる「ポートフォリオ」の質が重要です。
本記事では、Webデザイナーのポートフォリオの重要性やポートフォリオの作り方・作成のコツを解説します。
後半では、ポートフォリオの参考になるサイトや、ポートフォリオ作成におすすめのサービスも紹介します。Webデザイン未経験者に向けたポートフォリオの注意点も解説するので、ぜひお役立てください。
Webデザイナーのポートフォリオの重要性
Webデザイナーにおけるポートフォリオとは、「これまでの活動や、自分が制作してきた作品（Webサイトなど）をまとめたもの」を指します。Webデザイナーは専門性が求められる職業なので、就職や転職の際、ほとんどのケースでポートフォリオの提出が必要になります。
採用側は、ポートフォリオを通して応募者の自己紹介や制作物を確認し、デザインスキルや即戦力になるレベルかどうかを判断します。そのため、ただ作品を掲載するだけでなく、「自分はこういうことができる」「〇〇という課題に対して、〇〇という理由でこのデザインを提案した」など、自分の強みや課題解決力が伝わるようにまとめることが重要になるでしょう。
Webデザイナー向けポートフォリオの作り方
ポートフォリオは決まった形式があるわけではないので、ポートフォリオの完成度自体が、採用側にとって、評価基準のひとつになります。
デザイナーがポートフォリオを作る際は、以下のフローで制作するのがおすすめです。
1.目的・ターゲット設定
Webデザイナーとしてポートフォリオを制作する際は、「どのような業種の人に見られるのか」「どんなデザインが求められているか」というターゲット設定やニーズを意識しましょう。
そのためには、Webデザイナーとして仕事をするために、「どういう企業で働きたいか」「企業とフリーランスどちらで働きたいか」などを考えて、自身の目的を明確にしておくことが欠かせません。
目的・ターゲットを明確にすることで、ポートフォリオのデザインや掲載作品を決めやすくなります。
2.構成を考える
Webデザインの仕事をするなら、ポートフォリオの見やすさは必要最低限の条件です。見る人に伝えたい情報をわかりやすく伝えられるように、トップページのデザイン、各ページの情報、作品の掲載方法などにこだわりながら、最初にポートフォリオ全体の構成を考えておきましょう。
3.自己紹介（プロフィール）
Webデザイナーのポートフォリオは、自己紹介ページも重要です。
主に以下のような項目を記載しますが、使用目的に合わせて適宜アレンジしましょう。
- 氏名
- 顔写真
- 生年月日
- 学歴
- 職歴
- 保有スキル
- 自己PR
コーポレートサイトの社長挨拶ページのように、プロフィールページに顔写真を入れていると、信頼性が高まります。
保有スキルは、Photoshop、Illustratorなどデザインソフトの使用レベル、HTML、CSS、JavaScript、SEOやマーケティングなどのスキルを記載します。ディレクション、プレゼン、ヒアリングなど、デザイン業務以外の経験があれば、その旨も記載しましょう。
デザインの受賞歴やクライアントへの貢献度（PV数・CV数などの成果）など、ほかのWebデザイナーと差別化できる明確な成果があれば、わかりやすく記載してアピールします。
4.実績・作品紹介
ポートフォリオのメインである、作品ページを作成していきます。掲載する作品は、最初に決めた目的・ターゲットの方向性に合わせて選びましょう。
作品数は10〜15作品くらいがおすすめです。見てほしい作品や、新しい作品は前半に掲載します。
各作品は1ページあたり1〜2作品にまとめて、以下のような内容を掲載しましょう。
- 制作に携わった作品のメインビジュアル
- プロジェクトの概要とURL
- 担当業務と使用ツール
- 注力した点
制作に携わった作品のメインビジュアル
作品ページのトップには、各作品のメインビジュアルがひと目でわかるように配置します。Webサイトやバナーなど作品の種類が複数ある場合は、カテゴリーごとに分けると見やすくなるでしょう。
プロジェクトの概要とURL
各作品ページには、概要として以下のような内容を明記しましょう。
- プロジェクトのテーマ、コンセプト
- プロジェクトのターゲット
- デザインの目的（ブランディング、問い合わせ数向上など）
- 制作期間
上記のような項目を記載することで、ユーザーニーズの理解力や、クライアントへの課題解決能力を証明することができます。依頼側にとっては納品までのスピードも気になるところなので、制作期間も記載するとよいでしょう。
デザイン実績がない場合は、自分でプロジェクトのテーマやデザイン目的を架空で設定し制作した作品を掲載するのがおすすめです。
担当業務と使用ツール
採用担当者はデザインセンスだけでなく、「どのくらいの範囲の作業ができるか」というスキル面も重視します。そのため、デザイン、写真、イラスト、ディレクションなど、どの領域を担当したのかを正確に記載します。
WordPressの構築や、Illustrator、Photoshopの使用があれば、ツール名と作業内容まで具体的に明記しましょう。
注力した点
デザイン目的や制作期間、予算などの規制から工夫した点や、挑戦した点を紹介します。制作背景を具体的に解説することで作品の説得力が増し、評価につながりやすくなるでしょう。
Webデザイナーのためのポートフォリオ作成のコツ
ポートフォリオは形式が決まっていないからこそ、読み手の視点を意識したビジュアルと内容を意識することが重要です。
Webデザイナーとして、採用側に評価されやすいポートフォリオを作成するコツを紹介します。
読み手の視点を意識した構成
ポートフォリオを制作していると、視野が狭くなり、自己満足の仕上がりになってしまうことがあります。しかし、実際にポートフォリオを見るのは自分のことを知らない人なので、客観的な視点を意識してポートフォリオを制作しましょう。
特に重要なのは、見やすさ、伝わりやすさです。伝えたい情報の優先順位を整理してから、ファーストビューのデザイン、各ページ情報のわかりやすさ、作品のレイアウトや掲載順、客観的で簡潔な説明文などにこだわって作りましょう。ポートフォリオが完成したら、一度身近な人に見てもらうのもおすすめです。
目的・ターゲットの明確化
ポートフォリオは採用側にアピールするためのものなので、ターゲットを意識した視点で作ることが欠かせません。
まずは「Webデザイナーとしてどのような業界で活動したいか」「どういうデザイン案件を受注したいのか」などの自分の目的を明確にすることで、ターゲットを定めたポートフォリオを制作できるようになります。ターゲットを明確化することで、応募企業と掲載作品のミスマッチを避けることができるでしょう。
例えば美容ジャンルのデザインがしたいなら、メイクのトレンドを意識したサイトデザインにしたり、実績作品に化粧品ブランドのサイトや美容メディアのロゴデザインなどを優先的に掲載したりします。
作品の選定
ポートフォリオに掲載する作品は10〜15作品程度が妥当です。掲載作品が多すぎても見づらくなってしまうため、ターゲットの方向性と親和性がある作品から選定します。
自信作や新しい作品、PV数・CV数・リピート率など事業への貢献度を明記できる作品は優先的に掲載しましょう。
制作物の意図・プロセスの言語化
ポートフォリオに掲載する各作品には、デザインの意図や制作背景などの説明文を明記します。説明文は、「〇〇というコンセプトを意識して、〇〇の工夫をした」「〇〇の点においてUI・UXを意識した構成のサイトにした」など、簡潔にまとめます。クライアントの課題に対してどのようなデザインで解決したか、という点が伝わるようにしましょう。
自身の強みを印象付ける
トップページやプロフィールページ、実績・作品紹介を通して自身の強みをアピールすることで、他のWebデザイナーと差がつきやすくなります。デザイン作品の受賞歴や、デザインによって達成したPV数・CV数・リピート率などの客観的な成果は、わかりやすくアピールしましょう。
Photoshop、Illustrator、HTML、CSS、などの保有スキルは、スキル名を箇条書きに羅列するよりも、「このスキルでこういうことができる」「こういったことを意識したマークアップができる」などの文章で、実践力が伝わるように明記します。特に、SEOやマーケティング、UIデザインなどユーザーニーズを意識したデザイン力は評価されやすいです。
ヒアリングやディレクションなど、デザイン業務以外の実績もあれば記載しましょう。
将来性のアピール
プロフィールページの自己アピールには、仕事への取り組みの姿勢やデザインの考え方、将来的にやりたいことなどを具体的に記載しましょう。
デザイナー未経験の場合、企業からは「必要なスキルを学習しているか」「企業に対して、自分のスキルや意志を伝える力があるか」というポテンシャルの部分を重視されることが多いです。向上心を伝えて、将来性のあるデザイナーとして評価される工夫をしましょう。
著作権・情報漏えいに注意する
ポートフォリオに企業で担当した作品を載せる際は、著作権や守秘義務について考慮する必要があります。自分で制作した作品でも、権利は企業に属しているからです。
特に、紙のポートフォリオや非公開のポートフォリオではなく、インターネット上に公開する場合は注意が必要です。作品を掲載する際は、著作者の企業に許可を取ったり、引用のルールを守ったりするようにしましょう。
また、一般公開されていない作品や、プロジェクトが進行中で公開前の作品などは掲載しないほうがよいでしょう。
Webデザイナーにおすすめのポートフォリオ参考サイト例
Webデザイナーがポートフォリオを作成する際に参考になるサイトを紹介します。スキルの伝え方や作品の見せ方の参考にしてください。
SANKOU!
「SANKOU!」は、Webデザインの参考になる、国内のWebサイトを掲載しているサイト集です。コーポレートサイトやポートフォリオまで、デザイン性の高いサイトが3,500件以上掲載されています。業種やサイトのテイストなど細かいカテゴリがあるので、自身の方向性に合った参考サイトを探すことができます。
Web Design Clip
「Web Design Clip」は、国内外のWebデザインを掲載しているWebサイト集です。Webデザイナーのインスピレーションを刺激する、洗練されたデザインのWebサイトやLPが豊富に掲載されています。国内に限定せずにおしゃれなWebサイトを参考にしたい人におすすめです。
STUDIO Showcase
「Studio Showcase」は、クラウド上のWebサイト制作ツール「STUDIO」で制作したWebサイトが見られる、Webサイトギャラリー集です。上記2つのWebサイトリンク集のようにワンクリックでWebサイトに直接遷移しないため、多くのWebサイトのデザインに目を通しやすい仕様です。Webデザイナーのポートフォリオや、店舗やイベントのWebサイトのデザインを参考にできます。
Webデザイナーのポートフォリオ作成に活用できるサービス
Webデザイナーがポートフォリオを作成できるサービスはたくさんあるので、使いやすさや機能を比較して自分に合ったものを選びましょう。
今回は、おすすめのサービスを3選紹介します。
Portfoliobox
「Portfoliobox」は、世界で100万人以上のクリエイターに利用されている、スウェーデン発のポートフォリオサービスです。スマートフォンにも対応できる、洗練されたデザインのポートフォリオが制作できます。
ECサイト機能で作品を販売することも可能なので、本格的なビジネスのツールとしても活用できるでしょう。
WordPress
「WordPress」は、企業のオウンドメディアから個人ブログまで、幅広く使われているWebサイト構築サービスです。カスタマイズ性が高いため、理想のポートフォリオサイトを作成することができます。
企業で使用されることが多いので、WordPressを操作できるスキルは採用で有利になることがあります。
Ameba Ownd
「Ameba Ownd」は、アメーバブログやAbemaTVで有名なサイバーエージェントが運営している、無料のWebサイト作成サービスです。スタイリッシュで洗練された豊富なテンプレートが無料で使用できます。
編集画面はシンプルで直感的に操作できるので、Web制作初心者でも使いやすいでしょう。
Webデザイナーのポートフォリオ作成に関するQ&A
最後に、Webデザイナーのポートフォリオに関するよくある質問に回答します。Webデザイン未経験者のポートフォリオ作成における疑問にも答えていきます。
紙のポートフォリオは必要か
WebデザイナーはWeb上でのデザインスキルが必要になるので、基本的に紙のポートフォリオは必要ありません。
しかし、万が一インターネット環境に問題があったり、採用の場で「選考資料として紙のポートフォリオを預かりたい」と言われたりした場合は、紙のポートフォリオが役立ちます。念のため、先方の担当者に確認しておくと安心です。
掲載する作品の具体的な数は？
掲載する作品数は、10～15作品くらいがよいでしょう。少なすぎるとスキルやセンスがわかりづらく、多すぎてもどういうデザインが得意なのか伝わりにくくなるからです。
アピールしたい自信作や新しい作品は、前半に掲載しましょう。
Webデザイン未経験者のポートフォリオはどうすればいい？
Webデザイナーとしての実務経験がない人でも、ポートフォリオを制作しましょう。
プロフィールに独学やスクールで習得したスキルを明記し、作品は練習用として制作したものを載せます。実務経験がなくとも、スキルの学習能力やデザインセンス、ポートフォリオを通じた自己アピール能力から、Webデザイナーとしてのポテンシャルの評価につながる可能性があります。
Webデザイン未経験者がポートフォリオ作成で重視すべきポイントは？
Webデザイン未経験者がポートフォリオを作成する際、ただ自主制作の作品を載せるのではなく、架空の設定を決めて、説明を添えた作品を掲載しましょう。
例えば「〇〇というコンセプトのスキンケアブランドの公式サイト」「〇〇というイベントのロゴデザイン」などのテーマを決めます。そのテーマに対して、「なぜこのようなデザインにしたのか」という解説まで加えることで、デザイン業務への姿勢や実践力が評価されやすくなります。
Webデザインの仕事をするなら、ポートフォリオにこだわろう
Webデザインの仕事を受注したり、企業の専属デザイナーとして働いたりするなら、ポートフォリオの質が重要になります。見る人にとって自身のスキルや実績が伝わりやすいポートフォリオを制作しましょう。
また、Webデザインに関するスキルを学ぶなら、女性向けキャリアスクールSHElikes（シーライクス）がおすすめです。全45以上の職種スキルが学び放題で、Webデザイン入門コースやWebデザイン演習コースもあります。興味がある方は、お気軽に無料体験レッスンにご参加ください。
女性向けキャリアスクールSHElikes無料体験レッスンはこちら
