転職用ポートフォリオに入れるべき内容とは?未経験からのWebディレクター、Webデザイナー、Webエンジニア編

「ポートフォリオって何?」「ポートフォリオってどう作ればいいの?」そもそも「ポートフォリオに載せる作品がないんだけど。」と困っていませんか?
様々な業界・職種からWeb業界への転職を希望する方が多くなり、ポートフォリオで苦戦しているとの相談を頂くことも増えてきました。

Web業界で転職活動をする際に必要になるポートフォリオ。
Web業界に転職しようと思ったけど、ポートフォリオ作成が進まず、苦戦されている方に向けて、希望職種別でポートフォリオ作成のポイントと誰でも実践できるコツをお伝えします!

ポートフォリオって何?必須なの?

Webデザイナー、Webエンジニアなどのいわゆるクリエイティブ(技術)職に応募する際にはポートフォリオ提出が必須となっている企業が多いです。
制作進行をメインとするWebディレクターでは必須でない場合もありますが、いずれにせよ、ポートフォリオを持っていれば強力な武器になります。

ここで必要なポートフォリオとは、あなたのスキルや実績を掲載した資料のことです。
転職用のポートフォリオ=作品集ではない、ということをぜひとも念頭に置いてください。
履歴書や職務経歴書だけでは伝えきれない部分、主にスキルや実績を伝えるための手段としてポートフォリオが存在しています。

転職に適したポートフォリオを作り、転職活動を有利に進めましょう!

職種(Webディレクター、Webデザイナー、Webエンジニア)別のポートフォリオ

Webディレクターのポートフォリオ作成のポイント

Webディレクターのお仕事はWebディレクターとは?仕事内容〜年収まで徹底解説!で紹介した通り、

  • ヒアリング、要件定義、企画・提案
  • 商品画像やテキスト、購入したストックフォトなど制作に必要な素材の管理
  • 進行状況の管理・スケジュール調整など制作チームへの指示
  • 納品前チェックなど制作物のクオリティ管理

など、調整や管理が主な業務となります。

つまり、Webディレクターを志望するなら、下記のポイントを意識しアピールすると良いでしょう。
それでは、面接官に好印象を与えるポートフォリオ作成のポイントを見ていきましょう。

アピールしたい内容(可能な限りアピールできると良い)

  • 調整力(人と人の間にたって物事を進めていた経験、スケジュール管理)
  • 理解力(サイトやバナー考察を通して、制作の意図を汲み取る)
  • 伝達力(内容が簡潔で分かりやすい文章で書けている)
  • 分析力(Google Analytics等のデータレポートの作成)
  • 管理能力※マルチタスク(複数の事柄を同時に取り組んでいた経験)
  • ツール(PowerPoint、Excel、Slack、ChatWork、Backlog、Git等の使用経験)
  • 志向性(自社サービス系か受託制作のどちらを得意としているか伝わると良い)
  • コミュニケーション力(写真や図等で人の間にたてそうか伝えられると◎)

Webディレクターを志望される方は、上記のアピールしたい内容を文字や図、参考サイト等を用いて相手にわかりやすく伝えるということを意識すると良いでしょう。
また、WebデザイナーやWebエンジニアとは違いデザイン力やコーディング力といった制作技術をメインでアピールするわけではないので、コミュニケーションを円滑に進めるための方法をどれくらい多く兼ね備えられているかをアピールできると好印象です。

一例ですが、医療事務の経験がある方がWebディレクターを志望する場合、これまでのお仕事で医者、看護師、患者といったそれぞれ異なる立場の人たちとコミュニケーションをしてきているかと思います。
その中でどのように円滑なコミュニケーションを取るための工夫を行ってきたか、調整力や理解力、伝達力など意外とディレクターとして役立つスキルを持っている可能性があります。

自分では武器にならないと思っていることも、あなたのポートフォリオとして、転職で役立つこともあるかと思いますので、まずは自分の武器を探しましょう!KROWLにも相談してみてください。

個別相談はこちら

Webデザイナーのポートフォリオ作成のポイント

Webデザイナーのお仕事はWebデザイナーとは?仕事内容〜年収まで徹底解説!で紹介した通り、

  • 画面デザイン(Webサイト<PC/スマートフォン/タブレット>、アプリ等)
  • 撮影時のカメラマンやイラスト作成時のイラストレーターへのディレクション
  • バナーやSNS投稿用の画像作成
  • デザインルールの策定
  • コーディング(会社によってはWebデザイナーが行うことも)

など、主にデザイン制作やデザインに関わるディレクションを行います。

つまり、Webデザイナーを志望するなら、下記のポイントを意識しアピールすると良いでしょう。
それでは、面接官に好印象を与えるポートフォリオ作成のポイントを見ていきましょう。

アピールしたい内容(可能な限りアピールできると良い)

  • Webサイトのビジュアルを作る力(作品は必須 比較のため最低でも3~5つ用意)
  • 説明力(なぜこの色、大きさ、フォントなのかわかりやすい文章で説明する)
  • 論理的思考(筋道を立ててデザインのロジックを説明できると良い)
  • レイアウト(整列や余白など、基本原則を理解・実践できているか)
  • ツール使用状況(PhotoshopやIllustrator等の習熟度がわかるように、制作所要時間やそのツールで行った作業などを記載する)
  • ロゴやアイコン、バナーなど、小規模な制作物のデザイン(掲載先メディアを意識したデザインだと良い)
  • デザインのバリエーション(シンプル、かわいい等パターンがあると良い)
  • コミュニケーション力(写真等で自分の雰囲気を伝えられると良い)

Webデザイナーを志望される方は、ビジュアルを作る力も大切ですが、論理的(目的に対してどんな課題が想像でき、それをどのように解決していくか等)に相手に伝わるポートフォリオを意識すると良いでしょう。

これからWebデザイナーを目指す方にありがちなのが、自分の作りたいサイト(自分の好みに寄ったデザイン)を作りその感想を載せてしまうことです。
Webデザイナーの本質は、クライアント(サービス)の課題をデザインを使って解決することです。
つまり、ポートフォリオに載せる作品は、デザインだけではなく、目的、課題、ターゲットといった情報を必ず載せ、感想ではなく提案方法や改善策として文章にしましょう。
これが論理的な説明にもつながってきます。

一度ポートフォリオができたら必ず誰かに見てもらうようにしましょう!自分では気付いていないポイントがみつかるかもしれません。KROWLにも相談してみてください。

個別相談はこちら

Webエンジニアのポートフォリオ作成のポイント

Webエンジニアのお仕事はWebエンジニアとは?仕事内容〜年収まで徹底解説!で紹介した通り、

  • フロントエンド、バックエンド領域の実装
  • システムの仕様検討や設計、公開後の保守・運用
  • サーバーやミドルウェア、データベースなどのシステム開発
  • 技術面でWebディレクターやWebデザイナーの相談役

など、主にプログラミング言語による実装(HTML、CSS、JavaScript、PHP、Java、Perl、Ruby、Python等)を行います。

つまり、Webエンジニアを志望するなら、下記のポイントを意識しアピールすると良いでしょう。
それでは、面接官に好印象を与えるポートフォリオ作成のポイントを見ていきましょう。
※ここでは、主にフロントエンドエンジニアを想定した内容を掲載しています。

アピールしたい内容(可能な限りアピールできると良い)

  • HTML,CSSの基礎力(制作したサイトのURLもしくはGitリポジトリの共有)
  • JavaScriptの基礎力(jQuery、Vue.jsといったライブラリやフレームワークの使用経験の記載)
  • バージョン管理(GitやSubversionという仕組みで、何ができるのか知っておくと◎)
  • 志向性(設計や効率化を考慮したコーディングができるか)
  • 作り方・考え方(共通パーツ箇所の設計等まとめておくと良い)
  • 日々の勉強(進化していく技術、トレンドのキャッチアップを行っているか)
  • 会社の文化に合いそうか(チームメンバーと一緒にやっていけそうか)
  • コミュニケーション力(写真等で自分の雰囲気を伝えられると良い)

エンジニアの場合は、自分の書いたソースコードを実際に見せられる状態にできていることや、どのように設計しているのか、志向性を伝えられる文章にすると良いでしょう。

基礎的なHTML、CSSはもちろんのこと、JavaScriptにどれくらいチャレンジしているかをGitやCODEPENで共有できるようにするのも良いでしょう。実際のコードを見てもらえるほうがアピール材料としても強いでしょう。
また、SassやGulp、Webpackなど発展的な開発環境に関する知識もアピールできると良いと思います。

KROWL MAGAZINEではエンジニアに役立つ記事をアップしているので見ておくと良いでしょう。

他にも、KROWLサイトにて無料でダウンロードできるコーディング課題を無料で公開しています。
Adobe PhotoshopやAdobe XDなどを使った、より実践に近いデザインを元にサイトを作ってみましょう。
こちらのサイトに関してはそのままポートフォリオに載せていただいても構いませんので是非チャレンジしてみてください!

一度ポートフォリオができたら必ず誰かに見てもらうようにしましょう!自分では気付いていないポイントがみつかるかもしれません。
KROWLにも相談してみてください。

個別相談はこちら

ポートフォリオ作成のポイントはSUMMERにあり

職種ごとにポートフォリオ作成のポイントは理解できたでしょうか。
次は実際にポートフォリオ作成のコツについてお伝えします!といっても、ポートフォリオはいきなりつくれるわけではないので、まずは、”SUMMER(さまあ)”で準備をしましょう!

”さまあ”って何?

  1. 好きなサイトをがそう【探す】
  2. 好きなサイトをねよう【真似る】
  3. 好きなサイトをつめよう!【集める】

の頭文字をとって、KROWLではポートフォリオのSUMMERと呼んでいます。(冬でもSUMMERです笑)
ポートフォリオに載せる作品がなくても、何からはじめていいかわからない方も、ポートフォリオの作り方で悩んでる方も安心してはじめられると思います。

Webディレクター、Webデザイナー、Webエンジニアと職種は違っても、どんなWebサイトがあるのかは知っておいたほうが役にたちます。
自分の中の引き出しを増やすことを心がけましょう。

1.好きなサイトをがそう【探す】

世の中にはWebサイトやアプリなど、様々なデザインがあります。
例えば、色がカラフルなデザイン、シンプルでスタイリシュなデザイン、柔らかく優しさを感じられるデザインなど、ジャンル分けして探し、自分の中でインデックスしていきましょう!
色々なパターンを見ることで、どれが好きか嫌いか、どれが格好いいのか格好よくないのか、自分の中に評価の軸ができてきます。たくさんのデザインを見ることで自分の中でセンスが磨かれるでしょう。

良いデザインはまとめサイトに揃っていますので、LP(ランディングページ)、バナー、WordPress、スマホ向けデザインなど目的に合わせて探しましょう!

▼参考
bookma!
https://bookma.torch.blue/

I/O 3000
https://io3000.com/

iPhoneデザインボックス
http://design.web-hon.com/

WebDesignClip(WordPress絞り込み)
https://www.webdesignclip.com/tag/wordpress/

retrobanner
https://retrobanner.net/

Facebook広告集めました。
http://facebook.adsquare.jp/

まとめサイトは検索すると多数出てきて迷うかと思います。色々見て、まずは自分で見やすいサイトを探してみても良いでしょう。

2.好きなサイトをねよう【真似る】

サイト作りに迷ったら、ブックマークから参考になるサイトを探して真似してみるのが、良いサイトをつくる近道です。
いきなり格好良いサイトなんてデザインできないと割り切って、模倣することから自分の中に取り込んでいくのがコツです。サイト探しはマネするための準備にもなりますね。
マネすることで理解を深めていきましょう!

しかし注意です!ただ真似しても意味がありません。以下に気をつけ模倣していきましょう!

  • このサイトはどんなサイト?
  • ターゲットとなるユーザー層は?
  • 配色は?
  • 書体は?
  • レイアウトは?

まずは上記の部分を意識しながら観察をして、論理的にデザインを説明する力を身につけることがポイントです。

3.好きなサイトをつめよう!【集める】

Webサイト(キャンペーン、コーポレート、スマートフォン対応)、バナー、アプリなどジャンルを分けて好きなもの収集しましょう。
「メインビジュアル」「ボタン」「地図」など、具体的なパーツごとに収集して整理しておくと実践でも使いやすいです。

例えば、「どんなサイトつくりたいですか」という話になった際には、色や漠然としたイメージだけでは話がまとまりにくいです。
そんな時に自分のブックマークやパーツ集から具体的な例を見せながら提案できると話が早いですよね。

こんなイメージでどうですか?といくつか提案できたら、クライアントや制作チーム内での確認時もイメージがつかみやすくなります。お互いのイメージギャップをなくすことで、より精度の高い話し合いができ、スムーズなサイト制作につながります。

また、ただ集めるだけではなく、整理・分類することで自分の引き出しが多くなり、それだけで武器になります。

まとめ

今回は未経験からのWeb業界への転職に役立つ、職種別ポートフォリオ作成のポイントと誰でも使えるコツをお伝えしました。
何から始めればいいか悩んでいた方、作ってはみたけど自信がない方は、ぜひポートフォリオのSUMMERを実践してみてください。

そして、最後に共通して大事なポイントをお伝えします!それは相手に”伝えた”ではなく”伝わる”です。自分では伝えたつもりでも相手には伝わっていないこともあります。
ポートフォリオは読む相手のことを想像して、内容を整理し、作成していきましょう!

また、ポートフォリオは紙とWebどちらで作るべき?使うツールは?ポートフォリオに掲載する基本項目って何?とよくあるお悩みも記事にして、今後予定していますのでお楽しみに!

▼KROWL – ハタラクをみつける、キャリアパートナー
IT/デジタル業界への就職・転職支援サービス

「どんな職種が向いているのかわからない」という悩みを持つ方にオススメの適職診断をKROWLサイトで公開しています。
全10問の質問に答えるだけであなたの性格から適職を判断します!
気になる方は是非お試しください!

関連記事