高評価をもらえる!ポートフォリオの作品の作り方【未経験Webデザイナー向け】

こんにちは!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サイト
  • レスポンシブデザインの実装サイト
RIKA

応募する仕事に合わせて、いくつか選んで作成しましょう。

高評価をもらえる中身(=作品)の作り方

悩む人

どんなものを載せれば、いい反応をもらえるんだろう?

こんな疑問にお答えします。

ポイントは、ズバリこれです

ビジネスにおける問題解決を意識して作ったデザイン

私たちが作るデザインは、単に見た目を良くするためではなく「ビジネスの課題を解決するため」に作るものです。

課題というと、例えば

  • サービスの認知度を広げたい!
  • 集客力を上げて顧客リストを獲得したい!
  • 商品の購入率を上げたい!

こういったものですね。

なので、デザインを作る時には、「いかにして、お客さんの課題を解決するか?」を考えて作らないといけません。

そして、ポートフォリオでは「課題に対してどんなアプローチをしたのか?」その制作意図をしっかり伝えることが大切ですね。

▼具体例

「投資」という堅いイメージを払拭し、気軽に申し込めるようポップで明るいイラストを多用しました。

独自のコンセプトが強い塾なので、他社比較を目立たせ、オリジナル性を最大限にアピールするレイアウトにしました。

制作意図がしっかり書かれていると、相手も

応募先

このデザイナーに頼めば、うちの売上アップにつながるデザインを作ってくれそうだな。

こう思ってくれて、評価がグンと上がりますよ。

オリジナル作品が作れる!お題を無料でご提供

先ほど「問題解決を意識したデザイン」が大切だと述べました。

そのためには「お題」に沿って作った制作物をポートフォリオ載せる必要があります。

逆にいうと「模写しただけのバナー」や「何も意図がなく作ったデザイン」は、NGです。

ただ、自分でお題を考えるのって難しいですよね…

ということで!今回は「実際の案件に近いお題」をいくつか用意しました。

もしよければ、自由に使ってください。

  • バナーなど画像のお題12個
  • ランディングページのお題2個
  • ホームページのお題1個

▼バナーなど画像のお題12個

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

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

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

参照:しょーごログのHPより

ここで一つ「コーディング(HTML/CSS)のお題」について、私のおすすめ教材を紹介させてください。

Web制作フリーランスしょーごログさんが制作された「コーディング演習課題全部盛り」です。

これは「デザインカンプからのコーディング練習」ができる教材になります。

デザインカンプとは?
PhotoshopやFigmaなどのデザインツールで作った完成見本のこと。これを元にコーディング作業をおこないます。

こんな方におすすめ

  • コーディングのお仕事に応募したい
  • ポートフォリオでコーディング力をアピールしたい
  • 実案件に近いコーディングのお題をこなしたい

また、コーディング力を鍛えることはもちろん「ポートフォリオ作成のためのお題」にも挑戦できます。

このお題は「オリジナル化」できるため、他人と被らない作品が手に入りますよ。

RIKA

私も実際に購入して、初級〜上級までをこなしました。
以下は、私が実際に課題をこなす中で作成した「オリジナル作品」になります。

例:中級編のオリジナル作品

テーマ:緑のようちえん

実際のサイトはこちら

  • ユーザー名:coding2024
  • パスワード:coding2024

特徴まとめ

  • 実践演習でコーディングスキルを爆上げできる
  • 他人と被らないポートフォリオの作品が作れる
  • 初心者でもハイレベルなコーディング実績が作れる
  • エンジニアしょーごさんの添削指導が受けられる

\ 即戦力が身につく!実践型の人気教材 /

▼受講レビューも書いています

まとめ:渾身の作品を武器にしてお仕事探しに臨もう

今回ご紹介した「お題」は、私が実際に経験した案件をもとにしています。

そのため、ポートフォリオに載せることで、リアル感のある作品として評価されやすいと思います。

作品が出来上がったら、次はポートフォリオを作っていきましょう。

もしよければ、こちらの記事も参考にしてみて下さい。

私のおすすめスクール・講座・書籍
RIKA

これまで多くのスクール・講座を受講してきた私が、実際に受講して良かったものを厳選してご紹介しています。

よかったらシェアしてね!
  • URLをコピーしました!
目次