ポートフォリオを制作する前、どんなもの作ろうか、他の人はどんなポートフォリオを作っているのか、私は気になってたのですが、そんな方のためにも、作ったポートフォリオをまとめておきます。参考にしてみてください。
前提
- 元々の希望：フロントエンド志望
- 就職先：フロントエンドもバックエンドも対応するWebエンジニアとして就職
- 学習期間：約9か月（5か月はゆるく、4か月は真面目に学習）
- 職歴：営業職のみ
何をつくったか
以下の5つを公開して、見てもらえるようにしていました。
- ポートフォリオサイト（まとめサイト）
- Webアプリ（一番頑張った）
- 共同開発したWebアプリ
- 架空サイトのLP
- ミニアプリ（しょぼめ）
LPやミニアプリは、「これポートフォリオで出していいレベルかな…」と迷ったのですが、順番を下の方にして制作物の中に入れておきました(笑) 成長過程を見て頂けてたらいいなという感じです。
それぞれの説明（画像付き）
ポートフォリオサイト（まとめサイト）
制作理由
ポートフォリオのまとめサイトに関しては、作成しない方もいらっしゃいますが、私は下記理由のため、作成しました。
- 見せたい作品が複数ある
- Web制作系（jQuery含む）もできることを伝えたい
- CSSやJavaScriptの基本的操作ができると証明したい（モーダル、Swiper、アニメーション等）
- 応募時には、このサイトだけ送付すれば済むので楽
制作情報
- 使用技術：HTML, Sass, JavaScript, jQuery
- レスポンシブ対応：有
- 制作期間：3日
- デプロイ先：GitHub Page
ひとこと
もともとフリーランスの方のポートフォリオサイトを参考にしてましたが、転職活動をする私とは目的が違うと考え、あのような構成と中身になりました。また、面接時に面接官の方が、このサイトをハブにして他のサイトにアクセスしたり、技術スタックを確認したりしていたため、作ってよかったなと改めて思いました。
Webアプリ（一番頑張ったもの）
パン屋に特化したグルメサイトを作りました。
▼通常画面
▼ユーザー画面
▼店舗画面
制作理由
ちゃんとしたWebアプリを1つは作っておこうと思ったため。もともとはフロントエンド技術のみで制作しようかと思ってましたが、バックエンドもこともある程度知っておく必要があると思ったので、バックエンドの技術も含んだものを作りました。
制作情報
- 使用技術：HTML, Sass, TypeScript, React, PHP, Laravel, PostgreSQL, AWS
- レスポンシブ対応：有
- 制作期間：2か月（企画除く）
- デプロイ先：AWS
- 機能説明や制作背景：こちらのページで詳しく説明しています。
ひとこと
とても大変でしたが、一番これを作ってる時が成長したかなと思います。エラー耐性も鍛えられました。
共同開発したWebアプリ
オンラインコミュニティで出会った方々と共同開発したものです。
制作理由
共同開発を経験したかったため。
制作情報
- （担当分の）使用技術：HTML, Sass, JavaScript, jQuery
- レスポンシブ対応：有
- 制作期間：1.5か月
- デプロイ先：Heroku
ひとこと
CSS設計・記法やGit/GitHubの使い方などを学べて、本当によかったと思いました。
架空サイトのLP
架空の語学スクールのLPを作りました。
制作理由
Progateで学んだことをアウトプットしたかったため。
制作情報
- 使用技術：HTML, CSS, JavaScript, React
- レスポンシブ対応：無
- 制作期間：1週間
- デプロイ先：Netlify
ひとこと
学んだことをアウトプットするのって大事だなと思いました。Progateはとても良いんですが、できないのにできた気になっちゃうので、コースが終わった後は自分で作ってみるのがおすすめです。
ミニアプリ
ToDoリストを作りました。
制作理由
小さくても良いからCRUD機能を持つアプリを作ってみたかったため。
制作情報
- 使用技術：HTML, CSS, JavaScript
- レスポンシブ対応：無
- 制作期間：1日
- デプロイ先：GitHub Page
ひとこと
正直これをポートフォリオに加えるか悩んだのですが、「最初はここからスタートしました！」という体で加えることにしました。
最後に
どんな職種（フロントエンド/バックエンド/インフラ）を目指すか、どんな企業（自社開発/受託/SES）を目指すか、いつまでに転職したいかによって、どんなものを作るかは変わってくると思います。また、制作物の数については、1～2つで転職活動を成功させている方もいるので、こちらもご自身の状況に合わせて検討してみてください。
