Portfolio

使用技術

Next.js + Vercel + MicroCMSのJamstack構成で構築されています。今まで作成してきたポートフォリオは作品の一覧のみ公開してきましたが、その作品の詳細を記載することはありませんでした。
そこで、記事の形式作品の詳細を記載でき、カスタイマイズが柔軟であることからJamStack構成を採用しました。

Next.js採択理由

今まで僕はVueを用いてWEBページを作ることが多かったのですが、2021-2022年現在ではReactをベースにしたプロジェクトの方が多い気がしています。また、参加させていただいている各種プロジェクトは軒並みReactを採用していることから、Reactを用いることは決めていました。
headlessCMSにおいてNext.jsはよく利用されており、また、Next.jsを用いたプロジェクトに参加していることから、勉強を兼ねてNext.jsを採用しました。
なお、言語はTypeScriptを用いています。（型付けによるメリットが非常に大きいので、JavaScriptは極力避けたいと思っています。）

Vercel採択理由

Next.jsを採用した時点で、楽にデプロイすることが可能なVercelを採用することは必然的に決まっていました。無料枠でかなり自由に利用することができます。
今までのポートフォリオはVPS上に構築していましたが、サーバレスの恩恵は非常に大きいです。自動デプロイやmicroCMSなどとの連携が楽にできます。GitHubにpushするだけで、自動でデプロイすることが可能であり、プレビューもできることから採用しない理由はありませんでした。初期設定もほぼ不要で利用できます。

MicroCMS採択理由

日本発のheadlessCMSのサービスとのことで、第一候補に挙がりました。また、無料枠でできることが非常に多く、画像等の貼り付けも自由にできます。
日本語ドキュメントがあるため安心感があります。また参加させていただいているプロジェクトでmicroCMSの利用を検討していたため、学習もかねて採用しました。
TypeScriptを利用した際にAPIカラムの型定義を自分でする必要があるなど少々手間がかかりましたが、サードパーティー製のライブラリを用いることで簡単に解決しました。

スタイリング（CSS）について

今回のこだわりポイントとして、CSSフレームワークを一切使用していない点が挙げられます。SCSSによってフルスクラッチでスタイリングされています。
これは、より柔軟にしかし統一されたデザインを目指したことによります。また、最近CSSフレームワークを利用することが多くなりCSSを直接書く機会が減ってしまい、忘れている懸念があったからです。
部品をComponentに分割することでCSSフレームワークのように使いまわすことができるのでフルスクラッチによる構築はこの規模の個人開発ではスムーズでした。
もちろんレスポンシブル対応です。

デザイン

デザインテーマは「START!! True dreams」です。
僕の趣味であり好きなコンテンツである、「ラブライブ！スーパースター!!」の第1期オープニングテーマ楽曲の千鳥格子柄が気に入ったことにより採用しました。
赤を基調としたWEBサイトを目指しています。なお、どうしてもこの5人のメンバーカラーを導入したいという気持ちが抑えられず、フッターにて使用しています。
素材等はすべて自前で作成しました。
スカートの柄である、「千鳥格子」の和柄は Adobe Illustrator にて作成しています。
第1テーマカラーとして #b8373f
第2テーマカラーとして #c14c5a
を採用しています。
デザインツールとしてFigmaを用いています。あらかじめデザインを決めてからコーディングをするのは非常に大切ですね。