【未経験でも】webデザインのポートフォリオの作り方｜作品例をご紹介

「Webデザイン未経験だけど、これから目指したい」
「ポートフォリオが必要って、本当？」

Webデザイナーとして仕事を受注したり、就職・転職したりするにはポートフォリオが必要です。

本記事ではWebデザインのポートフォリオの作り方や、参考になるサイトを紹介します。

未経験でも大丈夫！Webデザイナーを目指す方は、ぜひ参考にしてくださいね。

【この記事でわかること】

ポートフォリオの必要性
ポートフォリオの種類と作り方
おしゃれなポートフォリオにするコツ
参考にしたいサイト

ポートフォリオって何？

ポートフォリオとは、自分の制作物をまとめた作品集のことを指します。Webサイト上で作品を展示したり、紙の冊子にして読めるようにしたり、まとめ方はさまざまです。

ポートフォリオがあれば、就職や転職の際に、Webデザインのスキルがどのくらいあるのかを証明できます。クライアントがWebデザイナーを選ぶうえでの判断基準になるので、個人で仕事を請け負う際にもポートフォリオがあると便利ですよ。

初心者Webデザイナーでもポートフォリオは必要？

実践経験がない初心者のWebデザイナーにこそ、ポートフォリオは必要です。ポートフォリオがなければ、スキルの証明ができないためです。

就職や転職活動の際、Webデザインの業界を志望するのであれば、書類選考の段階でポートフォリオ提出が求められるケースもあります。履歴書や名刺と同じくらい大切で、用意しておくべきものであると考えましょう。

【ポートフォリオがあるとできること】

スキルの証明ができる
作品にこめたメッセージを理解してもらえる
自分の作風を気に入ってくれたクライアントから仕事がくる
どのように依頼すればどんな作品が仕上がるのか、クライアントが想像しやすい
営業資料として活用できる

フリーランスとして活動したい方も、クライアントから評価してもらうためにポートフォリオを持っておくべきだと理解しておきましょう。

ポートフォリオはWebと紙媒体、どちらを用意するべき？

答えは、「Webは必ず用意する。紙媒体は必要なシーンに応じて用意する」です。

なぜ必要なのか・どんなときに必要なのか、それぞれのメリットやデメリットも解説します。

Webサイトは必ず用意しよう

Webサイトでポートフォリオを作成すれば、オンライン上での仕事の獲得に役立ちます。

スキルの証明として提示できるので、ポートフォリオがない場合に比べて仕事の受注率がアップする可能性があります。

【Webサイトのメリット】

就職・転職で企業とメールでやりとりする際、ポートフォリオサイトのURLを紹介しやすい
インターネット上で仕事を受けたい場合、クライアントに目を通してもらいやすい
随時、更新できる
印刷の手間がない
SNSやブログにURLを設置して、誘導できる

【Webサイトのデメリット】

作品作り＋Webサイト作りに時間がかかる
サイト運営のための費用がかかる

ポートフォリオサイトの作成には、お金と時間と努力が必要です。
しかし、作ることによる恩恵が大きいので作らない手はありません。

ポートフォリオサイトがあるおかげで就職・転職が成功したり、仕事の受注が増えたりする可能性が高まるので、用意しておくとよいです。

紙媒体のポートフォリオが必要なケース

紙媒体のポートフォリオは、対面でのやりとりで活躍します。
面接・面談・打ち合わせなどで直接相手と話をする場合は、Webサイトではなく紙の冊子のほうが親切で見やすいです。

【紙媒体のメリット】

作品の風合いを感じてもらいやすい
ボリュームをアピールしやすい
通信環境に左右されない
どんな相手でも、すぐに渡せる
デジタル領域が苦手な人にも簡単に見せられる

【紙媒体のデメリット】

使用する度に印刷する必要がある
ミスがあると、元データを修正してから印刷し直さないといけない

紙媒体のポートフォリオがあれば、Webサイトが開けないシーンでも滞りなくやりとりが進められます。対面の場でポートフォリオを紹介する可能性があるなら、作っておくと安心です。

ポートフォリオサイトの作り方は？流れを解説！

ポートフォリオサイトを作る手順は以下の通りです。

コンセプトを決める
手書きで構成を作る
ワイヤーフレームを作る
サイトを制作する
ポートフォリオサイトをサーバーにアップする

順に解説します。

コンセプトを決める

コンセプトとは、自分のアピールポイントをうまく伝えるための方向性のことです。最初にサイトのコンセプトを決めましょう。

どんな人に見てもらいたいのか「ペルソナ」を設定し、相手目線に立ってポートフォリオのコンセプトを考えます。

【ペルソナの例】

A	B
・女性・33歳・デザイナー・東京渋谷区のデザイン会社勤務・採用担当者・未経験でも採用したい・事業拡大のため、人員を増やしたい・新卒の就活時期には、1日に30通ほど書類審査をする	・男性・38歳・Webライター・神奈川県厚木市在住の個人事業主・少しでも実務経験がある人を探している・運営しているブログを改良してほしい・クラウドソーシングを通じて1日に3人の応募者をチェックしている

上記の場合、AとBでは見たいポートフォリオも探している人も異なります。ペルソナを絞って、自分のスキルを最大限アピールできるコンセプトを考えましょう。

また、作品とサイトのイメージがあまりにも異なっていると、作品に注目してもらえません。ミスマッチがないように作品とサイトの世界観を統一させることも大切です。

手書きで構成を作る

ポートフォリオサイトのサイトマップを作ります。

【サイトマップの例】

1層目	2層目	3層目
トップページ	プロフィール	なし
	作品集	コンセプト1の作品
		コンセプト2の作品
		コンセプト3の作品
	スキルの紹介	実績の例
		取得した資格一覧
		対応できる仕事
	問い合わせ	なし

クライアントがサイトを訪れたとき、トップページからどのような経路でどのページを参照するのか、想像しながら構成を考えます。見せたい情報はサイトの上層に配置されるように工夫してください。

ワイヤーフレームを作る

サイトマップが決まったら、ワイヤーフレームを作ります。ワイヤーフレームとは、サイトの情報を整理して作る設計図のことです。最初に、タイトル・作品・作品の説明文など、どこに何を配置するかを決定します。

ただし、制作の段階で細かな調整ができるため、厳密に配置しなくても大丈夫です。

また、ワイヤーフレームの作成は、デザインツール・手書きのどちらでも構いません。

サイトを制作する

設計図と作品がそろったら、いよいよサイト制作に移ります。

サイトをWebで表示させるためにはプログラミング言語を用いたコーディングが必要ですが、コーディング未経験の方はCMSを利用するのがおすすめです。CMSは、コーディング不要で画像や文章・レイアウト情報を操れるため、初心者でも簡単に作成できます。

代表的なCMSは、WordPressです。日本でのシェア率No.1で、テーマの豊富さやカスタマイズの自由度から、ポートフォリオサイトに利用する人も非常いとされています。無料で利用できるので、お金と時間をかけずにポートフォリオサイトが制作可能です。

ポートフォリオサイトをサーバーにアップする

できあがったポートフォリオサイトをアップするためには、サイトのドメイン取得とサーバーの用意が必要です。

それぞれお金がかかりますが、無料キャンペーンや格安サーバーを利用すれば出費をおさえられます。

紙媒体のポートフォリオはどうやって作るの？

次に、紙媒体のポートフォリオを作る方法を紹介します。

ポートフォリオの形を決める
ポートフォリオに掲載する作品を決める
掲載する作品のデータを編集する
ポートフォリオの設計図を作る
ページをデザインする
印刷する
ファイルにとじる

ポートフォリオサイト作りとは異なる工程があるため、紙媒体のポートフォリオを作りたい方は要チェックです。

1.ポートフォリオの形を決める

まずは、ポートフォリオの形を考えます。

製本するか、ファイルにするか
とじ方は左右のどちらにするか
何ページくらいのボリュームにするか
どの作品をどの順番で掲載するか
何サイズで印刷するか

マイナビクリエイターによると、ちょうどよいページ数は15〜25ページです。ページ数が多いほど熱意は感じられるかもしれませんが、多くの応募者のポートフォリオを見る採用担当者やクライアントにとって負担になる可能性があります。

「手に取った人が作品を見やすいように」という意識でポートフォリオを作成しましょう。

2.ポートフォリオに掲載する作品を決める

1ページあたり、1〜2作品を掲載するとどの作品にも注目してもらえますよ。

1ページにいくつも作品を詰め込むと、見ていて疲れたり、アピールポイントがわからなかったりとマイナスの効果になる可能性があります。

ポートフォリオにはすべての作品を載せるのではなく、クオリティの高い作品を選んで、メインの作品に注目してもらえる構成にしましょう。

3.掲載する作品のデータを編集する

ポートフォリオに載せると決めた作品は、印刷用データに編集しましょう。

Web用の画像を印刷すると見た目が大きく変わってしまう可能性があるためです。

カラーモードや保存形式について詳しく知りたい方は、印刷会社の公式ホームページを参考にするとよいですよ。

（参考：WAVE）

4.ポートフォリオの設計図を作る

手書きでよいので、どのページにどの作品を掲載するかを描いた設計図を作ります。

どの作品を近くに置けば効果的に見えるのか、作品説明の文章はどの位置に書き込むのか、細かい配置をページ順にまとめましょう。

5.ページをデザインする

IllustratorやPhotoshopを使ってデザインとレイアウトを作ります。

画像・文章・作品タイトルなどをデザインしたあと、見やすいポートフォリオになっているか改めて確認しましょう。

6.印刷する

完成したポートフォリオをPDF出力し、印刷します。

自宅で印刷しても、コンビニで印刷しても構いません。製本したい場合や画像のクオリティを求めるなら印刷所に依頼する方法もありますよ。

いずれにせよ、作品の見え方が大きく変わってしまうため、印刷する紙のクオリティにこだわりましょう。

7.ファイルにとじる

印刷できたら、ファイルにとじて完成です。

ポートフォリオに必要な情報は5つ！

ポートフォリオに掲載すべき情報は5つあります。

目次
プロフィール
制作実績
デザインのコンセプト・工夫
スキルの説明

クライアントや企業に対して「自分がいかに魅力的な人物か」をアピールするために必要な項目です。

目次（もくじ）

ポートフォリオには、必ず目次をつけましょう。

面談・面接・打ち合わせなどでは、ポートフォリオを短時間で見せなくてはいけないため、見やすさと構成がとても大切です。

その点、目次には構成や見やすさがわかりやすく表れます。

デザイン・レイアウトを工夫して「読み進めたい」と思わせる目次に仕上げてください。

プロフィール

自己紹介・職歴・仕事の成果など、できるだけ具体的に記載します。

【掲載すべき内容】

顔写真もしくは自画像
簡単な自己紹介
電話番号・メールアドレス
職歴
ポートフォリオサイトのURL（紙媒体の場合）
使用できるツール

仕事の実績がない初心者でも大丈夫！無理して詰め込む必要はありません。

制作実績

初心者でも、仕事の受注経験があれば実績として掲載しましょう。

どんな依頼で
どんなコンセプトで
何を担当したのか

以上のような要素を明示できれば、クライアントが「どんな依頼をすればどんな作品が仕上がるのか」イメージしやすくなります。

公開先のURLも開示できるようなら、ポートフォリオに掲載しましょう。

※クライアントによっては公開禁止の案件もあります。公開してもよいかどうか、事前に確認してください。

デザインのコンセプト・工夫

作品ごとに、説明文を書きましょう。目安は200〜400文字程度で、作品のコンセプトや工夫した点を添えます。

説明文は、適切な言葉遣いで・わかりやすく・魅力的な文章に仕上げるよう努力してください。ポートフォリオの作品はもちろん「文章も見られている」と意識してくださいね。

細かいところまで気を配ったポートフォリオ作りができれば、就職・転職活動でも仕事の受注のシーンでも役に立ってくれるはずです。

スキルの説明

自分が持っているスキルについて言及します。

Webデザイン以外にも対応できるスキルがあれば、積極的にアピールしておきましょう。

Webデザイン
イラスト作成
プログラミング
扱えるツール
ディレクター経験　など

以上のように、可能な業務範囲をまとめます。資格がなくても問題ありません。

どんな仕事ができるのかあらかじめ説明しておけば、コミュニケーションコストが抑えられますよ。加えて、自分が得意なスタイルや分野を記載しておくと、クライアントは「どのような仕事を頼めるだろうか」とプラスにイメージしてくれますよ。

おしゃれなポートフォリオにするポイント

初心者でもおしゃれなポートフォリオを作るために、大切にしたいポイントは、以下の2つです。

1. ギャラリーサイトやデザイナーのポートフォリオを参考にする

Webデザイナーのポートフォリオを集めたギャラリーサイトには、幅広いジャンルのデザインが紹介されています。好みのデザイナーのサイトがあれば、訪問して「何がよいと感じたのか」を分析しましょう。

2. デザインの基礎を徹底する

デザインの原則である「近接・整列・反復・強弱」の4つを徹底しましょう。

近接	関連する要素をまとめ、整理することで情報を関連づける
整列	関連する要素をルールにのっとって配置する
反復	同じ要素をルールにのっとって繰り返す
強弱	要素に強弱をつける

上記の原則を意識すれば、視認性がよいポートフォリオがしあがります。