フロントエンドエンジニアのポートフォリオサイトの作り方
- Tips
- 技術
- 個人開発
概要
このサイトは「Google Search Console」と連携させているのですが、最近「フロントエンドエンジニア ポートフォリオ 作り方」などのワードで検索されて訪れていただいている方が多いことに気づきました。
この記事では私がフロントエンドエンジニアとして、このポートフォリオサイトを作った時に考えていたことや工夫した点などをまとめてみようと思います。
サイトを作りたいと思っている方の参考に少しでもなれば嬉しいです。
誰に見てほしいか決める
サイトを作るにあたり、まず最初にどういった方々に見てほしいかを決めました。
このサイトは転職活動の時に自身のスキルの証明をするために何か外部に公開できるものを作りたいと思ったことが制作のきっかけでした。
また、現在はフリーランスとしても活動しているので仕事を発注したいと思っている人たちに対して実績をアピールできる場にもしたいと思いました。
以上から、このサイトのターゲットとしては以下のような方々を想定することにしました。
- 企業の採用担当
- フリーランスに業務委託を検討しているディレクター、マネージャーなど
コンテンツを決める
見てほしい人を決めたら、次にその人たちに対してどのようなコンテンツを用意する必要があるかということを考えました。
ここに関しては他のポートフォリオサイトを参考にして、どのようなコンテンツが一般的にあるのかなどを調査した上で決めていました。
- 企業の採用担当
- 自己紹介
- 経歴
- 資格
- ブログ
- フリーランスに業務委託を検討しているディレクター、マネージャーなど
- 実績
- お問い合わせ
アピールしたいことを決める
次にどのようなことをアピールしたいかを決めました。
ここについては自分が興味のあること、強みとしていること、今後もやっていきたいことといった観点で考えました。
結果、以下のようなものが思いつきました。
- HTML、CSS、JavaScriptを始めとするフロントエンドの基礎的な部分は抑えている
- API連携を実装できる
- デザインを制作することができる
- フロントエンド以外の領域でも（興味があれば）ある程度自走して作り込める
実装する
ここまで来たらあとは作り込んでいくだけかなと思います。
アピールしたいことを表現できる技術、構成を考えて、それをもとにコンテンツを作り上げるイメージで作業していました。
例えばデザインが出来ることについてはAdobe XDでデザインを実際に作ってみたり、フロントの基礎が抑えられていることについてはNuxt.jsを用いたSPAを作るといったような形で作業の進め方や技術選定を進めていきました。
作ったらあとは外部に公開するだけなのでここでは割愛させていただきます。
その他
最後に作業している時に意識していたことや工夫したことなどをざっくりまとめておこうと思います。
最初から完璧を目指さない
私が最初にポートフォリオサイトを作ったのは2017年ごろだったと記憶しています。
当時はReactなどJSのフレームワークを触ったことはなく存在も知りませんでした。
作れるものも限られていたのでHTML、CSS、jQueryで作った静的なサイトとして公開しました。
その後業務を通して出来ることが増えてきてWordPressを使ったり、現在のようなNuxt.jsを使うなどブラッシュアップさせながら作ってきました。
今はお問い合わせがGoogle Formsを使っているのでサイト内にフォームを設置したいといった改善の構想もあります。
プライベートでプログラミングをする場合、使える時間も限られていると思いますので、まずは最低限形にして、それを徐々に良くしていくといった形の方が無理なく作っていけるのかなと思っています。
例えばブログを作りたい場合、最初から自作するのではなくQiitaやnoteなどの外部サービスをとりあえず使ってみるというのも1つの手だと思います。
運用にかかる費用は無理のない範囲で
サイトを外部に公開する場合、サーバなど日々の運用費が発生してきます。
こちらについては自分のお財布と相談して無理のない範囲に収めるのが大事だと思います。
レンタルサーバも安いものなら月額500円ぐらいだったり、NetlifyやVercelといった無料のホスティングサービスもあります。
自分が作ったものをいかに安く長く運用できるかといった観点で使うサービスを選ぶのも大切だと考えています。
興味があるものはどんどん取り入れてみる
このサイトはデザインからHTML、CSS、JSといった実装部分に関して、全て私の手で作り込みました。
また、StrapiというHeadless CMSでコンテンツ管理をしたり、サイト自体はAWS上に構築しています。
APIのやり取りはGraphQLを用いています。
バックエンドやAWSなどの部分については自分のアピールポイントになるとは思っていませんが、個人的に興味がある部分だったのでサイトを作るにあたり取り入れてみました。
逆にバックエンドに全く興味がなければmicroCMSなどのサービスを使うのもアリだと思います。
自分が興味のあるものを軽率に取り入れられるのが個人制作の良いところだと思っていますし、そのような作業をしてみると楽しみながら作っていけるのではないかと思います。