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

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

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

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

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



Portfolio | i-yusuke

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

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

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

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

おわりに

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

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

ではまた。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

Yusuke Ito

■25歳時に異業種からWeb系ベンチャー企業に転職。 ■ECサイトの保守・開発から始め、要件定義、設計、開発、テスト、運用と一通り経験。 ■3年でチーフ→スペシャリスト職に昇格し、その後フリーランスに転身(今夏予定) 。 ■ブログではエンジニアとしてのキャリア、仕事術等をメインに発信しています。 詳しいプロフィール・経歴を見る