記事内に商品プロモーションを含む場合があります

webデザインの勉強

【ポートフォリオの作り方・ポイント】未経験からwebデザイナーに転職したい方へ

webデザイナーの就職活動で使うポートフォリオの作り方のバナー

こんにちは、webデザイナーのshioです^^
私はほぼ未経験で制作会社のwebデザイナーに転職しました。

未経験からwebデザイナーに転職活動する場合、ポートフォリオ制作でいろいろ悩むと思います。

私も分からないことだらけだったので、講習会に参加したり、採用担当経験者・エージェント会社の方・デザイナーさんなどいろんな方からアドバイスを頂いて制作しました。

そこで学んだことがたくさんあったので、今回ポートフォリオ制作についてまとめました。

私と同じように未経験で就職活動する方や、ポートフォリオ制作で悩んでいる方の参考になれば嬉しいです。

▼ピンタレストで保存してね📌♡

webデザイナーポートフォリオ の作り方のピンタレストの画像

—❋—❋—❋—❋—❋—❋—❋—❋—❋—❋—

ポートフォリオ制作の
クライアントは自分です!

自分と向き合ったり、
将来のことを考えるきっかけにもなるし、
何より自分の好きなデザインができるので
わくわく💕すると思います!

これからポートフォリオを作る方は
楽しみながら
素敵なポートフォリオを制作できると

いいなと思ってます^^

—❋—❋—❋—❋—❋—❋—❋—❋—❋—❋—

ポートフォリオとは

自分の顔のようなもの、
その人が分かるもの

ポートフォリオで採用の8割が決まり、慣れてる面接官はポートフォリオを見ればどんな人が面接に来るか分かるそうです。
(実際に面接担当されていた方や、エージェント会社の方に聞いた情報です。)

採用担当者はポートフォリオからその人が

  • どういう人柄で、
  • どういう考え方を持っていて、
  • 結果的にどんな作品を作ることができるか

を見ています。

ですが、制作会社の採用担当者は忙しいので1つのポートフォリオを見ている時間は多くて5分くらいだそうです。
なので、見やすく、短時間で自分をアピールできるような工夫も必要です。

ポートフォリオは転職活動をする際に実務経験のない未経験者にとって大切ものなので、今まで経験したり学んだこと、自分の全てを出し切るつもりで制作しましょう!

shio
shio
上記のことを頭に入れて、
採用担当者に会いたい!と思ってもらえるような
ポートフォリオを制作しましょう^^

ポートフォリオの目的を明確に

ポートフォリオ作り方が変わるため、目的や状況を明確にします。

  • 未経験からの転職で使うのか、すでにデザイナーとして活動している人が仕事を得るために使うのか
  • 会社で働きたいのか、フリーランスなのか
  • 制作会社なのか、インハウスなのか
  • 採用担当者向けなのか、クライアント向けなのか

私は下記のようにまとめました。

いつ使うのか 転職活動の時(書類選考・面接)
誰に向けたものなのか 制作会社の採用担当者
どのように思ってほしいのか 未経験だけど頑張ることができる、のびしろがある、活躍できそうな人。
雇いたいと思ってほしい。
書類選考の際は「会ってみたい!」と思ってほしい。

ポートフォリオに必要なコンテンツ

ポートフォリオに入れるコンテンツを用意します。
  1. 自己紹介
  2. 自分の強み
  3. 作品
  4. SNS

自己紹介

顔写真はあった方がいいです!親しみ安心感を与えることができます。
履歴書の写真では出せない自分らしい写真を選ぶといいです◎

自己紹介部分は職務経歴書に詳しく書いてあると思うので、しっかり書かなくて大丈夫です。
逆に文字は少なめにまとまってると、忙しい面接官にとって見やすいポートフォリオになると思います!

webデザイナーとしての自分の強み

  • どんなデザイナーになりたいのか
  • デザイナーとして強みになるスキル
  • 前職の経験をどう活かせるのか
shio
shio
この3つを中心に、アピールできることは何かを考えておきましょう。

webデザインの作品(webサイトやバナーなど制作物)

面接官をされていた方やエージェント会社の人から、ジャンルの違う作品を3つくらい作ってあれば良いと聞きました。
1つはしっかり作り込む必要があるそうです。

どのように考えて作品を作ったのかを記載します。

  1. ターゲットについて
  2. どのようなねらいがあるのか
  3. webサイトを作る目的
  4. 解決できなかった問題点も!←ここ重要

作品を作る時にメモとして思ったこと・気づいたことを残しておくとポートフォリオ制作の時に便利です。

shio
shio
作品数が少ない場合は、スクールでやった課題も載せた方が良いですよ。
作品数稼ぎになるのと、どんなスキルがあるのかを伝えられます。作品が増えてきたら入れる必要はないです。

私が載せた作品についてはこちらに書いています。

【参考例の解説】未経験webデザイナー転職・就職活動で使った私のポートフォリオのバナー
【私のポートフォリオの解説】未経験webデザイナーの転職活動で使用|参考例こんにちは! 未経験からweb制作会社に就職しましたshioです❋ 以前ポートフォリオの作り方についての記事を書いたので、 ...

制作物のメインとして載せたデジハリの卒業制作はこちら

【デザイン未経験者の卒業制作】デジタルハリウッドLIGで猫カフェwebサイト制作のバナー
【デジタルハリウッドLIGの卒業制作】デザイン未経験から猫カフェwebサイト制作こんにちは、shioです。 今回は私がデザインスクール(デジタルハリウッド STUDIO by LIG)で作った卒業制作をご紹介し...

SNS

SNSで日々勉強していることをアピールすることができるので、勉強用アカウントがある人はポートフォリオにも載せましょう。どんな性格なのかも知ってもらえます。

shio
shio
私はポートフォリオを作った時はSNSをやっていなかったのですが、途中でアカウントを作ったのでポートフォリオに載せました。載せた方が書類選考の通過率が高かったです。(それだけが理由ではありませんが)

ポートフォリオ制作の流れ

①デザインコンセプトを決定する

自分を客観的に見て、デザインのコンセプトを決めます。
ポートフォリオ制作では自分自身をデザインで表現していきます。

コンセプトを決める際に参考にしたもの
  1. 性格
  2. 好きなもの、趣味
  3. 着ている服のジャンル
  4. 好きな色
  5. 自分らしさを表すもの
shio
shio
私は花や動物、自然がある場所が好きなのと、
周りの人から「柔らかい雰囲気」があると言われていたので
「優しい自然」をコンセプトにしてデザインしていこう!と決めました。

②デザインのイメージを固める(コンセプトを表現するため)

Pinterestや参考サイトが集められたギャラリーサイトを使ってデザインの方向性を定めましょう!

Pinterest

ピンタレストでは、このように参考にしたいwebサイトやデザインを集めることができます。

参考ギャラリーサイト

こちらの記事に参考サイトが載っているギャラリーサイトをまとめました。

webデザインの参考になるギャラリーサイト|初心者にもおすすめ!の画像
webデザインの参考になるギャラリーサイト|webデザイナーおすすめ!こんにちは!shioです❁ webデザインを制作する際に、いくつか参考サイトを探すと思います。 私がよく利用して参考にしているお...
デザイン制作に参考になるサイト|バナー・LP・パーツごとのアイキャッチ画像
webデザインの参考サイト|バナー・サムネ・LP・パーツごとのおすすめを紹介こんにちは!webデザイナーのshioです❁ デザインのコンセプトを決めた後、デザインする前に参考になるデザインを見て調査をすると...

webサイトのデザインをする際は参考になるようなサイトを沢山見て、イメージを固めましょう。

私がよく使っているサイトはこちらです。

参考サイトなどに載っているポートフォリオは、フリーランスデザイナーの作品が多く、お客さん(クライアント)に向けたものになっています。
転職活動で使うポートフォリオを制作する人は、全てを参考にしないように注意した方がいいです。

③サイトマップを作る

未経験で制作物も少ない方はシンプルなものでいいと思います。
私の場合、最初は下記ページしかありませんでした。

  • トップページ
  • アバウト(私について)ページ
  • 制作した作品につき1ページ
shio
shio
制作物が増えてきたタイミングで、ページ数を増やしました。

④Photoshopなどでデザインする

まず、大まかなデザインを決めます。(ワイヤーフレーム作成)
ワイヤーフレームは鉛筆で大きな紙に書くのをおすすめします。

その後Photoshopなどのデザインツールを使い、①で決めたコンセプトに基づいてデザインしていきます。

  • 配色
  • フォント
  • 素材
  • 言葉
  • 余白

上記のものをよく考えながら、一つ一つに意味を込めてデザインしていきます。
なぜこの色を選んだのかなどデザインの理由を言えるようにしておきましょう。
面接の時に聞かれることがあります!

PhotoshopなどAdobe製品を購入したい方はこちらもチェック
▶︎Adobe ccの1番安い購入方法・比較|社会人デザイナーが契約するコンプリートプラン

私のTOPページデザインをご紹介

(※名前が書かれている箇所などはモザイクかけたり消してあります。)

ポートフォリオのトップページのデザイン

 

優しい柔らかい雰囲気を出したかったので、セクションの切り替え部分は直線にせず、ゆるいカーブを付けました。

「本」を使ったデザイン・・・
メインビジュアルを本とお花の画像にしたり、TOPに戻るボタンをしおりのデザインにしました。

自然を感じられる画像やカラーを使用しました。

shio
shio
デザインする際に読んでおくと良い本、記事をご紹介します!

ポートフォリオの素材選び

素材は下記記事で紹介しているフリー素材サイトから探してきました。
無料でも素敵な素材はたくさんあります。
おすすめのフリー素材サイトをまとめていますので、参考にしてみてください^^

制作会社WEBデザイナーが良く使うフリーイラストサイトまとめ11選
【無料/商用可】Webデザイナーおすすめフリーのイラストサイト|おしゃれな線画素材も!こんにちは! 今回は制作会社に勤めて毎日webサイトのデザインをしている私が よくお世話になっているフリー(無料)のイラスト素材...
【無料/商用可】WEBデザインで使いやすいおすすめフリーアイコンサイト7選
【無料/商用可】WEBデザインで使いやすいおすすめフリーアイコンサイト7選こんにちは! 今回は制作会社に勤めて毎日webサイトのデザインをしている私が よくお世話になっているフリー(無料)のアイコンサイ...
【無料/商用可】WEBデザインで使えるおすすめフリー画像・写真素材サイト11選
【無料/商用可】WEBデザインで使えるおすすめフリー画像・写真素材サイト11選webサイトを作る時、バナーを作る時など、写真素材を使いますよね。 ですがなかなかいい写真素材が見つからず、気が付いたら写真を探す...

ポートフォリオのフォント選び

フォント選びも大切です。
どんな印象を与えたいのかを考えながら最適なフォントを選びましょう。

私はこちらの本で勉強しました。

フォントはこちらにまとめ記事があります^^

【Adobe font】webデザイナーおすすめ日本語フォントまとめ〜26選〜のブログのバナー
【Adobe fonts】webデザイナーおすすめ日本語フォントまとめ〜26選〜デザインをしている時に「フォントどうしよ〜」って誰もが悩むところだと思います。 デザインをしている方は「Adobe Fonts」か...
【Adobe font】webデザイナーおすすめ欧文フォントまとめのブログのバナー
【Adobe fonts】webデザイナーおすすめ欧文フォントまとめ〜20選以上〜デザインをしている時に「フォント何使おう。。。」って誰もが悩むところだと思います。 デザインをしている方は「Adobe Fonts...
【Google fonts】webサイトに使えるおすすめ日本語フォント〜10選〜の画像
【Google fonts】webサイトに使えるおすすめ日本語フォント(無料)〜10選〜こんにちは!webデザイナーのshioです^^ webサイトのデザインで、フォント選びはデザインを左右する重要な工程ですが、何を使...
【Google fonts】webサイトに使えるおすすめ欧文フォント〜20選以上〜の画像
【Google fonts】webサイトに使えるおすすめ欧文フォント(無料)〜20選以上〜こんにちは!webデザイナーのshioです^^ webサイトのデザインで、フォント選びはデザインを左右する重要な工程ですが、何を使...

ポートフォリオの配色選び

色は自分で作らず既存の配色を参考にすると
デザイン初心者でも綺麗にデザインすることができます!

配色の参考サイトのアイキャッチ画像
配色の参考サイト|webデザイン制作におすすめツール紹介(グラデーションも)こんにちは!webデザイナーのshioです❁ デザイン制作で配色がしっくりこないことがありますよね。 色は自分で作らず既存の配色...

その他参考書

私がポートフォリオデザイン作成の時に読んでいた参考書はこちらにまとめています。
デザインに悩んだ時に役立ちますよ^^

【webデザイナーおすすめ】デザインする時に役立つデザイン勉強本8選のバナー
【webデザイナーおすすめ】デザインする時に役立つ勉強本8選+こんにちは ^^💐 今回は私がデザインする時によく読んでいる本をご紹介します。 私はデザインに困ったとき、本...
webデザイン初心者おすすめ勉強本3冊|未経験webデザイナーが最初に読んだのバナー
未経験webデザイナーが最初に読んだwebデザイン初心者おすすめ勉強本今回はこれからwebデザインを勉強し始める方に向けてお勧めしたい本をご紹介します。 未経験から勉強を始めた私も実際この3冊を読んで...

⑤htmlとcssでコーディングする

PCとSP両方対応させます。
(レスポンシブ対応)

スマホから見られる場合もあります!

⑥ドメインをとってサーバーにアップする

私はさくらのレンタルサーバを使用しました。
サーバー代を安くしたい方におすすめです。

shio
shio
webサイトを作る流れとだいたい同じです♪

ポートフォリオはさくらのレンタルサーバーを使ってましたが、
当ブログはエックスサーバーを使用してます。

こちらの記事でサーバー・ドメイン・WordPressの契約を簡単にする方法をお話ししていますので、参考にしてみてください♪

デザインブログの始め方|開設方法、サーバー・ドメインについてwebデザイナーが解説のアイキャッチ
デザインブログの始め方|開設方法、サーバー・ドメインについてwebデザイナーが解説こんにちは! webデザイナーでブログを運営しているShioです* 私が運営している当ブログ「私のデザインブログ」はだんだん成長...

「サーバー・ドメインって何?」という方に向けての説明もしてます。

ポートフォリオの最終確認

採用担当者はポートフォリオの細かい部分まで見ているので、

 

  • 行間・文字の大きさが適切か
  • 伝わりやすい言葉で書かれているか
  • 作品ごとに課題や背景の説明が書かれているか

を最後に確認しましょう!

実際の業務で基本となる行間文字サイズ余白のとりかたは結構見られるそうなので、気をつけてデザインしたほうが良いです!

即戦力になるかどうか判断される部分になるからです。

まとめ

未経験から始めた私のポートフォリオ制作期間は約2週間でした。(他の作品と同時進行)
そのあとも少しずつアドバイスをいただいた部分をブラッシュアップしていきました。
採用担当者は制作期間も見ているので、あまり時間をかけすぎないようにしましょう!

ポイントをおさえて、楽しんで制作し、満足いくポートフォリオが完成すると良いですね♪

私のポートフォリオの解説記事もあわせて読んでみてください^^

未経験webデザイナーの就職活動で使った私のポートフォリオ〜解説編〜

ポートフォリオが完成したら、転職活動が始まりますね。
私の転職活動レポートも参考にして頂けると嬉しいです。
・・・大変だったんです😅

webデザイナーの就職活動前編〜未経験からwebデザイナー〜のバナー
未経験からwebデザイナーへの転職活動【前編】〜ポートフォリオ・職務経歴書・面接〜こんにちは、webデザイナーのshioです^^ 私は未経験からwebデザイナーに転身しました。 今回は「未経験からwebデザイナーに...

簡単に作れるポートフォリオの記事

resumeでwebデザインの簡単なポートフォリオを作りました!のアイキャッチ画像
resumeでwebデザイナーの簡単なポートフォリオを作りました!【レビュー】こんにちは! webデザイナーのshioです^^ 最近resumeというツールでデザインした制作物をまとめています。 ...

Canva公式クリエイターに応募する際に提出するポートフォリオ作りのポイントもまとめました。

【Canva公式クリエイターになる方法】審査に通るポートフォリオとは?のアイキャッチ画像
【Canva公式クリエイターになる方法】審査に通るポートフォリオとは?こんにちは! Canva公式クリエイターのShioです。 Canva公式クリエイターになりたい!でも どうやったらなれ...

ポートフォリオ公開しました!

ポートフォリオを公開しました【未経験からwebデザイナーへ転職用】の画像
ポートフォリオを公開しました【未経験からwebデザイナーへ転職】動画で解説転職活動で使ったポートフォリオを公開しました! こちらの動画で解説しているポートフォリオは、私が転職活動で使用したものです。 デ...

実際のサイトで見れるように公開しました。
現在は動画でのみ確認していただけます。

デザインサービスのお知らせ

女性起業家様向けにweb制作をしてます|AMULEdesignのHP・LP制作の画像導線迷子やデザインの魅せ方に
悩んでる女性起業家さんへ
集客導線・世界観をサポート

Webデザインを中心に制作してます*

 

webデザイナー|Canva公式クリエイター
shio
shioのアイコン画像
*月2万人が読んでるデザインブログ運営 *女性起業家様向けデザインサービス *ナチュラルな婚姻届制作 webデザイナーを目指したい方やデザインに興味がある方へ 【勉強方法|転職活動|ポートフォリオ制作|webサイト制作|Canva公式クリエイターの仕事 etc... 】について発信しています。 このブログとともにwebデザイナーとして成長していきます!
\ Follow me /