子育てする方におすすめアイテムを紹介するWebサイト「子育てポートフォリオ」の制作
記事の概要
先日、個人開発として、子育てする方におすすめアイテムを紹介するWebサイト
「子育てポートフォリオ」を開発しました。
この記事では、上記サイトの技術構成について記載しています。
基本の技術構成としては、できる限りメンテナンスの手間も費用も抑えるために、バックエンドのAPIは自前実装せず、Next.js（Page Router）とmicroCMSの組み合わせとしました。
また、OGP画像やsitemapは自動生成させるようにしました。
Webページ作成の目的
自分が興味あること、力を入れていることでWeb的なアウトプットを作りたいと思ったことがきっかけです。
コンテンツのトピック候補はいくつかあったのですが、今回は 「子育て」 をテーマにしました。
特に、自分自身が数年前から子育てしている中で、子育てグッズはたくさんあるけれど、何が必要なんだろう、どれが良いんだろうと常に感じていました。
きっと、同じような疑問を持つ方は他にもいるだろうと思い、自分の経験をもとに、おすすめの商品群を紹介するサイトを作ることに決めました。
（上手くいったことや失敗も色々経験してきました）
また、技術的なところだと、Next.jsを業務では使っていますが、ゼロベースで立ち上げるところは自分自身でやったことがなかったことも、自分の手で作ってみようと思ったことの要素の一つです。
構成や環境
ニーズがあるのであれば、長く続けていきたいと思っていますので、できる限りメンテナンスの手間もコストもかからない構成をポリシーとして下記選定しました。
- フロントエンドフレームワーク：Next.js（Page Router）
- UIフレームワーク：Chakra UI（安定性からv2を利用）
- CMS: microCMS
- デプロイ環境：vercel
- ドメイン取得：AWS Route53
他でも良く使われてる構成ですが、ドメイン取得・維持費用以外はかかっていません。
実装のポイント
画面構成
シンプルな構成として、HOME画面である一覧ページと詳細ページを基本としました。
いわゆるブログと同じです。
レスポンシブ対応
簡素に実装するために、PCなどの大きい画面（横幅768px以上）とそれより小さい画面の2つに対応することにしました。
一覧画面はPCだと3カラム、スマホだと2カラムとしました。
レスポンシブは、Chakra UIの機能を使って、コンポーネントを制御しました。
例えば、下記のfontSizeは、baseで指定した大きさ（sm）がまず適用されますが、画面がmd以上（横幅768px以上）となると、lgの大きさが適用されます。
プロパティ内で値の管理が完結するので、見通しも良く、開発しやすかったです。
<Text fontSize={{ base: 'sm', md: 'lg' }} my={{ base: '3', md: '6' }} mx={3}>
二人の子どもを育てる親が、実際に役立った・便利だなと感じたアイテムを紹介しています。
</Text>
【参考】Chakra UIのレスポンシブスタイル
OGP画像の作成自動化
@vercel/ogを使って、詳細ページのOGP画像を自動生成するようにしました。
背景画像は固定で、詳細ページで紹介するグッズの名前に応じて、テキストを変えてます。
このとき、違和感の少ない日本語フォントで描画するために、NotoSans JPを利用したいと思いましたが、デフォルトでは利用できません。カスタムフォント機能でフォントデータを読み込む必要があります。
しかし、OGPを生成するvercelのedge functionの無料プラン（Hobby）の制限で、フォントファイルを直接リポジトリに含めることができませんでした。
（こちらの記事を参考に容量削減のサブセット化をしても上手くいかず）
そこで、下記の記事を参考にGoogle FontsのDeveloper API経由でフォントデータを取得することで、NotoSans JPの利用を実現しました。
【参考】vercelのedge functionの制限
sitemapの自動生成
Google検索に認識してもらうためには、sitemapを作る必要があります。
毎回自前で更新するのは大変なので、下記のライブラリを使って、自動生成しました。
まとめ
今回、Next.jsとmicroCMSで作成した「子育てポートフォリオ」の技術構成についてまとめました。
類似の個人開発をする方の参考になるところが一つでもあればと思います。
今後、Google AnalyticsやPage Insightといった運用のモニタリングに関する情報について記事化したいと思います。
Discussion