EN日本語
相談する
メニュー

このページの日本語は、ネイティブスピーカーによる確認前の翻訳です。

このサイトはLoomで動いています

お客様のシステムと同じ方法で、自分たちのデザインシステムを管理しています。

このサイトは、Loomが管理するデザインシステム「Loom Site」で作られています。お客様のシステムに対して行うことを、まず自分たちのサイトで行っています。

Loom Siteは、型付きの描画関数と契約を持つ再利用可能な要素を定義します。ビルドでは、ページの構成、ルール、文言、ローカライズを確認します。以下の数値はビルドごとに計算します。クラスの使用割合は、登録されたスタイルが使われている範囲を示すもので、すべての呼び出し元が登録された描画関数を使っている証明ではありません。

数値

項目値コマンド
要素134（うちLoomの監査が読むのはコンポーネント83件とトークン2114件）npm run site:system
契約の完成度（要素ごとに20項目）94.7% （Figmaとの対応づけはまだありません）tsx scripts/site/system/check.ts
システムが定義するクラスの使用割合99.2% （Loom Site以前は30.2%）tsx scripts/site/system/check.ts
宣言どおりに構成されたページ74 / 74tsx scripts/site/system/check-pages.ts
LoomによるLoom Siteの監査75/100（Holding together、10月30日）npm run site:audit
記録された決定と例外24apps/showcase/site/loom/decisions
適用中のコンテンツルール21件（ブロック17件、報告のみ4件）npm run site:copy -- --strict

すべてのページが従うルール

要素からページへの構成

実際の基盤、トークン、コンポーネント、テンプレートを確認できます。各層から契約を参照でき、描画例も同じ要素を使っています。

  1. 基盤

    システムの特徴と制約を定める決定。

    色（英語） ↗

    実装・契約からの見本（技術情報は英語）

    cotton
    Page ground
    ink
    Text, rules, primary button
    teal
    See · the UX Ops lead · the Academy · articles · holding together
  2. トークン

    色、文字、余白、動きに名前を付け、元の値を一か所で管理。

    コンポーネントのトークン（英語） ↗

    実装・契約からの見本（技術情報は英語）

    1. color.palette.greige.900Baseのプリミティブ
    2. color.text.default → --inkセマンティックな役割・ライトモード
    3. --identity-sticker-inkコンポーネントのエイリアス
  3. アトム

    状態、ルール、アクセシビリティを備えた小さな再利用要素。

    ボタン（英語） ↗

    実装・契約からの見本（技術情報は英語）

    ボタンの契約を見る
  4. モレキュール

    一つの目的のために組み合わせた要素。

    アクションの組（英語） ↗

    実装・契約からの見本（技術情報は英語）

    主なアクション もう一つの選択肢
  5. オーガニズム

    小さな要素から構成したインターフェースのまとまり。

    ヘッダー（英語） ↗

    実装・契約からの見本（技術情報は英語）

    実際の描画例を見る

    静的な見本です。操作の詳細は契約を参照してください。

  6. テンプレート

    繰り返し使えるページ構造を定める配置とコンテンツ枠。

    ヒーロー（英語） ↗

    実装・契約からの見本（技術情報は英語）

    実際の描画例を見る

    静的な見本です。操作の詳細は契約を参照してください。

    デザインシステムを、次のレベルへ。

    Loomは、いまあるシステム、あるいはまだないシステムを、チームとAIツールが従える明確でガバナンスの効いた決定へと変えます。プロダクトの見た目はそのままです。主導権は皆さまの手にあり、専門家の支援とエージェントが日常的な作業を担います。

    Book a conversation Start with a free health check
    jobsTitle
    The owner-approved line above the jobs band (See it. Shape it. Govern it. Run it.).
    title・必須
    The headline (owner-approved).
    lede・必須
    The promise.
    actions・必須
    The CtaPair.
    live
    The Drift hero panel.
    jobs・必須
    The four jobs band.
  7. ページ

    実際のコンテンツと検証した順序でテンプレートを構成。

    ランディングページ（英語） ↗

    実装・契約からの見本（技術情報は英語）

    1. hero必須
    2. problem-section任意
    3. lead-section任意
    4. flow-section任意
    5. job-section任意・繰り返し可
    6. proof-section任意・繰り返し可
    7. roles-section任意
    8. founder-section任意
    9. roadmap-strip任意
    10. cta-section必須

小さな要素を組み合わせて大きな構造を作ります。すべての依存関係が七段階を順番に通る必要はありません。組織やブランドの継承とは別の階層です。

実際の依存関係

別の見方：運用の流れ

元のフィールドガイドにある五つの段階は、仕事を進める流れです。コンポーネントの大きさや継承関係ではありません。

  1. シグナル具体的な必要性やずれを観察する。
  2. パターン観察から繰り返し現れる関係を見つける。
  3. 決定選んだ対応と理由を記録する。
  4. ルール今後の作業が従う制約を定める。
  5. アクション決定を実行し、結果を確認する。

Loomの監査がLoom Siteについて示したこと

LoomによるLoom Siteの監査：75/100（Holding together、10月30日）。ガバナンスの画面も同じ結果を使います。記録したすべての実行（古い順）と、変わったこと：

  1. 46/100 （Loose threads）、10月26日 10:50 UTC
    First audit, on the day Loom Site was registered. Its tokens held raw values, and no element had a story or a test yet.（英語）
  2. 49/100 （Loose threads）、10月26日 12:25 UTC
    The tokens now point to Loom Base's palette instead of holding raw values, and the audit read how the site builder uses the system.（英語）
  3. 72/100 （Taking shape）、10月26日 13:46 UTC
    Most of this jump came from the audit, not the site: Loom's audit learnt to read a system's governance records (owners, decisions, changelog) and its per-element stories, which the site already had. The site itself added a high-contrast mode and written instructions for agents.（英語）
  4. 73/100 （Taking shape）、10月26日 15:05 UTC
    The audit now counts an element placed by its render function as a use of the system, so adoption is measured properly. This run was recorded in a working copy; a clean copy of the repository could not reproduce it at the time (see the next run).（英語）
  5. 73/100 （Taking shape）、10月26日 19:01 UTC
    The same score, recorded from a clean copy of the repository, so anyone can reproduce it.（英語）
  6. 73/100 （Taking shape）、10月27日 10:12 UTC
  7. 72/100 （Taking shape）、10月27日 12:45 UTC
  8. 74/100 （Taking shape）、10月27日 12:53 UTC
  9. 74/100 （Taking shape）、10月27日 12:58 UTC
  10. 74/100 （Taking shape）、10月27日 13:13 UTC
  11. 74/100 （Taking shape）、10月27日 13:16 UTC
  12. 74/100 （Taking shape）、10月27日 13:24 UTC
  13. 73/100 （Taking shape）、10月29日 05:15 UTC
  14. 74/100 （Taking shape）、10月29日 05:48 UTC
  15. 75/100 （Holding together）、10月29日 08:20 UTC
  16. 75/100 （Holding together）、10月30日 11:30 UTC
  17. 75/100 （Holding together）、10月30日 11:52 UTC
  18. 75/100 （Holding together）、10月30日 12:24 UTC
  19. 75/100 （Holding together）、10月30日 12:30 UTC
  20. 75/100 （Holding together）、10月30日 12:40 UTC
  21. 75/100 （Holding together）、10月30日 13:05 UTC

最新の実行で見つかったこと（英語）：

  • Loom Site: 75/100 for structure, governance and use: Holding together.
  • 9 of 9 components identified as interactive have no matching keyboard/focus test in the supplied inputs
  • 11.0 system bypasses per 1,000 lines of consumer code
  • Layer model (system of systems): absent
  • 30 colour values defined more than once under different names
  • 7 of 1816 semantic/component tokens hold literals instead of aliasing a lower tier

ご自身で確かめる

まずは、自社のデザインシステムについてお聞かせください。

私たちはシステムを読み、見つけたことをお見せし、何から直すかをチームと一緒に決めます。

相談する 無料のヘルスチェックを始める