ポートフォリオサイト
アプリ概要
ポートフォリオを載せるサイトです。ナチュラルモダンのイメージでFigmaでデザインしNext.jsとMicroCMSを使用し開発しました。
私がフロントエンドエンジニアを目指すきっかけになったのは色々なエンジニアが作る数々のポートフォリオサイトでした。
始めはどんなエンジニアを目指そうか、その目標を探すべくポートフォリオサイトを見ていたのですが、いつしかポートフォリオを入れる箱であるポートフォリオサイトの方に魅せられていました
いつか、あんなサイトを作ってみたい。そんな思いでずっとプログラミングの勉強をしてきましたがまだまだ道半ば。
プログラミングはもちろんですが、凄いポートフォリオサイトを作るにはデザインスキルやアニメーションのスキルも必要で、このサイトを作るにあたって非常に力不足を感じた所です。
なんかちょっと足りないな、そう思って付け足して見てもなんか違う。その繰り返しで四苦八苦しながら作ったこのサイトは未だ目標とするようなクリエイティブなサイトには遠く及ばないけれど凄く愛着が湧くサイトになりました。
使用技術
- Next.js(Page Router)
- TypeScript
- Tailwind CSS
- Framer Motion
- lottie-react(Lottie)
- MicroCMS
- zustand
- Storybook
- Jest
フロントエンドはNext.jsとTypeScriptを使用、バックエンドはMicroCMS及びNext.jsのAPI Routesを使用しています。
Next.jsはPage Routerを採用しています。もう一つのポートフォリオであるGit EmptyがApp Routerだった為こちらはPage Routerを採用しました。今後はJamstackサイトもApp Routerが採用されていくのか、Page Routerがこれからも使われていくのか動向を見守りたいです。
API RoutesはContactページのフォームのバックエンドに利用、さらにnodemailerを使用し通知をメールで送るように設定しています。
ハンバーガーメニューやモーダル等の状態を管理する必要がありzustandを使用しています。状態管理ライブラリには色々な種類があるようで今後色んなライブラリを使ってみたいです。
CSSはTailwind CSSを使用。一部疑似要素のプロパティが多いタグに対してはCSS Modulesを使用しています。CSS loaderが今後CSS Modulesについて対応しないと明言しReact公式でも非推奨になった為忘れ去られつつあるCSS ModulesですがNext.jsやViteは独自に対応してくれている為、今後もピンポイントで使う機会も出てくるのかなと思い採用。
ページ遷移アニメーションにはFramer Motion、オープニングアニメーションにはLottieを使用しています。
今回Lottieを初使用したのですが、このライブラリの本質は恐らくデザイナーとの対話。デザイナーとエンジニアの合わせ技で最大の力を発揮する、フロントエンドエンジニアの在り方を象徴するようなライブラリだと感じました。とはいえデザイナーの居ない今回はLottieFilesにかわいいアニメーションがあったので使用させていただきましたが、いつかデザイナーと一緒に素晴らしいアニメーションを実装したいものです。
テストはJestによるスナップショットテストと結合テストに重点を置きました。機能面のテストは慣れてきたのですが、ビジュアルが中心のこうしたJamstackサイトの場合のテストはどういう戦略で行うのがいいのか？現場の皆様の意見も聞いてみたいです。
無駄に覚えたてのDockerを設定していますが、デプロイ先がVercelなので完全に遊びです。ただ、Next.jsが内部的に使用しているsharpがWindowsとLinuxで別の実行ファイルを持つ為、両方の実行環境を同時に揃える事に無駄に苦戦しました。本当無駄に……
とはいえnpm rebuildで別環境用のファイルも同時にインストールできる事を知ったのは大戦果でした。
デザインについて
文字で「自分はこういう人間です」と言うよりも作風で見せられたらと思い、シンプルモダンで、かつ見る人がリラックスできるようなデザインをコンセプトにFigmaでデザインをしました。
全体的に「見えない線」を意識しつつ、少しでもCSSのテクニックを見せられたらという意図とアクセントで所々にブロークングリッドレイアウトを入れています。
Next.jsにはnext/fontという神機能がある為、タイポグラフィでは惜しみなく3つのフォントを使用しています。
止まった時のデザイン先行でアニメーションは後回しにしてしまったのが今回のデザインの最大の失敗点。レスポンシブデザインまで考慮するとあまり派手なアニメーションを付ける事が出来ませんでした。この経験は今後のデザインに生かしていきたいです。
今後の課題
デザインスキルやアニメーション周りのスキルの不足もあり、全体的に地味というか物足りないサイトになってしまったのが残念なポイント。
将来的にwebデザインやモーショングラフィックス等を勉強し、今度こそ見た人があっと驚くようなポートフォリオサイトを作りたいです。
最近Figmaのアップデートがあり、ただでさえ覚束ないFigmaの操作がさらに覚束なくなりました。Figmaの習熟も今後の課題です。
一覧に戻る