触れる見本と、読む法則の詰め合わせ
1つ目の棚は、オープンソースのUI演出を Web で触れる形に再現した「部品の見本」18件。2つ目の棚は、プロンプトとデザインの「法則ライブラリ」9枚の読み物カードです。上のメニューから分類ごとに棚をたどれます。右下のガラスの輪ボタンからも、どちらの棚へも移動できます。
部品の見本
触って試せるデモ — 18件
待機・表示
待機・読み込みと、文字や数字の出現
ガラス
透ける質感の部品
操作の手触り
押す・伸びる・開く部品
法則
部品ではなく、比率の決め方
法則ライブラリ
読むカード — 9枚
プロンプトの法則
AIの想像力を引き立たせる指示の型
デザインの法則
画面づくりの判断の型
考え中の玉
点の集まりが立体的にうごめく、AIの「考え中」を表す待機表示。形を切り替えると、点群がほどけて次の形へ移ります。
速さ
- ライセンス
- MIT原案者 Jakub Antalik の著作権表示が併記されている。
- 想定用途
- AIの処理中・応答生成中の待機表示。スピナーより「考えている」感触が伝わるので、チャットやエージェント系のUIに向く。
- 実装メモ
- 球面に等間隔で点を置き（フィボナッチ球）、回転と奥行きで大きさ・濃さを変えている。形の切り替えは座標の補間で表現。
読み込み表示
CSSだけで作るミニマルなスピナー8種。タイルを選ぶと大きく表示されます。単色なのでモノトーンのUIにそのまま馴染みます。
- ライセンス
- MIT
- 想定用途
- アプリの読み込み中表示の第一候補。CSSのみで軽く、色は currentColor で差し替えられる。
- 実装メモ
- 回転・脈動・バウンドなど、すべて @keyframes のみで実装。JSは選択の切り替えだけに使っている。
点の波
ドットの格子が静かに波打ち、触れた（クリックした）所から波紋が広がる背景演出。Canvasの上をなぞってみてください。
波の高さ
クリック／タップで波紋
- ライセンス
- MIT（ProcessingField）
- 想定用途
- 処理中表示や、触って反応する背景。トップ画面や待機画面の「生きている」質感づけに。
- 実装メモ
- 正弦波の重ね合わせで常時うねらせ、ポインタ位置から減衰する波紋を加算して点の大きさと位置に反映している。
リキッドガラス
背景が透けて屈折して見えるガラス質感。パネルはドラッグで動かせます。下のボタンもガラス製です。
SAMPLE SCENE
Glass
ガラスのパネル
ドラッグで動かすと、下の文字や輪が歪んで透けるのが分かります。縁のハイライトが液体っぽさの鍵です。
パネルをドラッグできます
- ライセンス
- MIT
- 想定用途
- フローティングなパネル、ツールバー、写真の上に浮く操作UI。背景が賑やかな画面ほど効果が出る。
- 実装メモ
- ここでは backdrop-filter のぼかし＋彩度と、内側のハイライトで質感を作っている。本家のSVG変位を使うと屈折まで再現できる。
ガラスの輪メニュー
中央のボタンを押すと、項目が円形に開くラジアルメニュー。項目を選ぶと閉じます。
中央のボタンを押して開きます
- ライセンス
- MIT（radialMenu）
- 想定用途
- キャンバス系ツールの右クリック代替、ツール切替の円形セレクタ。指の届く範囲に選択肢を集められる。
- 実装メモ
- 項目は角度計算で円周上に配置し、開くときは少し行き過ぎて戻るバネ曲線で順番に遅らせて出している。
ガラス区切り
選択中の項目の下を、ガラスの帯が滑って移動するセグメントコントロール。
表示範囲：日 単位で集計しています
- 出典
- SwiftPieces の「ガラスのモード棒」の動きを見本に、CSSとJSで自前実装（コードの複製なし）。
- ライセンス
- MIT + Commons Clause見本元の条件。動きを参考に自分で実装する範囲で使っている。
- 想定用途
- 期間切替、モード切替など「排他的な選択」を静かに示す場面。帯の移動で「切り替わった」ことが目で追える。
- 実装メモ
- 帯は transform で移動し、行き過ぎて戻る緩いバネ曲線にするとガラスの重みが出る。下地に模様を置くと透け具合が確認できる。
長押し確定
押し続けるとプログレスが満ちて、満ちきった時だけ確定するボタン。途中で離すと戻ります。
1.2秒押し続けると確定します
- 出典
- SwiftPieces の「長押し確定」の動きを見本に、プログレス＋タイマーで自前実装（コードの複製なし）。
- ライセンス
- MIT + Commons Clause見本元の条件。部品そのものの販売・再配布は禁止されているため、再現は自前実装に留めている。
- 想定用途
- 削除・送信・確定など、間違えて押すと困る操作の誤操作防止。自作ツールの「取り返しのつかない実行」に相性が良い。
- 実装メモ
- 押下中だけ進み、離すと少し速く巻き戻る。満ちる瞬間に色が反転すると「確定した」が触覚的に伝わる。
液体スイッチ
玉が伸びて、糸を引くように切り替わるトグル。スイッチ全体がタップ範囲です。
- 出典
- SwiftPieces の「液体スイッチ」の動きを見本に、SVGの gooey フィルターで自前実装（コードの複製なし）。gooey 自体は定番のSVGフィルター手法。
- ライセンス
- MIT + Commons Clause見本元の条件。手法自体は一般的なもの。
- 想定用途
- 設定のオン／オフなど、状態変化を楽しく見せたい場面。実務UIでは控えめに、遊びのある画面で映える。
- 実装メモ
- 玉と「尾」の円をぼかしてからコントラストで締めると、重なった部分が溶けてつながる。尾を少し遅らせると糸を引く。
扇のカード
束ねたカードが、下端を軸に扇状に開きます。開き具合はスライダーでも変えられます。
開き具合
- 出典
- SwiftPieces の「扇のカード」の動きを見本に、CSS 3D transform で自前実装（コードの複製なし）。
- ライセンス
- MIT + Commons Clause見本元の条件。
- 想定用途
- 重なった選択肢を一覧させる、コレクションやカード型UIの展開。狭い幅で多くを見せたい時。
- 実装メモ
- transform-origin をカード下端の少し下に置き、角度差をつけて回すだけ。遷移に少し行き過ぎる曲線を付けると紙のしなりが出る。
めくるカード
タップするとカードが3D反転して、裏面の情報を見せます。
いまは表面です
- 出典
- SwiftPieces の「めくるカード」の動きを見本に、CSS 3D transform で自前実装（コードの複製なし）。
- ライセンス
- MIT + Commons Clause見本元の条件。
- 想定用途
- 表に概要・裏に詳細を置くカード。作品カードの裏に制作メモ、名刺型UIなど。
- 実装メモ
- 親に perspective、内側に preserve-3d、両面に backface-visibility: hidden。回転軸を縦にすると「めくる」感触になる。
ゴムのボタン
押すと潰れ、離すとバネで戻る弾性ボタン。戻るときに少し行き過ぎて震えるのがゴムらしさです。
バネの強さ
scale 1.00
- 出典
- SwiftPieces の「ゴムのボタン」の動きを見本に、JSのバネ物理シミュレーションで自前実装（コードの複製なし）。
- ライセンス
- MIT + Commons Clause見本元の条件。
- 想定用途
- 主要ボタンの押下フィードバック。確定・送信など「押した」手応えを残したい場面に。
- 実装メモ
- 目標値との差に比例する力＋減衰で毎フレーム計算する素朴なバネ。イージング関数より「物理っぽい」震えが作れる。
黄金比スケール
部品ではなく「比率の法則」の展示。基準フォントサイズを1つ決めると、余白・角丸・見出し・行間がすべて黄金比 φ ≈ 1.618 の比率列で連鎖して決まります。
カードの見出し
本文のテキストです。余白と角丸と行間は、すべて基準サイズから比率で計算されています。
φ = 1.618
基準フォントサイズ
14px
- ライセンス
- 表記に不一致LICENSE実ファイルは Apache 2.0 だが、READMEのバッジは GPL2 表記。公式が現行版を「本番利用は非推奨（書き直し中）」としている点もあり、部品としては採用せず法則の参照に留める。
- 想定用途
- 自作ツールのデザイントークン（CSS変数の余白スケール等）を「なんとなく」から「数式で決める」に寄せる時の法則集。比率列の数値を自分の CSS 変数に書き写す形で取り込める。
- 実装メモ
- ここでは 余白 = 基準 ÷ φ² / ÷ φ / 基準 / × φ / × φ²、角丸 = 基準 ÷ φ、見出し = 基準 × φ、行間 = φ に固定。基準を動かすと全部が連動する。
- 関連
スケルトン表示
読み込み中、本文の代わりに「骨組み」を先に見せる表示。グレーの塊に微かな光が流れ、数秒後に本文カードへ切り替わります。
デザインの法則メモ
SAMPLE — 2026.11
読み込みが終わると、本文がここに現れます。先に骨組みの形を見せておくと、待っている間の「何もない時間」が消えて、体感の待ち時間が短くなります。
FIGURE
読み込み中…
- 出典
- 特定のOSSの複製ではなく、読み込みUIの定番パターン「スケルトンスクリーン」を、光の流れるシマーつきで自前実装。
- ライセンス
- 自前実装パターン自体は一般的なもの。
- 想定用途
- 記事・一覧・カードの初回読み込み。スピナーより「もうすぐ出る」予告になるので、体感速度の改善に効く。
- 実装メモ
- 骨組みは本文と同じ寸法で作るのが要点。切り替え時にレイアウトが動かないので、読み終わった位置がずれない。シマーはグラデーションを横に流すだけ。
文字の出現
テキストが1文字ずつ、ぼんやり（ブラー）から鮮明になりながら、わずかに浮き上がって現れる出現演出。見出しやタイトル向けの静かな動きです。
再生ボタンでもう一度流せます
- 出典
- 特定のOSSの複製ではなく、文字単位に遅延をつけるスタッガー出現の定番手法を、ブラー＋上昇で自前実装。
- ライセンス
- 自前実装手法自体は一般的なもの。
- 想定用途
- 作品タイトル、ページ見出し、章の扉。派手な動きより「静かに現れる」方が作品系の画面に馴染む。
- 実装メモ
- 文字ごとに span 化し、animation-delay を少しずつずらす。ブラーの解除と上昇を同時にかけると、焦点が合っていくような見え方になる。
カウントアップ
数字が0から目標値まで、最初は速く・最後はゆっくりとイージングで増えていく表示。目標値を切り替えると、その場で数え直します。
目標値
- 出典
- 特定のOSSの複製ではなく、数値アニメーションの定番手法（イージング＋requestAnimationFrame）を自前実装。
- ライセンス
- 自前実装手法自体は一般的なもの。
- 想定用途
- 統計・金額・件数・進捗率の提示。数字が「育つ」動きがあると、ただの表示より目に留まる。
- 実装メモ
- イージングは easeOutExpo 系（最初速く、終わり際は滑らかに収束）。桁区切りと小数桁は目標値ごとに切り替えている。
トースト通知
画面の下部に、ガラス質感の小さな通知が静かに現れて数秒で消えるフィードバック部品。成功と情報の2種があります。
3秒ほどで自動で消えます
- 出典
- 特定のOSSの複製ではなく、モバイルUIの定番パターン「トースト」を、この見本帳のガラス質感（半透明＋ぼかし＋縁のハイライト）で自前実装。
- ライセンス
- 自前実装パターン自体は一般的なもの。
- 想定用途
- 保存完了・コピー完了・送信済みなど、操作への軽いフィードバック。ダイアログで止めずに済む連絡に向く。
- 実装メモ
- 出現は少し行き過ぎて戻る曲線、退場はフェード＋わずかな下降。同時に出す場合は縦に積み、古いものから消す。
ボトムシート
画面の下から引き出して使う、ガラスのシート。上のつまみをドラッグすると指に付いて動き、離すと開／閉のどちらかへ吸着（スナップ）します。つまみのタップでも開閉できます。
シートの見本
通知オン
表示テーマ自動
並び順新しい順
表示件数20件
閉じています（見えているのは上部だけ）
- 出典
- 特定のOSSの複製ではなく、モバイルUIの基本部品「ボトムシート」を、ガラス質感＋ドラッグ＋スナップで自前実装。
- ライセンス
- 自前実装パターン自体は一般的なもの。
- 想定用途
- 設定・選択肢・詳細情報の一時表示。別画面に遷移させず、下から「引き出して使う」スマホの基本動作として。
- 実装メモ
- ドラッグ中は指の位置へ直接追随させ、離した瞬間に近い方の状態へバネ曲線で吸着させる。中途半端な位置で止めないのがモバイルらしい手触りの要点。
ゼリースライダー
つまみがゼリー状に伸縮しながら動くスライダー。速く動かすほど横に伸び、止まるとぷるんと戻ります。現在の値は吹き出しで追いかけます。
現在値：50 / 100
つまみはキーボードの ← → でも動きます
- ライセンス
- MIT（Scrubbers）
- 想定用途
- 音量・明るさ・加工の強さなど連続値の調整。標準スライダーより「触っている」感触が強く、ツール系UIの遊びどころになる。
- 実装メモ
- つまみの伸びはドラッグ速度に比例（速いほど横に伸び、縦が潰れる）。離すと行き過ぎて戻る曲線で原形へ。値は吹き出しが常に追随する。
核の原則 — 制約が想像力を跳ねさせる
プロンプトの法則の中心にある考え方。AIへの指示は「自由にさせる」ほど平凡になり、「強く縛る」ほど面白くなる、という逆説です。
要点
AIは自由度が高いと平均に収束する。制約が強いと、AIがその制約を創造的に迂回しながら、意外なコンセプトが出てくる。
無難な答えは、制約によって出せなくなります。するとAIは残った空間の中で迂回路を発明するしかなくなり、その迂回こそが「ありふれていない案」になります。制約は発想の敵ではなく、平均的な手を封じるための道具です。
実務の手順
- 業種だけ決める（例：家具だけ、スキンケアだけ）。土俵は狭く固定する。
- 極端な制約を、AI自身に複数出させる。制約は自分で全部考えなくてよい。
- 気に入った制約を採用して、それを前提に本命のコンセプト生成へ進む。
代表例が家具ブランド「SCAR」で、採用された制約は「接合部を隠すな」でした（詳しくは事例カードへ）。
- 出典
- @nono_ai_archive（韓国の Brand Designer）の公開投稿群。仮想ブランドをAIで作り、指示の仕方を解説する連載より。
- 関連
- ／
原則群 — 指示の7つの原則
プロンプトを書くとき・直すときの実務原則。どれも「平均への収束」を避けるための具体策です。
原則
- 曖昧な命令は平均値を強化する。「作り直して」「あと5つ」「もっと上手く」は禁止。代わりに座標を投げる（ミニマル極端版／ディテール極端版／幾何学強調／有機的形態／タイポ中心）。
- 最初の答えはウォームアップ。AIは最初に一番無難な答えを出す。「47番目くらいに浮かぶコンセプトをくれ。明白な候補は飛ばして」と跳ねさせる。
- 「もっと創造的に」と言わない。先に典型案を出させて、それを避けるべき的にする。全部を逆にするのではなく、ありきたりな文法だけ避けさせる。
- 基準は舞台として外から与える。「デザインアワードに出すと思って」「世界的スタジオのポートフォリオに載る水準で」。「うまく・最善・綺麗に」はAIに通じない。
- プロンプトは長く書かない。「それらしいデフォルト」を1つずつ剥がしていく。望まないデフォルト（高級に、洗練されて）は先に禁止する。
- 修正は数値・対象・代替案で言う。「こうするな」で終わらせず、代わりの姿まで言う。
- 許可も極端に振り切る。「一部隠れてもいい」と言わないと、AIは全部隠してしまう。制約だけでなく、許可も言葉で区切る。
- 出典
- @nono_ai_archive（韓国の Brand Designer）の公開投稿群より。
- 関連
- ／
制約の型 — 7種
極端な制約を作るときの型のカタログ。AIに制約候補を出させる際の「型の指定」にも使えます。
型の一覧
- 禁止リスト先行型 — やってほしくないことを先に列挙して、平均的な手を封じてから始めさせる。
- 業界の暗黙ルール反転型 — その業界では「当然」とされるルールを、あえて逆にする。
- 単一要素固定型 — 色は1色だけ、素材は1種だけ、文字だけ、のように要素を1つに固定する。
- 無関係な単語の衝突型 — 関係のない単語を並べて渡し、その衝突からコンセプトを作らせる。
- 別形式の規則の移植型 — 別の分野や形式のルールを、そのまま対象に持ち込む。
- 順序の逆転型 — 普段の手順や、ものの提示順を逆にする。
- 場面への翻訳型 — 抽象的な要望を、具体的な場面・舞台に翻訳してから渡す。
型は1つに決め打ちしなくて構いません。「業種だけ決めて、型ごとに極端な制約を出させて、気に入ったものを採用する」のが核の原則の手順です。
- 出典
- @nono_ai_archive（韓国の Brand Designer）の公開投稿群より。
- 関連
事例 — 制約から生まれたブランド
極端な制約をかけた結果、生まれた仮想ブランドのコンセプト4件。どの型の制約が効いたかとセットで読むと、型の使いどころが見えます。
事例
SCAR（家具）
制約は「接合部を隠すな」。ネジ・ボルト・接合部の補強材をすべて外部に露出させる家具コンセプト。「隠す」という家具デザインの平均手が封じられ、露出そのものがブランドのアイデンティティになった。ブランド名の提案まで含めて概念が固まっている。
KINONO'S（冷凍フレンチトースト）
「ありふれて失敗するアイデア10個」を先に出させて、全部を禁止してから作ったブランド。典型案を「避けるべき的」にする原則3の実例。
waste less.（スキンケア）
エコ系ブランドの「神聖なルール」をあえて破り、赤地に巨大タイポで組んだコンセプト。業界の暗黙ルール反転型の実例。
AEONONO
「蛇口・砂時計・ダイヤモンド」の3語だけを渡して生まれたコンセプト。無関係な単語の衝突型の実例で、渡す材料は少なくていいことの証明でもある。
- 出典
- @nono_ai_archive（韓国の Brand Designer）の公開投稿群より。
- 関連
- ／
床と型の区別
ガイドラインやルールを書くときの、効く／効かないの分かれ目。プロンプトの法則と同型の原則です。
要点
DESIGN.md は床であって型ではない。
床とは、禁止事項と下限のことです。「これだけはするな」「ここを下回るな」という線引きは、発想を跳ねさせます。平均的な手が封じられる分、残った空間で工夫が生まれるからです。
型とは、なぞる手順のことです。「こういう順番で・こういう見た目で」と手順や外形を細かく指定すると、発想は平均に戻ります。ガイドラインを厚くするほどAIの出力が平板になる、という観察（かだんさん）とも重なります。
使い分け
- 守らせたいのは概念レベルの制約（ルール・禁止・素材・構造）→ 床として書く。
- 見た目や手順の細部 → 型として固定せず、判断の余地を残す。
プロンプトの法則の「制約が強いと跳ねる」と矛盾しません。跳ねさせるのは概念の制約で、平均に戻すのは手順の指定です。
- 出典
- fuki 自身の運用原則（DESIGN.md の位置づけ）。プロンプト側の同型の原則は @nono_ai_archive の投稿群にも見られる。
- 関連
シングのノウハウ要点
レイアウトを組むときの判断の順番。約30投稿から抽出された6部構成の法則集の、核になる5点です。
要点
- グリッド＝基準として先に置く。要素を置く前に、揃えるための基準線を決める。
- まとまりの数を決める。要素をいくつのグループに分けるかを先に決めると、散らからない。
- 強さは3段階でつける。大小・濃淡の差は、弱／中／強の3段で十分に伝わる。それ以上細かくすると差が見えなくなる。
- 重なりで奥行きを作る。要素を少し重ねると、前後関係が生まれて画面に深さが出る。
- 空ける場所を先に決める。置く場所ではなく、空ける場所（余白）を先に確保してから組む。
- 出典
- シング（@thingnld）のデザインノウハウ投稿群より要約。
bokoko33 のサイト設計3つの型
サイトを「読むページ」から一段進めるための設計の型。bokoko33.me の作りから抽出された3パターンです。
3つの型
- 型1 — サイトを「触る道具」として作る。読む・見るだけでなく、触って何かが起きる場所として設計する。
- 型2 — 相手の本業の素材そのものを UI の入力にする。その人の仕事の中身（素材・データ・工程）を、そのまま画面の入力や主役に据える。
- 型3 — 世界観を UI の文法にまで通す。色や雰囲気だけでなく、操作の仕方や言葉づかいまで世界観で統一する。
3つは排他ではなく、重ねるほど「その人にしかないサイト」になります。
- 出典
- bokoko33（bokoko33.me）のサイト設計の分析より。
ye_jji の型 — 作品アーカイブ
グッズ販売のページを「売り場」ではなく「作品のアーカイブ」として組む型。お洒落さと動きの軽さで評価された yejji.net の Goods ページの分析です。
要点
- EC の売り場ではなく、作品アーカイブとして並べる。売るための情報より、作品としての佇まいを優先する。
- 年表として並べる。表示は「名前＋年月」だけに削り、時系列そのものを構成にする。
- 絞り込みは最小限に。在庫フィルタは1つだけ。検索や分類で画面を賑やかにしない。
- 購入は外部ストアへ分離する。買う操作はこのページの役目にせず、外のストアへ委ねることで、ページの静かさを守る。
「情報を削るほど作品らしくなる」型で、ポートフォリオや作品一覧にもそのまま転用できます。
- 出典
- ye_jji（yejji.net の Goods ページ）の分析より。
黄金比の比率列
余白や大きさを「なんとなく」で決めず、1つの基準値と比率の数式で決める法則。部品の見本側に、実際に触って試せるデモがあります。
要点
基準値を1つ決め（例：本文のフォントサイズ）、余白・角丸・見出しサイズなどを黄金比 φ ≈ 1.618 の比率列で派生させます。余白なら ÷φ² ／ ÷φ ／ 基準 ／ ×φ ／ ×φ² という階段です。
効く理由は2つあります。1つは、要素どうしの大きさの関係が常に一定の比率で保たれ、画面全体のバランスが崩れにくいこと。もう1つは、「なぜこの余白なのか」に答え（数式）があるので、後から直すときも基準値を動かすだけで全体が連動することです。
取り込み方
比率列の数値そのものは、自分の CSS 変数（余白スケールなど）に書き写す形で取り込めます。フレームワークを入れなくても、法則だけを借りられます。
- 出典
- Chainlift / LiftKit の「フォントサイズから比率で全部を連鎖生成する」考え方。ライセンス表記の注意点はデモ側のメモに記載。
- 関連