Hello, Loom — デジタルジャカードの設計原則

はじめに

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