ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > Webデザイン > Webデザイナーのポートフォリオとは?作り方・作成のポイントを解説

Webデザイナーのポートフォリオとは?作り方・作成のポイントを解説

Webデザイン

2023/07/02

2023/07/02

「ポートフォリオって何?」
「Webデザイナーのポートフォリオはどうやって作ればいいの?」
「ポートフォリオ作りのコツを知りたい」

Webデザイナーの転職や案件探しでは、ポートフォリオを用意する必要があります。しかし、「ポートフォリオ」がどのようなものなのか、イメージできていない場合も多いのではないでしょうか。

ポートフォリオとは、これまでの実績や制作物をまとめて、自分が持っているスキルをクライアントに伝えるためのものです。就活・転職や案件探しのときに必要になります。

この記事では、 Webデザイナーのポートフォリオについて解説します。作り方や作成のポイントを把握して、効果的なポートフォリオを作れるようにしていきましょう。

この記事はこんな人におすすめ
  • Webデザイナーを目指している人
  • Webデザイナーのポートフォリオの作り方を知りたい人
  • Webデザイナーとして転職や案件探しなど活動中の人

 

独学でWebデザイナーを目指す人へ

Webデザインの学習を独学で進めたい人は、こちらの記事が参考になります。正しい学習方法を把握して、効率よく学べるようにしていきましょう。

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

メールマガジンバナー

 

Webデザイナーのポートフォリオとは?

Webデザイナーのポートフォリオとは、これまでに経験したことのある案件や職歴、持っているスキルなどをまとめた作品集のことを指します。

ポートフォリオは、主に就職・転職活動や案件探しの選考時に使用します。応募時や面接時に提出を求められることも多いです。

Webや紙、PDFなどの形式でまとめるのが一般的ですが、相手に合わせて用意するのがベストです。形式を指定されることもあるので、その場合は指定に沿ったものを用意しましょう。

 

Webデザイナーのポートフォリオに記載する内容と作成のポイント

ポートフォリオに記載する内容は、以下の通りです。

ポートフォリオに記載する内容
  • 自己紹介・プロフィール
  • 持っている経験・スキル
  • 実績・作品紹介

それぞれにポイントがあるので、効果的なポートフォリオを作成できるように押さえておきましょう。

 

自己紹介・プロフィール

ポートフォリオの冒頭部分は、自己紹介やプロフィールを記載するのがベターです。

ここでは、以下の情報を記載します。

  • 名前
  • 年齢
  • 住んでいる地域
  • 学歴・職歴
  • 受賞歴(あれば)
  • 学習していること
  • 自己PR(Webデザインを通してやりたいこと)

最初に記載するのは、「自分がどのような人物なのか」ということです。名前や年齢などの基本情報に加え、住んでいる地域、学歴・職歴などを記載します。

Webデザイナーとしての魅力をより伝えるためのポイントは、こだわりや信念などの価値観を伝えることです。

経歴やスキルをただ並べるだけだと、人柄や強みが伝わらないので、もったいないポートフォリオになってしまいます。技術やスキル・経験などの面ももちろん重要ですが、人間性の部分も疎かにしないようにしましょう。

 

経験・スキルの紹介

次に、持っている経験とスキルを紹介します。

ここでは、使用可能なツールの紹介と、それぞれの年数について記載します。具体的に操作可能なツールやスキルについて、経験年数やレベル感がわかるように記載しましょう。文章にすると見づらくなる可能性があるので、アイコンと簡単なテキストのみで視覚的にわかりやすくするのがポイントです。

経歴の紹介部分は、経験したことのある業務やポジション、工夫したことやそれによって得られた成果などを盛り込みましょう。目立った経験がない場合は、今勉強している内容を記載するのも効果的です。

また、人によっては管理業務やディレクションなど、スキル感が伝わりにくい経験を強みにしたい場合もあるでしょう。このようなスキルをアピールする場合は、行なった施策と成果を記載すると効果的です。例えば「売上を〇〇%向上させるために××という施策を行い、最終的には目標を△△%以上上回った」というように、具体的な数値で表現するとスキル感が伝わりやすくなります。

副業やフリーランスの案件探しでポートフォリオを作成する場合は、スキルセットと合わせて料金表を作っておくとよいでしょう。料金設定は、「基本プラン」「基本プランよりも少し安いプラン」「最高プラン」の3つを用意しておくと効果的です。オプションの料金についても設定しておきましょう。

価格設定の例

デザインカンプ作成:1ページにつき5万円
コーディング:1ページにつき5万円
WordPress化:5万円
公開後の保守・運用:月2万円〜

 

実績・作品紹介

ポートフォリオの目玉部分は、実績や作品紹介です。これまでの制作物や案件で制作したものをまとめましょう。

実績・作品紹介のポイントは、以下の情報を記載することです。

  • 作品名(サイト名やクライアント名)
  • 制作した年月日
  • 作成にかかった時間
  • 想定したターゲット
  • 制作に使用した言語やツール、制作環境
  • 制作にあたって工夫した点
  • 実案件で作成した場合は成果

実務で携わったものをポートフォリオに載せる場合は、守秘義務や著作権を侵害しないように注意する必要があります。実案件の実績を掲載したい場合は、必ず事前にクライアントの許可をもらうようにしましょう。

紹介する作品数は、10〜20ほどあれば十分です。作品数はあくまで目安であり、少ないからといって評価が下がるわけではありません。作品の質や制作の過程の方が重視されるので、記載できる作品が少ないときはその内容を掘り下げるとより注目される内容に仕上がります。

副業で使用するポートフォリオは、未経験だと載せられる作品がない人も少なくありません。実案件で作成した実績を載せるのが一番ですが、経験がない場合は自主制作の作品を載せるとよいでしょう。仮案件でも要件定義をきちんと行って、クオリティの高い制作物を作っていれば実績としては十分です。

ZeroPlusgate50教材の動画

 

Webデザイナーのポートフォリオの形式

ポートフォリオの形式は、以下の2種類に分けられます。

ポートフォリオの形式
  • Webサイト版
  • 紙版

ポートフォリオを見せる場面や相手によって最適な形式が異なるので、それぞれの特徴を理解しておきましょう。

 

Webサイト版のポートフォリオ(ポートフォリオサイト)

Webデザイナーのポートフォリオは、Webサイト形式で作成するのが一般的です。

ポートフォリオサイトを作成するメリット

  • Webサイト制作スキルをアピールできる
  • コーディングスキルやWordPressの知識を持っている証明になる
  • URLを共有すれば採用担当者がすぐにポートフォリオを確認できる
  • 副業として活動する場合やフリーランスになる場合、自分のサイトとして集客に活用できる

ポートフォリオサイトは、それ自体を制作物として使うことができます。レベルの高いポートフォリオサイトを作成できれば、注目される可能性も高まります。

Web制作の一連の流れを理解していることをアピールする意味でも、ポートフォリオサイトの作成はおすすめです。

 

紙版のポートフォリオ

紙のポートフォリオは、絶対に必要というわけではありません。しかし、ときに紙のポートフォリオを用意した方がよい場面もあります。

紙版のポートフォリオが必要になるのは、以下のようなときです。

  • 対面での面接時にポートフォリオの持参を求められた場合
  • 面接官のWebリテラシーが高くない場合

ポートフォリオは、基本的には応募時に提出するものです。しかし、会社によっては面接時にポートフォリオを確認することもあります。対面でポートフォリオを見てもらう場合は、手渡しできるように紙版のものを用意しておきましょう。紙版のポートフォリオは通信環境に左右されないので、どのページでもすぐに見てもらえるというメリットもあります。

ポートフォリオを紙で作成する場合でも、基本的な流れはWebサイト版と同様です。構成やレイアウトを考えて、スキルをアピールしつつ人柄が伝わるように工夫しましょう。

ZeroPlusgate50教材の動画

 

Webデザイナーのポートフォリオサイト作成手順

Webデザイナーのポートフォリオ作成手順は、以下の通りです。

ポートフォリオの作成手順
  1. デザインカンプ作成
  2. コーディング(HTML/CSS、JavaScript)
  3. WordPress化
  4. レンタルサーバー契約・公開

基本的な手順は、一般的な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を使ってポートフォリオを作成する手順は、以下の通りです。

  1. デザインカンプ作成
  2. コーディング
  3. WordPress化
  4. サーバーを契約してWeb上に公開

 

STUDIO

STUDIOは、ノーコードでデザインを作成できるツールです。ワイヤーフレームから作成でき、オリジナリティの高いデザインを作成するのに役立ちます。ジャンルごとにテンプレートを選べるため、デザインのイメージに近いものを作りやすいでしょう。

ただし、STUDIOは無料版だと独自ドメインを取得することができません。Web上に表示するポートフォリオを作成するなら、有料版が必要になることは理解しておきましょう。

STUDIOはこちら

 

Canva

Canvaは、スライド形式のポートフォリオの作成に便利なツールです。豊富なテンプレートや素材を組み合わせて、手軽にクオリティの高いポートフォリオを作成できます。できあがったポートフォリオはPDFでのダウンロードもできるので、必要な形式を用意できることもおすすめのポイントです。

Canvaはポートフォリオの作成だけでなく、バナーやアイキャッチ、プレゼン資料の作成にも利用できます。無料版の範囲でも十分に使いやすいツールなので、Webデザイナーを目指している人は是非使ってみてください。

Canvaはこちら

 

Webデザイナーのポートフォリオに関するよくある質問

ポートフォリオの作成に関するよくある質問をまとめました。参考にしてください。

ポートフォリオに関するよくある質問
  • スクールの課題や模写はポートフォリオに載せてもよい?
  • ポートフォリオ作成サービスは使うべき?
  • ポートフォリオに載せる作品はいくつあればいい?

 

スクールの課題や模写はポートフォリオに載せてもよい?

スクールの課題や模写は、原則としてポートフォリオに載せるのは避けた方がよいでしょう。卒業生が同じデザインのポートフォリオを使って応募する可能性もあります。採用側からすれば、まったく同じポートフォリオを見せられれば「あ、この人は自分のデザインを作っていないんだな」と、独自のデザインを作っていないことを察してしまいます。自らチャンスを潰すようなことはせず、自分で作成した実績のみを載せるようにしましょう。

また、著作権の観点からもスクールで配布されたテンプレートを使うべきではありません。どうしてもポートフォリオに載せたい場合は、スクールから許可をもらったうえで、自分なりにアレンジしたものを載せるなどの工夫が必要です。

 

ポートフォリオに載せる作品はいくつあればいい?

ポートフォリオに載せる作品数は、特に「何点以上記載しなければならない」という決まりはありません。これまでに制作したもののなかで、自信のあるものを選べば大丈夫です。とはいえ、あまりに少なすぎるとスキルのアピールが不十分になる可能性があり、多すぎるとすべての作品に目を通してもらえない可能性があります。

未経験者の場合は作品数を増やすのもつらい作業ですが、少なくとも5点以上は用意しておきたいところです。

 

ポートフォリオに載せる作品や実績がない場合はどうすればいい?

Webデザインの実務経験がなく、ポートフォリオに載せられる作品がない場合は、架空のサイトやLPを作成してポートフォリオに載せましょう。

できるだけテイストの違うサイトを数種類用意して、自主制作を進めていくのがおすすめです。仮案件のような形で要件定義からしっかり作り込めば、十分にスキルをアピールできます。

架空サイトを作るときは、知り合いにクライアント役を演じてもらって仮案件を進めたり、クラウドソーシングから案件を探して架空のプロジェクトを進めたりすると、実案件に近い形で学習できます。

ポートフォリオの彩りを増やすためにも、まずは架空サイトで作品紹介の項目を充実させましょう。

 

Webデザイナーのポートフォリオ作成で困ったらスクールに通うのがおすすめ

ポートフォリオは、あなたのスキルを採用担当者に伝えるための重要な役割を果たします。しかし、慣れないうちは思い通りにポートフォリオ作成が進まず、仕上がりも微妙なものになってしまうことも珍しくありません。

多くの採用担当者の目に止まるようなハイレベルなポートフォリオ作りを学ぶなら、スクールに通って技術を身につけるのがおすすめです。

無料でポートフォリオサイトの制作を学びたい人は、ZeroPlus Gateがおすすめです。30日間の短期カリキュラムで、Webサイトの作成技術を身につけられます。学習をサポートしてくれるメンターもつくので、最短でWebデザイナーへの道のりを歩みたい方はぜひお申し込みください。

公式サイトはこちら

 

まとめ:Webデザイナーはポートフォリオを作ろう

ポートフォリオは、あなたのスキルをアピールするためのツールです。これまでの経歴や経験したことのあるスキル、扱えるツールなどを紹介して、採用担当者に興味を持ってもらえるようなポートフォリオを作りましょう。

ポートフォリオに載せる内容は、以下の通りです。

  • 自己紹介・プロフィール
  • 持っている経験・スキル
  • 実績・作品紹介

ポートフォリオに載せられる実績や制作物を準備できていない人は、まず制作物を作るところから始めましょう。実案件でなくとも、自主制作の作品を載せてポートフォリオを充実させることが大切です。

どうしてもポートフォリオ作りが進まない、アイデアが浮かばないという人はぜひスクールに通うことも検討してみてください。スクールで学習してみたい人は、ぜひ無料のZeroPlus Gateを受講して、最短で実務に使えるスキルを身につけましょう。

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから