こんにちは!Webデザイナーの@AoiDesignです。
ポートフォリオについてネットで調べると、作り方の解説はたくさん出てきます。
でも、肝心の「中身の作品ってどうやって作るの?」については、あまり詳しく書かれてないんですよね。
もちろん、すでにWebスクールで「バナー」や「Webサイト」を作った方は、そのまま使えばOKです。
一方で、
- まだ作品が一つもない
- 今ある作品のクオリティが微妙だから新しく作りたい
- バナーはあるけど、Webサイトがないから追加で作りたい
このような悩みを抱える方も多いと思います。
そこで今回は「ポートフォリオの中身の作り方」にフォーカスしてお話ししていきます。
この記事で分かること
- ポートフォリオの作品の作り方
- 高評価をもらえる作り方のコツ
- お題の提供(バナー、HP、LP)
▼ポートフォリオの作り方はこちらも参考に

ポートフォリオは「中身の作品」が一番重要
まずポートフォリオには「クオリティの高い制作物」を載せることが最も大切です。
もし現在載せているものが、
- 少しイマイチだな
- 数が少なくて心配
と思うなら、新しく作ることをおすすめします。
なぜなら、適当に作った作品では、どうしても素人っぽさが出てしまい、それでは仕事をもらうのが難しいから。
私は時々、こんなポートフォリオを見かけます。
- デザイン自体はおしゃれなのに、肝心の作品が微妙
- 数が少なくて、実力レベルが判断できない
- 「これ、スクールで作った課題かな?」と思うようなもの
Webデザインの世界では、ポートフォリオに載せる作品次第で、仕事が取れるかどうかが決まるといっても過言ではありません。
特に未経験の場合は「経験」や「実績」がないので、より一層ポートフォリオの質が重要になってきます。
というわけで、まずは「ポートフォリオには、クオリティの高い作品を入れる」これを意識して作っていきましょう。
ポートフォリオには「こんな作品」を入れる
ポートフォリオに入れるものは「応募する仕事内容」によって変わってきます。
つまり、「Webデザイナーだから、必ずホームページを入れなきゃいけない」といった決まりはありません。
RIKA私は現在「LP制作」を専門にしているので、中身はすべてLPの実績です。
もし副業でバナー制作をやりたいなら、バナーやヘッダーなどの画像をメインで入れると良いですね。
ここでは、ポートフォリオに
- 共通で入れるべき内容
- 仕事別で入れるべき内容
をご紹介します。
共通で入れるべき内容
自己紹介
- 名前
- 顔写真またはイラスト
- 簡単な経歴
- 制作できるもの
- 使用ツール
- 自己PR
- 連絡先
制作物
- 画像またはURL
- タイトル
- 概要(制作時期や担当範囲)
- 制作意図
- 成果(クリック率が3倍に増加した等)
- 依頼者からもらった感想や評価
印刷物なら
- ロゴ
- チラシ、フライヤー
- 名刺
- ポスター
- パンフレット
- カタログ
見た目のWebデザインなら
- ホームページのデザイン
- ランディングページのデザイン
- 広告バナー
- 動画サムネイル
- SNSのヘッダー
- ブログやLINEのアイキャッチ
- Instagramの投稿画像
- 楽天やAmazonなどECサイトの商品画像
- 電子書籍の表紙
コーディングなら
- HTML/CSSで作成したWebサイト
- JavaScriptなどの動きを実装したWebサイト
- WordPressを実装したWebサイト
- レスポンシブデザインの実装サイト



応募する仕事に合わせて、いくつか選んで作成しましょう。
高評価をもらえる中身(=作品)の作り方
どんなものを載せれば、いい反応をもらえるんだろう?
こんな疑問にお答えします。
ポイントは、ズバリこれです
ビジネスにおける問題解決を意識して作ったデザイン
私たちが作るデザインは、単に見た目を良くするためではなく「ビジネスの課題を解決するため」に作るものです。
課題というと、例えば
- サービスの認知度を広げたい!
- 集客力を上げて顧客リストを獲得したい!
- 商品の購入率を上げたい!
こういったものですね。
なので、デザインを作る時には、「いかにして、お客さんの課題を解決するか?」を考えて作らないといけません。
そして、ポートフォリオでは「課題に対してどんなアプローチをしたのか?」その制作意図をしっかり伝えることが大切ですね。
▼具体例
「投資」という堅いイメージを払拭し、気軽に申し込めるようポップで明るいイラストを多用しました。
独自のコンセプトが強い塾なので、他社比較を目立たせ、オリジナル性を最大限にアピールするレイアウトにしました。
制作意図がしっかり書かれていると、相手も
このデザイナーに頼めば、うちの売上アップにつながるデザインを作ってくれそうだな。
こう思ってくれて、評価がグンと上がりますよ。
オリジナル作品が作れる!お題を無料でご提供
先ほど「問題解決を意識したデザイン」が大切だと述べました。
そのためには「お題」に沿って作った制作物をポートフォリオ載せる必要があります。
逆にいうと「模写しただけのバナー」や「何も意図がなく作ったデザイン」は、NGです。
ただ、自分でお題を考えるのって難しいですよね…
ということで!今回は「実際の案件に近いお題」をいくつか用意しました。
もしよければ、自由に使ってください。
- バナーなど画像のお題12個
- ランディングページのお題2個
- ホームページのお題1個
▼バナーなど画像のお題12個


▼ランディングページのお題2個


▼ホームページのお題2個


コーディング(HTML/CSS)のおすすめ演習課題


ここで一つ「コーディング(HTML/CSS)のお題」について、私のおすすめ教材を紹介させてください。
Web制作フリーランスしょーごログさんが制作された「コーディング演習課題全部盛り」です。
これは「デザインカンプからのコーディング練習」ができる教材になります。
こんな方におすすめ
- コーディングのお仕事に応募したい
- ポートフォリオでコーディング力をアピールしたい
- 実案件に近いコーディングのお題をこなしたい
また、コーディング力を鍛えることはもちろん「ポートフォリオ作成のためのお題」にも挑戦できます。
このお題は「オリジナル化」できるため、他人と被らない作品が手に入りますよ。



私も実際に購入して、初級〜上級までをこなしました。
以下は、私が実際に課題をこなす中で作成した「オリジナル作品」になります。
特徴まとめ
- 実践演習でコーディングスキルを爆上げできる
- 他人と被らないポートフォリオの作品が作れる
- 初心者でもハイレベルなコーディング実績が作れる
- エンジニアしょーごさんの添削指導が受けられる
\ 即戦力が身につく!実践型の人気教材 /
▼受講レビューも書いています


まとめ:渾身の作品を武器にしてお仕事探しに臨もう
今回ご紹介した「お題」は、私が実際に経験した案件をもとにしています。
そのため、ポートフォリオに載せることで、リアル感のある作品として評価されやすいと思います。
作品が出来上がったら、次はポートフォリオを作っていきましょう。
もしよければ、こちらの記事も参考にしてみて下さい。










