【実例あり】ウェブデザイナーの転職活動に効果的なポートフォリオの作り方

 ポートフォリオを作成しようと思っているけど、『どのように作ればいいんだろう』と悩んでいませんか?

 実は、この記事で紹介する『ポートフォリオの作り方』を実践すると、誰でも簡単に採用担当者の求めるかつ案件獲得もしやすいポートフォリオが作成できます。

 なぜなら、この記事は採用担当者の方や実際に転職成功した方にヒアリングを行い作成したものだからです。さらに僕自身もフリーランス活動ではありますが、案件獲得に繋がったからです。

 この記事では、ポートフォリオの作り方を5つのステップに分けて解説し、ポートフォリオのテンプレートも配布しています。

 記事を読み終えると、今後ポートフォリオの作り方に悩むことは一切なく、転職成功や案件獲得のしやすいポートフォリオサイトが作成できるようになります。

ポートフォリオとは

ポートフォリオとは自分の作品集

ポートフォリオとは、自分がこれまでに作成した制作物を集めた作品集のことを意味します。

具体的には、制作したデザイン物やコーディング練習した時に模写したコーディング・スクールの課題やそのほか自主制作した物を掲載します。

5個以上の制作物があるととても好印象を与えられるので、5個を目安に制作物を増やしていきましょう!

ポートフォリオとは自分のことを知ってもらうもの

ポートフォリオでは、制作物を見てもらうだけでなく、採用担当者の方に自分自身を知ってもらう役割も果たします。

具体的にどのようなことを記載すると効果的か、2つの項目について説明していきます。

なぜwebデザイナーになりたいのか

1つ目は、「なぜwebデザイナー(コーダーでも可)になりたいのか」です。

未経験からの採用は、今後の伸びしろが1つの採用基準となります。今後の伸びしろを何で判断するかと言うと主に「webデザイナーやコーダーになりたい動機が明確か・成長意欲があるか」の2つです。

そのため、なぜwebデザイナーやコーダーになりたいと思ったのかをしっかりと言語化させておきましょう!

ちなみに成長意欲は、制作物が5個以上あれば独学でもスクールでもしっかりと頑張ったことが伝わるので問題ありません。

人生のビジョンは何か

2つ目は、「人生のビジョンとは何か」です。

いきなり「人生のビジョン」を考えましょう!と言われても難しいかもしれません。その場合は、「デザイン(コーディング)を通して人にどんな役に立ちたいか」や「どんなことを意識してデザインを行うか」を考えてみてください。

ちょっと難しいのでくりくんの例を記載します。

 僕がデザインを通してやりたいことは、「人を幸せにすること」です。そのため僕は、デザインを制作するときに「クライアントやユーザーはどんな人で、その人たちにとっての幸せとはどういう状態なのか」を考えてからデザインをします。
 例えばクライアントの幸せとは、「売り上げに繋がること・そのサービスを通じてユーザーの人に喜んでもらうこと」だと考え、ユーザーにとっての幸せとは「そのサービスを通じて自分の悩みや課題が解決すること」と考えます。
そのためにはどのようなデザインが良いか「目的」を明確にして、目的達成するためのデザインを「論理的にデザイン」することを大事にしています。

まとめ

  • ポートフォリオとは作品集のことであり、制作物は5個以上がおすすめである
  • ポートフォリオには、自分を知ってもらうためのものでもあり、「なぜwebデザイナーになりたいのか」や「人生のビジョン」を記載することがおすすめある

ウェブデザイナーの転職活動に効果的なポートフォリオとは

ウェブデザイナーのポートフォリオは何で作るべきか

ポートフォリオの制作方法は大きく分けてWebと紙の2種類あります。

ウェブデザイナーやコーダーとして転職活動する場合は、ポートフォリオサイトを必ず制作しましょう求人に応募した時に必ず、ポートフォリオサイトの提出を求められます。その際にポートフォリオサイトがないと、そもそも選考に入れずに落ちてしまうので必ず制作してください。

紙のポートフォリオはなくても良いので、興味のある人やグラフィックなども担当する可能性があるか、企業で提出が必須などの場合をのぞいたら制作しなくて良いです。
※グラフィックやDTPデザイナーを目指している方は紙でも作成することをおすすめします。

ポートフォリオサイトの制作でも方法が2つあります。

  • デザイン〜コーディングまで全て自分で行う方法
  • ポートフォリオ制作サービスを使用してコーディングをせずに制作する方法

※どちらの方法で作成しても後述する「採用担当者が確認する点」は共通しています。

デザイン〜コーディングまで全て自分で行う方法は後ほど詳細に説明しますのでここでは、コーディングをせずに制作できるポートフォリオ制作サービスを紹介します。

RESUME

1つ目は、RESUMEというポートフォリオ制作サービスです。

非常に直感的なUIで誰でもわかりやすくて見やすいポートフォリオサイトが制作可能です。

Image from Gyazo

MATCHBOX

2つ目は、MATCHBOXというマイナビが運営しているポートフォリオ制作サービスです。

非常にシンプルで制作しやすく、マイナビからの転職活動にそのまま使用できるので便利です。

Image from Gyazo

採用担当者が確認する点を押さえて制作する

ポートフォリオサイトを制作にするにあたり、採用担当者がどのようなところを確認するのかを押さえた上で制作することがとても重要となります。

採用担当者の方が確認する点は以下の3点です。

制作実績

制作実績は、当然のごとく重点的に確認されます。
その理由として、制作物のクオリティは採用担当者にとって一番判断しやすい材料となるためです。

1章でもお伝えしたように、制作物は最低5つ用意しておくように頑張りましょう!

さらに、デザインにおいてとても重要なフィードバックが独学の場合はなかなかもらえず、高いクオリティの制作物を作ることは難しいので友人のWebデザイナーやSNSで依頼をして現役のWebデザイナーの方に1度フィードバックをもらっておくことをおすすめします!

できるかぎり、クオリティを上げられるように努力をしましょう!

制作フロー

とても重要なのにポートフォリオに取り入れている人が少ないのが制作のフローです。
コーディングの場合は、何時間で制作できたのか。デザインの場合は、どんな目的でどんなターゲットに対して何を意識して制作したのかを明確にすることで評価の高いポートフォリオサイトが制作できます。

制作物のクオリティだけで勝負をするのは転職活動やフリーランス活動の際に経験者の方に叶わない可能性があるので、制作フローを明確にして「考えて制作している」ということをしっかりと伝えられるようにしましょう。

実際の項目に関しては、次の章で参考をお見せします。

Webデザインやコーディングへの愛

未経験者の人が制作物と同じくらい重要視されるのが「伸び代」です。採用担当者の方は、この人は入社してからも頑張って努力をしてくれるのかという不安を持ちながら慎重に選考をしていきます。

その時に、採用担当者の方の不安をなくすために「Webデザインやコーディングへの愛」が伝わるようにしましょう!

愛の伝え方は以下の3点です。

  • ①制作物の数を他の人よりも多くすること(10個あったら素晴らしい)
  • ②Webデザイナーやコーダーになりたい理由を明確に伝えること
  • ③インプットの習慣を伝えること

①や②は何度も登場しているので説明を省きます。

③のインプットの習慣を伝えることもとても重要です。
僕の場合、毎日デザインやビジネスに関する記事や本を必ず1時間とるようにしています。何気ないアピールですが、忙しいデザイナーやコーダーの職業はしっかりと自分で自己研鑽の時間を取らないと成長が止まってしまいます。

毎日コツコツとインプットする習慣があることを伝えることで未経験でも今後成長してくれるんじゃないかなと期待をしてもらうことができます。

しっかりとポートフォリオにインプットの習慣があることを伝えられるように今日から時間を確保するようにしてください。

何を読むか悩んでいる方は、まずはこちらの読んでみてください。

デザインの4つの基本原則を抑えるだけでデザインは劇的に変化します。その原則をデザイナーだけでなく誰にでもわかりやすくいようにまとめられたのがこちらの書籍になります。デザイナーはもちろん、プレゼン資料や企画書など人に見せるものをより見やすくすることを4つの基本原則を抑えることで学べるので是非読んでみてください
説得力のあるデザインを身につけるのにおすすめの本です。世の中にある様々なデザインをデザイナーはどのようにして考え、制作しているのかを知ることのできる本なので是非読んでみてください♪。

ウェブデザイナーの転職活動に効果的なポートフォリオの作り方

さて、ポートフォリオとは何か・そして効果的なポートフォリオとはどういうコンテンツがあると良いかがわかったところで、制作方法について説明をしていきます。

制作フローは以下になります。

①情報設計を作成する
②ワイヤーフレームを作成する
③テキストを作成する
④モックアップの作成と素材の用意をする
⑤デザインを制作する
⑥コーディングをする
⑦公開する

それでは1つずつ紹介していきましょう!

情報設計を作成する

まずはじめに行うのが どのような情報をポートフォリオサイトに掲載するのかという情報設計を立てていくことです。情報設計の制作方法は様々ありますが、ドキュメントなどで整理するだけでも十分です。

今回は、情報設計をとてもとてもとても簡易で作成したものを配布していますので気になる方はこちらから確認してみてください!

ワイヤーフレームを作成する

情報設計が終わり、掲載する情報が明確になったらワイヤーフレームを作成していきます。どの情報をどこに掲載するかが明確になれば問題ありません。

ちなみにワイヤーフレームとは、webページのレイアウトを定める設計図のようなものを意味します。

ワイヤーフレームも今回は参考を配布していますのでこちらから確認してみてください!

Image from Gyazo

ワイヤーフレームはこちらから

リンクからでは編集ができないので、以下の手順で編集できる状態にしていきましょう!


①figmaをダウンロードする→ダウンロード方法はこちらから【初心者必見!】figmaの導入から基本的な使い方まで徹底解説!

②リンク先のワイヤーフレームをコピーする

③自分のfigmaのプロジェクトに貼り付けをする

Image from Gyazo

テキストを作成する

次にテキストを作成していきます。デザインに入る前に文量が明確になっていないとデザインを制作するのが困難なので先にテキストを作成していきましょう。

配布しているワイヤーフレームの方に、どんなテキストを入れた方が良いか記載していますので参考にしてみてください!

モックアップの作成と素材の用意をする

テキストの作成を終えたら、モックアップの作成と写真などの素材の用意をしていきます。

モックアップとは、模型のようなものを意味します。

Image from Gyazo

モックアップは、ポートフォリオサイトを制作するときにとても重要な素材となります。どんなにデザインが綺麗なポートフォリオサイトでもモックアップが綺麗に制作できていないとクオリティが少し低く見られてしまいます。

そのためモックアップはしっかりと制作しましょう!!

デザインを制作する

ここまで制作できたらいよいよデザインの過程に入ります。

デザイン制作のポイントは、デザインの4原則を抑えるということです。デザイン基本中の基本なのでしっかりと4原則を抑えてデザインを行いましょう!

4原則を知らない方は「デザインにおいて重要なデザインの4原則とは」を確認しましょう!

次の章でおすすめのポートフォリオサイトを紹介するのでデザインの参考にしてみてください♪

コーディングを制作する

デザインを終えたら、コーディングを進めていきましょう!コードの綺麗さはそこまで気にしなくても良いのでとにかく完成させられるように頑張りましょう!

最低限コーディング後にチェックして頂いたい項目があるのではこちらからご確認ください💁‍♂️

未経験からコーディング10サイトするまでのポイント

サイトを公開する

コーディングまで終えたらサイトを公開していきましょう!

今回は、最短で公開でできるサービスとしてNetlify(ネトリファイ)を紹介します。

Netlifyは、メールアドレスの登録とフォルダのドラックアンドドロップを行うだけでサイトを公開することができます。

①まずはNetlifyにログインしましょう!

Image from Gyazo

②フォルダをドラックアンドドロップで追加しましょう!

Image from Gyazo

たったこれだけでリンクが発行できますので是非活用してみてください。

未経験の人に参考にしてほしいポートフォリオサイト

Ryohey Anoさん

Ryohey Anoさんのポートフォリオサイトです。

Image from Gyazo

実績が素晴らしいことももちろんですが、シンプルで見やすいポートフォリオサイトになっています。制作のフローもとても明確でわかりやすいですね♪

モノクロの配色で制作を考えている方は是非参考にして頂きたいポートフォリオサイトです。

よっしーさん

webデザイナーとして転職活動中のよっしーさんのポートフォリオサイトです。

Image from Gyazo

とにかく世界観がものすごく素晴らしいですね!宇宙が好きといういことがすぐに伝わってくるデザインでとても印象的でした。世界観はしっかりと作りつつも制作物の紹介では、しっかりと制作フローなども記載していて本当に素晴らしいポートフォリオサイトです!

本当はたくさんの数のポートフォリオを紹介しようと思いましたが、迷いすぎてしまうのではないかと思い、今回は厳選して紹介させて頂きました。本当に厳選しておすすめしたいものがあれば追加させて頂きますのでこまめにチェックして頂ければと思います!

終わりに

今回は、「【実例あり】ウェブデザイナーの転職活動に効果的なポートフォリオの作り方」というテーマで執筆しました。もちろん100%の正解はありません。ただ、私自身が多くのデザイナーさんや採用担当の方と話す中でポートフォリオに必要なことは今回まとめたことだなと強く感じ執筆しています。

この記事が皆さんの転職活動に少しでも役立ててればとても幸せです。

転職活動を始める時には一人で行うのも情報不足で大変かと思いますので、プロに相談してみるのもひとつの選択しかなと思いますので参考にしてみてください。

【IT専門転職エージェント@PRO人】IT専門転職エージェントとして首都圏でサービス展開中!

いきなり相談が難しい方は、どんな求人があるか確認してからポートフォリオ制作にのぞみましょう♪

この記事がいいと思ってくださった方は、SNSでのシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA