こんにちは、Autumn（オータム）です。
「未経験からエンジニアに転職するために、ポートフォリオを作った方がいい」とはよく聞くけど、肝心の作り方がわからなくて困ってる方が多い印象です。
「一通り勉強は終えて、これから転職活動をしていきたい！」
「そもそもポートフォリオをつくる必要があるの？」
そんな方のために、今回はフロントエンドエンジニアに転職をするためのポートフォリオ作成のポイントをご紹介します。
・前職では住宅会社の営業マンとして4年間勤務
・働きながらプログラミングの独学を半年間継続
・デザイン会社にフロントエンドエンジニアとして転職
・現在はWEB制作とWEB広告運用のサポートに従事
作り方・押さえるべきポイントを理解していないと、何個作っても効果的なポートフォリオは生まれません。
今回の内容をしっかり頭に叩き込んで、転職活動をスムーズに行えるよう準備しましょう！
そもそもなぜエンジニアでもポートフォリオが必要なのか
ポートフォリオが転職活動に必要なのは、以下の２つの理由です。
- 自分のスキルをアピールするため
- 自分の人間性をアピールするため
自分のスキルをアピールするため
何と言っても一番は、「自分の持っているスキルがどれぐらいか」を伝えるためです。
いくら面接官がプロのエンジニアだったとしても、現状の実力を知ってもらうには、職務経歴書だけではやはり足りません。
特に、最近は世間の流行の影響でエンジニア希望のライバルが増えてきました。競合が多いということは、それだけ「他者との差別化」をする必要があります。
なのでポートフォリオなしだとどうしても不利になるのは当たり前なんですねー。
自分の人間性をアピールするため
とは言っても未経験からのエンジニア転職の場合、スキルレベルは皆それほど差はないと思ってよいです。
では採用担当が重要視するのはどこかというと、「成長意欲・将来性があるかどうか」です。
未経験エンジニアの採用は、企業側からすると未来への投資です。自社で育成して一人前になれそうな金の卵を探しているわけですね。
とはいうものの、受け身の姿勢ばかりではエンジニアとして成長できません。自分で課題を見つけ解決する、新しいスキルを自ら勉強するなど、自走できる人材が企業に好まれます。
ポートフォリオは、まさに「自分はエンジニアに向いてますよ！」をアピールするために効果的なツールです。
ポートフォリオ作成はどれぐらいから始めたら良い？
プログラミング初心者の方であれば、3ヶ月〜6ヶ月で基本的なスキルが身についた頃から始めるのが良いでしょう。
WEB制作系であれば、HTML・CSS・Javascript・wordpressまでの基本的な使い方は覚えておく必要があります。
ちなみに私個人で言うと、必要だった時間はだいたいこんな感じでした。
HTML・CSS = 200時間
Javascript = 100時間
wordpress = 300時間
各言語の勉強方法は下記の記事にまとめていますのでよかったら参考にしてください。
ポートフォリオは複数作ること
意外と見落とされがちですが、企業に提出するポートフォリオは複数作成するようにしましょう。最低3~5個は欲しいところです。
ポートフォリオが1個だとアピールできることが限られてくるし、企業側に「あんまりやる気ないのかな、、」と捉えられる可能性があります。
よっぽど高品質なものを準備できるなら1つでも構いませんが、未経験からの転職でそこまでのものを作れることはほぼないので、自分で「これは良くできた！」と思えるものを準備しましょう。
量をこなすこともアピールの一つになり得ます。
もちろん一つ一つの質も大事ですが、1~2個しかポートフォリオがない人と10個ある人だったら後者の方が「意欲が高くていいね！」となりやすいですよね。
ベテランエンジニアだとやはり質を求められますが、未経験からのエンジニア転職の場合は、作業量が重要視される傾向があります。できることはなんでもやってみるぐらいの意気込みで頑張りましょう。
ポートフォリオに入れる内容は？
作成するべきポートフォリオは大きく分けて２種類あります。
- 自己紹介を含めたポートフォリオ
- ターゲットを明確にしたポートフォリオ
自己紹介を含めたポートフォリオ
自己アピールに特化した内容にすることがポイントで、言わば自分の名刺になるものを作ります。
- 自分について
- プログラミングスキル
- 作品紹介
などを内容に盛り込んだサイトを作成します。
TOPページ＋下層ページ×3（自分について・作品紹介・問い合わせ）ぐらいは最低限作成しておきましょう。
また、Githubアカウントのリンクを添付し、他のポートフォリオを保存しておくと、採用担当が他のポートフォリオも見てくれる可能性が上がりますので、積極的に取り入れていきましょう。
ターゲットを明確にしたポートフォリオ
もう一つは、クライアントからの依頼を想定し、問題解決のためのサイト・アプリを作成します。
クライアントの課題設定、それに対する解決方法をしっかり考えたデザインを意識しましょう。
ポイントは、応募したい企業の施工事例をチェックして、どういった業界からの依頼が多いかをチェックすること。
大体のデザイン会社は自分たちが得意とする業種があるはずです。数が多くなればなるほどそのジャンルのノウハウもたまり、クオリティの高いものが作れるようになるからです。
そういった業界のクライアントを想定して作成すれば、企業からの注目度も上がりやすくなるでしょう。
ポートフォリオの作成方法
最後に、具体的なポートフォリオの作成ステップをご紹介します。
ポートフォリオ作成手順４ステップ
①参考サイトを探す
↓
②デザインを作成する
↓
③コーディング
↓
④アップロード
参考サイトを探す
先ほど紹介した方法で業界を絞り、参考サイトを探してみましょう。
当然ですが、あくまでデザイン構成を参考にするためであって、丸パクリはNGです。
内容構成やレイアウト、アニメーションの追加などはバシバシ参考にしていきましょう。
また、応募したい企業を探すには転職エージェントを活用しましょう。希望業界の求人情報を自動で集めてくれるので、情報収集にはもってこいです。
実際に私が登録して活用していたサイトを下の記事にまとめましたのでぜひ参考にどうぞ。
デザインを作成する
参考サイトを決定したら、全体構成を分析し、ワイヤーフレームを作成します。
adobeのXDが直感的にワイヤーフレームを作成できるのでオススメです。ただ有料になるので、少しでもお金をかけなくなければ最悪手書きでも良いです。
ただ、転職した後を考えるとXDやphotoshopの基本的な操作方法は理解しておくことをオススメします。
また、アニメーションをどのように入れるかはこの時点で考えておきましょう。レイアウト作成に大きく影響してきます。
コーディング
実際にポートフォリオをコーディングしていきます。WEBサイトであればwordpressで作成しましょう。
wordpressの勉強がまだの方はこちらの記事を参考にしてください。
アップロード
コーディングが完了したら、レンタルサーバーにアップロードし、閲覧可能の状態にしましょう。
ローカルのままだと閲覧ができず、ポートフォリオとして意味がないので必ずアップロードしてくださいね。
ちなみにレンタルサーバーはXサーバーが速度も速く安定しているのでオススメです。
まとめ：ポートフォリオが転職成功のカギ
ポートフォリオの出来が、転職の成功確率にかなり影響するので気合を入れて取り組みましょう。
ただ、転職を成功させるためには、最後の難関である面接選考の対策がかなり重要です。
こちらについては、私が実際に過去質問されたことをまとめた記事を作成しました。自分ならどう答えるかも考えながら読むと、勉強になると思います。
みなさんの転職活動が良いものとなるよう心から願っています！
読んでいただき、ありがとうございました！
