Webデザイナーのポートフォリオ!面接官がチェックしているポイントとは?

WEB制作・開発実例・コラム
2020.05.02

Webデザイナーを募集している企業にとって、学歴などを記載した履歴書よりも重視されがちなポートフォリオ。とはいえ、主流となっているWebにすべきか紙にすべきか迷っている方も多いようです。そこで本記事では、就職や転職の際に必須となるポートフォリオの役割を踏まえたうえで、面接官がチェックしているポイントや高評価が得られる作り方などをまとめてみました。

Webデザイナーのポートフォリオとは?

就職や転職の面接を受ける際、過去の作品をまとめたポートフォリオは自分のスキルを一目で相手に伝えるための必須ツールです。

ただし、Webデザイナーにとってのポートフォリオとは、手掛けたデザインを並べただけの「単なる作品集」ではありません!

一見、作品自体のデザイン力に焦点が集まりがちですが、ポートフォリオで最も重要なポイントは下記の2点なのです。

▼ポートフォリオの役割

  • どんな人柄なのか:仕事に対する姿勢、積極性、将来の展望
  • 何ができるのか:個性、能力、技術力

ポートフォリオに掲載すべき4つの要素

では、ポートフォリオで伝えるべき「人柄」と「何ができるのか」を限られた時間で表現するには、どのような要素を盛り込むべきなのでしょうか。

ここからは、4つの項目に分けて具体的に解説していきます。

プロフィール

氏名や生年月日などは履歴書に記述しますので省きますが、ポートフォリオのプロフィールにこそ載せるべき項目があります。

▼ポートフォリオのプロフィール項目

  • 略歴を含めた挨拶文:受賞歴、担当した業務など
  • 自己PR:Webデザイナーとしての信念やこだわりなど

上記の2点はポートフォリオで伝えるべき「人柄」を表現できる要素ですが、長すぎるのはNG。

口頭で説明を補足しなくても済むよう、シンプルかつ端的にまとめましょう。

スキル

「何ができるのか」をダイレクトにアピールできるのが、スキルに関する記載です。

使用できるソフトや言語、コーディングなどの得意分野に加え「課題に対してこんな解決方法を提案できる!」とアピールできるよう、下記の3項目もプラスしておきましょう。

  • 個性:UXデザインなど専門分野へのこだわり
  • 能力:企画力、構成力、分析力、リサーチ力、プレゼン能力
  • 技術力:ワークスピード、キャッチコピーやライティング能力

作品紹介

作品紹介に厳密なルールはありませんが、少なくとも下記の4点を考慮した構成が望ましいとされています。

▼作品紹介の基本構成

  • 1作品を1ページにまとめる
  • 作品ごとにディスクリプションを記述する
  • 作品数は10点ほどに厳選する
  • インパクトのある作品から掲載する

ディスクリプションとは短くまとめた説明文のことで、具体的には下記のような項目があります。

▼ディスクリプションの項目

  • タイトル:キャッチコピー、WebサイトのURLなども有効
  • 画像:スクリーンショットなど、作品のビジュアルが分かるモノ
  • 付帯情報:クライアント名、制作年月日、制作時間、制作上の制約など
  • ターゲットユーザー:ペルソナ
  • コンセプトや目的:コンバージョン率の向上、広告キャンペーンなど
  • 制作環境:使用ソフト、言語、プロジェクトチームの担当ポジションなど
  • 工夫したポイント:問題を解決した方法など

将来のビジョン

ポートフォリオでは、これまでこなしてきた過去の実績がメインになりがちですが、将来のビジョンを面接官にアピールしておくことも重要です。

ただ漠然と与えられた課題を無難にこなす人より、「今後はこの分野を極めたい!」という具体的なビジョンを持っている人の方が、「熱意を持って仕事と向き合ってくれそう」という印象を与えます。

面接官がチェックしているポートフォリオのポイントとは?

結論から言うと、面接官はポートフォリオの出来栄えよりも、応募者の「人物像」を見極めようとしています。そこで重要となるのが、下記の3点です。

▼面接官のチェックポイント

  • 企業のニーズを理解してポートフォリオを作っているか?
  • 他の応募者にはない個性や魅力があるか?
  • 成長の「のびしろ」はどの程度か?

そもそも、Webデザイナーの面接では同じ業界の第一線で活躍しているスタッフが担当するケースがほとんどです。

現役で活躍中のWebデザイナーに自分の力量を伝えるには、デザインセンスだけでなく「CSSだけでここまでできる!」「自分の作品を客観的に評価できる!」など、自分ならではのアピールポイントを盛り込みましょう。

評価の高いポートフォリオとは?

面接官から高く評価されるポートフォリオには、いくつかの共通点があります。

ここからは、特に重要な2つの優位性についてご紹介しましょう。

ペルソナに添った「掲載する順番」と「ボリューム」!

複数の面接を受ける場合、全ての企業に同じポートフォリオを提出するのは考え物です。

面接官は「1 to 1」の姿勢を重視するうえ、企業によって求めている要素の優先順位も異なります。

Webサイトのデザインを考案する時、ターゲットユーザーであるペルソナを意識するのと同じように、企業によって掲載する要素の順番とボリュームを調整しましょう。

▼掲載する順番とボリュームの一例

  • Webサイトの制作会社:プログラミングなど専門スキルが分かる要素をメインにする
  • 広告代理店:企画力やアイディアの豊富さが分かる要素をメインにする
  • メーカー:伝える力など、実現力の幅広さが分かる要素をメインにする

「伝える力」をアピールする思考プロセス!

Webデザイナーはアーティストと混同されがちですが、企業で働く場合は「クライアントの要望に応えられるか」という点が何よりも優先されます。

そこで重要となるのが「伝える力」!ポートフォリオの作品集に「どんな問題をどのように解決して結果に繋がったのか」、思考プロセスを分かりやすく掲載することで伝える力をアピールすることができます。

工夫したポイントや改善点、コンセプトなどを箇条書きにするだけでも伝える力の裏付けになるはずです。

準備すべきはWebポートフォリオ?それとも紙?

結論から言うと、面接時にはWebと紙の両方でポートフォリオを準備しておいた方が賢明です。

この段落では、なぜ両方を用意すべきなのか双方の必要性について解説します。

「Webポートフォリオ」が主流の時代!

近年では、Webで作品を発信するオンラインポートフォリオなどが主流で、業界大手ではSNSを対象にしている企業も増えているようです。

とはいえ、Webポートフォリオの作り方に厳密なルールはなく、下記のように様々な方法があります。

▼Webポートフォリオの一例

  • Webサイトとしてまとめる
  • 画像データをフォルダにまとめる
  • WordやPowerPointにまとめてPDFで出力する

「紙のポートフォリオ」は面接の台本!

Webポートフォリオが主流だからと言って、紙のポートフォリオが必要ないという訳ではありません。

特に、人前で話すのが苦手な方にとっては、紙のポートフォリオが面接の台本代わりになります。

「要点をまとめて話すのが苦手」「人前でプレゼンしたことがない」という場合は、紙のポートフォリオを用意して面接に臨みましょう。

Webポートフォリオの作成ツール10選

この段落では、ポートフォリオを一から作る自信がない!という方へ向けて、役立つ作成ツールをご紹介します。

ワードプレス

最もおすすめなのが、Webデザイナーにとって使い慣れているwordpressです。

▼ワードプレスで作るメリット

  • 自由度が高くアレンジしやすい
  • 自社サイトにWordPressを採用している企業が多い

例えば、当社ペコプラではwordpressの制作も行っているため、portfolio自体が作品になります。

adobe portfolio

普段からPhotoshopやIllustratorでデザインしている方なら、無料なのに8つのレイアウトが使えて、作成途中でもレイアウトが変更できる「Adobe Portfolio」が便利です。

たとえコーディングが苦手でも、980円~の有料プランに申し込むとスマホ対応のレスポンシブデザインが使えます。

Behance(ビハンス)

クオリティの高さを重視している方には、GoogleやNIKEといったグローバル企業も利用している「Behance」がおすすめです。

月額1,000円ほどの有料版もありますが、無料でディテールまでこだわった見た目重視のポートフォリオが作りたい!という方は、adobeのアカウントから登録してみましょう。

Squarespace(スクエアスペース)

キアヌ・リーブスも愛用している「Squarespace」は、1週間のトライアル期間が用意されています。

海外のサービスなので全て英語ですが、管理画面がシンプルで使いやすいので試して損はありません。

Adobe Fontと連携できるうえ、テーマが豊富で基本データを直さなくてもテンプレートが変更できます。

Tumblr(タンブラー)

ありきたりなデザインは避けたい!という方におすすめなのが、日本人の利用者が少ない「Tumblr」です。

とはいえ、運営元は米国のYahoo!ですから安心して登録でき、初期費用や年会費もかかりません。

そのままポートフォリオとして使えるテンプレートが豊富なうえ、スマホやタブレット表示にも対応できるレスポンシブデザインも用意されています。

jindo(ジンドゥー)

HP作成サービスとして170万のユーザー数を誇る「Jindo」ですが、ポートフォリオの作成ツールとしても優秀です。

5点までなら無料で物販素材が扱えるので、ポートフォリオと併せて挑戦してみてはいかがでしょうか。

Wix(ウィックス)

テンプレートが500種類以上、ドラックするだけで配置できる画像が40種類以上もデフォルトで用意されており、動的なWebサイトまでボタン1つで設定できるのが「Wix」の強み。

これだけのスペックが無料で使えるのですから、初心者でも簡単にポートフォリオが作れます。

ただし、独自ドメインや広告の非表示などを希望する場合は有料プランの契約が必要です。

Instagram(インスタグラム)

年々増えているのが、SNS世代の代名詞とも言える「Instagram」を活用したポートフォリオです。

普段から使い慣れているアプリケーションなら、ポートフォリオの作成だからと言って気負う心配もありません。

SNSでは作品の説明が難しいのでは?と思われがちですが、インスタグラムなら2,200文字までキャプションが可能です。

事実、2018年からIT企業のサイバーエージェントでもInstagram経由の採用を開始しています。

Pixiv(ピクシブ)

ゲーム関連のクリエイターやイラストレーターだけでなく、Webデザイナーにも愛用されているのが「Pixiv」です。

コミニュティサイトとしてシェアを拡大してきたピクシブですが、企業の採用担当者が人材を発掘する場にもなっています。

ピクシブの公式サイトでは採用が決まった就活生のポートフォリオが紹介されていますので、参考にしてみてはいかがでしょうか。

Vivivit(ビビビット)

ポートフォリオサイトの「Vivivit」は、クリエイターと企業が集う「ポートフォリオ型お仕事マッチングサービス」です。

ポートフォリオを掲載しておくと、興味を持った企業がスカウトしてくれる仕組みになっています。

専門サイトならではの使い勝手の良さに加え、ポートフォリオ作成と就職・転職活動がまとめてできるのも魅力です。

ポートフォリオの参考に!まとめサイト3選

ポートフォリオは、Webデザイナーとしての今後を左右するツールと言っても過言ではありません。

だからこそ、お手本となる一流のWebデザイナーが作成した優れたポートフォリオを、できるだけ多く見比べておきましょう。

▼まとめサイト3選

まとめ

Webデザイナーが企業に提出するポートフォリオは、それ自体が一つの作品です。

作品自体のデザイン力だけでなく、「この人はどんな人で何ができるのか」というポイントが限られた時間で面接官に伝わるポートフォリオを目指しましょう。

中でも、ネット上で公開できるのはWebポートフォリオだけのメリット!時と対象者を限定しないので、新しい仕事につながる可能性が広がります。

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)