デザインできないエンジニアがポートフォリオサイトを作った結果

July 06, 2019

今年の夏、フリーランスへ転身することが決まり現在着々と準備を進めています。

フリーランスになった後のお仕事はエージェント経由、知人からの紹介を想定していますが、それだけではブランディングに繋がらないのでぼくの経歴や実績を紹介するポートフォリオサイトを作成しました。

そして公開してたった数日でお仕事のお問い合わせを頂くことができました!

そのサイトがこちらになります。

create-portfolio

Portfolio | i-yusuke

ポートフォリオサイトとは?

そもそもエンジニアのポートフォリオサイトの定義が曖昧な部分もありますが、今回は 技術がわからない人にもぼくの実績をわかりやすく紹介すること が目的として、テキストだけでなく見た目にも凝ったLPを作成することにしました。

今回、参考にさせて頂いた記事がこちらになります。

エンジニアの私がポートフォリオサイトを作成した理由【スキルの見える化】|SIMA BLOG

【失敗例付き】Web系の転職で使えるポートフォリオの作り方・考え方

LPに記載する内容は下記に絞ることにしました。

  • 自己紹介
  • 業務実績
  • 個人での活動
  • スキルセット

使用しているアーキテクチャや設定、ソースコードを見てもらいたい場合はGitHubへ、個人開発でアプリを作った過程などはブログへの導線を張ることで対応します。

テンプレートを利用する

作りたいモノは大まかに決まりましたが、残念ながら1からデザインを作ることができません。。。

そこでベースとなる テンプレート を探すところから始め、こちらのテンプレートから採用することにしました。

Free Bootstrap 4 Portfolio & Resume Themes - Start Bootstrap

Bootstrap で構築されているポートフォリオ用テンプレートです。

どれも個人のポートフォリオサイトを作成するには十分な出来じゃないでしょうか?

デザインわからなくてもBootstrapは多少触ったことがあるというのも採用理由の1つです。

今回、一番イメージしてたのに近かった「Freelancer」というテンプレートを利用することにしました。

必要なスキル

作成に必要なスキルは特に高度なものは必要なく、HTMLとCSSが分かればそんな苦労することはないと思います。

あとはBootstrapのドキュメントとにらめっこしながら根気よくトライアンドエラーを繰り返せば形になるはずです。

Introduction · Bootstrap

作業時間

ぼくが作ったポートフォリオサイトは完成までに 36時間 かかりました。

時間かけ過ぎですね・・・笑

テンプレートのテキストを修正するだけなく、自分なりにレイアウトを修正したりオシャレなギミックを組み込みたかったので予想以上に時間を取られてしまいました。

「スキル」や「ポートフォリオ」の部分はこちらのテンプレートからパーツを拝借して作成しています。

Osahan - Free CV Resume/Vcard HTML5 Template - GrayGrids

おわりに

実はポートフォリオを作成してから特に宣伝等しておらず、コッソリ公開していただけなのにお仕事のお問い合わせを頂くことができたのには正直驚きました。

実績を公開するだけで思っている以上に道が開けるのでフリーランスエンジニアをやっている方、目指している方はポートフォリオを作ってみてはいかがでしょうか?

ではまた。

CONTACT

お問い合わせ

ECサイトやホームページの構築、保守・運用方法に課題を感じている方、まずはご相談ください。

お問い合わせ