【未経験必見】Webデザイナー志望のポートフォリオの作り方
未経験でWebデザイナーを目指しているけど、ポートフォリオの作り方が分からない…。
今回はこのような悩みを持つ方のために、
・元東証一部上場企業のインハウスWebデザイナー(6年)
・在宅勤務(リモートワーク)
・Webデザインオンラインスクールのメンター
・秘書技能検定１級、色彩検定１級を保持
・Webデザイナー新卒採用にも携わっていた
今回は、現役Webデザイナーとして働いている&新卒採用の書類選考・面接官をさせてもらっている筆者が「未経験でWebデザイナー志望者のポートフォリオ作成術」を書いていきます。
目次
- ポートフォリオを作成する目的
- Webデザイナー未経験者がポートフォリオを作成する時は、見る採用側を意識しましょう
- 未経験からWebデザイナーを目指すならポートフォリオサイトを作るべき？
- Webデザイナーはポートフォリオの出来で合否が決まる
- 見る側を意識したWebデザインのポートフォリオの作り方
- 【重要】作品の作成過程の説明は丁寧に説明しましょう！
- 未経験の「なんとなく」のポートフォリオは面接官ににバレる
- 未経験から大手企業のWebデザイナーを目指す場合はしっかりとした準備をしましょう
- Webデザイナー未経験が確認しておくべき就職・転職活動前のポートフォリオチェック項目
- まとめ
ポートフォリオを作成する目的
ポートフォリオとは「作品集」という意味です。
大体の人がポートフォリオを作成する目的としては、就職・転職活動をする際、あなたが志望する企業に対して自分のデザインのスキルレベルをアピールするために作成します。
Webデザイナー未経験者がポートフォリオを作成する時は、見る採用側を意識しましょう
新卒Webデザイナー採用の書類選考(志望動機・ポートフォリオ)を拝見する際によく思うのが、独りよがりなポートフォリオが多いことです。ぜひ、この記事を参考にしてあなたのポートフォリオのクオリティを引き上げ内定を勝ち取ってください。
実際に大手一部上場IT企業の現役Webデザイナー＆新卒採用も行っている筆者の情報のため、よりリアルな情報をお届けします！
未経験からWebデザイナーを目指すならポートフォリオサイトを作るべき？
未経験でWebデザイナーを目指している場合は、ポートフォリオサイトを作成しましょう。
採用側からすると、Webデザイナーを目指しているのに紙媒体で提出されると「本当に目指しているの？」となりますし、ポートフォリオサイトがあることでコーディングスキルが分かるため合否を判断しやすいです。
ただし、デザイン領域において、群を抜いて得意なものがあるのであれば、コーディングの出来は問わない場合もありますが稀なケースです。なので未経験からWebデザイナーを目指すのであればポートフォリオサイトは作成しておきましょう。
Webデザイナーはポートフォリオの出来で合否が決まる
未経験から大手企業・中小企業のWebデザイナーどちらを目指すにしても、しっかりと丁寧に作成されたポートフォリオはどこの企業に見せても高評価間違い無しです。
ですから、Webデザインスキルが足りていないと思われないようにしっかりとポートフォリオ作成にはこだわりましょう。ポートフォリオはあなたの代弁者です。ポートフォリオがしっかりとできていれば、あとは志望動機や入社意欲だけしっかりとしておけば簡単に内定までたどり着けます。
ぜひ以下の項目を参考にして、あなただけのオリジナルポートフォリオを作成してください。
見る側を意識したWebデザインのポートフォリオの作り方
ここから、具体的なWebデザイナー向けのポートフォリオ作成方法について解説していきます。
流れとしては下記のものが挙げられます。
- ポートフォリオサイトに載せるコンテンツを考える
- 載せるコンテンツを決めた後に、どこに何を置くかをワイヤーフレームに落とし込む
- 実際にWebサイトとして表示される想定で、Webデザインする
- Webデザインを元にコーディングする
1. ポートフォリオサイトに載せるコンテンツを考える
いきなりポートフォリオを作成せずに、まずはどういった情報を載せると良いか整理していきましょう。大切なことは上記でも説明しましたが「独りよがりにならないこと」です。
ポートフォリオサイトを作る理由は、ほとんどの場合就職や転職、仕事に繋がるよう作成するものです。なので、自己満足で作成するのではなく他者が見るとどう思うか？という視点で考えながらサイト作成をしていくと、内定に近づきやすくなると思います。
ポートフォリオサイトによく載っているものとして下記のものが挙げられますので、ぜひWebデザイナーを目指している方は、ポートフォリオ作成時に参考にしてみて下さい。
プロフィール
- 名前、所属学校等
- 趣味や特技など人となりがわかること(任意)
- 経歴(自分の人生や職歴・インターン歴等をプロセス図で簡単にビジュアル化しているとなお良い)
- 使用できるデザインツールとレベル感(どんな操作までならできるか)
- デザインをする上で大切にしていること(面接時、掘り下げられる可能性があるため準備しておく)
- Webデザイナーとしてやりたいこと
- あなたができること(デザイン分野で得意なこと等)
就活生の中にはポートフォリオサイトにお問い合わせフォームを入れている場合があるのですが、ほとんどの場合メールアドレスで事足りますので無くて良いと思います。
ポートフォリオ作品に載せるべき内容
下記の内容をテンプレート化して、ポートフォリオ作成時にお役立てください。
各ポートフォリオ作品の説明で用いると迷うことなく正確に情報を伝えることができます。また、オリジナルな項目も追加して構いません。
- 作品名
- コンセプト
- 作成期間・使用ソフト
- 課題（どういう課題や仮説があってこの作品が生まれたのか)
- 市場調査・ユーザーリサーチ(仮説の解像度を上げる)
- ペルソナ(どういった人に向けた作品なのか)
- 作成過程の丁寧に説明(★重要なので次のセクションで説明します)
- 完成形
- 作品の利用風景
- 反省点・自己評価・今後の改善ポイント
いきなりWebサイトを作ろうとするよりも、順序立てて考え作っていくと修正や戻りが少ないです。
2. 載せるコンテンツを決めた後は、どこに何を置くかをワイヤーフレームに落とし込む
上記の情報をもとに、いきなり綺麗なデザインで作ろうとすると後々「なんか違うかも…」と思った際に修正が大変になるので、まずはワイヤーを作成します。ワイヤーフレームとはWebサイトの設計図で、どのページに何をどこに置くかを検討するフェーズです。なので緻密というよりかは、ざっくりとで良いので上記で検討した載せるコンテンツをどこに載せるかを決めると良いでしょう。(下図参照)
Webデザインは、いきなり綺麗な見た目のデザインを作成するわけではありません。
どういった課題があるからWebサイトを作るのか、サイトのコンセプトは何か、どういった人がターゲットなのかなど、Webデザインの前段階でたくさん考えることがあるのです。
ぜひポートフォリオサイトを作成する際も、そういったことを意識しながら作成してみましょう。
ざっくりと、どこに何を置くかを決められていると見た目のデザイン(色や形など)に集中することができます。
3. 実際にWebサイトとして表示される想定で、Webデザインをする
上記でワイヤーフレームを作成した後は、実際にWebサイトで表示される想定でデザインしていきます。
ここがあなたの腕のデザインスキルの見せ所です。どんな雰囲気の見た目にするか、あなたらしさをビジュアルに落とし込んでも良いですし、デザインスキルをアピールしたいのであれば力量が分かる見た目にしても良いでしょう。
どんなサイトの見た目にしようか悩むのであれば、ピンタレストやWebデザインギャラリーで自分のサイトの方向性を決めるのも良いでしょう。
Webデザインをする上で大事なのはインプットをたくさんしておくことです。Webデザインの引き出しを増やすという意味でも、いろんなWebサイトを見て参考にしてみましょう。
4. Webデザインを元にコーディングする
Webデザイナーを目指している場合は、紙やpdfファイルでポートフォリオをまとめるのではなく、しっかりコーディング(HTML・CSS)して実際にURLとしてアクセスできるようにしておきましょう。採用する側は、応募者のコーディングレベルを把握したいのであなたのポートフォリオサイトにアクセスし、コードを拝見したりします。
そのため、コーディングし終えた後は、インターネット上で誰でも見られるようにレンタルサーバーなどに上げましょう。具体的な説明や手順については下記にまとめているので、ポートフォリオサイトを作る際に参考にしてみて下さい。
Webデザイナーとしてポートフォリオを作成するなら、コーディングまで行いましょう！
【重要】作品の作成過程の説明は丁寧に説明しましょう！
Webデザイナー未経験者でよくあるのが、作成過程の説明をすっ飛ばしているポートフォリオです。
ポートフォリオは作品集なので、作品だけを載せればいいと思われている方もいるでしょう。それも、もちろん正解なのですが、これは”就職”するために作成しているポートフォリオなのであなたの力量を見せる必要があります。
どういったプロセスで、何を考えそのデザインに落とし込んだのかをしっかりと言語化出来ていなければ相手には伝わりません。
もちろん、ポートフォリオを見る側(書類選考する側)も汲み取ろうとは試みますが、書類選考の段階だと質問もできないため結果、あなたが伝えたいように伝わらないまま落ちてしまう可能性が高くなります。なので、しっかりと作成過程を説明するテキストを追加しましょう。
作成過程が丁寧に書かれているポートフォリオは、面接官も好評価です！
未経験の「なんとなく」のポートフォリオは面接官ににバレる
私の会社の場合ですが、面接官を担当するのは基本的に現場でバリバリ働いているWebデザイナーが書類選考・面接官を担当します。そのため、鋭い目でポートフォリオを見ます。数多くの就活生・転職者のポートフォリオを見てきているため、今後伸びそうか、うちの会社で使えるスキルを持っているかをすぐに見極めます。
また「これは手抜きした作品だ」「これは自信のある作品だ」というのはポートフォリオを見るだけで明確に分かります。
そのため、手抜き作品が多くあると全体的にチープな印象になり落とされる可能性が高まってしまいます。なので、選りすぐりの作品だけをポートフォリオに追加しましょう！
“とりあえず”入れておこうと思った作品は、逆にマイナスになってしまう可能性もあるんですね…。
はい！なので、ぜひ厳選したあなたのポートフォリオ作品を見せてくださいね！
未経験から大手企業のWebデザイナーを目指す場合はしっかりとした準備をしましょう
大手企業のWebデザイナーを目指す方向けの情報です。
Web制作会社もピンからキリまであるので、中小企業のWebデザイナー求人であればある程度のIllustrator・Photoshop・HTML・CSSが書ければ問題なく面接まで進むことができます。
ただ、誰もが知っているような大手企業のWebデザイナーを目指している場合は、デザインクオリティはもちろんデザインの論理的な展開など高水準なデザインスキルが求められます。
というのも、大手の企業になると応募者数も多くなるので、応募者の中から厳選しデザインレベルの高い方達を迎えたいため、書類選考(ポートフォリオ)の段階から評価も厳しくなります。
大手企業のWebデザイナーを目指す場合、ポートフォリオの審査も厳しいんですね。
Webデザイナー未経験が確認しておくべき就職・転職活動前のポートフォリオチェック項目
Webデザイナー・デザイナーを目指している方は就職活動が始まる前に、下記のチェックシートをもとにポートフォリオの確認に役立ててみて下さいね。
- 志望業界に合わせたポートフォリオになっているか
- ただ作品を並べているだけになっていないか（具体的な作品の説明・作成プロセス）
- デザインプロセスが論理的に展開されているか
- ただ作って終わりになっていないか（他者からの作品に対するFBや思いつく改善点の記載）
- 今まで作成した作品の中から厳選した作品たちになっているか
- 自分の強みがしっかりと伝わるポートフォリオになっているか
- 誤字脱字がないか
- 第三者に見せてフィードバックをもらってみたか
まとめ
いかがだったでしょうか。
ポートフォリオは、自分のスキルレベルを企業に伝えるデザイナーの就活において重要なものです。妥協なしでクオリティを最大限に引き上げ内定を目指して頑張ってくださいね。合わせて、志望動機についても下記の記事でまとめているので参考にしてみてください、応援しています！
