「ポートフォリオって何？」
「Webデザイナーのポートフォリオはどうやって作ればいいの？」
「ポートフォリオ作りのコツを知りたい」
Webデザイナーの転職や案件探しでは、ポートフォリオを用意する必要があります。しかし、「ポートフォリオ」がどのようなものなのか、イメージできていない場合も多いのではないでしょうか。
ポートフォリオとは、これまでの実績や制作物をまとめて、自分が持っているスキルをクライアントに伝えるためのものです。就活・転職や案件探しのときに必要になります。
この記事では、 Webデザイナーのポートフォリオについて解説します。作り方や作成のポイントを把握して、効果的なポートフォリオを作れるようにしていきましょう。
- Webデザイナーを目指している人
- Webデザイナーのポートフォリオの作り方を知りたい人
- Webデザイナーとして転職や案件探しなど活動中の人
独学でWebデザイナーを目指す人へ
Webデザインの学習を独学で進めたい人は、こちらの記事が参考になります。正しい学習方法を把握して、効率よく学べるようにしていきましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
Webデザイナーのポートフォリオとは？
Webデザイナーのポートフォリオとは、これまでに経験したことのある案件や職歴、持っているスキルなどをまとめた作品集のことを指します。
ポートフォリオは、主に就職・転職活動や案件探しの選考時に使用します。応募時や面接時に提出を求められることも多いです。
Webデザイナーのポートフォリオに記載する内容と作成のポイント
ポートフォリオに記載する内容は、以下の通りです。
- 自己紹介・プロフィール
- 持っている経験・スキル
- 実績・作品紹介
それぞれにポイントがあるので、効果的なポートフォリオを作成できるように押さえておきましょう。
自己紹介・プロフィール
ポートフォリオの冒頭部分は、自己紹介やプロフィールを記載するのがベターです。
ここでは、以下の情報を記載します。
- 名前
- 年齢
- 住んでいる地域
- 学歴・職歴
- 受賞歴（あれば）
- 学習していること
- 自己PR（Webデザインを通してやりたいこと）
最初に記載するのは、「自分がどのような人物なのか」ということです。名前や年齢などの基本情報に加え、住んでいる地域、学歴・職歴などを記載します。
Webデザイナーとしての魅力をより伝えるためのポイントは、こだわりや信念などの価値観を伝えることです。
経歴やスキルをただ並べるだけだと、人柄や強みが伝わらないので、もったいないポートフォリオになってしまいます。技術やスキル・経験などの面ももちろん重要ですが、人間性の部分も疎かにしないようにしましょう。
経験・スキルの紹介
次に、持っている経験とスキルを紹介します。
ここでは、使用可能なツールの紹介と、それぞれの年数について記載します。具体的に操作可能なツールやスキルについて、経験年数やレベル感がわかるように記載しましょう。文章にすると見づらくなる可能性があるので、アイコンと簡単なテキストのみで視覚的にわかりやすくするのがポイントです。
経歴の紹介部分は、経験したことのある業務やポジション、工夫したことやそれによって得られた成果などを盛り込みましょう。目立った経験がない場合は、今勉強している内容を記載するのも効果的です。
例えば「売上を〇〇%向上させるために××という施策を行い、最終的には目標を△△%以上上回った」というように、具体的な数値で表現するとスキル感が伝わりやすくなります。
副業やフリーランスの案件探しでポートフォリオを作成する場合は、スキルセットと合わせて料金表を作っておくとよいでしょう。料金設定は、「基本プラン」「基本プランよりも少し安いプラン」「最高プラン」の3つを用意しておくと効果的です。オプションの料金についても設定しておきましょう。
価格設定の例
デザインカンプ作成：1ページにつき5万円
コーディング：1ページにつき5万円
WordPress化：5万円
公開後の保守・運用：月2万円〜
実績・作品紹介
ポートフォリオの目玉部分は、実績や作品紹介です。これまでの制作物や案件で制作したものをまとめましょう。
実績・作品紹介のポイントは、以下の情報を記載することです。
- 作品名（サイト名やクライアント名）
- 制作した年月日
- 作成にかかった時間
- 想定したターゲット
- 制作に使用した言語やツール、制作環境
- 制作にあたって工夫した点
- 実案件で作成した場合は成果
実務で携わったものをポートフォリオに載せる場合は、守秘義務や著作権を侵害しないように注意する必要があります。実案件の実績を掲載したい場合は、必ず事前にクライアントの許可をもらうようにしましょう。
紹介する作品数は、10〜20ほどあれば十分です。作品数はあくまで目安であり、少ないからといって評価が下がるわけではありません。作品の質や制作の過程の方が重視されるので、記載できる作品が少ないときはその内容を掘り下げるとより注目される内容に仕上がります。
副業で使用するポートフォリオは、未経験だと載せられる作品がない人も少なくありません。実案件で作成した実績を載せるのが一番ですが、経験がない場合は自主制作の作品を載せるとよいでしょう。仮案件でも要件定義をきちんと行って、クオリティの高い制作物を作っていれば実績としては十分です。
Webデザイナーのポートフォリオの形式
ポートフォリオの形式は、以下の2種類に分けられます。
- Webサイト版
- 紙版
ポートフォリオを見せる場面や相手によって最適な形式が異なるので、それぞれの特徴を理解しておきましょう。
Webサイト版のポートフォリオ（ポートフォリオサイト）
Webデザイナーのポートフォリオは、Webサイト形式で作成するのが一般的です。
ポートフォリオサイトを作成するメリット
- Webサイト制作スキルをアピールできる
- コーディングスキルやWordPressの知識を持っている証明になる
- URLを共有すれば採用担当者がすぐにポートフォリオを確認できる
- 副業として活動する場合やフリーランスになる場合、自分のサイトとして集客に活用できる
ポートフォリオサイトは、それ自体を制作物として使うことができます。レベルの高いポートフォリオサイトを作成できれば、注目される可能性も高まります。
Web制作の一連の流れを理解していることをアピールする意味でも、ポートフォリオサイトの作成はおすすめです。
紙版のポートフォリオ
紙のポートフォリオは、絶対に必要というわけではありません。しかし、ときに紙のポートフォリオを用意した方がよい場面もあります。
紙版のポートフォリオが必要になるのは、以下のようなときです。
- 対面での面接時にポートフォリオの持参を求められた場合
- 面接官のWebリテラシーが高くない場合
ポートフォリオは、基本的には応募時に提出するものです。しかし、会社によっては面接時にポートフォリオを確認することもあります。対面でポートフォリオを見てもらう場合は、手渡しできるように紙版のものを用意しておきましょう。紙版のポートフォリオは通信環境に左右されないので、どのページでもすぐに見てもらえるというメリットもあります。
ポートフォリオを紙で作成する場合でも、基本的な流れはWebサイト版と同様です。構成やレイアウトを考えて、スキルをアピールしつつ人柄が伝わるように工夫しましょう。
Webデザイナーのポートフォリオサイト作成手順
Webデザイナーのポートフォリオ作成手順は、以下の通りです。
- デザインカンプ作成
- コーディング（HTML/CSS、JavaScript）
- WordPress化
- レンタルサーバー契約・公開
基本的な手順は、一般的なWebサイトを作成するときの手順とまったく変わりありません。今後Webデザイナーとして活動するためにも、ポートフォリオの作成を通してWebサイト作成の感覚を掴んでおきましょう。
Webサイトの作り方の手順を確認したい人は、こちらの記事も参考にしてください。
デザインカンプ作成
最初の工程は、デザインカンプの作成です。
デザインカンプとは、Webサイトの完成見本のことです。カンプを作ることで完成系のイメージが明確になり、コーディングをしやすくなります。AdobeXDやFigmaなどのツールを活用して、デザインカンプの作成を行いましょう。
デザイン作成のコツは、参考サイトを利用することです。自分の頭だけで作ろうとしても、デザイン作成に慣れていないとクオリティの高いものに仕上げるのは難しいです。プロが作成したデザインからアイデアを拝借しつつ、オリジナリティを織り交ぜると効果的なポートフォリオを作りやすくなります。
コーディング（HTML/CSS、JavaScript）
デザインカンプの作成が終わったら、HTML/CSSとJavaScriptを用いてコーディングを行います。デザインはコーディングをすることによって、Web上に公開できるようになります。
コーディングをするときのコツは、CSS設計を意識することです。特に以下のポイントを押さえておけば、よりコーディングをしやすくなります。
- 予測しやすい
- 再利用しやすい
- 保守しやすい
- 拡張しやすい
コーディングについて詳しく知りたい人は、こちらの記事もおすすめです。ぜひ読んでみてください。
WordPress化
コーディングの次は、WordPress化を行います。WordPressとは、世界中で使われているCMSの一種です。CMSを使うことで、サイトの運用や管理を簡単に行えるようになります。画像や記事の更新が多いサイトはWordPressを活用することで、効率よく更新作業を行えます。
WordPressは多くの場面で使用されているCMSであり、Webデザインの案件でWordPressを操作することも珍しくありません。ポートフォリオでWordPressを用いて技術をアピールすれば、注目してくれる人が現れるかもしれません。
WordPressについてもっと詳しく知りたい人は、こちらの記事がおすすめです。
レンタルサーバー契約・公開
最後に、レンタルサーバーの契約と公開作業をして、ポートフォリオの作成は完了です。レンタルサーバーはいくつもの種類がありますが、基本的には次の3社から選んでおけば失敗することは少ないでしょう。
- エックスサーバー
- ロリポップレンタルサーバー
- さくらのレンタルサーバ
レンタルサーバーについては、こちらの記事で詳しく解説しています。こちらもぜひ参考にしてください。
Webデザイナーがポートフォリオを作成するのにおすすめのツール3選
ポートフォリオの作成は、ツールを活用するのがおすすめです。以下のようなツールを活用して、ポートフォリオを作成していきましょう。
- WordPress
- STUDIO
- Canva
WordPress
WordPressは、ポートフォリオサイトを自作する場合におすすめのツールです。実案件でもWordPressを扱うことは多いので、ポートフォリオ作成のついでにWordPressの操作を練習できます。テーマのテンプレートを活用して作成することもできるので、デザインにこだわりがなければ利用しましょう。
WordPressでポートフォリオを作成する場合、サーバーと独自ドメインが必要になります。
WordPressを使ってポートフォリオを作成する手順は、以下の通りです。
- デザインカンプ作成
- コーディング
- WordPress化
- サーバーを契約してWeb上に公開
STUDIO
STUDIOは、ノーコードでデザインを作成できるツールです。ワイヤーフレームから作成でき、オリジナリティの高いデザインを作成するのに役立ちます。ジャンルごとにテンプレートを選べるため、デザインのイメージに近いものを作りやすいでしょう。
ただし、STUDIOは無料版だと独自ドメインを取得することができません。Web上に表示するポートフォリオを作成するなら、有料版が必要になることは理解しておきましょう。
Canva
Canvaは、スライド形式のポートフォリオの作成に便利なツールです。豊富なテンプレートや素材を組み合わせて、手軽にクオリティの高いポートフォリオを作成できます。できあがったポートフォリオはPDFでのダウンロードもできるので、必要な形式を用意できることもおすすめのポイントです。
Canvaはポートフォリオの作成だけでなく、バナーやアイキャッチ、プレゼン資料の作成にも利用できます。無料版の範囲でも十分に使いやすいツールなので、Webデザイナーを目指している人は是非使ってみてください。
Webデザイナーのポートフォリオに関するよくある質問
ポートフォリオの作成に関するよくある質問をまとめました。参考にしてください。
- スクールの課題や模写はポートフォリオに載せてもよい？
- ポートフォリオ作成サービスは使うべき？
- ポートフォリオに載せる作品はいくつあればいい？
スクールの課題や模写はポートフォリオに載せてもよい？
スクールの課題や模写は、原則としてポートフォリオに載せるのは避けた方がよいでしょう。卒業生が同じデザインのポートフォリオを使って応募する可能性もあります。採用側からすれば、まったく同じポートフォリオを見せられれば「あ、この人は自分のデザインを作っていないんだな」と、独自のデザインを作っていないことを察してしまいます。自らチャンスを潰すようなことはせず、自分で作成した実績のみを載せるようにしましょう。
ポートフォリオに載せる作品はいくつあればいい？
ポートフォリオに載せる作品数は、特に「何点以上記載しなければならない」という決まりはありません。これまでに制作したもののなかで、自信のあるものを選べば大丈夫です。とはいえ、あまりに少なすぎるとスキルのアピールが不十分になる可能性があり、多すぎるとすべての作品に目を通してもらえない可能性があります。
ポートフォリオに載せる作品や実績がない場合はどうすればいい？
Webデザインの実務経験がなく、ポートフォリオに載せられる作品がない場合は、架空のサイトやLPを作成してポートフォリオに載せましょう。
できるだけテイストの違うサイトを数種類用意して、自主制作を進めていくのがおすすめです。仮案件のような形で要件定義からしっかり作り込めば、十分にスキルをアピールできます。
架空サイトを作るときは、知り合いにクライアント役を演じてもらって仮案件を進めたり、クラウドソーシングから案件を探して架空のプロジェクトを進めたりすると、実案件に近い形で学習できます。
Webデザイナーのポートフォリオ作成で困ったらスクールに通うのがおすすめ
ポートフォリオは、あなたのスキルを採用担当者に伝えるための重要な役割を果たします。しかし、慣れないうちは思い通りにポートフォリオ作成が進まず、仕上がりも微妙なものになってしまうことも珍しくありません。
多くの採用担当者の目に止まるようなハイレベルなポートフォリオ作りを学ぶなら、スクールに通って技術を身につけるのがおすすめです。
無料でポートフォリオサイトの制作を学びたい人は、ZeroPlus Gateがおすすめです。30日間の短期カリキュラムで、Webサイトの作成技術を身につけられます。学習をサポートしてくれるメンターもつくので、最短でWebデザイナーへの道のりを歩みたい方はぜひお申し込みください。
まとめ：Webデザイナーはポートフォリオを作ろう
ポートフォリオは、あなたのスキルをアピールするためのツールです。これまでの経歴や経験したことのあるスキル、扱えるツールなどを紹介して、採用担当者に興味を持ってもらえるようなポートフォリオを作りましょう。
ポートフォリオに載せる内容は、以下の通りです。
- 自己紹介・プロフィール
- 持っている経験・スキル
- 実績・作品紹介
ポートフォリオに載せられる実績や制作物を準備できていない人は、まず制作物を作るところから始めましょう。実案件でなくとも、自主制作の作品を載せてポートフォリオを充実させることが大切です。
どうしてもポートフォリオ作りが進まない、アイデアが浮かばないという人はぜひスクールに通うことも検討してみてください。スクールで学習してみたい人は、ぜひ無料のZeroPlus Gateを受講して、最短で実務に使えるスキルを身につけましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
