悩む人お仕事獲得に向けてポートフォリオを作りたい！
でもどうやって作ればいいんだろう…？
今回は「駆け出しデザイナー向け高評価をもらえるポートフォリオの作り方」を解説します。
Webデザイナーにとってポートフォリオは、案件獲得を左右する超重要なものです。
あおい私は駆け出し時期には、ポートフォリオを武器にしてほとんどの案件を獲得していましたよ。
今回は具体的な作り方に加えて、高評価をもらうためのコツや無料のサンプルデータも配布しています。
ではさっそくみていきましょう！
あおいこの記事を書いた人
あおい（＠aoidesign）
2018年からWebデザインを学習。
副業時代を経て現在はフリーのLP専門デザイナーとして活動。
LP制作実績は200件以上。
メンターや講師の仕事も行う。
Webデザイナーにとって重要なポートフォリオとは？
ポートフォリオとは、「私はこんなものが作れます！」とアピールするための作品集のことです。
過去の制作物や実績、自己紹介を含めて作成します。
ポートフォリオが重要な理由は、お客さんが依頼先を選ぶ際に最も重視するのが「制作実績」だからです。
あおい私の経験上、経歴や資格はほぼ重視されません…
とにもかくにも「どんなものが作れるデザイナーなのか？」で判断されると考えましょう。
だからこそ、渾身の制作物を準備して、自分の実力をしっかり示す必要があります。
ポートフォリオには何を入れたらいい？
ポートフォリオには、過去の制作実績と自己紹介を入れます。
制作実績
- 制作物の画像（Webサイトなら、サーバーにあげてURLを記載）
- タイトル
- 概要（依頼内容、制作期間など）
- 制作の意図、意識したポイント
- 成果（クリック率が3倍に増加したなど）
- お客様の声（依頼者からもらった感謝の声や評価）
自己紹介、その他
- 名前
- 顔写真（イラストより写真がベター）
- 経歴
- 制作できるもの
- 使用可能ツール
- 自己PR文
- メニュー・料金
- お問い合わせ先
- プライバシーポリシー、特商法
- 運営者情報
※全て入れる必要はなく、ポートフォリオの活用方法によって変わってきます。
あおい中身の作品がまだそろっていない方は、こちらもぜひ参考にしてください！
実績ゼロの初心者は架空のものでもいい？
スクールのお題で作った作品や、自分で練習用に作ったものをポートフォリオに入れても大丈夫です。
ただし、そういったサンプルだけのポートフォリオは避けるべきですね。
なぜなら、実案件の経験がないデザイナーだと分かれば、相手も不安になってしまうから。
一つや二つでも実務で作った作品があると、印象が全然違いますよ。
実績がない方の場合は、家族や友人を頼って、簡単なバナーやサイトを作らせてもらうのもおすすめです！
あおい私は当時YouTubeをやっていた友人に声をかけ、サムネイルを作らせてもらいました。
無料でやりましたが、実績としてポートフォリオに使えたので、ありがたかったです。
未経験でも採用される！ポートフォリオ作成の5つのコツ
具体的な作り方に入る前に、作る上でのポイントを5つご紹介します。
- クオリティも数もどちらも大事
- 制作意図をしっかり記載する
- おしゃれさよりも視認性、可読性の高さが大事
- 素人感が伝わる余計な一言は書かない
- 応募先や相手に合わせて内容を変える
クオリティも数もどちらも大事
ポートフォリオには、クオリティの高い作品をできるだけ多く載せるのが理想です。
というのも「実績が多い＝多くの人に選ばれている」という安心感を与えるから。
あおい数が少ないと、パッと見の印象が弱く、デザイナーの実力レベルを判断するのが難しくなります。
とはいえ、駆け出しのうちは、どうしても数を稼ぐのが難しいと思います。
その場合は、最低限の数を確保した上で、クオリティで勝負することが重要です。
数の目安
- バナーなどの画像：5つ以上
- Webサイト：2つ以上
数を稼ごうとして、適当に作ったサンプル品を入れるのはNGです。
なぜなら、たとえ一つでもダサいものが含まれていると、相手を不安にさせる可能性があるから。
これだと、良い作品に対しても
発注者たまたまうまく作れただけでは…？
と勘繰られる可能性があります。
その代わり、実績が増えてきたら、どんどんポートフォリオに追加していきましょう！
あおい私は定期的に中身を見直し、クオリティの高い作品が目立つようにしてますよ。
制作意図をしっかり記載する
制作意図は必ず書くようにしましょう。
なぜかというと、デザインは単に見た目を良くするだけじゃなくて、ビジネスの課題を解決するためのものだからです。
依頼者が抱えている問題に対して、「自分のデザインがどうやってその問題を解決するのか？」という点が一番大事になってきます。
書き方の具体例
- 「投資」という堅いイメージを払拭し、気軽に申し込めるようポップで明るいイラストを多用した。
- 独自のコンセプトが強い塾なので、他社比較を目立たせ、オリジナル性を最大限にアピールするレイアウトにした。
制作意図がしっかり記載されてると、
依頼者このデザイナーに頼めば、成果が出るものを作ってくれそう！
こんな風に、評価が高まりますよ。
おしゃれさよりも視認性、可読性の高さが大事
ポートフォリオを作る際は、凝ったデザインよりも「読みやすい・見やすい」ことを最優先にしましょう。
なぜなら一番重要なのは、制作物や制作意図がしっかりと伝わることだからです。
気をつけるべきポイント
- 全体はシンプルな色味で、制作物がもっとも目立つように
- アート寄りのおしゃれなデザインより「読める・見やすい」が大事
- デザイン4原則（近接・整列・強弱・反復）を守った見やすいレイアウト
- 読みやすい文字の大きさ、フォント
- ごちゃごちゃした装飾はなし
- 誤字脱字には注意し、文章は簡潔にまとめる
あおいネットでよく見かけるのが、
・フェードインなど動きをやたら入れすぎてる
・画像が重すぎて読み込みが遅い
このようなサイトです。
意外と多いので、気をつけたいポイントです。
素人感が伝わる余計な一言は書かない
ポートフォリオには、素人をアピールする言葉は入れない方がいいです。
その理由は単純で、いくら価格が安くても、素人に頼むことには不安が残るからですね。
NGワード
- 初心者
- 駆け出し
- 勉強中
- スクール卒業したばかり
- デザイナーになりたて
- 副業
- 兼業
- 隙間時間に作業
- 子育て中、ママデザイナー（あえて書く必要はないかも）
XやインスタなどSNSで、このようなワードを書いているデザイーをよく見かけます。
あおい実は、私もかつては自信がなくて初心者だと名乗っていた時期がありました。
でも、お金をもらって仕事をする以上、プロ意識を持つことが大切ですよ！
応募先や相手に合わせて内容を変える
応募タイプの案件でポートフォリオを使うときは、相手に合わせて内容を入れ替えるのがおすすめです。
理由は、「相手のニーズにどれだけ応えられるか」が勝負のカギになるからです。
例えば、バナー制作の案件に応募するなら、ポートフォリオにはバナーを中心に入れる。化粧品関連の案件なら、美容系のデザインを多めに入れるといった感じ。
特にクラウドソーシングでの応募では、この工夫が本当に差をつけるポイントになります。
実際、一つの案件に対して、何十件も応募が届きます。多くの応募者がコピペの提案文や使い回しのポートフォリオを使っているのが現状です。
あおい私も発注者になったことがあるので、よくわかります。
コピペの提案文は、多くの場合一目でわかります。それが悪いわけではないですが、印象は良くないですね…
逆にいうと、案件に合わせて提案文やポートフォリオを送るデザイナーは、抜群に良い印象を与えます。
特に実績が少ないうちは、相手のニーズに合わせた提案が勝負の分かれ目になりますよ。
Webデザイナーのポートフォリオの作り方【6つの方法】
ここからは具体的な作り方を、難易度順でご紹介していきます！
| 作り方 | 難易度 |
|---|---|
| ポートフォリオ作成サービスを使う | |
| ノーコードツールを使う | |
| Canvaを使う | |
| WordPressのテンプレートを使う | |
| Photoshopで自作する | |
| 一から自作する |
ポートフォリオ作成サービスを使う
ポートフォリオを無料で簡単に公開できるサービスがあります。
あおい一番簡単で、無料で即座に作成できる方法です！
デザイン自体は変更できないので、オリジナル性を求めない方向けですね。
有名なサービス
Webデザイナーだと、folioを使っている方が多い印象です。
folioの特徴
- オンラインで簡単に作成、リンクをすぐ共有できる
- シンプルですっきりしたデザイン
- 制作意図やURLもしっかり記載できる
- 有名なクリエーターも多数利用している（NASU Co., Ltd. 上司ニシグチさんなど…）
具体例↓
ノーコードツールを使う
デザインを自分でカスタマイズしたいなら、ノーコードツールがおすすめです。
有名なサービス
一つ目に紹介したforiioとは違い、ノーコードツールでは、デザインをある程度自由にカスタマイズできます。
高品質なテンプレートが用意されているので、自分用に画像とテキストを入れ替えるだけで、簡単にポートフォリオサイトを作成できます。
ただし、好みのレイアウトやデザインに仕上げるためには、多少はWeb制作知識があった方がいいです。
あおい私のおすすめは「STUDIO」です。
テンプレには無料・有料ありますが、どれもクオリティが非常に高いのが特徴ですね。
テンプレート具体例↓
Canvaを使う
次が、Canva（キャンバ）を使ってポートフォリオを作る方法です。
こんな方におすすめ
- 無料で簡単にポートフォリオを作りたい
- PDFや画像としてダウンロードして使いたい
- プロが作った綺麗なデザインをそのまま使いたい
あおいPDFとしてダウンロードできるので、例えば面接にポートフォリオを持参したい、メール添付で先方に送りたいといった用途に最適です。
Canvaでポートフォリオを作る方法
Canvaでポートフォリオを作る方法をサクッと簡単に解説します！
登録が済んだら、検索窓から「ポートフォリオ」に絞ってテンプレートを検索します。
使うテンプレートが決まったら、あとはテキストや画像の入れ替えを行なっていけばOKです。
あおい具体例として、簡単なポートフォリオを作成してみました↓
リンクの追加について
コーディング（HTML・CSS）のスキルを実績としてアピールしたい場合は、データを必ずサーバーにアップロードしましょう。
そして、Canva上で「実際のサイトはこちらから」といった形でリンクを付与できます。
保存方法について
ポートフォリオが完成したら、右上の「共有」からダウンロードができます。
「ファイルの種類」にて「PDF（標準）」を選んでからダウンロードをクリックしましょう。
WordPressのテンプレートを使う
あおいここからは少し難易度が上がります！
次にご紹介するのは、WordPressのテンプレートを使ってポートフォリオを作る方法です。
WordPressで作るメリット
- WordPressの勉強になる
- レイアウトやデザインは自由にカスタマイズできる
- 自分だけのオリジナル性のあるサイトが作れる
WordPressを利用するには、サーバーやドメインの契約が必要です。
だいたい年間で10,000〜15,000円ほどかかりますが、WordPress自体のインストールは無料です。
ポートフォリオにピッタリ！WordPressのおすすめテーマ
WordPressには膨大な数のテーマがありますが、ポートフォリオを作るのに適したおすすめテーマはこちらです。
やはり有料テーマの方が機能が充実していて、独自性のあるハイクオリティなサイトが作れます。
ただし、無料でもそれなりにおしゃれで手軽に作れちゃうテーマもあります。
あおい私も試しにFukasawaで作ってみました！
WordPressの構築法も解説しているので、ぜひ参考にしてください↓
私のポートフォリオ公開
私が案件獲得に利用しているポートフォリオも、WordPressのテーマを使って作成しています。
これはかつて私が受講した「LPデザイナー養成講座」で配布されたテンプレートを元に作ったものです。
このテンプレートは、案件獲得に最適なページ構成や内容、レイアウトがしっかり組み込まれています。
あおい講座を受講しないとダウンロードできないですが、興味がある方はぜひチェックしてみてください↓
Photoshopで自作する【無料テンプレ付き】
次に紹介するのが、Photoshopを使ってポートフォリオを作る方法です。
あおいPhotoshop以外にも、IllustratorやFigmaなどのデザイン作成ツールでもOKです。
今回はPhotoshopを使った方法をご紹介します。
私はかつて受講した「ゼロイチWebデザイン」というスクールで、このポートフォリオを作りました。
こんな場合におすすめ
- バナーやHPの見た目のデザインのみを作るデザイナー
- PDF化して面接に持参したり、メール添付で送りたい方
- 自由自在にレイアウトやデザインを作りたい方
作成したデータはPDF化して、お仕事の応募先にメール添付で送っていました。
卒業制作で作った作品のクオリティが高かったこともあり、
発注者ポートフォリオの作品がめっちゃいいですね！
ぜひお願いしたいです。
といった反応をたくさんもらえました。
自分で1からデザインを作るのは大変ですが、Photoshopを使う練習にもなるので、特に画像制作をメインでやるデザイナーにはおすすめです！
【無料テンプレ付き】ポートフォリオのダウンロード
あおい今回は、私が当時使っていたポートフォリオを元に作ったテンプレートを、特別にダウンロードできるようにしました！
カラーも4種類用意したので、お好みに合わせてご利用ください。
データ利用時の注意点
- フォントは、游明朝・游ゴシックを使用しています
- テキストと写真は、必ず入れ替えてください
- 適宜ページを追加・削除して自由にカスタマイズできます
- 無加工のまま転売・販売は禁止しています
- 分からないことはお問い合わせください
あおいPDF化する流れは、こちらです↓
※MACでのやり方
- Photoshopでデザインを作成
- 一枚ずつ画像（pngまたはjpg）で保存
- 全ての画像をドラックして右クリック
- 「このアプリケーションを開く」→「プレビュー」
- 一覧が表示されたら、順番が正しいか確認
- 「ファイル」→「PDFとして書き出す」
- 名前をつけて保存
HTML・CSSで完全自作する
最後にご紹介するのは、ポートフォリオを完全に自作する方法です。
あおいもっとも難易度が高いので、駆け出しデザイナーやコーディングが苦手な方にはおすすめしません…
自作ポートフォリオ具体例
自作する場合、具体的には以下のような流れになります。
ポートフォリオ自作の流れ
- サイト設計（要素やページ構成など決定）
- ワイヤーフレーム作成
- Photoshopなどでデザイン作成
- HTML/CSSコーディング
- サーバーやドメインの用意
- サイト公開、運用
WordPress化する場合は、インストール作業や基本設定、セキュリティ、SEO対策など、多くの手間がかかります。
あおいかなりの時間と労力が必要です。
なので、最初は既存のテンプレートを使って作成する方が、効率的でオススメです。
結局、どの方法が一番いいの？
あおい目的とスキル別におすすめをまとめました。
- 独自性はいらないから、無料で早く簡単に作りたい→ポートフォリオ作成サービスを利用
- バナーやサムネなど画像のみ載せる→ポートフォリオ作成サービスを利用、Photoshopで自作する
- HPやLPを載せたいけど、コーディングスキルがない→ノーコードツールを使う
- PDF化して面接に持参したり、メール添付したい→Photoshopで自作する
- オリジナル性のあるサイトが作りたい→WordPressのテンプレートを活用する
私が一番おすすめなのは「WordPressのテンプレートを活用する」方法です。
その理由がこちら。
- WordPressの勉強になる
- レイアウトやデザインは自由にカスタマイズできる
- 自分だけのオリジナル性のあるサイトが作れる
- 新しい実績なども簡単に追加していける
- サービス終了やアップデートなどの影響を受けない
あおい私も試しにFukasawaで作ってみました。
WordPressの構築法も解説しているので、ぜひ参考にしてください↓
まとめ：実績ゼロでもポートフォリオ次第で案件獲得はできる！
ポートフォリオは、Webデザイナーが仕事を獲得する際の武器になるものです。
私は実際、スクール卒業したばかり状態から、ポートフォリオだけで案件獲得した経験があります。
求人サイトのお仕事やクラウドワークスのバナー案件にポートフォリオと一緒に応募して、すぐに採用が決まったこともありました。
とはいえ、ポートフォリオの作り方を間違ってしまった場合は、逆にそのせいで案件を逃してしまうこともあります。
本記事ではポートフォリオ作成の注意点などもまとめています。
ぜひあなたの武器として活躍するポートフォリオを作ってみてください！
