制作実績

Portfolio

Case Study 01 | ファンサイト

【実例公開】WordPress不要!1つのJSONがサイト全体を自動更新する「魔法の回遊設計」

ここまで、店舗向けの「実用的なパーツ」について解説してきましたが、HTML+JSONの可能性はそれだけにとどまりません。

私が実際にプロデュースし、Web制作者の知人たちからも「こんな見せ方ができるのか!」と驚かれた、バーチャルアーティスト『BlueFace』の公式サイトに組み込んでいる「圧倒的な回遊設計」の裏側を公開します。

通常、サイトに新しい記事(例えば「ニューヨークでのスカウト任務完了」というエピソード)を追加しようとした場合、従来の手作業ならどうなるでしょうか?

  • トップページのスライダー画像を差し替えて…
  • サイドバーの新着一覧にリンクを追加して…
  • 詳細ページ用のHTMLを新しく作って…

と、複数のファイルをひとつひとつ書き換える「地獄の更新作業」が発生します。当然、更新漏れやリンク切れのリスクも跳ね上がります。

しかし、私が構築したJSONの設計なら、「テキストファイルに1回エピソードを書き込むだけ」です。

JSON更新の仕組み 図解1
JSON更新の仕組み 図解2

図を見ていただくと分かる通り、あなたが入力するのは中央上部のデータ(JSON)1箇所だけです。拡大画像は↓

JSONデータ入力画面の拡大画像

たったそれだけで、

  • トップページでは「ダイナミックなスライダー」として表示され、
  • サイドバーでは「時系列の新着リスト」として整理され、
  • 詳細ページでは「没入感のあるフルスクリーン記事」として表示される。

つまり、同じ1つのデータが、表示される場所の設計に合わせて、自動的に全く異なる美しいデザインへと姿を変えるのです。

読者をサイト内で自然に回遊させる「圧倒的なユーザー体験(UX)」を作り出しながら、制作者(クライアント)の更新の手間は「たった1回」で終わる。更新漏れも絶対に起こりません。

本来なら、高額な予算をかけてデータベースとCMS(システム)を構築しなければ実現できないこの「単一ソースからの複数UI展開」を、本マニュアルの手法なら、重いシステムを一切使わず「HTMLと軽量なJSONだけ」で実現できます。

この設計思想を知れば、あなたはもう、二度と手作業でHTMLを複製するような時代遅れの制作には戻れなくなるはずです。

Case Study 02 | ショッピングサイト

【実例公開②】「売れる」と「集客」を両立する、次世代のECサイト構築術

先ほど、BlueFaceのサイトで「1つのJSONを使い回して、サイト全体を動的に切り替える魔法」をご紹介しました。

しかし、私が手掛けた実際の物販サイト(『takei-dogschool.com』)では、あえて全く違うアプローチで設計を行っています。

このサイトには、自社完結型のカートシステム(Stripe決済)を組み込んでいますが、ここで私が構築した最大のポイントは以下の2点です。

1. 複雑な商品バリエーションとStripeのシームレスな連携

1つのドッグフードに対して「5種類の容量(グラム)」を選択できる機能を持たせています。見た目はモダンで洗練されたUIですが、裏側は昔ながらのCGIのような堅牢でシンプルな仕組みを用いて、Stripe(決済システム)へ正確にデータを渡しています。重いカート用プラグインは一切使っていません。

2. 【超重要】なぜ「JSONでの動的表示」ではなく、「HTMLの自動生成」なのか?

BlueFaceのサイトのように「回遊性」が目的なら、JSONで中身だけをパッと差し替えるのが一番簡単です。
しかし、物販(ECサイト)においてそれをやってしまうと、「商品ごとの個別ページがGoogleの検索(SEO)にヒットしなくなる」という致命的な弱点が生まれます。

物販の命はSEO(検索集客)です。
だからこそ、このドッグスクールのサイトでは、JSONのデータを読み込んで動的に表示するだけでなく、「JSONのデータから、SEOに強い独立したHTMLのカテゴリページや商品ページを自動で量産(生成)する仕組み」を構築しているのです。

設計アプローチの違い
  • エンタメサイト(BlueFace):
    SEOよりも「回遊性と更新の楽さ」を優先し、JSONで動的表示。
  • 物販サイト(ドッグスクール):
    「SEOと集客」を最優先し、JSONから静的なHTMLを生成。

Web制作において、ただツールが使えることと、「ビジネスの目的に合わせて最適な設計(アーキテクチャ)を組めること」は全く次元が違います。

拡大画像