Webデザイナーに転職するためにポートフォリオは必須らしい。でも未経験者のポートフォリオって一体どんな風に作ればいいんだ…？
そのような疑問にお答えします！
私（＠nkichiishi）はアラサー未経験の状態から、約3ヶ月でWebデザイナーに転職しました。
そして未経験からWebデザイナーになるためになるには、勉強もさながら、なんと言っても就職活動が大変だった思い出があります。
そして就職活動に必須なのが「ポートフォリオ」。
日頃Twitterを眺めていると、未経験の方が「ポートフォリオ作りました！」と言って公開してくださっているのを目にします。
中には「アナタ本当にミケイケンデスカ？？？」というクオリティの方も。勉強量の差なのか…センスなのか…はたまたお母さんに作ってもらったのか（小学校の自由研究みたいに）。
そして未経験の方はなおさら「皆どんなポートフォリオを作ってるんだろう？」と気になりますよね。
そこで今回は私がWebデザイナーとして就職する前、未経験の頃に制作したポートフォリオの中身を公開します！
プライバシーの観点から一部ポートフォリオ内のリンク、画像、文章は差し替えている箇所がありますが、ソースコードは当時のままです。
「未経験でこのくらいのポートフォリオで就活してたよー」というのを実際見て感じていただければ幸いです。
※以下のリンクより飛べます
TOPとフッターにGIF画像を使ってる奇抜なポートフォリオになっています。
このポートフォリオに加えて、今だからこそ感じる未経験のポートフォリオ制作でやっておいたほうがいいこともまとめました。
Webデザイナーを目指す方や、就活中という方は是非参考にしてみてください！
ポートフォリオ作りの流れ
私が未経験の頃に作ったポートフォリオに沿って、作り方を解説していきます。
当時参考にしたサイトのリンクも貼っていますので、是非そちらもチェックしてみてください！
載せる作品を作る
よっしゃ！！転職活動するのにポートフォリオサイトつくるぞぉぉ！！！！
と言っていきなりポートフォリオサイトを作ったところで「載せる作品」がなければ意味ないですよね。
「あれができます！これもできます！」って言葉で書かれてても、実績がないと全く説得力がありません。Webデザイナーを目指すとしたら実際に制作した「Webサイト」「バナー」「デザイン」等々。
一番おすすめ、というかできればやって欲しいのは「実在するお店や、実際に使うことを想定したWebサイトを最低でも一つ作る」ことです。
いやそれたまに聞くんだけど、実在する店の知り合いとかいないしそんな営業力あるわけないじゃん？未経験だよ？？ちゃんと未経験の立場になって考えて？？
実際に使うことを想定したWebサイトというのは、未経験者にとって若干ハードルが高いかもしれません。
しかし他人が使うことを想定したWebサイトを作ることで、以下の恩恵が受けられます。
- 面接時に話のネタになる
- 他人と意見のすり合わせる難しさを知れる
- 誰かのためにサイトを作る楽しみを味わえる
- 自分が運営するサイトではないため、ちゃんとやらなければという気持ちが高まる
- その分やる気も高まる
- スキルも高まる
- 「これってもう私・僕・俺Webデザイナーじゃね？？？」という気持ちになれる
- なんとなく自信がつく
家族、親戚、知人、知人の知人、いつも通ってるお店の人、Twitterで、Instagramで、Facebookで「ホームページを作る仕事に就こうとしている」ことや「ホームページ作りませんか」と公言してみてください（ホームページと言うところがミソ）。
「えーじゃあ作って！」と言う人が出てくるかもしれません。
それらでなかなかみつからなければ「ココナラ
」などのサービスを使って簡単なサイトやバナー制作案件を受注するのもいいと思います。
しかし知人ならまだ融通がきくかもしれませんが、他人から対価をもらってWebサイトを制作する上では自分の力量に見合ったWebサイトの依頼を受注することが大切です。
自分の力量に見合ったというのは、今の知識＋調べればなんとかできそうという範囲の依頼。
受注したはいいものの「自分では完成しきれませんでした…」は言語両断。最悪の場合、損害賠償問題になるので注意してください。
私は当時通っていた美容室の方にお願いして、その美容室のサイト制作をさせていただきました。それこそ「えーじゃあ作って！」という具合に。
流石にいくつもの実店舗のWebサイトを作る気力と余裕と体力がなかったので、実店舗のWebサイトはひとつにとどまりました…。
その作らせてもらったサイトを含め、載せている実績は以下のようなものです。
- ポートフォリオサイト （全２ページ）
- 実際の店（美容室）のサイト （全６ページ）
- 架空の寺社巡りサイト （TOPページのみ）
- 架空の病院のサイト （TOPページのみ）
- オンラインスクールで作った架空のコーポレートサイトをWordPress化したもの （全３ページ）
- オンラインスクールで作った架空の通販サイト （全３ページ）
- バナー等のトレース （10個）
ポートフォリオサイトを作る
載せる作品がいくつか完成したら、実際にポートフォリオサイト制作です。
以下、実際に載せた情報を詳しく見ていきます。
自己紹介
自己紹介の画像は「これ本当に自分か？」と思うくらいとびっきりのベストショットを掲載します。
第一印象はやっぱり大事です。
とびっきりのベストショットをPhotoshopでさらに修正し「毎回写真撮る時にこの顔ができたらいいのに…」と思いながらオートフォリオの自己紹介を作ったのは私です。
実績紹介
実績一覧から詳細情報をみるためにページ移動するとちょっと手間かなと思ったので、ポップアップで詳細を見れるようにしています。
ポップアップを出してその中に情報を入れ込むやり方は、以下の記事を参考にしました。
PCやスマホの画面にはめこむモックアップ用素材はWeb上で入手できます。
Photoshopを使ってスクリーンショットを当てはめ、スマホと並べました。
実績紹介を掲載するにあたって「制作期間・コンセプト・工夫した点」などの詳細情報は必ずいれておいたほうが良いです。それがないと「ただ作りました」状態になってしまうので。
スキル紹介
主なスキルと、それらが今どのくらいできるのかを簡単に書きました。
たまにスキル欄で、スキルレベルをグラフや★の数で表していることもありますが、個人的に自分のスキルレベルって数値化するの激ムズだと思います（未経験者の場合特に）。
基準がよくわかりませんし、仮に基準があったとしてもそれは人によって様々です。
「HTML検定2級」や「WordPress検定3段」などがあればわかりやすいんですが…。笑
お問い合わせフォーム
お問い合わせフォームをphpファイルで作成しています。
と言っても当時はphpの知識なんて皆無だったので（今もかも）以下の記事を丸々参考にして制作しました。
しかし作っておきながら、この問い合わせフォームは必要性をあまり感じません。笑
というのも未経験の方が制作会社などに応募する際は、転職サイトだったり、会社のWebサイトから問い合わせたりすると思うので…。
そのポートフォリオサイトから案件を獲得するとなれば話は別ですが。
載せるとしたもメールアドレスを貼っとくだけもいいのかなとも思います。
注意点として、メールアドレスを直張りするとスパムロボット等に簡単に収集されて迷惑メールがくる元にもなりかねません。
万が一メールアドレスを記載する場合は、以下のサイトで暗号化して掲載することをおすすめします。
ポートフォリオサイトで気にした方が良いこと
次にコンテンツとは別に、ここを気にするとポートフォリオの印象がもっと良くなる点を３つ挙げます。
レスポンシブ対応
スマホやタブレットで見た際にも表示崩れ等が起きないようなポートフォリオサイトを作るのは必須ですね。これはもう大前提かと。
Web制作をしてる最初のうちはどうしてもパソコンの表示に目がいきがちで、スマホ表示は後回しにしてしまうことが多いです。
スキル欄に書くとしても「レスポンシブできます」はさらっと書く程度で良いと思います。
常時SSL化
未経験の方のポートフォリオを拝見していると、常時SSL化していない方が意外と多いです。
セキュリティ云々もそうですが、どんなWebサイトでもSSL化されてないとちょっと残念だなぁという気持ちになります(´･ω･`)
Googleも常時SSL化されてないサイトに厳しくなってきており、検索ランキングにも少なからず影響が出始めている傾向です。
今ではアドレスバーに安全ではなさそうな警告もでちゃいます。
今のサーバーでは無料で簡易的にできるものあると思うので、是非設定してみてください。
ドメイン
これは細かいところなのですが、ニックネームやよくわからないアルファベットではなく「本名」が入ったドメインを取得すると「ちゃんとしてる感」が伝わってきます。
私も就活時には本名のドメインを取得して公開していました。ドメイン更新しなければ安い買い物ですしね（と言ってとられたくないから更新している）。
まとめ
ここで紹介したポートフォリオを引っ提げて、実際私も転職活動をしていました。
そして今改めてみると、改善点ばかりで正直恥ずかしいです。
しかしそれだけ技術的にも成長したってことかなーとも思います。今となっては間違いなくもっと良いものがつくれるはず。
ちなみにこのポートフォリオサイトに掲載しているもの全ては、独身ニートでWeb制作の勉強を初めてから毎日狂ったようにパソコンにかじりつき約3ヶ月で制作したものです。
是非取り入れるところは取り入れて、「ナンジャコレ…」と思うところはスルーしてください。泣
あと作ったものはTwitter等にあげるのがオススメ！現役の方からフィードバックをもらって、よりよいサイトに仕上げてください。私も見ますねヽ(´ー｀)
コメント