未経験からWebデザイナーになるために求められるのが「ポートフォリオ」。現時点でのあなたの実力がわかる作品集です。人によってはWebサイトでポートフォリオを作っていたり、印刷して一冊の本にして持参したり･･･どれが一番いいのか悩みますよね。
思えば私の場合、Webスクールに通っていたので卒業制作で作ったWebサイト一本だけを持って転職活動をしていました･･･。一つしかないので見てもらいやすい反面、「他に〇〇はできる？」「〇〇はできないの？」と追加の質問にあたふたした記憶があります。
ここでは、実務未経験の人がWebデザイナーになるためのポートフォリオに絞って、どんな作り方があるのかを表にしてまとめてみました。
自分が興味のある会社向けに、どんなポートフォリオを用意したらいいのかがわかりますよ！
未経験からWebデザイナーを目指す人のポートフォリオの作り方は、受ける会社によってまとめなおそう！
私は Web デザイナーになって10年以上になりますが、ポートフォリオはやみくもに作るのではなく受ける会社によって掲載する作品の種類を変えたり、数を変えたりすることが親切かなと考えています。
しろまるたくさんありすぎると、面接側の人も何をもって判断したらいいのかわからなくなりますからね…。
ポートフォリオの作り方の流れ
次にポートフォリオを作る流れについて説明します。
ポートフォリオはいきなり作り始めるのではなく、事前準備をしておいた方がスムーズに作れます。
事前にサーバーを契約など、Webサイトをアップする環境を用意しておく
ポートフォリオのサイトを作る前に、Webサイトをアップする環境を用意しておかなければなりません。
自分のポートフォリオサイトを作るには、
- Webサーバーの契約
- ドメインの取得
この二つをする必要があります。厳密には独自ドメインを取得しなくてもできる 方法はあります。
ですが、これからWebデザイナーになるということであれば、 独自ドメインを取って自分のサイトをしっかり用意しておいた方がいいでしょう。
Webサイトの構成を考える
環境を整えたら、次にポートフォリオの構成を考えましょう。
面接時に履歴書や職務経歴書を提出するとは思いますが、ポートフォリオは言わばデザイン履歴書といったところです。自分の作ることのできる作品、スキルの詳細など、Webデザイナーとしての今現在のPRシート！と思って構成を考えるといいですよ＾＾
私がこれまで何度か転職した中でこの項目は入れて良かった！というものをまとめてみましたので、参考にしてくださいね！
自分のポートフォリオってだけなんですけど、面接の人に「おっ？」という印象を与えたかったのでメイン画像はもちろん自作です。（ちなみに私の場合は全部イラストを描きました。開いた時点で話題になりますよ！）
自分でイラストを描けなくても、サイトのメインとなるようなものは作れます。
Webデザイナーになろうと思ったきっかけ、Webデザイナーになるためにどんな勉強を主にしていたか（Webスクールに通っていたならそれについても）など簡単なプロフィールを書きます。
もちろん未経験から受ける人は、それ以外のプロフィールも書くと良いです。
ここで注意は、自分のSNSアカウントは載せないことですかね＾＾；載せてると意外と見られます。私も面接側で経験したのですが、面接した人がSNSを載せていたのでついでで見たら、ですっごい会社のこともそれ以外のことも愚痴書いてて･･･。
「あ～、こういう捉え方するのね。うん。」って感じで採用を見送ったことがあります＾＾；
正直でいいのかもですけど、印象としては最悪ですよね･･･。
自分がこれまでに作ったWebデザインのリストを作っておきます。たくさん作品がある人は、どんな作品を載せたらいいのかを「実際にWebサイトに載せる作品を選定する」にまとめてみましたので、それを読んでから掲載してみてくださいね。
また、作品リストには
- 作品名
- 制作時期（期間含め）
- 自分の担当部分
- 制作の意図（どういう理由でこのデザインにしたのか、など）
があると、掲載時に載せやすいです。
制作時期については期間もそうですが、どのくらいの工数（例えば何日かけて作ったか、何時間かけて作ったか）で制作したのかを明記すると先方も判断しやすいです。
次に、自分のスキルについてまとめましょう。
これはWebに関するスキルだけでなくても構いません。自分がアピールできるスキルは全部まとめましょう。話題のネタにもなりますしね！
最後にお問合せを設置します。･･･が、作っているポートフォリオサイトが面接時に使用するためだけのものであればお問合せの設置は必要ありません。
- ポートフォリオはネット上だから、自分のことを詳しく書くのは不安･･･と言う人はどうすればいい？
-
ネット上にそのまま情報を出しているWebデザイナーの人もいますが、不安な人や面接時だけ使用したい場合の人は、ポートフォリオサイト自体は面接用としてBasic認証をかけちゃいましょう！
Basic認証とは、そのページを見たいときにIDとパスワードを入れないと見れないように設定するものです。設定も簡単にできますよ。
実際にWebサイトに載せる作品を選定する
Webサイトの構成が完成したら、具体的に載せる作品について考えましょう。
作品数は多すぎても印象に残りづらいし、少なすぎても面接側には実力が伝わりにくいです。
また、応募する企業がどんなジャンルが強いか？によって、載せる作品を変えてもいいかもですね。
私の場合はこんな風にしてました。（あくまでも私の場合ですが、私自身一通り色んな会社でのWebデザイナーの経験があるので、参考にはなると思います）
| 作品数 | 作品の種類 | |
| Webの制作会社に応募する場合 | 多め どんな引き出しがあるかアピールするため | ・種類は多くても良い ・自分がどこを担当したのか書くと良い |
| ECショップに 応募する場合 | 普通 ネットショップに強いかどうかを判断できればよいから | EC系（ネットショップ、LP、バナーなど）を中心に掲載。季節のキャンペーン画像などを用意してもいいかも |
| 一般企業のWeb部門に 応募する場合 | 普通 コーポレートサイトなどがおすすめ | 自分が制作したものでもいいですが、ディレクションしたものでもいいかも（架空で企画したサイトとかでも面白いかもですね） |
| 広告代理店に 応募する場合 | 普通 どちらかというと広告系（LP、バナー）多めが良いかも | 広告系も普通のサイトもどちらでもいけると重宝されるので、どちらもバランスよく掲載すると〇 |
| フリーランスとしてサイトを作る場合 | 多め このポートフォリオで仕事の受注があるかもしれないので | 自分が担当したものであればなるべくたくさんの種類の作品を掲載すると〇 |
実際にデザイン&コーディング！
掲載する内容が決まったら、実際にデザイン＆コーディングを行いましょう！
ちなみに、このポートフォリオサイト自体のデザイン＆コーディングも自分の作品の一つと思って取り組んでおいたほうがいいですよ！見せ方やコーディングの中身、結構面接官の人チェックしてます･･･＾＾；
最後に、ブラウザチェック＆誤字脱字チェック！
作ってしまって完成！これでOK！としたいところなんですが、最後にブラウザチェック、誤字脱字チェックを行いましょう。
ブラウザチェックとは、
- 表示の崩れはないか
- 動作におかしいところはないか
をチェックするものです。
また、自分の今見ているブラウザだけチェックを終えるのは危険です！相手の見ているブラウザが違うかもしれませんしね･･･。ということで、以下のブラウザはチェックしておくといいでしょう。
ポートフォリオを作成したときにチェックしておきたいブラウザリスト
- Google Chrome 最新版
- Firefox 最新版
- Microsoft Edge 最新版
- Safari 最新版
- 自分のスマホでGoogle Chrome 最新版（さすがに各スマホまでチェックしろよ！と言ってくるような面接官はいないと見て）
InternetExplorer 11については2022年6月15日にサポートが終了したため、対応は不要です。
また、ブラウザチェックが終わったら誤字・脱字チェックも忘れずに行いましょうね！
しろまる私は恥ずかしながら、面接時に「表示崩れてるよ？」と言われたことあります･･･。皆さんはこんなことないようにね！
ポートフォリオを作るまで時間がない･･･急に面接が決まってしまった･･･。
ということもあると思います。
そんな方には、ポートフォリオ作成ツールのご紹介もまとめていますので、参考にしてみてください。
未経験からWebデザイナーになる人のためのポートフォリオの作り方まとめ
ポートフォリオと言うと、漠然としてしまって何から作ればいいか分からなくなってしまってた…。
そんな状態から、少しでもポートフォリオをどう作るか？のヒントとしてこの記事が役立てばと思います。
未経験でも作品を作ってきちんと受ける会社に合ったポートフォリオを用意し、面接に臨みましょう！