Cntlog

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

転職・副業

投稿日

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

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

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

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

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

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

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

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

極端な話、この作品を作れる人に仕事を頼みたい、一緒に仕事をしたい見る側に思わせるのがポートフォリオの役割になります。

目的のためを明確にする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ですので、１番良いのは自主制作するものがあることだと思います。
私の場合、数時間で作ったサイトや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なので、ここに登録することで仕事の依頼なんかも来たりします。

resume

resume

2019年の2月にリリースされたまだ新しいサービスです。

他のポートフォリオに比べ、自分や制作物のストーリーまで語りやすいポートフォリオサイトです。
そういった意味では、Webデザイナー以外の方も使いやすいです。
これまでの自分のスキルや経験をみやすいく表現できます。

また、公にできない話しは鍵をつけて公開制限ができますので、いざ転職するぞというときに使いやすいです。

価格：無料

PDFで作りたい場合

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

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

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

ポートフォリオ用のテンプレートというわけではありませんがプレゼン用のスライドとかですとテンプレートが販売されているのでそれをベースに自分用にアレンジすると結構早く作れます。

私がよく購入して使ってるのは下記のサイトですね。

ui8

オンラインWebサービスでポートフォリオを作るメリット・デメリット

オンラインWebサービスでポートフォリオが作れるのだから自分で作らなくてもいいじゃんと思われるかもしれませんが、やっぱり良し悪しがあります。

メリット

  • 短期間で制作できる
  • 無料かなどじめられる不要
  • HTML,CSSなど専門知識が不要
  • SNS的な交流ができる（サービスによりますが）

デメリット

  • デザインの変更がほぼできない（オリジナリティが出にくい）
  • アップロードの容量制限に引っかかりやすい
  • 広告が入る（特に無料の場合）

ポートフォリオの参考例

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

choicely

muuuuu

学生のポートフォリオですと、こちらにいくつか紹介されています。

デジタルハリウッドSTUDIO上野by LIG 卒業制作品集

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

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

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

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

友人からの依頼で作る

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

私の場合はWordPressで作ったという実績がほしかったので友人が独立するという事で、フリーランス用のポートフォリオサイトを作りました。

当時は使用してるプラグインやサイト設計なども掲載して、技術選定の面や運用部分の効率化などの内容も掲載して、デザイン面以外でも作ったもので説得力をもたせるようにしました。

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

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

エイプリルフールサイト

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

ネタがあると架空のサイトでも作りやすいのでオススメです。

イベントサイト

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

私の場合は、WordPressのイベントサイトを仲間内で集まって作りました。

WordBashのイベントページ

github

広告LP

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

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

A8.net

クラウドソーシング

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

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

ココナラ

自主制作

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

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

大事な事は更新する

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

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

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

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

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

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

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

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

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

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

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

私が採用側のときに見ている内容・ポイント

私は一時期Webデザイナーの採用担当も一緒にやっていました。

こちらでも紹介しているのですが、ポートフォリオ単体では、下記の点を注目して見ていました。

  • 何ができるのか
  • 何が得意なのか
  • 今後何をやりたいのか

ぶっちゃけ、Photoshopが使えるとか、ツール面のことは気にしていないです。（一緒のものを使っていれば少しは嬉しいですが）
なぜなら、ツールなんてすぐに覚えれるものですし、誰でも教えることはできますので、選考でお断りする理由にはならないんですよね。
※忙しいなどを理由に教えることができない環境もあるでしょうが、正直丸投げ感が強いので人を育てられないような職場では私は働きたくないですね。
あとスピードも事前の下準備とかこれまでの経歴で変わりますのであんまりポートフォリオに記載してあっても気にしてないです。（自己申告なので信用にも欠けますし。）

あとは得意な業界とかあればそれが会社の案件とマッチしてるとかは好印象でした。
間違っても「どんな業界のデザインでもできます」や　「なんでもできます」みたい言う人はお断りしてました。

なぜなら、自分の得意不得意もわからない人って、人の意見を聞かない人や、人の評価を受け入れない人が多いからです。
もっと言うとクオリティチェックが自分でできない人と私は捉えていて、それはデザイナとして致命的にNGだと考えています。

ポートフォリオでもこの辺は見え隠れしますので、なんでも出来るよりは「得意」と「出来ること（会社の利益になること）」が見えるようにするぐっと印象がよくなります。

このあたりは未経験の転職・経験者の転職どちらにでも言えることですね。

より良いポートフォリオを作るために更新する大切さ

ただポートフォリオを作るだけでは意味がありません。
やっぱり都度更新していかないと、今の自分のスキルをアピールするものにはなりません。

ポートフォリオを持っていると色々なメリットがあります。
そのメリットをたくさん受けれるようにするには、どういった良さがあるのかをきちんと理解しておくと、更新するモチベーションも上がりますよね。

ポートフォリオを持つと下記のとうな効果があります。

  • 人脈アップにつながる
  • スキルアップにつながる

人脈アップにつながる

これは名刺交換やSNSなどのプロフィールなどにURLを書いておけば、そこであなたの事をより深く知ってもらえたりします。

もちろんSNSで繋がっていればそのうち知ってもらえるのですが、いつもそんなに長い間興味を持ってもらえるわけではないので、具体的にあなたの概要を掴んでもらえたほうが早く確実に興味を持ってもらえます。

だってあなたも気になる人のポートフォリオサイトがあったら見に行きますよね？
そこで5年くらい前のスキルが乗ってたらちょっとがっかりしませんか？

スキルアップにつながる

嬉しくも有り、悲しさもあるのですが、ポートフォリオサイトを自分で作ると自分のスキルの棚卸しになります。

自分のできることが見える化されるので、嫌でも得意と不得意がわかります。

得意がわかれば、どこを伸ばせばよいのか、周りと比べて自分がどうか、今後どうなりたいかと言うのが自分でも理解しやすくなりスキルアップの精度が上がります。

もちろん、人に得意のアピールをすることで褒められる機会も増えますので、モチベーションの維持も簡単になります。

最後に

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

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

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

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

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

[dfads params=’groups=169′]

カテゴリ:転職・副業の記事