こんにちは、新森清志です。大阪を拠点に、フリーランスのフロントエンドエンジニアとして、中小企業様や個人事業主様の Web 制作を支援しています。
前回のスライダーデモのストーリーに続き、今日も業務とは別に自主制作している作品の中から、もうひとつをご紹介させてください。React と Next.js を使って構築した、家具を題材にした EC サイトのデモです。クライアントワークの実績ではなく、技術検証のために自分で構築したサンプルですが、モダンな技術スタックで EC サイトを作る際の感覚を掴むうえで、自分にとって大きな経験になりました。
なぜ作ったのか
普段のクライアントワークでは、コーポレートサイトやランディングページを WordPress で構築することが多く、EC 機能が必要な場合も WordPress 系のプラグイン（WooCommerce など）でご提案するのが基本です。WordPress ベースの EC は、お客様自身で商品管理ができる、運用コストを抑えやすいなどのメリットがあり、中小企業様の規模感には合うケースが多いと感じています。
ただ、近年は React や Next.js を使ったモダンなフロントエンドで、ヘッドレス CMS と組み合わせた高速な EC サイトを構築する流れも広がっています。商品点数が多かったり、表示速度や UX への要求が高い案件では、こうした構成の方が適していることもあります。
「相談を受けたときに、選択肢を持って判断できる人でありたい」――そう考えて、React + Next.js で EC サイトを構築する経験を、自主制作という形で積んでおくことにしました。
デモサイトの内容
題材として選んだのは、家具を扱う EC サイトです。家具は商品ごとの世界観や写真の見せ方が購入判断に大きく影響するジャンルで、UI・UX 設計の練習材料として面白いと感じたためです。
実装した主な機能は、以下の通りです。
・商品一覧ページ
カテゴリ別の商品リスト表示、商品カードのデザイン設計
・商品詳細ページ
画像表示、商品情報、カートへの追加導線
・カート機能
追加・削除・数量変更、合計金額の動的計算
・多言語対応
URL に言語切り替えのパスを持たせる構成（/ja など）
・検索機能
商品名・キーワードによる検索
・フィルター機能
カテゴリや条件による絞り込み
EC サイトの基本的な購入フロー（商品を探す → 詳細を見る → カートに入れる）を一通り体験できる形にまとめ、加えて多言語対応と検索・フィルターという、実際の運用で求められやすい機能を組み込みました。
技術スタックと、そこから得たもの
技術スタックは、React と Next.js を中心に構築しています。
このデモを通じて得られた一番の収穫は、「Next.js でサイトを作る際の構造設計の感覚」でした。WordPress ベースの開発では、テーマファイルの構成や PHP のテンプレート階層に沿って設計を考えますが、Next.js では、ページごとのルーティング、コンポーネントの分割粒度、データの取得方法（サーバーサイドかクライアントサイドか）など、考えるべきポイントの軸が大きく変わります。
また、多言語対応や検索・フィルター機能を組み込む中で、状態管理や URL 設計の判断ポイントも体感できました。これらは「ドキュメントを読んで知っている」のと「実際に手を動かして作ったことがある」のとでは、案件のご相談を受けたときに出せる現実的な見積もりや工数感が大きく変わってきます。
URL とご活用について
デモサイトの URL はこちらです。
https://stillne-shop.vercel.app/ja
EC サイトのご相談をいただく際、「WordPress + WooCommerce で作るか、React + Next.js でモダンに作るか」という選択肢を、お客様の状況に合わせてフラットにご提案できるよう、両方の引き出しを持っておきたいと考えています。
正直にお伝えすると、現時点で「React や Next.js での新規アプリケーション開発」を主軸の業務としてお引き受けすることはまだ難しい段階です。ただ、技術選定のご相談やコーポレートサイトの一部に React コンポーネントを組み込むようなケースであれば、こうした自主制作で積んだ経験を活かしてご提案・ご対応できる範囲が広がっていると感じています。
業務外で手を動かすことの意味（あらためて）
前回のスライダーデモのストーリーでもお伝えしましたが、業務とは別に自主制作を続けているのは、純粋に「ご相談をいただいたときの引き出しを増やしておきたい」からです。新しい技術に触れていなければ、ご提案できる選択肢はどうしても狭くなります。逆に、手を動かして検証していれば、「これは自分の主軸ではないので、専門の方をご紹介します」という判断も、自信を持ってできるようになります。
お客様にとって本当に必要な選択肢を、誠実にお伝えできる状態でありたい。そのために、これからも業務外で手を動かす時間を、無理のないペースで続けていきたいと思っています。
もし、EC サイトの新規構築やリニューアル、技術選定の相談をされたい企業様がいらっしゃれば、「話を聞きに行きたい」からお気軽にご連絡ください。デモをお見せしながら、貴社のサービスに合う構成を一緒に考えさせていただきます。
