ISHIKAWA.CO

media / open source / services

Living Atlasへ戻る

[ MAKING OF / WALKABLE ATLAS ]

歩ける世界を、どう作ったか。

作品を並べるのではなく、仕事と暮らしを自分で歩いて発見する公式サイト。

ishikawa.co — Walkable Atlasは、6つの運営メディアと開発・執筆の活動を、横に歩くACT Iと縦に読むACT IIへ再構成したサイトです。ここでは完成形だけでなく、撤回した案、守った制約、実測で直した失敗まで公開します。

撤回した3Dサイバーシティ案と、点と一本の地面から始めた初期のWalkable Atlas
左: 撤回した3D案。右: 点と地面だけに戻した最初の世界。
2 acts
探索と情報を、一つのDOMでつなぐ
6 worlds
実在する6つの活動を別々の動詞で描く
1,400
根拠なく増やさない粒子上限
14.2ms
Awwwards baselineのframe p95

01

[ DECISION ]

うまく作れた3Dを、採用しなかった。

技術的に成立することと、自分の世界になることは違いました。

最初は3Dのサイバーシティを作りました。見栄えはしたものの、どこかで見た未来像に活動を載せただけで、20年以上の仕事や6つのメディアが同じ場所に存在する理由を説明できませんでした。そこで全面撤回し、一粒が落ち、地面が生まれ、キャラクターが歩き出すところまで戻しました。点は軽量化の手段ではなく、異なる活動を一つの世界へつなぐ最小単位になりました。

02

[ SIX WORLDS ]

同じ操作で歩き、違う動詞を発見する。

左右へ歩く、止まる、調べるという文法は全世界で共通です。その上で、mossは釣る、taupeはつなぐ、isLogは記録する、おじクラは積む、モノオモイはほどく、モノえらびは選ぶ、という動詞を粒子、音、間、発見方法へ変換しました。看板や記事は装飾ではなく、現実に運営しているメディアへ戻る入口です。

moss、taupe、isLog、おじクラ、モノオモイ、モノえらび編集部の6つの点描世界
6つの活動を、同じ点から異なる物理と風景へ展開。
mossの世界で釣り上げた記事を発見する場面
発見は演出で終わらず、実在する記事へつながる。

03

[ ONE DOM / TWO ACTS ]

探索と情報を、二重管理しない。

ACT IはCanvas 2Dで体験を描き、ACT IIは人物、メディア、OSS、サービス、受賞歴をsemantic HTMLで読ませます。ただし別々のサイトではありません。サーバーが返す重要情報のHTMLを最初から同じDOMに置き、JavaScriptが利用できる時だけLiving Atlasとして演出します。初期化失敗、Canvas非対応、no-JavaScriptでも、情報は消えません。

  • 重要情報はPHPでSSR
  • 体験とSEOフォールバックは同一DOM
  • buildなしのVanilla JavaScript / Canvas 2D
  • 失敗時は通常情報へfail-open
第一幕の記憶を左の軌跡に引き継いだLiving Atlas
読むためのHTMLが、そのまま旅の第二幕になる。

04

[ SIGNATURE MOMENT ]

歩いた世界が崩れ、地図へ組み直される。

最大の演出予算は、ACT IからACT IIへの一度の転換へ集中しました。6世界の粒子がほどけ、キャラクターと一緒に落下し、歩いた記憶を伴って縦の地図へ再構成されます。reduced motionでは長い落下を省き、短い状態変化で同じ因果を伝えます。

ACT Iが崩れ、キャラクターが粒子と落下し、Living Atlasへ再構成される3段階
fracture / freefall / reform。二幕をつなぐ一つの場面へ演出を集中。

05

[ CONSTRAINTS ]

制約を、品質の輪郭にする。

粒子上限は1400。Retina Canvasのbacking storeを制限し、active / idle / backgroundで描画頻度を切り替え、callback workを見てadaptive qualityを下げます。品質を落としても、円へ簡略化するだけで世界の意味と操作は残します。baselineのframe p95は14.2ms、JavaScript p95は1.6ms、Canvas p95は2.2msでした。これは公開前の実ブラウザ工学計測で、field Core Web Vitalsとは区別しています。

Walkable Atlasのframe、JavaScript、Canvas、粒子数を表示した開発用performance HUD
見た目ではなくcallback workを測り、過負荷を品質調整へ返す。

06

[ ACCESS / INPUT / PRIVACY ]

端末が変わっても、旅の意味を失わない。

keyboard、touch、任意のTilt Walkは同じ左右移動へ接続します。傾き許可を拒否してもtouchは残り、音はユーザー操作後だけ開始します。reduced motionでは同じ情報と結果へ短い経路で到達でき、発見順は同一セッションの中だけで扱います。生の傾き角度、細かな移動履歴、星座をサーバーへ送信しません。

  • A / D・矢印・touch・Tiltを同じ移動へ統合
  • Tilt拒否・非対応でもtouch fallbackを維持
  • reduced motionでも二幕と結果を維持
  • 旅の星座は端末内で生成し、保存は本人が選ぶ
スマートフォンでキャラクターを歩かせるtouchとTilt Walkの操作画面
mobileを縮小版にせず、端末そのものを任意の移動装置へ。

07

[ TEST / REVISE ]

実ブラウザで歩き、失敗を仕様へ戻す。

自動テストだけでなく、初回訪問から通常操作でACT I、発見、転換、ACT II、下層ページまで歩きます。desktop、mobile portrait / landscape、keyboard、touch、Tilt許可・拒否・非対応、reduced motion、no-JavaScript、再訪を分離して記録しました。看板の揺れ、横画面の記事占有、ACT IIの狭いswipe範囲、音のautoplay警告、遷移中の入力競合などは、実画面で見つけて修正し、回帰テストへ固定しました。

08

[ TIMELINE ]

完成形より、判断の連続。

  1. 情報を整えた企業的なサイトから、活動を歩いて発見する世界へ発想を転換。

  2. 3Dサイバーシティ案を制作したが、借り物の未来像に見え、作品の核にならないと判断して撤回。

  3. 一粒、地面、キャラクター、6世界という点描の文法を確立。

  4. SEOフォールバックのHTMLを、そのままACT IIのLiving Atlasへ昇格。

  5. mobile、Tilt、reduced motion、no-JavaScript、性能予算を同じ体験契約へ統合。

  6. CSS Design Awards Special Kudosと一般投票3部門を受賞。次の改善点を初見理解とglobal comprehensionへ定めた。

[ SOURCES / CONTINUE ]

世界と、その根拠へ。

制作思想、公開コード、受賞根拠、より長い日本語の制作記録を確認できます。