アイキャッチ

【未経験】Webデザイナー必見!ポートフォリオの作り方

Webデザイナーを含めたクリエイター系の職種への転職で欠かせない、ポートフォリオ。なんとなくイメージは沸いても、具体的にどんなWebサイトを用意しようか悩んでいる方もいるかと思います。未経験からWebデザイナーを目指すあなたに、きっと転職がうまくいくポートフォリオの作り方を解説します。今日から早速ポートフォリオ制作に取り掛かって、クリエイターへの一歩を踏み出しましょう!

悩む女性

ポートフォリオとは?

そもそもポートフォリオとは『持ち運びのための書類入れ、紙ばさみ』を指します。画家が自分の作品を持ち運ぶ際に紙ばさみを使用したことから、『自身の作品集』というイメージを持つようになりました。

今日ではクリエイターが転職活動をする際、履歴書とともに応募先企業へ提出するのが必須になっています。ただの作品集ではないのが重要で、実績やスキルをアピールして届ける相手に自身を知ってもらうという目的を持っています。

Webデザイナーの転職にはポートフォリオが必要なの?

先ほど述べた通り、ポートフォリオは単なる作品集ではありません。作品はもちろん、作品への向き合い方や経験、スキルを詰め込んで自身のことをアピールして包括的に評価してもらうためのものです。

  • 自分自身のことを知ってもらう、そして理解を深めてもらう。
  • 作品のコンセプトやデザインの意図を明記し、目的を持ってデザインしていることをアピールする。
  • 未経験での転職の場合、現在のレベルを知ってもらえる・勉強してきたスキルの裏付けになる。

 

といった役割を持つ、採用過程における重要な要素がポートフォリオなのです。以上の理由から、Webデザイナーの転職活動の際にはポートフォリオの提出が必要です。

紙媒体とWeb、どっちのポートフォリオを作ればいいの?

Webデザイナーへの転職の場合、Web上のポートフォリオサイトを制作するのが必須でしょう。Webサイトであればコーディングのスキルも一緒に見てもらうことが出来るからです。
しかし場合によってはネット環境のない場所での面接なども想定できます。その際に紙媒体のポートフォリオを用意していればより明確にアピールしやすいです。応募先の企業の求人に紙媒体での仕事内容も掲載されている場合も、紙のポートフォリオを持参するメリットは充分にあるでしょう。
『Web上のポートフォリオをマストで制作し、必要に応じて紙媒体でも制作しておく』というのが無難です。

ポイント Web上のポートフォリオ制作では実務を意識して、コメントアウトを残すなど分かりやすいコーディングをしましょう!

 

ポートフォリオに載せたい4項目

それでは具体的に、クリエイターがポートフォリオに載せるべき4項目をご紹介します。様々なポートフォリオが公開されていますが、未経験のWebデザイナー志望の場合これらを網羅しておくとよいでしょう。

  1. 自己紹介(プロフィール)
  2. 作品紹介
  3. スキル紹介
  4. 連絡先やSNSのリンク

 

一つ一つの項目を、制作する際のポイントとともに詳しく解説していきます。

1.自己紹介(プロフィール)

自分のこと知ってもらうと同時に、この人と一緒に仕事がしたいと思ってもらえるよう存分にアピールしましょう。具体的には、

  • 名前
  • 顔写真
  • 生年月日
  • 出身
  • 経歴
  • 経歴

 

などを記載するとよいでしょう。
顔写真はできれば笑顔を向けているものが望ましいですが、どうしても難しい場合でも前向きな印象を受ける写真を選びましょう。
他分野の経歴でも、誇れる経験があるならばアピールしましょう。出身を記載しておくと、面接の際に話しが弾むことがあるかもしれませんね。

2.作品紹介

ポートフォリオといえば、この作品紹介をイメージする方も多いでしょう。作品だけをただ載せるのではなく、以下の要素を書くことが必須です。

  • 作品のタイトル・概要
  • デザインの意図や目的・コンセプト
  • 自身の担当範囲
  • 制作時間

 

ポートフォリオ全体が、デザイナーであるあなたを体現する作品です。端的で分かりやすい説明を心がけ、掲載方法においても見やすくなる工夫をしましょう。
また、成果物が沢山あってもむやみに羅列するのではなく企業に合わせた作品精査を行い10~20個に絞るのがおすすめです。その際見せる順番の打診を行うことも大切です。

3.スキル紹介

現時点での自分のスキルセットを記載します。コーディングスキルやデザインスキルに加えて、趣味で写真を撮っていて腕前に自信がある、Web関連の資格を保有しているなどアピールになるその他のスキルがあるならばそれも記載しましょう。

コーディングスキルHTML/css/JavaScript/Jquely
デザイン・各種ツールスキルPhotoshop/illustrator/DreamWeaver/XD/WordPress
その他のスキルライティング/SEO/office/カメラ/映像/イラスト/資格

レベルをアイコン等で可視化してまとめると情報が伝わりやすいです。”インフォグラフィック”というキーワードで検索してみると、参考になる表現方法が見つかるかもしれません。

しかしデメリットとしてそれだけでは具体的に何ができるのかが伝わらないので、以下のように”バナー制作,フォトレタッチ,ワイヤーフレーム制作”など言語化されていると自分に何ができるのかがより伝わりやすくなります。

Photoshopillustrator htmlcss

4.連絡先、SNSのリンク

日頃作品投稿しているアカウント、情報発信しているアカウント、フォロワー数が多いアカウントなどがあればSNSのリンクをぜひ記載しましょう。SNSと連動したWebマーケティングが主流ですので、マーケティングに力を入れている企業では採用の可能性が高くなることがあります。
その際、過去の発言を入念にチェックしマイナスイメージになる投稿があれば載せるのを避けるのが無難です。

実際のポートフォリオ制作の流れ

それでは実際にポートフォリオを制作する際の流れを解説していきます。

  1. ポートフォリオに載せるための作品を作る
  2. ポートフォリオサイトを制作し、サーバーにアップロードする

 

それぞれの工程を詳しく見ていきましょう。

1.ポートフォリオに載せるための作品を作る

未経験の場合、まずはポートフォリオに掲載するための作品を制作しましょう。
Webデザイナーへの転職には、Webサイト・LP・バナーを制作するのが無難です。
スクールでの成果物や自主制作のほかにも、”実務としてやっていけるのか?”を裏付けるために、実際にクライアントがいる案件の作品があると好ましいです。家族や友人、通いなれた店などとコンタクトを取り、制作依頼を受けられると理想ですね。

また、応募先の企業に合わせた作品を制作することが重要です。その企業がどんなデザインを得意としているのか?顧客はどんな層なのか?を研究し、それにフィットする作品作りを心がけると良いでしょう。

ポイントどうしても時間が限られている場合、作品数を増やすためにWebサイトのファーストビューのみを制作しましょう。
   ファーストビューを見せるだけでも、プロのデザイナーは制作者を評価できます。

2.ポートフォリオサイトを制作し、サーバーにアップロードする

ポートフォリオに載せる作品が揃ったら、いよいよポートフォリオサイトの制作です。前項に記載した4項目を盛り込みましょう。フォント・配色・カーニング等々、デザインの基本的なポイントを抑えて丁寧に作りましょう。
Web上には様々なポートフォリオサイトが公開されています。マイナビクリエイター様の記事では一流の方々のポートフォリオを例としてまとめて見ることが出来るのでおすすめです。日頃からギャラリーサイトに目を通し幅広いWebデザインをインプットしておきましょう。

ポートフォリオが完成したら、サーバーにアップロードするのも忘れてはいけません。サーバーにアップロードして初めてインターネット上に公開され、様々な人からアクセスしてもらえる状態になります。FTPソフトを使用したサーバーへのアップロード方法についてはみやしもブログ様の記事がわかりやすいので、ぜひ参考にしてみてください。

ポートフォリオは自分をアピールする集大成!

今回はポートフォリオに載せたい4項目や実際の制作手順を中心に解説しました。ポートフォリオは、クリエイターが自分をアピールする集大成です。簡単に作成できるサービスもありますが、出来れば自分で1から作ってください。細部まで徹底的にこだわって現在の自分のスキルを最大限盛り込み、素晴らしい作品を仕上げましょう。きっとあなたの強い味方になり、採用を勝ち取れます。
この記事が、未経験からWebデザイナーへの転職を目指すあなたへの、ポートフォリオ制作のヒントになれば幸いです。


このページのトップへ戻る

【Webデザインに関するSCワンポイント講座まとめはこちら】

パソコンをいじる女性