はじめに
Loomは、デジタルジャカード織りをメタファーとしたスクロールテリング・プラットフォームである。 縦糸（Warp）と横糸（Weft）が交差して布を織り上げるように、コンテンツとインタラクションが交差して物語を紡ぐ。
本稿では、Loomの設計原則と技術的な基盤について述べる。
設計原則
Loomの設計は3つの柱に基づいている：
- Swiss Style（スイススタイル） — 構造的なグリッドシステムとタイポグラフィの厳密な制御
- Digital Brutalism（デジタルブルータリズム） — 装飾を排し、構造そのものを美学とするアプローチ
- Kinetic Typography（キネティック・タイポグラフィ） — スクロール速度に連動した動的な文字表現
Swiss Style の適用
国際タイポグラフィ様式（International Typographic Style）は、1950年代のスイスで確立された。 その原則は明快である：
- グリッドシステム: あらゆる要素の配置に数学的な秩序を与える
- Sans-serif書体: 可読性と中立性を最優先する
- 非対称レイアウト: 静的な対称から脱却し、動的な緊張感を生む
Loomでは Inter をプライマリ書体、JetBrains Mono をメタデータ書体として採用している。
コードとしてのデザイン
Loomのコンポーネントはすべて React + Framer Motion で実装されている。 例として、キネティック見出しの基本構造を示す：
import { motion, useMotionValue, useTransform } from 'framer-motion';
function KineticHeading({ children }) {
const velocity = useMotionValue(0);
const y = useTransform(velocity, [-5, 5], [20, -20]);
return (
<motion.div style={{ y }}>
<h1>{children}</h1>
</motion.div>
);
}この実装により、スクロール速度に応じて見出しが微妙にパララックス移動する。
技術スタック
Loomを構成する主要技術は以下の通り：
| 技術 | 用途 | 選定理由 |
|---|---|---|
| Astro v5 | フレームワーク | Islands Architecture による最小限のJS配信 |
| React 18 | UIコンポーネント | エコシステムの成熟度 |
| Framer Motion | アニメーション | 宣言的なモーションAPI |
| Tailwind CSS v4 | スタイリング | ユーティリティファーストの一貫性 |
| Nano Stores | 状態管理 | フレームワーク非依存の軽量ストア |
| Lenis | スムーススクロール | 慣性スクロールと速度トラッキング |
まとめ
Loomは「読む」体験を「織る」体験に変換するプラットフォームである。 スクロールという最もプリミティブなインタラクションを、豊かな視覚的フィードバックに昇華させる。
“The grid system is an aid, not a guarantee.” — Josef Muller-Brockmann