IT未経験からWebエンジニア転職を目指す人にとって、欠かせないのがポートフォリオです。
ポートフォリオとは、企業に自分のスキルを証明する為に提出する成果物のことを言いますが、未経験からWebエンジニア転職を目指す場合、必ずと言って企業からポートフォリオの提出を求められます。
しかし、一体どうやって作ればいいのか、制作過程が分からない方は多いのではないでしょうか？
この記事では、未経験からのWebエンジニア転職を目指している方向けに、ポートフォリオの作り方を成功例や見本を交えて徹底解説します。
転職に成功した方のポートフォリオ5選
ポートフォリオの主なジャンルと制作難易度
Webエンジニア転職者は、主に以下のようなジャンルのポートフォリオを制作しています。
| ジャンル | 難易度 |
| 掲示板サイト | 1 |
| 口コミサイト | 2 |
| チャットアプリ | 3 |
| 業務効率化アプリ | 4 |
| マッチングアプリ | 5 |
僕は難易度「2」の「口コミサイト」にしました。
バックエンド周り（Webアプリの裏側）の構造が複雑であればあるほど難しくなります。
基本的な制作難易度は、Webサイト < スマホアプリ です。
ポートフォリオの制作過程
ここで本題に入ります。
Webアプリケーションの場合、基本的には以下のような流れでプロダクトを制作します。
- 仕様書
- ワイヤーフレーム作成
- モックアップ作成
- フロントエンド実装
- バックエンド実装
- テスト
- β版リリース
順を追って解説します。
1：仕様書
仕様書とは、プロダクトの機能やデータ構造、開発環境や使用するツールなどを書き記した物です。
フォーマットは自由で、紙とペンで書いても、パソコンで書いても構いません。
この仕様書を元にアプリケーションを実装しますが、後から変更点なども出てくると思うので、今自分が実装したい機能をとにかく書きましょう。
harapeko。仕様書
こちらは僕の仕様書ですが、ここまで詳細に書く必要はないかも＾＾；
2：ワイヤーフレームの作成
ワイヤーフレームとは、サイト全体の構成や配置を図で表した設計図のことです。
これは見てもらった方が早いので、僕が描いたワイヤーフレームを載せておきます。
実際にワイヤーフレームを描いてみると、仕様書で書いた機能を形にできるので楽しいですね。
これで大まかなサイトの構成図が出来上がります。
3：モックアップの作成
モックアップとは、プロダクトの完成図のことです。
先ほど作成したワイヤーフレームを元に、実際のデザインを絵に表すことで、サイト全体のイメージを掴みます。
僕が描いたモックアップはこちらになります。
モックアップ作成にはMoqupsを使いました。
Web上でサクサク描けて、URLで簡単に共有できるのでオススメです。
4：フロントエンド実装
フロントエンドとは、ブラウザから直接見れる部分のことを指します。
この工程では、仕様書やモックアップを元に、HTML/CSS/JavaScriptなどのフロントエンド言語を用いて、プロダクトのビューの部分（見た目）を実装していきます。
ここで初めて、仕様書やモックアップの大切さを実感することになります。用意しててよかったw
モックアップ通りに書いていけばいいので、HTMLやCSSのコーディング経験があればすぐ終わると思います。
5：バックエンド実装
バックエンドとは、ブラウザからは直接見えない裏側の部分のことを指します。
この工程では、仕様書を参考にRubyやPHPなどのサーバーサイド言語を用いて、サーバー周りをプログラミング、データベース周りを構築していきます。
僕の口コミサイトの場合は、フォームの送信やログイン/ログアウト機能の部分ですね。
データベースに関しては、一から構築すると大変なので必ずフレームワークを用いましょう。PHPならLaravel、RubyならRuby on Railsが有名ですね。
成果物として一番見られる部分ですので、頑張って仕上げましょう。
6：テスト
テストとは、想定していた仕様通りの動きをしているか確認することを指します。
開発環境から本番環境にデプロイして、想定していた機能が実装できているか、エラーはないかを１つ１つ確認しましょう。
テストの手法としてオススメなのは、知り合いにテストユーザーになってもらうことです。
一人でテストすると、どうしても客観的な視点で見れないですからね。
ちなみに、4〜6までの工程（フロントエンド→バックエンド→テスト）をイテレーション（反復）することで、効率よくプロダクト開発できます。
7：β版リリース
完成したらいよいよβ版リリースです。
ブログやSNSで公開して、ユーザーの反応を見ましょう。
ここでもらった意見を参考に、徐々にプロダクトを直していくと良いでしょう。
あとは自信を持ってポートフォリオを企業に提出して完了です！
ポートフォリオが作れない場合
勉強はしたけど作りたいプロダクトがない！思いつかない！って方は、
プログラミングスクールに通って強制的に作る環境に飛び込みましょう。
環境に左右されるのが人間です。独学での学習はいつでもサボれてしまいますから、せっかく学んだプログラミングもプロダクトを作れなくては何の役にも立ちません。
プログラミングスクールに通うと、同期とチーム開発を経験できたり、講師からコードレビューを受けることができます。
事実、僕の周りで未経験からWebエンジニア転職に成功した方の殆どは、WebCampPRO
やポテパンキャンプ
を卒業しています。
また、プログラミングスクールにはWeb系自社開発企業とのコネクションがあり、スクール卒業生を紹介するエージェント的役割が付いているため、スムーズに転職活動を行えます。
本気になって2,3ヶ月取り組めば、Webエンジニア転職も夢ではないので、一度スクールの面談に行ってみることをオススメします。
個人的に僕がオススメしているプログラミングスクールは以下の３つです。
この3つはカリキュラムも厳しめですが、だからこそ転職成功者も多いのだと感じます。
ポートフォリオ制作の仕方まとめ
最後に、ポートフォリオ制作の仕方を簡単にまとめると、
- 成果物のジャンルを決める
- 仕様を書き出しデザインを図に描いて、実装する
- 作成したら自信を持ってて提出する
になります。
なお、この記事で紹介した制作工程は、実際にWebアプリケーションを何度も制作した経験のある方から教わった手法ですので、再現性は高いと思います。
あとはやるだけです。
ポートフォリオを作れる人は転職希望者のうち上位10%ととも言われていますので、
頑張ってその10%の枠に入りましょう。
