テンプレからの脱却

「プログラマが服屋をやる」

珍しい組み合わせに思われるかもしれませんが、コードを書く人間として、Webサイトの設計思想にこそ強いこだわりがあります。

多くの小売ECサイトはWordPressで構築されています。

しかし、私たちはより軽量で拡張性があり、構造的に美しい仕組みを目指しました。

単に商品を並べるだけでなく、技術とデザインの整合性を保ちたいという考えから、

このサイトはヘッドレスCMS構成で運用されています。

創造性と柔軟性を取り戻す

👉 ヘッドレスCMSって何？WordPressとの違いや特徴を解説

WordPressは便利で導入も容易ですが、テンプレートやプラグイン構造に依存しやすく、

自由な設計が難しいという課題があります。

ヘッドレスCMSでは、データとフロントエンドが明確に分離されています。

APIを通してデータを取得し、任意のフレームワークで表示を制御できるため、

構造設計・UI・パフォーマンスの最適化を自分の手でコントロールできる点が大きな利点です。

この自由度こそが、プログラマにとっての「創造の余地」です。

既成の仕組みに合わせるのではなく、自分の設計思想に基づいてWebを構築できる環境を選びました。

静的サイト構成の安定性と信頼性

このサイトでは、Next.jsによる静的サイト生成(SSG)を採用しています。

APIから取得したデータをビルド時にHTMLとして出力するため、

高速かつセキュアな配信が可能です。

余計な動的処理がなく、クライアント側の描画も軽量に保たれます。

運用時のトラブルも少なく、サーバー負荷の安定化にも寄与します。

WordPressのようにPHPやデータベースへの依存がないため、

更新フローもシンプルで、管理コストを最小化できます。

CMSアーキテクチャ

このサイトの構成は以下の要素で成り立っています。

• Next.js：フロントエンドフレームワーク
• Notion API：ブログ記事データの管理・取得
• Shopify API：商品情報の連携・埋め込み
• 静的アセット：Notion画像・S3画像などの外部ホスティング

アーキテクチャ全体の概念図は以下の通りです。

このように、データソースを分離し、API経由で統合する構造により、

CMSやコマース機能を柔軟に入れ替えながら、フロントエンドを一貫して保てます。

コンポーネント設計による再利用性

Next.jsではUIをコンポーネント単位で設計しています。

各要素は再利用可能で、スタイルやロジックを分離して管理できます。

これにより、デザイン変更や機能追加を最小限のコストで行える構造になっています。

フロントとバックエンドが疎結合であるため、

デザイン、API、ビルドの各工程を独立して改善できる点も大きなメリットです。

運用と更新の効率化

コンテンツはすべてNotion上で管理しています。

編集者はNotion上で記事を作成・更新し、

APIを通じてNext.js側でビルドが走り、静的ページが自動生成されます。

これにより、エンジニアでなくても更新作業が可能になり、

運用負荷を抑えつつ、技術的品質を保つことができます。

まとめ

とりあえず動く、WordPressのような「一体型CMS」ではなく、

APIを中心とした「分離型CMS（ヘッドレスCMS）」を選ぶことで、

拡張性・安全性・デザインの一貫性を高いレベルで両立できます。

この構成は、単なる技術選定ではなく、

「お店の思想を、技術的にどう支え、伝えるか」という設計上の判断です。