【実例公開】WordPress不要!1つのJSONがサイト全体を自動更新する「魔法の回遊設計」
ここまで、店舗向けの「実用的なパーツ」について解説してきましたが、HTML+JSONの可能性はそれだけにとどまりません。
私が実際にプロデュースし、Web制作者の知人たちからも「こんな見せ方ができるのか!」と驚かれた、バーチャルアーティスト『BlueFace』の公式サイトに組み込んでいる「圧倒的な回遊設計」の裏側を公開します。
通常、サイトに新しい記事(例えば「ニューヨークでのスカウト任務完了」というエピソード)を追加しようとした場合、従来の手作業ならどうなるでしょうか?
- トップページのスライダー画像を差し替えて…
- サイドバーの新着一覧にリンクを追加して…
- 詳細ページ用のHTMLを新しく作って…
と、複数のファイルをひとつひとつ書き換える「地獄の更新作業」が発生します。当然、更新漏れやリンク切れのリスクも跳ね上がります。
しかし、私が構築したJSONの設計なら、「テキストファイルに1回エピソードを書き込むだけ」です。
図を見ていただくと分かる通り、あなたが入力するのは中央上部のデータ(JSON)1箇所だけです。拡大画像は↓
たったそれだけで、
- トップページでは「ダイナミックなスライダー」として表示され、
- サイドバーでは「時系列の新着リスト」として整理され、
- 詳細ページでは「没入感のあるフルスクリーン記事」として表示される。
つまり、同じ1つのデータが、表示される場所の設計に合わせて、自動的に全く異なる美しいデザインへと姿を変えるのです。
読者をサイト内で自然に回遊させる「圧倒的なユーザー体験(UX)」を作り出しながら、制作者(クライアント)の更新の手間は「たった1回」で終わる。更新漏れも絶対に起こりません。
本来なら、高額な予算をかけてデータベースとCMS(システム)を構築しなければ実現できないこの「単一ソースからの複数UI展開」を、本マニュアルの手法なら、重いシステムを一切使わず「HTMLと軽量なJSONだけ」で実現できます。
この設計思想を知れば、あなたはもう、二度と手作業でHTMLを複製するような時代遅れの制作には戻れなくなるはずです。