【実例あり|未経験からwebデザイナーを目指す人向け】就職活動用ポートフォリオのつくりかた

WEBデザイン

未経験からWebデザインを学び、就職活動を経て現在はマーケティング支援会社でデザイナーとして働いています、はやしです。

未経験からデザイナーになりたい!と就職活動を始めるときに、多くのひとが悩むのがポートフォリオづくりではないでしょうか。

特に私はデザインだけでなく企画やマーケティングなどデザインの上流部分から関われるような仕事がしたいと考えていたので、そのような企業にどのように自分をアピールしていくかという部分は非常に悩みました…。

そしてたくさん悩んで考えて、いろんな方にアドバイスをいただきながらポートフォリオを制作し、結果的に就職活動がスムーズに進んだので(!)

今回はポートフォリオづくりの際にどんなことを考えて制作したかを実際のポートフォリオを交えてまとめていきたいと思います。

もちろん、ポートフォリオの作り方は個人の考え方やスキル、目指す場所によってさまざまだと思うので、一例として捉えていただければと。

私と同じように未経験からのデザイナー就職を目指す方、現在ポートフォリオの制作で悩んでいる…という方の参考に少しでもなれば嬉しいです。

説明はいいからポートフォリオの実例をみたいんじゃ~という人はこちらから↓

ポートフォリオ制作にとりかかる前準備

ポートフォリオの目的やターゲットを整理する

一口にポートフォリオといっても、その目的は千差万別。

Googleで「ポートフォリオ デザイナー」なんかで検索するとイケイケの現役デザイナーさん達のポートフォリオがたくさん出てきますよね。

しかし、その多くはフリーランスとして活動されている方が実績を公開して新しいお仕事を受けることを目的に制作されているものだったりします。

未経験から就職活動のためにポートフォリオを制作しようと思っている人がそれらのイケイケポートフォリオの構成をまるっと真似しても、そもそもの目的やターゲットが違うのでうまくいきません。

就職活動用のポートフォリオであれば、その目的やターゲットに沿ったものを制作する必要があるのです。

当たり前のことのように思えますが、参考探しでいろいろな方のポートフォリオを見ていくなかで意外とこの前提を忘れがち(私自身はそうでした)なんですよね…。

就職活動用の
ポートフォリオ
フリーランスデザイナーの
ポートフォリオ
目的選考を通過する
一緒に働きたいと思ってもらう
実績公開
仕事を受注する
ターゲット企業の採用担当者制作を依頼したい人
就活用とフリーランスのポートフォリオの違い

なんのために自分はポートフォリオを制作しようとしているのか、はじめに整理しておくと混乱しにくいのでおすすめです。

応募企業をリサーチしてアピールすべきポイントを考える

では、どのようなポートフォリオならその目的を達成できるのでしょうか。

就職活動時に使用するポートフォリオでは、ターゲットは企業の採用担当者となります。

応募する企業によって求める人材は異なっているため、企業のコーポレートサイトや採用サイト(あれば)、制作実績などからそれを推測し、アピールすべきポイントを考えていきます。

様々なテイストのデザインを手掛けるweb制作会社であれば、デザインの幅(女性向け、男性向け、子ども向けなど)を重視するかもしれません。

インハウスデザイナーを募集している事業会社であればその業界に適したテイストのデザインのクオリティの良し悪しを見るかもしれません。

特に未経験からのデザイナー就職を目指す場合は、成果物の数も多くないためデザインの実績のみで説得力を持たせるのはかなり難しく、ターゲットに合わせた「見せ方」が重要になってきます。

先述したように私はデザインだけでなく、企画やマーケティングなどデザインの上流から関われるような企業で働きたい!と思っていたので、応募企業をリサーチしたうえで下記の点を中心的にアピールしていくことにしました。

  • どのようなデザイナーを目指すのか
  • これまでの経験で身に着けた自分の強み
  • 成果物に至るプロセス(どのように課題設定してデザインを制作したか)

また、採用担当者は日々多くのポートフォリオを目にしているだろうと考え

  • 少しでも印象を残すための工夫
  • 採用担当者がストレスなく閲覧できるデザイン

についても意識してポートフォリオを制作しました。

各セクションで意識していたこと

私のポートフォリオの構成はこちら。

  • FV
    • ロゴアニメーション
    • コンセプト
  • about me(私について)
    • 略歴と顔写真
    • 私の強み
    • スキル
  • works(制作実績)
  • contact(お問合せフォーム)

至ってふつ~~~の構成ですが、ここから各セクションをどんな考えのもと制作したかについて書いていきます!

FV

ロゴアニメーション(MV)

FVは、たくさんのポートフォリオを見ているであろう採用担当者に対して「ほかの人と違う印象を残すにはどうすればいいか」という考えからスタートしました。

オリジナルの写真を使用したり、イラストを描いてみたりFVにインパクトを出す方法についていろいろと検討しましたが、わたしは自身のロゴと名前にアニメーションを付けたものを設置しました

本当はAfterEffectsでつくりたかったのですが、当時はそのスキルがなかったためiPadのProcreateというアプリでGifアニメーションを制作して使用しました。

はやし
はやし

余談ですがProcreateは直感的に使えるお絵描きアプリなので

iPadをお持ちの方はぜひ…!

(有料・買い切り型です)

激しめ(?)のアニメーションは多すぎると目立たせたい場所が逆にわからなくなってしまうので、注目してほしい部分にのみ使うほうが効果的です。

コンセプト

コンセプトは何度も何度も書き直しました…。

自分がどういう姿勢でデザインと向き合っていて、どういうデザイナーになりたいのか?を簡潔に示すことばをみつけるのが本当に難しかったです。

ただ、その過程で自分が本当に目指したいものの輪郭がはっきりしてきたという自覚があるので、なりたい姿を言語化してみるというのは就活において一度はやってみていいのかなと思います。

いま改めて見返してみると、幸運なことにこの掲げたコンセプトと近いお仕事ができているので、コンセプトを考えることはどんな企業で働きたいか?という指針にもなるのではないでしょうか。

ちなみに、この「紡ぐ、デザインを。」という言葉と趣味の刺繍から連想して、ポートフォリオのフォントや装飾は「糸」をイメージしたものだったりします。

about me(私について)

略歴と顔写真

顔写真については、私はめちゃくちゃラッキーな機会をいただいて素敵カメラマンさんに撮っていただいたんですが、これがあるのとないのじゃ全然完成度が違う…!!!

webデザインをいま勉強されてる方はものすごくよくわかると思うんですけど、写真素材のクオリティって全体のクオリティへの影響が大きいのです。

近くに写真を勉強されている方とかがもしいればその方に撮ってもらうのもあり、お金を出してプロに撮ってもらうのも私は全然ありだと思います!

あと個人的にはバチバチにきめている写真より笑顔の写真のほうが親しみが持てておすすめです(応募先の企業の雰囲気にもよるかもしれませんが)。

わたしの強み

私の場合、論理的思考とクリエイティブマインド(日本語でなんて言うんだろう)の2軸をポートフォリオでは強みとして記載しています。

いまは違う分野のお仕事や勉強をしてしている方がきっとこの記事を読んでくれていると思うんですが、いままでなにかひとつでも一生懸命にやった経験があるひとは必ず今後に活かせるものをその経験から得ています。

むしろデザインの道にまっすぐ来たわけじゃないからこその強みがあるはずです。

ただし、「論理的思考力が強みです!」「デザインが好きです!」と書いてあるだけだと誰でも同じことが言えてしまうし、説得力に欠けるんですよね。

ですので、ここで大事なことは、これまでの経験と絡めて強みに説得力を持たせるということです。

これ、新卒時の就活で履歴書を添削してもらってるときに先輩から教わったことなんですが、その強みに関する経験をどれだけ掘り下げて具体的に書くことができるかが、ほかの人と差別化できているかのポイントなんです。

私の場合は

  • 大学時代、研究費獲得のため自分の研究の有用性についてアピールした経験
  • 前職(臨床開発)で、医師の印象に残るプレゼンを考えた経験

などの経験から論理的思考をもとにデザインすることをやってきたよ!ということをアピールしました。

クリエイティブマインドについても言葉だけだと差別化は難しいんですが、Webデザインとは直接関係なくても、ものづくりへの情熱が伝わる成果物を載せることができれば「クリエイティブが好き!」って気持ちはより伝わると思います。

はやし
はやし

私は刺繍を制作物としてのっけてました

スキル

スキルについては、どんなツール(言語)を使えるかなどをシンプルに記載しています。

★★★☆☆などの星の数やパーセンテージ(%)でデザインスキルを記載しているひともいますが、資格やTOEICなどの点数とは違って、どうしても主観的な評価になってしまうため、作り手と受け取り手の印象にギャップが生じてしまう可能性が高そう…と考えてそのような表現は避けました。

結局、デザインやコーディングのスキルは成果物を見て判断してもらうのが一番だと思うので、ツールの使用スキルについてはそんなに詳細に書き込まなくてもいいのではないかと思います。

私はプレゼンテーションやコミュニケーションスキルについてもここに記載していました。

works(制作実績)

制作物の見せ方

制作実績は制作順ではなく、アピールしたい順番に並べていました。

見てくれる方が全ての実績をくまなくチェックしてくれるというわけではないので、自信のある制作物や応募企業の特性に合った制作物をトップに持ってきましょう。(応募企業ごとに変えられるとベスト)

また、webデザイン、グラフィックデザインとカテゴリごとのページを作成してよりユーザーが欲しい情報にストレスなくたどり着けるようにしています。

制作物のメインビジュアルについては、モックアップを使用してレスポンシブデザインであることを伝わりやすくしていました。ただし、モックアップのみだとデザインの細部は見えないので見せ方には工夫が必要です。

はやし
はやし

モックアップってなに?というひとは「モックアップ つくりかた」とかで検索してみてください。

制作物の情報

制作物の詳細ページ(上部)

制作物の詳細ページではビジュアルとともに下記を記載しています。

  • URL(webサイトの場合)
  • 概要
  • 制作の目的
  • ターゲット
  • クライアントの要望
  • デザインの意図
  • 制作範囲(デザインのみ?コーディングまで?など)
  • 制作期間
  • 使用ツール
  • 使用言語

私は制作物の数は比較的少なかった(クオリティが低すぎるとかを除けば、制作実績の数は多いほうがいいと思います…汗)のですが、各制作でのプロセスを詳細に記載していたことがいい方向に働いたのではないかと思っています。

しかし、最初から長文をぶつけてしまうと、「さくっと概要を知りたい」という採用担当者の方にはストレスを感じさせてしまいますよね。そこで制作物ページでは概要を簡潔に記載、「もっと読みたい」と思ってくれた方が次の情報へたどり着けるように導線を工夫しました

例えば、企画書をスライド形式で埋め込んでいたり、制作プロセスの詳細についてのブログ記事のリンクを貼るなどがその工夫の部分となります。

企画書スライドの埋め込み
ブログ記事への導線

最終的な情報量は多いほうがいいかもしれませんが、その見せ方についてはしっかりと考えていく必要があります。

お問合せフォーム

お問合せフォームは正直使用するかわからなかったのですが(お仕事募集用ではなく就職活動用のポートフォリオなので)、勉強のために設置してみました。

お問い合わせフォームでは名前やメールアドレスなどの個人情報を記載してもらうのでプライバシーポリシーの作成は忘れずに行いましょう。

私も調べながら制作しましたが、プライバシーポリシーのない未経験の方のポートフォリオも散見されるので、web制作まわりの法律などを今一度確認しておくのも大事です。(わたしも自分がその辺完璧かと言われると不安になってしまいますが…)

+αでやったこと

WordPress化

自分の勉強も兼ねて、ポートフォリオサイトはWordPress化まで行いました。もし今後お仕事でWordPressに触れる可能性があるならば、自分で一度経験しておくといいかも!と考えたからです。(自分のサイトなら変なことになっても最悪なんとかできますし…)

WordPress化は苦労もしましたが、なんでも手を動かして覚えるのがいちばん効率がいいと思っているので、結果的にはやってよかったです!

また、ポートフォリオサイトは一度作ってしまえばあとは制作物のページを増やしていくことになるのですが、WordPressのAdvanced Custom Fieldsというプラグインを使用して更新のしやすいページにしました。

自分のサイトのWordPress化をやってみて、「訪れたひとが見やすいサイトとは?」だけでなく、「更新しやすいサイトとは?」という視点でもデザインを考えることができるようになりました。

おわりに

ポートフォリオ作成サービスなども多いですが、webデザイナー志望の方は自分で一から作ってみるのを個人的にはおすすめします。

なぜなら、自分のつくったデザインを採用担当者がユーザー(当事者)として見てくれる数少ないチャンスだからです。

ユーザーにどう思ってほしいか?どんなアクションをしてほしいか?を自分なりに考えてデザインすることが大事だと思います。

そのうえで、自分の好きなものも詰め込むことができたら最高のポートフォリオですよね!!!

就職活動は「縁」であり、どんなにいい企業でも自分と合う合わないはどうしてもあると思いますが、ポートフォリオでうまく自分を伝えることができたら、きっといい出会いが待っているはずです!

はやし
はやし

みなさんのポートフォリオづくりがうまくいきますように!

ポートフォリオを公開しています

実際に就職活動で使用したポートフォリオを公開しています。

ポートフォリオの実物を見たい方はこちらから↓

コメント

タイトルとURLをコピーしました