webデザイナー初心者がポートフォリオを作成する手順を紹介 | プログラミング入門ならWEBCAMP NAVI
【1月枠も残りわずか】転職保証コース

webデザイナー初心者がポートフォリオを作成する手順を紹介

デザインと男

webデザイナーとして仕事を獲得していくためには、ポートフォリオの作成は欠かせません。

ポートフォリオはこれまでの実績をクライアントに伝えるだけでなく、自分の持っているスキルやデザインの幅、センスなどを視覚的かつ簡潔に伝えることのできるツールです。

今回はポートフォリオとは何か?やその具体的な作り方についてお伝えしていきたいと思います。

※プログラミングを学んでみたいけど、時間がなくて全文の記事が読めない!という方は、WebCampの無料説明会(毎日開催)に参加してみてください!

 

ポートフォリオとは?

デザインの実力を面接官に伝えるツール

ポートフォリオは、今までの自分の実績、例えばwebサイトのデザインや画面の動作などを伝えることができるツールです。

主に仕事を獲得する場面では面接官に対して使うことが多いため、説明しやすいようにまとめることができると、より効果が高くなるでしょう。

ポートフォリオは、これまでやってきた仕事内容や、実績がない場合は自分が制作したサイトなどの内容を、スクリーンショットや実際のサイトなどを使ってまとめていきます。

実績やスキル、デザインセンスやデザインの対応幅などを視覚的にわかりやすいように工夫するなどするとより、わかりやすいポートフォリオの作成が可能です。

紙とwebの両方を作っておく

ポートフォリオは紙とwebの両方を作っておくと良いでしょう。

webでそのままデモンストレーションすると、javascriptを使った動きなども含めて実際のサイトの魅力を説明しやすいという利点があります。

一方で、うまくインターネットに接続できなかったり、ノートパソコンが使えない環境だったりすると、途端に説明に行き詰ってしまいます。

こういった場合に備えて紙の資料も作っておくと、面談の流れを中断せずスムーズに自分の力を面接官にアピールすることが可能です。

また紙媒体の場合、持ち運びがしやすいため面接官が持ち運びしやすく、例えばそのポートフォリオを上長に見せたいといった場合でもすぐに話を通すことができます。

webと紙では双方にメリット・デメリットがあります。面接の環境はその場所に出向いてみないとわからないといったケースも多いので、さまざまな場面に対応できるように、両方の媒体のポートフォリオを用意しておくのが良いでしょう。

実績がない場合2~3サイトは作っておくと良い

実績があるwebデザイナーの場合、数十件のサイト制作経験がある場合があります。

その場合は面接官にアピールしやすくするために、ポートフォリオに載せる実績は10~20件程度にまとめることがほとんどです。

実績がない、もしくは少ない場合は2~3件のサイトを自分でも制作してポートフォリオに載せておくことで、面接官に自分のデザインの実力をアピールすることができます。

ポートフォリオに載せられるサイトが少ない、幅が狭いといった理由のほか、面接を受けに行く会社の方向性にマッチしたデザインの実績がないといった場合には、自分でサイトを作ってポートフォリオにまとめておくというのもアピールのひとつとして有効でしょう。

ポートフォリオの作り方を解説

web系のポートフォリオの作り方

ポートフォリオは紙媒体と、web媒体の両方を作ります。

紙媒体のポートフォリオはwebでのデモが難しい環境だった場合に特に有効ですので、さまざまなパターンを考慮して両方の媒体を用意するようにしましょう。

時間がない中でポートフォリオを作りこむことは大変ですが、それだけにポートフォリオが充実していることがアピールのひとつになります。

実績がないのであれば余計にポートフォリオをしっかりと作りこんで、面接官に自分の実力をアピールしていくことが大切です。

レンタルサーバーを借りてサイトを制作する

web媒体でのポートフォリオを作る方法として代表的なものが、レンタルサーバーを借りて自分のポートフォリオ専用サイトを作成することです。

レンタルサーバーも無料のものから有料のものまでいろいろですが、無料のレンタルサーバーだと広告が表示されたり容量が少なかったり、phpやmysqlが使えなかったりといったことも多いので、できれば安価なものでもいいので有料のレンタルサーバーをレンタルした方が良いでしょう。

さらに可能であればドメインも取得しておくと、何かのときにサッとアドレスを打ち込んだりできるので便利です。

ポートフォリオ用のサイトを利用する

レンタルサーバーを借りたり、ドメインを取得して設定したり、サーバ側の設定をしたりといった時間がない場合、ポートフォリオ用のサイトを利用するという方法もあります。

ポートフォリオ専用のサイトはいくつかあるので、使い勝手の良いものを自分で選んで使うといいでしょう。

ただし、javascriptなどのプログラミングを使ったサイトの動きを見せることができるポートフォリオサイトは少ないので、自由にサイトを作りたいのであればやはり自分でレンタルサーバーを用意する方が便利です。

紙のポートフォリオの作り方

紙媒体のポートフォリオはIllustratorかPhotoshopで制作すると良いでしょう。

デザインのセンスをここで発揮するのも大切ですが、サイトの説明や自身のスキルをポートフォリオの中に分かりやすく配置する方が面接官との話がスムーズに進みやすいです。

自分のスキルレベルを見やすくグラフ化したり、サイトの特徴や実績の書いてある場所を固定したりといった工夫をすることで、より見やすいポートフォリオを作成することが可能です。

ポートフォリオのフォーマットを考えるのが大変だといった場合は、ポートフォリオのフォーマットを無料で提供しているサイトもあります。

フォーマットを作りこむ時間的な余裕がない場合などは、こういったフォーマットを利用するのも良いでしょう。

奇抜さよりも分かりやすさを重視

ポートフォリオは面接など時間や場所が限られた場所で、効率よく自分の実力などを説明するためのツールです。

ポートフォリオも作品のひとつに違いありませんが、凝りに凝ったデザインセンスを発揮するあまり読みにくくなってしまっては意味がありません。

実績や実力、持っているスキルなどを表記する場所を固定したり、スクリーンショットの配置位置を左側に統一するなど、資料としての見やすさを重視して作ると、面接官に簡潔かつ確実に自分の実績や実力などをアピールすることができるようになります。

まとめ

いかがでしたか?

ポートフォリオは自分の実績や実力を面接官に限られた面接時間の中で効果的にアピールできるツールです。

面接での印象があまりぱっとしなくても、ポートフォリオの出来次第では合格ラインに達することも可能になります。

仕事などで日中ポートフォリオの制作に割ける時間が少ないなどで、ポートフォリオの制作に多くの時間を費やせる方ばかりではないでしょう。

しかしポートフォリオをしっかりと作りこむことで面接の合否は変わってきます。

時間がないからといってポートフォリオをないがしろにせずに、日頃から少しずつでも制作していくようにしましょう。

1月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きプログラミングスクール

で未経験からエンジニア目指そう

 

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある

 

転職保証コースは質の高いカリキュラムで転職成功率98%

 

転職保証付のDMM WEBCAMPで
安心してエンジニア転職を目指そう

「スキルがないし…」「失敗したくないし…」
カウンセラーがあなたのキャリアを真剣に考え、
ご相談に乗ります。