ポートフォリオを作ってみた(4)

デザイン検討 & コーディング

以下の流れで説明をしていきます。前回は(3)サーバー構築をしたので、今回は(4)デザイン検討 & (5)コーディングを説明いたします。
(1)環境説明
(2)ドメイン作成
(3)サーバー構築
(4)デザイン検討
(5)コーディング
(6)公開

今回はデザイン検討とコーディングをまとめて説明する理由についてですが、基本的にポートフォリオが必要なタイミングというのは、転職等の就職活動をする場合、個人事業主などで仕事につなげたい場合が該当すると思います。

もちろん、勉強や人脈拡大など、上記以外が目的の場合もあると思いますが、今回は常日頃多忙で時間があまりとれない人を想定いたします。

短時間で、第三者から見て高品質に見えるポートフォリオを作ることができれば、デザイン検討とコーディングにかける時間も短くて済むわけでして、それができるならば説明についてもコンパクトにまとめられるわけです。

デザイン検討

これは私の勝手なイメージかもしれないですが、SEという人種は、デザインが苦手な人が多いのではないでしょうか。

私もCSSをいじるのは苦手でしたが、最近はFigmaを使ったり、サイトのCSS解析をして徐々に技術を磨いています。

今回重要なことは、誰でも良いデザインでポートフォリオサイトを作り上げられるようにすることだと考えています。

そこで私がおすすめする方法は「HTML + CSSで作られたポートフォリオのサンプル」を活用することです。Googleなどで「ポートフォリオ　テンプレ」と検索すると、無料で自由に使えるものがいくつか見つかります。

このポートフォリオのテンプレを使い、自分がアピールしたい言語でリライトする手法をお勧めいたします。この方法であれば、良いデザインで、かつ、自分のアピールしたい言語で作られたサイトを短時間で簡単に公開するところまで持っていけます。

なお、こちらがおすすめです。

コーディング

先ほどお伝えした通り、自分がアピールしたい言語でリライトするだけです。スキルや経歴、開発実績などは一旦Jsonで管理するようにします。

こうすることで、スキルや経歴や開発実績に追加・変更・削除があった場合にも長いHTMLを編集する必要がありません(Json側を修正する形になります)。将来的にDatabaseに移行する場合やAPI経由でデータ取得する場合にもJson取得後の処理は変わらないため、フロントエンド側の変更は最小限に抑えることができます。

次回は、いよいよCloudFlareに公開する方法をご説明いたします。