当ブログテーマ【SWELL】を使った正直な感想 詳しくみる

Webデザイナーのポートフォリオの作り方「私が実際に使ったものも公開」

こんにちは、さくらこです!

女の子

未経験からWebデザイナーを目指してます。転職用にポートフォリオを作りたいんですが、どうやって作ったらいいですか?

このような質問にお答えします。

私も制作会社に勤務していたことがありますが、転職時にはもちろんポートフォリオを使っていました。

ポートフォリオはWebデザイナーの転職の必需品で、自分のスキルを伝える重要な役割をもっています。

ただ適当に作品を並べておけばいいのではなく、ちゃんと『伝える』を意識して作るのが大切です!

この記事では未経験の方向けに、ポートフォリオの作り方と、作るときのポイントも合わせて解説したいと思います。

さくらこ

実際に私が転職時に使ったポートフォリオも公開しているので、ぜひ参考にしてください!

目次

未経験Webデザイナーにとってのポートフォリオの重要性

まず、作り方を解説する前に、ポートフォリオの重要性について少しお話したいと思います。

なぜ必要なのかを理解すれば、作成時にどんなことに気を遣えばいいか分かるはずです。

ポートフォリオはスキルを証明するもの

ポートフォリオは、自分が今持っているスキルを証明するためのものです。

たとえば下記のようなスキルですね。

  • デザインスキルのレベル
  • コーディングスキルのレベル
  • デザイン力やデザインに対する考え方

経験者ならデザイナー歴や勤務していた会社から、ある程度レベルも把握できます。

でも未経験の場合は全く何もない状態で、唯一証明できるのがポートフォリオです。

なので転職時にはポートフォリオが必須と言われていたり、履歴書以上に大切と言われたりしているんですよ!

ポートフォリオはWebサイトと紙どっちがいいの?

ポートフォリオには、「Webサイト」と「紙」の2種類の媒体があります。

用途の違いはこんな感じです。

  • Webサイト→応募時に添付で送る、面接時に見ながら進める
  • 紙→面接時に見ながら進める

重要度はWebサイトの方が大きく、オンライン面接なら紙バージョンは必要なかったりします。

じゃあどっちがいいの?についてですが、

心配なら両方作っておくのが無難です。

紙の方は企業によって使うかどうかも異なりますが、Webも紙も掲載内容は同じなので、心配なら用意しておくといいでしょう。

さくらこ

私は応募時にWebサイトの方を添付して、面接の時は紙の方を見ながら進めましたよ!

私が両方用意した理由は、通っていたスクールの勧めだったからです。結果的には両方必要だったので、作ってよかったと思いました!

Webデザイナーのポートフォリオの作り方

それではここからは、ポートフォリオの作り方です。

まずは掲載する作品を制作

当たり前ですが、まずは掲載する作品を用意しないといけません。

用意するものは下記です。

  • バナー
  • サイト(デザイン用→トップページのデザインを3つほど)
  • サイト(コーディング用→1つ~できれば複数用意)

バナーは作りやすく短時間でできるので、いろんなジャンルや形で複数作っておきましょう。

サイトは、デザイン用とコーディング用で複数用意しておきましょう。

コーディング用は、デザイン用とは別のデザインで作るのがおすすめです。できるだけ多くのデザインパターンを用意しておきましょう!

作品は架空のものか実際の実績

バナーやサイトの作品は、架空のものでもOKですが、1番いいのは実際の実績です。

実績が無くても大きな問題ではないですが、実際の仕事として経験しているのとそうでないのとでは、経験値に大きな差があり、それを担当者は見ているからです。

さくらこ

やっぱり架空のものを自由に作るのと、実際にお客様を相手に作るのとでは、考えることや責任感が全然違いますよ!

私は架空のもので作りましたが、知り合いがいれば頼むか、いなければ格安でココナラなどで依頼を受けるのがおすすめです!

余談ですが、ココナラで「売る」って侮れなくて、適当ではなかなか購入してもらえないんです。

なので工夫が必要なんですが、この経験も今後に活きるので、ぜひやってみてくださいね!

いきなりの販売に不安がある場合は、アイコンや名刺などの安いものでいいので、1度自分が購入して体験してみると解消されますよ!

さくらこ

プロのデザインも勉強できて一石二鳥です!

>>サービスをさがす

ポートフォリオサイトの作成

掲載する作品を用意できたら、いよいよポートフォリオの作成です。

ポートフォリオに必要な情報はこちら。

  1. 自己紹介
  2. 作品紹介

構成としてはこんな感じでシンプルです!

ただ、じゃあバンバン好きなように掲載!というわけではありません。

それぞれポイントを解説していきます。

自己紹介

自己紹介ですが、自分の名前以外にもこれまでの経歴やスキルなども入れておきましょう。

  • 名前
  • 生年月日
  • 自分の写真
  • これまでの経歴
  • 今持っているスキル「Photoshop・Illustrator・HTMLなど」
  • 資格があれば

このように具体的に、でも簡潔に書いておきます。

さくらこ

自分の得意なデザインや、デザインを通してどんな風になりたいかも書けば、より人柄が伝わっていいかもしれません!

作品紹介

作品を掲載するときは、その作品を制作するときに考えたことや、心がけたポイントなどを添えておきましょう!

たとえば、下記のようなことを意識して文章を考えます。

  • サイトの目的(集客や売上アップなど)
  • ターゲットとした人物のイメージ像
  • そのイメージに合わせて考えたデザインのポイント
  • たとえば集客が目的ならそのために何を工夫したのか

ここで大事なのは、ただ好きなデザインで作ったのではなく、「こんな目的のためにこんな風にした」と伝えることです。

実際の仕事もそうですが、Webデザイナーは好きなようにデザインすればいいわけではありません。

改善や何かしらの目的のためにデザインや構成を考えるので、「私はそれも理解してしっかり考えてますよ!!」ということをアピールしましょう!

Webデザイナーのポートフォリオの作り方「紙編」

次に紙で作るポートフォリオのご紹介です。

紙も基本的にはWebサイトと同じ

紙のポートフォリオも基本的にはWebサイトと同じです。

「同じ内容を紙版にしてまとめる」という感じです。

上でも書きましたが、紙のポートフォリオは面接時の補助になるぐらいです。

なのでまずはWebサイトに注力して作ったなら、それを紙に変換していけばOKです!

私が実際に使った紙のポートフォリオはこんな感じ

私が実際に面接で使った、紙のポートフォリオをご紹介します。

ポートフォリオの内容は下記です。

  • A3の用紙で作成、ファイルに入れている
  • 3種類の架空サイト(1つ目美容院、2つ目カフェ、3つ目通販サイト)
  • 全サイト一部ページをコーディング済
  • Webサイトのポートフォリオにもアップしている

最初に書いておきますが、私は当時無知で著作権など考えずに、検索で見つけた画像を使用しています。これは違法にもなるので、必ずフリー素材を使用してください。

ちなみにWebサイト用にも同じことをしていて、担当者の方に「削除した方がいい」と指摘を頂いたので、直後に削除しています。(その会社で内定を頂いたので、作り直しをせず済んでよかったですが、、皆さん気をつけてくださいね!)

1つ目のサイト(美容院)

見づらくて申し訳ないですが、1ページ目はこんな感じです。

1つ目の架空サイト(美容院)に関するターゲットやデザインの説明、使用アプリケーションを書いています。

さくらこ

いや~懐かしい!!もう4年ほど前のものですが、何となく捨てられずに取っておきました(笑)

メインビジュアルの写真を載せつつ、さらに店舗に関する詳細な情報を書いています。

説明の横にあるロゴも自分で考えたもので、「こんなのもできますよ!」とアピールしています。

今見ればハサミを添えただけの、簡易過ぎるロゴですが(笑)

次のページでは、トップページの全体像を載せています。

そして次のページにて、トップページを分割して載せて、詳細を書いています。

さくらこ

Web上での動きや、ここを意識して作っていますという説明です。

2つ目のサイト(カフェ)

これは2つ目の架空サイト(カフェ)のページ紹介です。

JQuery(コピペ)も一応扱えますよ、というアピールをしています。

3つ目のサイト(通販サイト)

こちらは通販サイトですが、HTML/CSSのコーディングのみで、ショッピング仕様にはなっていません。

*思いっきり某大手の商品画像を使ってます。ごめんなさいm(_ _)m

商品ページは3パターンでデザインしました。

どのデザインや配置が1番いいか決めきれず、全部載せてしまえ!という感じです。

というわけで、かなり簡潔紹介になりましたが、以上が私が実際に使ったポートフォリオです。

さくらこ

参考になるか分かりませんが、少~しでもお役に立てれば幸いです!

自分の力をアピールできるポートフォリオを作って転職活動しよう!

それでは最後に、この記事のまとめです。

ポートフォリオは、自分が今持っているスキルを証明するためのものです。

デザイン・コーディング・考え方など、これまで学んで身につけてきたものをアピールするためのツールが、ポートフォリオです。

ただやみくもに作品を並べるだけでなく、「なぜこのデザインで作ったのか」などの説明も、しっかりと記載しておきましょう。

さくらこ

自分の力を最大限アピールできるポートフォリオを作って、自信をもって面接に挑んでくださいね!

ポートフォリオが完成したら、あとは就職転職活動に挑むだけです。自分にあった企業を探して、楽しく仕事していきましょう!

よかったらシェアしてね!
目次