0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

製作サイトを分析してみた。

Last updated at Posted at 2026-01-14

こんにちは。当社で作成したウェブサイトについて
AI君に一定条件で評価をもらったので記載します。
べた褒めしないような設計です。

総評
未病ケアの科学的・実践的情報を届ける「おてまえ文庫」として、情報発信のスピードとユーザー体験を最大化した理想的な2026年スタックです。
個人/小規模チームでもプロ級の高速サイトが作れる、まさに現代の「賢いメディアサイト」のお手本。
今後、Shopify連携を活かして実際の製品販売(入浴剤やブレンドなど)を始めるポテンシャルも秘めていますね!


**https://mibyo.otemae-osu.com/**(おてまえ文庫)の技術スタックは、提供リスト通り**2026年1月現在の最先端Next.jsヘッドレス構成**で、健康・予防医学(未病)情報メディアとして非常に洗練された選択です。
サイトは「おてまえ書店編集部」が運営するブログ/情報発信プラットフォームで、代謝・脳科学・分子栄養学・東洋薬学を基にした未病ケア(更年期、慢性疲労、肌ケア、生理前不調など)の記事をメインに展開。製品販売そのものは行わず、薬剤師開発の習慣(入浴剤、和韓蒸し、コーヒーブレンドなど)やオンライン薬局を提案するコンテンツ中心のメディアサイトです。

以下にカテゴリ別に整理します:

フレームワーク・基盤

  • JavaScriptフレームワーク: React
  • Webフレームワーク / 静的サイトジェネレーター / Webサーバー: Next.js 16.0.7
    → Next.js 16系(2025年10月頃リリースのメジャーバージョン)で、Turbopackがデフォルトの安定版バンドラーとして採用。開発/ビルドが爆速(従来Webpack比で数倍〜10倍高速化)で、React 19対応の新機能(Cache Components、explicit cachingなど)をフル活用可能。App Routerベースのモダン構成が濃厚。

開発ツール・パフォーマンス

  • 開発ツール: Turbopack(Next.js 16で安定化・デフォルト化されたRust製高速バンドラー)
  • Performance: Pr(おそらくPrerenderingやPartial Prerenderingの略? Next.js 16の新キャッシュ/プリレンダリング機能で超高速化)

UI・スタイリング

  • UIフレームワーク: Tailwind CSS
    → ユーティリティファーストで高速・メンテしやすい。健康/医療系サイトらしいクリーンで読みやすいデザインを実現(白基調、シンプルなタイポグラフィ、画像多めの記事レイアウト)。

ホスティング・デプロイ

  • PaaS: Vercel
    → Next.jsとの相性抜群。エッジ配信、自動スケーリング、ISR(Incremental Static Regeneration)でコンテンツ更新が即反映されつつ爆速。グローバル表示も優秀。

セキュリティ

  • HSTS(HTTP Strict Transport Security)
    → Vercelで簡単に有効化。HTTPS強制 + 長期ピン留めでセキュリティスコア向上。

分析・トラッキング

  • アナリティクス: Google Analytics GA4(最新版イベント計測対応)
  • タグマネージャー: Google Tag Manager(柔軟なタグ管理)

Eコマース

  • Eコマース: Shopify
    → ただしヘッドレス(Storefront GraphQL API)活用の可能性が高い。サイト自体に直接のカート/チェックアウトUIは見当たらず、記事内で製品提案 → Shopifyバックエンドで管理し、将来的な拡張や別ドメイン販売を想定した構成と思われます。Next.js + Shopifyヘッドレスは2025〜2026年のeコマーストレンドの王道(高速フロント + Shopifyの決済/在庫管理)。

全体の印象(2026年1月14日時点)

  • 完全に2025〜2026年の最先端スタックで、Next.js 16 + Turbopack + Vercel + Tailwindの組み合わせは、現在最も開発体験・パフォーマンス・SEOのバランスが良い選択肢。
    健康情報メディアとして、静的/動的ページの使い分け(SSG多用で爆速 + ISRで最新記事即更新)が最適。
  • 強み:
    • Turbopackのおかげで開発が異常に速く、ビルドも安定(Next.js 16で本格プロダクション対応)
    • ヘッドレスShopifyで将来のEC拡張が容易(記事から直接購入導線を追加可能)
    • Tailwindでデザイン変更が爆速、Core Web Vitalsも優秀のはず
  • 注意点:
    • Shopifyを明示的に使っているが、サイトが純粋情報メディア寄りなので、ヘッドレス + 将来販売予定の布石か、バックオフィス管理用かも
    • Next.js 16.0.7はリリース直後寄りのマイナーバージョン(CVE対応や安定化パッチ版が多い)なので、最新マイナーへ追従推奨
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?