Cntlog > 就職・転職 > 現役Webデザイナが教える転職で使えるポートフォリオの作り方

現役Webデザイナが教える転職で使えるポートフォリオの作り方

Webデザイナーで活動しているとポートフォリオを求められる機会は結構ありますよね。

転職やふとしたお仕事の依頼など様々です。
私がポートフォリオを作る時考えた事を紹介します。

何を作るかよりなぜ作るか

Webデザイナのポートフォリオというとどんなイメージがありますか?

人のポートフォリオを見ると何かカッコイイ作品がある、その人が作ってきた過去の成長が見える、得意不得意が見えるなど様々な気づきがあります。

でも少し思い返してほしいのですが、他人のポートフォリオを見ている時あなたは作り手がどんな人というのを見ていますか?
同業者目線で作品だけ見ていませんか?
まとめる事に意識が向きすぎていて、「誰が見るか」という想像が欠如してしまうともったいないです。

ポートフォリオと言うのは、誰かをマウンティングするためのものでもないですし作品の展示会でもありません。

ポートフォリオをどう活用したいかという目的をもって作らないと、見る側に伝えたい事がふわっとしてしまい印象が弱くなってしまいます。

目的のためにつくる

あなたがポートフォリオを作りたいと思う理由はなんですか?
私の場合は、ブログやSNSをやっているので人柄を知ってる前提で見せる事が多いので、作った作品を見せて私が保持してるスキルの説得力を上げるために活用しています。

得意分野を伝えて相手にその価値があるのかを判断してもらうのがポートフォリオの役割になります。
ですので、ただ「自分が何が出来るか」を羅列しただけでは相手にきちんと伝わる事は難しいです。

未経験の方で転職をするためにポートフォリオを準備する場合

未経験の方ですとポートフォリオを作ろうと思ったときに「作品がない」というのが多いかと思います。

実際私が書類選考をするときポートフォリオがない方も大勢います。(ちなみにポートフォリオがなければ、殆どの場合私は書類選考でお断りしています)

ポートフォリオがなければ「やる気」だけしか見えません。
人は口だけで何とでも言えますので、何が出来るかを見せれるものがなければどうしても説得力にかけてしまいますので、背伸びをせずに今自分が作れるモノ、作って来たものを見せれば良いです。

Webデザイナのポートフォリオというとコーディング済みでかつ自分がデザインしたものでないといけないと誤解があるかもしれませんが下記のようなものでも十分選考対象になります。

  • 自作のバナー
  • 模写(Webサイトのデザイン/バナー/コーディング)
  • ロゴ
  • 自分のブログ
  • ブログのアイキャッチ集

未経験の方を採用する場合、1番気にするところはその人は自分で考えてものを作れるかです。
初めから大作を求められたりすることは少ないです。
それ以上に、「ずっと作り続けることが出来るか」という点が重視されやすいです。

ですので、未経験の方の場合作品の数を絞るよりもなるべく多くものを作っているほうが印象が良いです。

webマーケティングが得意なweb制作会社ベイジ代表 枌谷さんも下記のように言っています。

プロ並みの作品を一つ作ればそれで上手くいくと考えてる人もいるでしょうが、仕事となるとスピードやデザインの幅、応用力など様々な面で評価されますので一つクオリティが高いものがあるという理由で採用される可能性は高くないです。

それよりかは、自分で学び、考え(正しい、正しくない問わず)、モノを作れる人のほうがよっぽど魅力的です。

Web業界の経験者の方で転職をするためにポートフォリオを準備する場合

Web業界にいる場合業務で様々なモノを作っていると思いますが、ポートフォリオサイトに載せれるかというとそうはいかないものがほとんどだと思います。

ですので、1番良いのは自主制作するものがあることだと思います。
私の場合、数時間で作ったサイトやUIKitなど「業務に入ればこんなの作れますよ」的なサイトだったりを見せれるようにしています。(副業など個人的に制作依頼があるものは、開発の流れから運用までどうしてるかを紹介したりしてます。)

制作の経緯を考える

業務で制作したものに関してはそのものを見せるのが難しい場合は、開発の経緯を紹介できるとモノが無くても説明しやすいです。

どこどこの業界のサイトのリニューアルや新規開発など様々あると思いますが、案件ごとに達成するべき課題と目標があるはずです。
ディレクタから言われたものを作っただけとかですと何も説明できないので、もし今がそんな状態でしたら自分からもっとものづくりに関わるようにしていかないと、制作物の有無以上に転職のハードルが高くなります。(だってディレクタが変われば制作物のクオリティが変わってしまうデザイナが新しい環境で同じスキルを出せるかって不安になるじゃないですか)

ですので、課題と目標に関して自分でどう取り組んだかを説明できるというだけでスキルの下地が見えてきます。

そこから意図通り作れたのか、目標を達成できたか(できなかったが次に活かせた)などあると説得力があります。

灰色ハイジさんがそう言った課程の見せ方がめちゃくちゃ上手いので参考になります。
UXデザイナーのポートフォリオはプロセスを伝えることが大事。

ポートフォリオ

UXデザイナとタイトルにありますが別にUXデザイナにかぎらずの話だと思ってます(特にUXデザイナは大事というだけで)

強みを考える

どんなモノを見せるかも重要になってきます。
未経験者の場合、「作れる」事を見せて成長/継続が出来る事が重視されますが、経験者の場合今の事業の即戦力を求められやすいです。

そいうった場合、先程紹介したような課題と目標に対してのアプローチでは採用担当者は似たような話ばかりを聞いてあまり判断材料になりません。

どうすれば、良いかというと自分の「強み」が見えるようにして、話す/作品を見せるのです。

例えば私の場合、gitが使えるのとコーディングが得意なのでプロトタイプを作るのに定評があります。
企画段階から動くものを作ってプログラマと連携できるという開発フローは非常に喜ばれるので、それをどう実現しているか、実際にやった結果はどうかなのかを説明すると強みが見えつつ、課題/目標へのアプローチに説得力が増します

初めは自分で作ったものの説明しかでいないかもしれませんが、こうやって課題/目標からデザインの説明ができる人が増えているので、それができないと比較された時これからしんどくなってくると思います。

ひと目でわかること

見せ方/見せるものは強み以外にもあります。
押さえておきたいポイントは下記です。

  • 短時間で違いのわかる
  • これから何をしたいかが見える
  • 最新のもの

短時間で違いのわかる

例えばWordPressで作りました!みたいな感じのコーポレートサイトものがいくつも並んでいると同じ事しかできないのかな?と疑われてしまします。

また、どのサイトでも当てはまる(誰でもやっているような)事しかアピールできないとそれは他の人の作品に比べられたときに埋もれてしまいます。

これから何をしたいかが見える

今できる事を伝えるのも重要ですが、これから何をやりたいかも重要です。

私の場合、デザインシステムやアトミックデザインを軸にして属人化を避けるデザインをする、改善ができるデザインをするという目標があります。

それを「やりたい」の口だけではなく、今作っているものにそれがどう落ちているのかを見せれると、採用担当者には自社の事業にそれが必要かを判断いただけて、まだ未熟なスキルであっても期待をしてもらえて好印象に繋がります。

最新のものを見せる

色々ご都合はあるでしょうが、やっぱり見せるものは新しいものが良いですよね。
ポートフォリオの作品が一年前のものばかりだと「最近この人何してるのかな?」とかになりますよね。

定期的に自分のポートフォリオを見直すクセを付けておくと、自分から焦ったりしていきますのでオススメです。

ポートフォリオを作る

ここまでポートフォリオの内容を先行してお話しました。
なぜかというと、みんなポートフォリオをどんな風に作るかを考えるのですが、それって逆なんですよね。

見せるものがある前提でどんなポートフォリオになるかは決まりますので、どんなレイアウトでとかを先に決めてしまっても使いづらいだけなんです。

というわけで、どうやってポートフォリオを作るより、どんなアピールが自分は出来るのかを一番最初に考えるほうがスッキリした見せ方で短時間で作成できます。

簡単に作りたい場合

Webデザイナの場合Webサイトで公開する方が多いと思います。
ただ、ポートフォリオサイトを作る時間より「作品紹介に時間をかけたい」、「コーディングが苦手」というパターンもあるかと思います。

そういった場合はポートフォリオ作成サービスを使うと良いです。

幾つかオススメのポートフォリオ作成サービスでオススメがあるので紹介します。

Portfoliobox

簡単にデザインができる、自分だけのポートフォリオを創ろう

Portfolioboxはポートフォリオを作るためのサービスです。
オススメの点としては広告がないのに無料で使えるところです。

ブラウザでデザインを選ぶだけでフォーマットに沿って入力する部分が大半なので、何から手を付けていいかわからない人は使いやすいと思います。

価格:無料〜765円(月額)

詳しい紹介は別記事にまとめていますので、ご覧ください。

Webデザイナーにオススメ!無料で使えるポートフォリオ向けのサービスPortfoliobox

ペライチ

ペライチ

ペライチはLPのようないわゆるペライチ系のサイトをコーディングなしで作れるサイト。
紹介する作品数が2,3点などかずが少ないときには使いやすい

価格:無料〜1980円(月額)

私がペライチを触った感触は下記に紹介しています。
HTML知識不要で初心者でもホームページを作れるペライチを触ってみた。

Behance

Behance

behanceはadobeが運用してるSNSサイトです。
結構グラフィック系のデザインをされてる方のポートフォリオとして使われています。

作品の見せ方も参考になりますし、いいねボタン的なのがあるので採用担当の人が素人でもそれらのリアクションボタンであなたの評価を自然と外部の視点を取り入れて評価してもらえます

テキストを入力するというより、画像を並べて構成することが主になります。

一応SNSなので、ここに登録することで仕事の依頼なんかも来たりします。

PDFで作りたい場合

何らかの理由でWebサイトで作らずにPDFで作る場合もありますよね。
サイトに入力して作るよりはPDFのほうが楽ということであれば、その選択肢全然ありです。
送りたい会社によって内容も変更し易いですし、アップデートも簡単ですもんね。

ただ当然その場合コーディングのスキルとかは評価してもらえないので注意してください。
作ったPDFのポートフォリオはdropboxやGoogleドライブでシェアして送ってもらう事が多いので、あなたも同じような使い方でよいと思います。

PDFに吐き出すためのフォーマットを作るのが面倒でしたらテンプレートを購入するのも一つの手です。

ui8

ポートフォリオの参考例

色々な人のポートフォリオはGalleryサイトから見ることができます。

choicely

muuuuu

ポートフォリオの作品作り

なんだかんだ言ってもポートフォリオの作品がない場合は積んだ感がありますよね。
口八丁(悪い意味ではない)で評価される場合もありますが、作品は絶対合ったほうが良いです。

私も最初の転職のときは作品がなく練習用に作ってたサイトとかをポートフォリオに組み込んでました。

どうやってポートフォリオに載せる作品を作ったか、私のパターンを紹介します。

友人からの依頼で作る

1番てっとり早くて自由に作れるパターンですね。
なんだかんだで自分のサイトが欲しいと思っていても、作れなくて困ってる人はいるので「だれかWebサイトや名刺を作らせて!」と声を上げれば乗ってくれると思います。

行きつけの飲食店のサイトを作る

当時仕事帰りによく寄る居酒屋さんがあったのですが、そのお店のスマホサイトを作って店長に見せて「今転職活動しててこれポートフォリオに入れていい??」って聞いたらOKをもらったのでそれを入れてました。

エイプリルフールサイト

コーディングに慣れてくるとネタサイトを自分で作ったりしていたのでそういったものも実績に入れてました。

イベントサイト

友達と勉強会を企画して、その募集ページなんかをLP風に作っていたのでそのへん実績に加えました。
イベントサイトの場合は複数人でやったので、githubのURLなんかも一緒に入れておきましたので、当時のやり取りや進め方なんかが追えるので、見る人が見ると結構スキルや人柄がわかる感じになります。

広告LP

アフィリエイト向けにLPも作ったりしていたのでその辺も実績に入れてました。
テキストや写真を提供してくれる案件もあるので、そういったものを活用してお小遣い稼ぎしながら実績にしていました。

ちなみにそのとき使っていたASPはA8です。

A8.net

クラウドソーシング

クラウドワークス、ランサーズ、ココナラといったいわゆるお仕事する系で作ったものを実績に加えています。

クラウドワークス、ランサーズだと実績に加えていいか聞くとダメと言われる事が多い傾向があったのですがココナラだと自分が依頼される側の立場になるので、良いですよと言ってもらえる事が多かったです。

ココナラ

自主制作

1番良いのが自分が作りたいものを作って公開することですよね。(ポートフォリオに入れる目的ではなく、ただ作りたかった系のやる気が見えるもの)

こういうものを日々作っておくと、社外の人に認知される可能性がぐーんと上がります。
勉強会などに行っても「あのサイトを作ってる人」と認知される事も多く、話がスムーズです。
もちろんこれは転職先でも同様ですね。

大事な事は更新する

ポートフォリオでもう一つ気をつけている事があります。
それは、古い情報もちゃんと更新することです。

転職用のポートフォリオに限らずですが、問い合わせから◯◯とかできますか?or得意ですか?みたいな質問をもらう事があります。

そういった場合はポートフォリオの何処かに追記しておくと良いです。

問い合わせをもらうときに質問をするという状態は相手のハードルを一つ上げているのでちょっとしたフォローで問い合わせの確率がぐっと上がったりします

問い合わせをもらうちょっとしたコツ(私の場合

先程の自主制作の部分で軽く触れたんですが、覚えてもらうの凄く大事です。

個人のポートフォリオが検索で引っかかるのはブログなどメディアサイトでもやっていないと結構稀なので、覚えてもらうのが重要です。

1番簡単なのは差別化ですね。
この人はこういう特徴があるとか見せると覚えてもらいやすいです。

人を覚えて貰えれば、その人のスキル(何をやっているか)も意識せずに覚えてもらえます。

私の場合は覚えてもらうために以下の差別化を意識してます

  • SNS活用
  • キャラクタアイコン
  • 定期的にブログを書く

最後に

少し長くなりましたが、いかがでしょう。あなたのポートフォリオ作成の参考になれば幸いです。

絶対にこう作らないといけないというものではないので、ぜひあなたの良さが見せるポートフォリオを作ってください。
できれば「作りましたー」とか連絡もらえると嬉しいです。(感想とか欲しかったら辛口でよければお返ししますよw)連絡はtwitter問い合わせから貰えれば反応できます。

クリエイターにとって、自己PRのために作り込まれたポートフォリオ必須の武器です。
多少面接やコミュニケーションで失敗したとしても、ポートフォリオで力量が示せれば評価は変わってきますし、人からの紹介も受けやすくなります。

近年クリエーターの需要が高まり増えてばかりなので、ポートフォリオの重要性や価値を非常に強く認識されています。
特にWebデザイナーやイラストレイター、コーダーなどの職種は個人の創造性が重視されるので、課程や考えがわかるものがないと他の人の作品に埋もれやすいです。

クライアントや採用担当があなたとあなたの「作品」を見て印象を持つかを考えることできっとあなたの良さが伝わるはずです(ゝω・)

関連記事

Webデザイナーからみた転職エージェントと転職サイトの有利な使い分け... はじめて転職活動をされる方ですと「転職エージェントって何?」「転職サイトとどう違うの?」「私でも利用できるの?」など疑問があるかと思います。 この記事では、転職サイトと転職エージェントの違いと上手な使い分けの方法をご紹介します。 転職に有利なのは転職サイトと転職エージェントのどち...
グラフィックデザイナーがWebデザイナーに転職する前に知っておくと良いこと... 以前からグラフィクデザイナーの方がWebデザイナーに転向したいという話を聞きます。 印刷業界が不景気で将来に不安を持つ方が多いようですね。。。 早めに動けるかたは良いことだと思います。 今回はグラフィクデザイナーをが、Webデザイナーになるために知っておくと良いことを幾つかご紹介します。...
現役Webデザイナがオススメする大阪で学べるWebデザイナのスクールの紹介... 私が大阪に住んでるのもあって、その学校の在学生や卒業生の話を聞く機会も多く、またどうやってスクールを選んで良いのかわからないという相談を時々うけますので、大阪エリアにあるwebデザイナ系のスクールをご紹介します。 スクール選びのポイント スクールはめちゃくちゃ数が多いので皆さん迷うと思い...
初めての転職の方へ、失敗しないエージェントの選び方... 転職エージェントはたくさんありますが、何を基準に選んでよいかわかりませんよね。 私もそうでした。 正しい知識をもっていないと、転職に失敗したという事に後に気が付き、後悔ばかりが残ります。 この記事では、元転職エージェントの友人から聞いた、失敗しない転職エージェントの選び方をご紹介します...
30代のWebデザイナーが仕事を続けるために意識してること(メンタル編)... 気がついたらこの業界に入って10年は経過していました。 本格的にWebデザイナーになったのは5年くらいですが、やってる中で最近はこんな考え方してるなーっていうのを一部まとめました。 自分の得意なこと苦手なことを理解して伝える 私が「Webデザイナーです。」というと納得してくれる人と...
未経験のWebデザイナはスクールか独学どちらがオススメか比較してみた... 未経験の人でWebデザイナになりたいという人からよく相談される事で、Webデザインの専門学校に通うほうが良いのか、独学が良いのかという問いに私の経験を踏まえて回答をします。 まずは結論から 私は基本的には専門学校・スクールの受講はオススメしていません。 初めから自分で勉強しないで行く場...