1. 白い玄関
コーポレートサイトもLPも、ヒーローセクションは白背景だった。テキストだけで完結するミニマリズム。悪くはないが、「千年」を語るにはどこか抽象的だった。
「存在を、千年先へ」——このメッセージは白い画面の上に置かれていた。フォントは美しく、余白は十分にあった。だが、千年という時間のスケールを感じさせるものは何もなかった。テキストは意味を伝えるが、体感を与えない。
玄関に立った訪問者が最初に目にするものが白い壁とテキストだけだとしたら、それは情報としては正しいが、印象としては物足りない。
2. 一枚の写真
この写真には物語がある。
Soul Carrierは、ハワイに暮らす日系移民の祖先の遺骨を日本の故郷へ還すプロジェクトだ。第二次世界大戦で太平洋を挟む家族の絆が断絶されたまま、一世・二世の平均年齢は85歳を超えている。遺骨を故郷に届けられないまま亡くなる人が毎年増え続けている。三世が家族の記憶を持つ最後の世代だ。
マウイ島での災害被災地ボランティア活動中、5歳の娘が急な発熱に見舞われた。右も左もわからない土地で、助けを求めてカパルアの教会に駆け込んだ。そこで出会ったのが、日系移民の血をもつマーティンさんだった。彼は"Japanese Bond"——日本人の絆——と言って手を差し伸べてくださり、2023年の山火事で唯一焼け残った歴史的教会の経費でコンドミニアム3泊の宿泊費用を手配し、経費署名にも立ち会ってくださった。2025年12月22日のことだった。12月24日にはクリスマスプレゼントとして多くの食材、クマのぬいぐるみ、娘の知育道具まで送り届けてくださった。妻と娘の安全が確保され、娘は順調に回復した。そのマーティンさんからのご依頼——亡きお母様・照子さんのご遺骨を日本へ納骨したい。照子さんは1930年代に群馬県で生まれ、戦後「戦争花嫁」として渡米し、90歳で亡くなった。マーティンさんは日本の親族の電話番号を紛失し、太平洋の向こうの家族との接点を完全に失っていた。
いつまでもコンドミニアムに滞在しているわけにもいかない。向かったのがマウイ島東端のハナファームだった。ホストのメラニーさんは「クリスマスシーズンに家族を受け入れないのはキリストの精神に反する」という言葉と共に、私たち家族を受け入れてくださった。ハナでは、マーティンさんの家紋をコースターにレーザー刻印して共有したり、記念品づくりに思いを馳せていた。当時はまだ記念品の形は定まっていなかった。TokiQRもLPもコーポレートサイトもない。なんとかマーティンさんの気持ちに寄り添い応えたい——その一心だった。メラニーさんからはハナファームをいつでも使って良いという温かい言葉をいただいている。この原体験が、物理層の分散保管地の一つとしてハナファームを位置付けるに至った背景だ。
2026年1月、氷点下近い気温の中、一人でステップワゴンに車中泊をしながら戸籍調査、寺院・公営墓地を含む5,000基の墓跡調査、群馬県での現地調査を行った。何日で終わるのか見えない中、4日を超えたころ、複数の行政窓口との対話の中で突破口を見出すことができた。マーティンさんからは"Thank you Takuya. You are a gentleman and a scholar."という言葉をいただいた。"A gentleman and a scholar"は16世紀の英語圏に遡る慣用句で、教養と品格を兼ね備えた人物への最大級の賛辞だ。かつて教育が貴族と聖職者にしか許されなかった時代、学識ある紳士は稀有な存在だった。その含意を込めて、今なお敬意と親しみを持って使われる。その後、人生で初めて伊勢神宮を参拝した。マーティンさんへ日本を代表するお土産を求めて。マーティンさんの物語を取り戻すことをきっかけに、すべての人が物語となることを願いながら。その参拝のときに撮影したのが、この一枚だ。
官約移民としてハワイへ渡った日系移民の人たちも、この鳥居を何人も通ったのだろう。長い歴史の中で一人ひとりが物語になる——その思いが、参道に立つ自分の中で静かに高まっていった。
伊勢神宮の鳥居。式年遷宮で20年ごとに建て替えられながら、1300年以上途絶えていない。「存在を、千年先へ」のメッセージにこれ以上の背景はない。
鳥居の向こうに逆光が差し込む。朝の光が木の柱を透かし、参道に長い影を落とす。この写真には「時間が通過してきた場所」の空気がある。建て替えられるたびに新しくなりながら、同じ場所に同じ形で立ち続ける。それは更新されながら永続するというトキストレージの思想そのものだ。
トキストレージは伊勢神宮式年遷宮奉賛もしている。この鳥居は単なる装飾ではなく、事業の思想と実践が接続する場所だ。
3. 245KB——最適化の設計
元画像は1.1MB、2392x1782ピクセル。ヒーロー背景として使うには重すぎる。
ヒーロー背景は全ユーザーが最初に読み込む画像だ。LCP(Largest Contentful Paint)に直結するため、ファイルサイズは妥協できない。
| 工程 | サイズ |
|---|---|
| 元画像(2392x1782) | 1.1MB |
| リサイズ(1920px幅) | 約700KB |
cjpeg -quality 75 |
245KB |
quality 75は肉眼で劣化が判別しにくい閾値だ。ヒーロー背景はダークオーバーレイ越しに見るため、圧縮アーティファクトはさらに目立たなくなる。1.1MBから245KBへ、78%の削減。モバイル回線でも1秒以内に表示できる。
モバイル向け縦長画像
横長写真(1920x1430)をスマートフォンの縦長画面でcover表示すると、鳥居の横幅の34%しか見えず拡大表示になる。そこで縦長構図の別カット(1668x2244)を用意した。1080px幅にリサイズし、cjpeg -quality 75で88KBに最適化。CSSメディアクエリで768px以下の画面幅に切り替える。
デスクトップは横長写真(245KB)、モバイルは縦長写真(88KB)。画面の向きに応じて最適な構図を見せる。どちらの画面でも鳥居の全体像と光芒が映える。
4. パララックスの実装
パララックス(視差スクロール)の最も素朴な実装はbackground-attachment: fixedだ。しかしこのプロパティはmacOS SafariとiOSで動作しない。モバイルユーザーの大半を占めるiOSで機能しない手法は採用できない。
代わりに、HTML要素をposition: fixedで画面全体に配置する方法を採った。
<div class="hero-bg">— 背景画像をposition: fixedで全画面配置<div class="hero-overlay">— ダークオーバーレイrgba(15, 23, 42, 0.55)で文字の視認性を確保- ヒーロー以降のセクションに
position: relative; z-index: 1; backgroundを指定
::before疑似要素ではなく実DOM要素を使うのは、デバッグとメンテナンスのしやすさのためだ。DevToolsで要素を直接選択でき、スタイルの上書きも容易になる。
技術的にはシンプルだが、この構造が生み出す体験は単なるスクロール効果ではない。背景の鳥居は固定され、コンテンツがその上を覆いかぶさるように流れていく。過去の上に未来が重なる——この感覚を視覚化している。
「あなたが物語となり、世代の対話が重なり、未来の道になる」——トキストレージのミッション・ステートメントそのものだ。パララックスは、このミッションの実践でもある。固定された背景は過去の記録、スクロールするコンテンツは未来の世代。両者が重なる瞬間を、ユーザーは自らの手で——スクロールという行為で——体験する。
モバイルではスクロール追従にフォールバックし、パフォーマンスを優先する。
5. 二つのサイトに同じ背景
コーポレートサイト(玄関)とLP(図書館)が同じ鳥居の写真を共有する。訪問者がどちらから入っても、同じ入口の風景が迎える。
自己完結の原則に従い、画像はそれぞれのリポジトリにコピーした。/lp/asset/からコーポレート側が参照するのではなく、コーポレートのasset/にも同じ画像を配置する。クロスリポジトリ依存は排除する。
同じ写真を二つの場所に置くことは冗長に見えるかもしれない。だが、この冗長性が独立性を担保する。一方のリポジトリを変更しても、他方は影響を受けない。そして訪問者にとっては、異なる深度のサイトがひとつのブランドであることを暗示する統一感として機能する。
6. 結び
白いページにテキストを並べるだけでも情報は伝わる。だが「千年」を語るなら、千年を体現する場所を見せた方が早い。
伊勢神宮の鳥居は1300年間、同じ場所に立ち続けている。20年ごとに建て替えられ、常に新しく、しかし常に同じだ。これは「存在を、千年先へ」というメッセージの実例であり、トキストレージが目指すアーキテクチャの比喩でもある。
テキストは伝える。写真は体験させる。
パララックスは、時間の重なりを感じさせる。
245KBの一枚の写真が、白い玄関を千年の入口に変えた。