First CH Designs
EN

Design Gallery

良いUIを、再現できるかたちで。

First CH の制作現場で生まれたUIを、ソースコードとAI Scriptつきでストックしています。コピーして、そのまま次のプロジェクトへ。

88件のデザイン

ACC-01

FAQアコーディオン

よくある質問の開閉リスト。JavaScript不要の<details>で実装し、開くとプラス記号が45度回って×になる。1問目のみ初期表示。

Elements
BDG-01

ステータスバッジ

管理画面や一覧で状態を示すバッジ。淡い背景色+ドットの組み合わせで、4状態(公開中・レビュー待ち・停止中・下書き)。

Elements
BTN-01

スタンダードボタン

白基調サイトの基本となる3種のボタン。プライマリ(アンバー)・セカンダリ(枠線)・テキストの優先度3段階で構成。

Elements
BTN-02

押し込み3Dボタンシステム

スクワークル形状に厚みを持たせ、押すと面だけが沈む触覚的なボタン群。トーン3種・サイズ3種・アイコン付き/アイコンのみ・トグル・無効・ステッパーまでを1つの規則（深さ／沈み込み＝深さ−2px）で通した、フラットなスタンダードボタンの対になる系。動かすのは transform のみで、押下・トグルON・無効はすべて同じ「沈んだ面」で表す。

Elements
CRD-01

フィーチャーカード

サービス紹介や特徴一覧に使うリンクカード。見出し+説明文+矢印リンクのシンプル構成。ホバーで上部にアンバーの罫線が伸び、わずかに浮き上がる。

Elements
INP-01

テキストフィールド

お問い合わせフォームの基本入力欄。通常状態とエラー状態のセット。ラベル・ヘルパーテキスト・エラーメッセージを含む。

Elements
TYP-01

セクション見出し

LPやコーポレートサイトのセクション冒頭に置く見出しセット。英字アイブロウ+見出し+リード文+アンバーの短い罫線。

Typography
TYP-02

タイプライター＋グリッチ見出し

文字送りの速さ・グリッチ量・ノイズの記号セットを、マークアップ側の data 属性で宣言する見出し。エンジンは props ではなくホスト要素の data-typed-* を毎フレーム読み直すので、実行中に属性を書き換えるだけで即反映され、同じ実装を素のHTML+Vanilla JSへそのまま移植できる（Reactは属性へ値を流すだけ）。属性は外部入力として扱い、読み取り時に必ず clamp する（speed=0の無限ループ・巨大なglitch値を弾く）。打ち替えでレイアウトが跳ねないよう、inline-grid の同じセルへ「最長フレーズのinvisibleサイザー」と「動く行」を重ねて箱の寸法を固定し、ノイズ文字は本文と同じ字幅の全角カナを既定にしてちらつきを消している。prefers-reduced-motion では停止ではなく完成形へ降格し（途中まで打った文字列で固まらせない）、打ち替わる側は aria-hidden、全フレーズを通した素のテキストは sr-only で別に置く。依存ゼロ・2026-08-16。

Typography
TYP-03

風に流れる見出しテキスト

見出しを1文字ずつのマスに分け、同じキーフレームへ文字ごとに少しずつ違う animation-delay を配ることで、揺れが列を横切って伝わる＝風が抜けていくように見せるタイポグラフィ演出。横揺れと縦揺れを互いに割り切れない周期（3.7s / 5.3s）で重ね、遅延の刻みも別（0.09s / 0.13s）にしているため位相が噛み合う瞬間が来ず、ループ感が出ない。振幅は文字ごとの custom property で配るので、キーフレームは1組のまま「旗のように左を固定して右へ行くほど大きく揺れる」も切り替えられる。分割はレンダリング時に行い（後からDOMを差し替えると inline-block 化で行が組み直されて必ずガタつく）、動かすのは transform だけなので行送りも隣接要素も1pxも動かない。1字ずつ inline-block にすると改行判断が変わる唯一の落とし穴は、欧文を単語単位で1マスにまとめ、行頭に置けない約物を直前のマスへ吸収させて回避している。突風は横揺れとは別レイヤーの一発アニメーションで、乱数はレンダリングに使わない（SSRと同じ絵になる）。JS依存ゼロ・prefers-reduced-motion では静止した見出しへ降格・2026-08-22。

Typography
BLK-01

CTAバナー

ページ下部に置く行動喚起ブロック。淡いアンバーのグラデーション面にアイブロウ+見出し+2ボタン。部品ではなくセクション単位の標本。

Blocks
BLK-02

料金プラン

3段階の料金カード。中央の「おすすめ」プランだけアンバーの枠とリングで強調し、ボタンも塗り。LPやサービス紹介ページ用のセクション。

Blocks
BLK-03

制作フロー

番号つきの工程ステップ。制作の流れなど「順序が意味を持つ」内容向け。丸番号を細い罫線で連結し、デスクトップで横並びになる。

Blocks
BLK-04

サービス・ジグザグ（脱カード）

サービス／特徴を3-upのカード羅列にせず、左右交互（ジグザグ）の全幅バンドで縦に積むエディトリアル変種。各行は「ドット方眼の面プレート＋大インデックス数字」と「箱で囲まないテキスト」を12カラム上でorder入れ替えして互い違いに配置し、hairline罫線＋広い余白でグルーピングする。画像素材ゼロ。アンバー罫線とMontserratの巨大アウトライン数字で標本的な編集感を出す（他社サイトに見られる互い違いブロック構図を参考にブランド再構築・2026-07-27）。

Blocks
BLK-05

強み・数字（宣言型スタッツ）

「選ばれる理由・強み」を数字で言い切る宣言型ブロック。1つのKPIをfeature statとして巨大タイポで支配的に置き、残り3つをhairline罫線で仕切ったsupporting行に従える（少数の主張の階層化）。数字はIntersectionObserverで画面内に入るとrAFで0→目標値にカウントアップし、tabular-numsで桁幅を固定してガタつきを防ぐ。カードで囲まず罫線＋余白でグルーピングし、画像素材ゼロで成立。prefers-reduced-motion時はカウントせず最終値を即表示（他社サイトに見られる数字・宣言型構図を参考にブランド再構築・2026-07-28）。

Blocks
BLK-06

実績・事例（グリッド）

制作実績・導入事例を情報密度高く一覧するブロック。影付きカードの羅列ではなく、gap-pxのhairline罫線で仕切った「レジャー（台帳）」で並べ、各事例に疑似ロゴ・ロックアップ（モノグラム＋欧文社名／画像ゼロ）・業種タグ・巨大ゴースト番号を与えて一覧の律動を作る。ホバー（＋キーボードfocus）で抜粋がフェードイン／矢印がスライドし、抜粋の高さは常に予約してリフローを起こさない。業種フィルタはhiddenトグルでリフローアニメを付けず即時に絞り込み、件数はaria-liveで通知。IntersectionObserverでスクロールインするとスタッガーでリビール、prefers-reduced-motion時は即最終状態（他社サイトの事例紹介に見られる情報密度と律動を参考にブランド再構築・2026-07-29）。

Blocks
BLK-07

お客様の声（引用の主従・声の台帳）

「お客様の声」を、引用の主従で見せるブロック。1件を主となる声として大きな引用文で置き、氏名・属性はamber hairlineを添えて控えめに従える。残りの声はカードで囲まず、左に縦レール1本＋divide罫線で束ねた“声の台帳”として並べる。Swiperに頼らず、各証言のマーカーへ共有keyframeをanimation-delayでずらして掛けることで、明滅のハイライトが縦に流れる律動をCSSだけで作る（マーカーは各行にアンカーされるので行高が可変でも整列が崩れない）。氏名は医療系サイトにならいイニシャル・年代・属性で個人を特定しすぎず添える。画像素材ゼロ・prefers-reduced-motion時は静的マーカーと即時表示にフォールバック（参考: 参考サイトKB 医療系サイト群の声の見せ方をブランド再構築・2026-07-30）。

Blocks
BLK-08

グローバルヘッダー・ナビ

ロゴ左・ナビ右のコーポレート定番ヘッダー。CTAはナビ右端に1本だけ置き、縦hairlineで主従を仕切る。スクロールすると背景（bg-white/90 + backdrop-blur）が opacity で立ち上がり、下端のhairlineが左からワイプして出る（高さ・paddingは動かさないのでリフローなし）。SPはハンバーガー→フルスクリーンオーバーレイ（Escapeで閉じる・閉じている間はinertでtab到達を止める）。スキップリンク同梱・画像素材ゼロ。ギャラリー表示用にスクロールするデモシェルとダミー本文を同梱している（他社コーポレートサイトに見られるヘッダー構造を参考にブランド再構築・2026-08-02）。

Blocks
BLK-09

サイトフッター

白地にhairlineの区切りだけで組む3段フッター。1段目=サービス／会社案内／法務の多段リンク（SPは横罫の積み上げ・PCは縦罫の列にdivideの向きを入れ替える）、2段目=小さく再掲したロゴ＋住所1行＋電話・受付、3段目=コピーライトと「トップへ戻る」。背景の色面もカードも使わず、ページ末尾を重くしない。ロゴはワードマークだけに落としてヘッダーと役割を衝突させない。上端のアンバーtickはIntersectionObserverで1度だけ左からワイプし、リンクのホバーは文字の2px移動と下線のscale-xのみ。画像素材ゼロ（他社コーポレートサイトに見られる3段フッター構造を参考にブランド再構築・2026-08-03）。

Blocks
BLK-10

CTA（スプリット帯）

本文の流れに差し込む横長のCTA帯。左に和文ラベル+見出し+短い説明、右にPrimary/Secondaryの2ボタンを置き、内側は縦罫1本だけで分割する。極薄アンバー（bg-amber-50/60）は行動側のカラムにだけ敷き、左は白のまま余白で押す。既存 cta-banner（BLK-01・中央寄せのグラデ面）と対になる「罫線」型で、ページ末の締めではなく通過点のCTAに効く。画像素材ゼロ（他社コーポレートサイトに見られる下部コンバージョン帯の構図を参考にブランド再構築・2026-08-04）。

Blocks
BLK-11
Blocks
BLK-12

お問い合わせフォームセクション

既存の text-field（INP-01）の入力欄トークンをそのまま継承し、部品からセクションへ組み上げたお問い合わせフォーム。左に見出し＋連絡手段（返信目安・受付時間・電話・費用）、右にフォーム本体を置き、外枠なし・border-y と lg:divide-x の罫線1本だけで束ねる（カード羅列にしない）。氏名／会社名／メール／本文／同意チェック／送信ボタンに必須・任意バッジを付け、送信時に全件検査 → エラーサマリへフォーカス移動 → 各行のボタンで該当欄へジャンプ、以後は入力に追随して再検査する。必須項目の充足はhairlineの進捗メーターで示し、送信後は完了パネルへ差し替えてフォーカスを受け止める。参考元は特定サイトではなく全案件の標準スコープ（検収チェックリストのフォーム項目）。画像素材ゼロ。

Blocks
BLK-13

インタラクティブ・カード＆タブモジュール

タブで切り替え、パネルを開くと隣が背表紙だけ残して畳まれる「重なりアコーディオン」。全パネルを展開時と同じサイズで絶対配置しz-indexを昇順にすることで、width/flex-growを一切アニメーションせず translate だけで開閉する（レイアウト再計算ゼロ・依存ライブラリゼロ）。位置は比率のcalcで表現するためResizeObserverもmatchMediaも不要で、縦横の切替はコンテナクエリで純CSS。狭幅では縦アコーディオン、@2xl以上で横アコーディオンに変わる。カード展開＋タブ切替という着想を、コード・文言・配色・構成すべてFirst CHのオリジナルとして再構築した（外部コードの取り込みなし・2026-08-07）。

Blocks
BLK-14

採用セクション（手書き風アクセント）

やわらかいアンバーの色面ブロックと手書き風SVG（うねり下線・粗いリング・矢印）で「人の気配」を出す採用セクション。顔写真を使わずイニシャル円で人物を表し、募集要項の破線フレームと「募集要項を見る／社員インタビューを読む」の2導線を添える。画像素材ゼロ・外部依存ゼロで、モーションは transform/opacity のみ（参考: 保育・教育系の中途採用サイトに見られる色面＋手書き装飾＋顔のない人物図の構図をブランド再構築・2026-08-07）。

Blocks
BLK-15

実績・事例（1件フィーチャー／重ねスタック）

実績を一覧するのではなく、直近の1件だけを大きく掘り下げるブロック。左は画面キャプチャ3枚をわずかにずらして重ねたスタック（画像素材ゼロ・ブラウザクロム＋ワイヤーフレームで自作）で、hoverすると扇状に開く。右はクライアントのロックアップとhairline罫線の諸元リスト。下は課題→打ち手→結果の順に読ませる縦レジャーで、結果の行にだけ数値3点を添える。カテゴリ絞り込みは持たせず、グリッド一覧（BLK-06 work-grid）の対として使う。重なりはtranslate/rotate/scaleだけで作るためリフローが起きず、IntersectionObserverのスタッガー・リビールを含め全モーションがmotion-reduceで初期状態＝最終状態に畳まれる（他社サイトに見られる、実績1件を重ねキャプチャで見せる構図を参考にブランド再構築・2026-08-08）。

Blocks
BLK-16

選ばれる理由・強み（非対称グリッド）

「選ばれる理由」を複数並べつつ、均等グリッドにしないブロック。12カラム上で見出し:本文の比率を 7:5 → 5:5（1カラム分インデント）→ 4:7 → 7:5 とローテーションし、左端を階段状にずらすことで罫線だけでリズムを作る。左脇には縦組みの英字ミニラベルを立て、その下のレールがリスト左端の境界を兼ねる（飾りではなく構図上の役割を持たせる・375pxでは横組みに戻す）。理由は順序を持たないため 01/02 の番号マーカーは使わず、和文ミニラベルで行の性格を示す。カードで囲まず hairline罫線＋余白でグルーピングし、罫線は origin-left の scale-x ワイプで引かれる。画像素材ゼロ・依存ゼロ。数字1本を特大に置く strength-stat（BLK-05）とは別軸の強みブロック（非対称2カラム＋縦組みラベルの構図を他社サイトから参考にブランド再構築・2026-08-09）。

Blocks
BLK-17

スクロール駆動テキスト・リビール

スクロール量そのものを時間軸にして、見出しがマスクから立ち上がり、罫線が引かれ、項目が起き上がってくるエディトリアル演出。JSがするのはrAFで合体させた1本のハンドラがルートへ --p（0→1）と --q（視差用）を書くことだけで、各要素は clamp((--p - --s) / --w, 0, 1) で自分のローカル進捗をCSSのcalcだけで算出する（要素ごとのJSアニメーションもフレーム毎のsetStateもゼロ・依存ライブラリなし）。進捗の分母に要素自身の高さを混ぜているため、ギャラリーの縮小プレビューのように小さく描画されても最後まで到達する。動かすのは transform と opacity だけ、reduced-motion時はCSSで --p: 1 !important を当てて「最初から完成状態」に畳む。スクロールに連動して文字とカードが出現・変形する着想を、コード・文言・配色・構成すべてFirst CHのオリジナルとして再構築した（外部コードの取り込みなし・2026-08-09）。

Blocks
BLK-18

お客様の声（ポラロイド風・重ね置き）

「お客様の声」を、机に置かれた印画紙として見せるブロック。白フレーム＋影のカードに -3.4°〜+2.9° の傾きを個別に与え、段差と前後関係で少しずつ重ねる。整列した台帳型の testimonial-voices（BLK-07）との差は“整列の有無”で、こちらは親しみ・手作り感を担当する。顔写真は使わず、印画紙の窓にイニシャル円と声そのものを入れ、下の太いフチに手書き風（Yomogi）の署名＋アンバーの一筆線を置いて人格を出す。静止姿勢が transform のため reveal と hover が衝突する問題は、外側liがtranslate-y/opacity・内側が rotate という2層分割と、animation-fill-mode:backwards の keyframe（終了キーフレーム＝静止姿勢）で解いている。傾いた文字は読みにくいので各カードを tabIndex=0 でフォーカス可能にし、hover/focus-visible でまっすぐ持ち上げる。画像素材ゼロ・prefers-reduced-motion 時は即時表示（採用サイトに見られる「傾き重なりポラロイド風写真カード」の構図を参考にブランド再構築・2026-08-10）。

Blocks
BLK-19

会社概要・アクセス（地図＋実写サムネイル）

来社手段（電車／バス／お車）をタブで切り替え、inline SVG の簡易地図に経路と番号ピンを描き、右に「目印になる景色」のサムネイルを並べたアクセスブロック。観光サイト（明日香村観光サイト「あすか時間」）の"場所をカテゴリに分けて実写サムネイルを地図的に配置する"情報構造を、コーポレートの動線案内へ転用した。既存 BLK-11 会社概要・アクセス（定義リスト型＝会社を知る）の対で、こちらは『行き方が分かる』ことに全振りしている。目印カードにホバー／フォーカスすると地図のピンが連動し、経路は点の opacity を負のdelayでずらすことで進行方向へ流れる。外部地図APIも画像素材も使わず依存ゼロ。

Blocks
BLK-20

3Dティルト・ホバーカード表現

hairline罫線のレジャー（台帳）に並べた実績のうち、カーソルを重ねた1件だけがマウスに追従して傾き、台紙から起き上がる実績ブロック。追従値は React の state ではなく CSS 変数（--tx/--ty/--px/--py）へ直接書き込むため再レンダーはゼロ、rect は pointerenter で1回だけ測りスクロール時のみ測り直す。回転・層ごとの視差（translateZ）・光沢の移動はすべて transform と opacity だけで表現し、追従90ms／離脱650msの時定数も CSS 変数で切り替える。ライブラリ依存ゼロ。精密ポインタ（hover:hover and pointer:fine）かつ prefers-reduced-motion でない環境でのみ配線し、キーボード操作にはティルトの代わりに group-focus-within の罫線と矢印で状態を返す。マウス追従の3Dティルトと層の視差という着想を、コード・文言・配色・構成すべてFirst CHのオリジナルとして再構築した（外部コード・素材の取り込みなし・2026-08-11）。

Blocks
BLK-21

お知らせ・ニュース一覧（罫線リスト）

お知らせを「日付＋カテゴリタグ＋タイトル＋矢印」の1行にまとめ、hairline罫線だけで区切る縦リスト。カード（面・影・角丸）を一切使わないので、件数が増えても縁のノイズが積み上がらない。ニュースは順序を持つ内容ではないため 01/02 の番号マーカーは置かず、行の識別は time要素の日付とカテゴリタグに担わせる。モバイルは日付＋カテゴリを1行にまとめ、md以上では md:contents で wrapper を消して子をそのままgridセルへ昇格させる（同一DOMで2レイアウト）。ホバーはタイトル下線の origin 反転ワイプと矢印の2px移動の2つだけに絞り、面の変化を足さない。カテゴリフィルタも面を持たないテキストボタン＋アンダーラインで、aria-pressed と sr-only の aria-live で状態を伝える。画像素材ゼロ・依存ゼロ（他社サイトに見られる罫線縦リスト構造を参考にブランド再構築・2026-08-12）。

Blocks
BLK-22

タブ切替×文字分解トランジション

タブを押すと、いま読んでいた文字が上へ抜け、次の文字が行の下から立ち上がってくる「文章そのものが入れ替わる」ブロック。GSAP/SplitTextのDOM実測を捨て、行をデータ（string[]）として持つことで、行マスク×文字スタッガーを依存ゼロの純CSSで成立させている。分割は2粒度で、見出しは書記素（Array.from・split("")はサロゲートペアが割れるので不可）、本文は句読点まで含む文節チャンク（1文字ずつinline-blockにすると和文の禁則が効かず行頭に「。」が来るため）。入場は新規マウントでtransitionが走らないのでkeyframes+fill-mode:bothを使い、退場はclassName差し替えでanimation-nameを変えて再生し直す。既存のBLK-13（カード展開が主）との差は、動くのがパネルではなくテキストである点。motion-reduceは自前の@mediaでanimation:none !importantを当て、JS側もout位相ごと飛ばして即時切替に落とす。タブ切替時に本文を文字単位で分解して入れ替える着想を、コード・文言・配色・構成すべてFirst CHのオリジナルとして再構築した（外部コードの取り込みなし・2026-08-12）。

Blocks
BLK-23

取引先・掲載実績ロゴ帯（マーキー）

取引先と掲載メディアを2レーンの無限ループ帯で流すロゴストリップ。ロゴ画像を1枚も使わず、weight・tracking・大小・先頭マークを1件ずつ変えた和欧混在のワードマーク（社名はすべて架空のダミー）で「ロゴらしさ」を作る。上下レーンは逆走＋速度違い（42s/52s）、両端は mask-image で断ち切り、hoverで停止。prefers-reduced-motion では帯ごと落として同じ内容をhairlineの静止グリッドで見せる（イベント系サイトに見られるマーキー帯の構造を白基調コーポレート文脈へブランド再構築・2026-08-13）。

Blocks
BLK-24

軌跡ストランド・キャンバス（パラメータ操作つき）

Canvas 2D 上でカーソルの軌跡を等間隔ノードのロープに変換し、重力・うねり・距離拘束で落として溜める描画ブロック。First CH のワードマークをオフスクリーンに描いて alpha を 0/1 マスクへ落とし、線が字面に当たると弾き返して接点だけをアンバー（#d97706）に灯す。圧力・重力・うねりの3スライダーと消去／自動描画のトグルを hairline 罫線で区切ったパネルに置き、カード羅列を避けた。描いている線はアンバー、置かれた線はインクへ 900ms かけて変わる。prefers-reduced-motion・画面外（IntersectionObserver）・タブ非表示の3条件で rAF を止め、モーション低減時は同じ物理を同期計算した静止フレームを1枚だけ描く（スライダーは再計算として機能するので操作が死なない）。無操作が続くとリサージュ曲線の仮想ポインタが引き継ぐためタッチ環境でも成立する。依存ライブラリゼロ・画像素材ゼロ。軌跡から曲線ストランドを作る発想とpressure/gravity/curlのパラメータパネルという構成を、コード・文言・配色・構図・ワードマークすべてFirst CHのオリジナルとして再構築した（外部コードの取り込みなし・2026-08-13）。

Blocks
BLK-25

沿革・ヒストリータイムライン

縦1本の細線と年号ノードで沿革を刻むタイムライン。IntersectionObserver で1件ずつ「線が引かれ→同心円のノードが描かれ→年号と本文が立ち上がる」順に一度だけリビールする。カードで囲わず hairline と余白だけでグルーピングし、画像素材ゼロ・依存ゼロで組んでいる。年号・出来事は架空のプレースホルダー。

Blocks
BLK-26

メンバー紹介グリッド

在籍メンバーを顔写真ゼロで紹介するグリッド。網点（ハーフトーン）パッチ・細線フレーム・イニシャル円・傾いたキャプション帯の4層コラージュを人物像の代わりに置き、hover と focus-within で層が「開く」。カードで囲わず上罫1本と余白でグルーピングし、IntersectionObserver で一度だけ順にリビールする。画像素材ゼロ・依存ゼロ。人物・役割・ひとことはすべて架空のプレースホルダー。

Blocks
BLK-27

ディレクトリ型メガフッター

情報量そのものを主役に据えたフッター。事業別の4列ディレクトリを、左端に立てた和文縦書きラベル＋縦hairlineの「軸」で束ねる。列の区切りはSPが横罫の積み上げ、PCが縦罫の列で、DOMは1つのまま（divide-xは複数行グリッドで2行目の先頭に罫が出るため使わない）。SPでは各列がaria-expandedの開閉に切り替わり、長いサイトマップでも末尾が伸びない。リンクのホバーは幅ゼロのアンバー罫を先頭に仕込み、文字をtranslate-xで退かせるだけでレイアウトを動かさない。入場は軸のscale-yと列のスタッガーに集約。画像素材ゼロ。

Blocks
BLK-28

サービス紹介（縦長ビジュアル×積層インフォカード）

サービスを3-upのカードで羅列せず、縦長ビジュアル1枚の面に説明カードを積み重ねるブロック。カードは1枚ずつ水平オフセット・幅・直前カードとの食い込みを変え、重ね順はz-index・動きはtransformだけで作るためリフローが起きない。左のビジュアルはグラデーション面＋細線リング・対角バンド・ぼかし円・ドット方眼の重ね合わせで写真素材ゼロのまま枠を確定させ、実案件ではaspectを保ったまま1カットへ差し替えられる。lg以上ではビジュアルがstickyで留まり、読み進める間ずっと『1枚の面に積んでいる』ことが伝わる。カット数の少ない案件で密度を作るための構図で、左右交互配置（BLK-04）やカード羅列（CRD-01）の対として使う。IntersectionObserverのスタッガー・リビールを含め全モーションがmotion-reduceで初期状態＝最終状態に畳まれる。

Blocks
BLK-29

板ポリ・ギャラリー（WebGLカメラ巡回・依存ゼロ）

実績のサムネを6枚の板ポリとして円弧に並べ、カメラ（ビュー行列）の注視点を回して巡る実績ブロック。3Dライブラリは使わず、射影行列・lookAt・モデル行列の3本をJSで組んで素のWebGL（GLSL ES 1.00）へ渡すだけで動く。板は頂点4つのTRIANGLE_STRIPを1個だけ持ち、uniform（MVP・図案番号・面の向き・強調度）を差し替えて6回描くので、バッファもテクスチャも増えない。絵柄は画像ではなくフラグメントシェーダの関数で描くため画像素材ゼロで、板が何枚並んでもネットワーク転送は発生しない。当たり判定はレイを飛ばさず、描画に使ったMVPで4隅を画面座標へ射影して多角形の内外判定を行う（逆行列も交差計算も不要・カメラ背面のw<=0だけ弾く）。ホバーした板は自分の法線方向へ引き寄せて手前へせり出し、同時に下の実績台帳の行が強調される。逆に台帳の行にホバー／フォーカスするとカメラがその板の正面へ回り込むため、キーボードだけでも同じ体験になり、canvasはaria-hiddenの装飾に徹して内容は罫線リスト（DOM）を正にできる。無操作時はパンが端で反転する往復になりループの継ぎ目が出ない。prefers-reduced-motion時はrAFを回さず、円弧をやめた3×2の静止グリッドを1枚だけ描いて強調はアンバーの枠線のみで示す。画面外（IntersectionObserver）とタブ非表示でも停止し、起動直後48フレームの平均フレーム時間が32msを超えたらバッキングストアを0.6倍、それでも超えたらCSSの静的グラデーションへ降りる。webglcontextlostは必ずpreventDefaultで握り、アンマウント時はWEBGL_lose_contextでGPUリソースを明示的に解放する。文言・配色・構成はすべてFirst CHのオリジナル。

Blocks
BLK-30

ガラス質3Dホバーカード

すりガラスの面・光沢の縁・浮いた本文の3層で奥行きを作る実績ブロック。光源はカードごとではなくグループに1つだけ置き、親で受けた1本の pointermove から全カードのローカル座標を毎フレーム算出するため、カーソルの下にないカードにも「近い辺だけが明るい」縁が出る。ポインタ位置から傾き（rotateX/rotateY）を求めるのはホバー中の1枚だけで、追従90ms／離脱650msの時定数まで CSS 変数（--lx/--ly/--near/--tx/--ty/--lift/--tilt-ms）で切り替えるので React の再レンダーはゼロ。白地では半透明板を重ねてもガラスに見えないため、面の背後に斜めの帯とアンバーのブロブ（ぼかし半径より粗い模様＝1px級のドットは消える）を敷いてぼかす対象を作り、暗面の発光縁は明面の光沢ハイライトへ翻訳している。ライブラリ依存ゼロ。精密ポインタかつ prefers-reduced-motion でない環境でのみ配線し、キーボード操作には group-focus-within の光沢リングと矢印で同じ状態を返す（2026-08-18）。

Blocks
BLK-31

実績ショーケース（不揃いグリッド）

通販サイトの商品一覧に見られる「グリッド分割」と「情報の詰め方の優先順位」を、実績・事例の情報設計へ置き換えたブロック。3カラムのうち先頭の1件だけを2×2で大きく取り、残り5件を小サイズで並べて9セルをちょうど埋める。サムネの代わりに制作種別と標本番号のロックアップを置いた画像ゼロのプレート、NEW/SALEバッジの位置に案件ステータス、価格の位置に成果指標（before→after＋変化率チップ）、カラースウォッチの位置に担当した工程の塗り／中抜きドットを配置し、視線の落ち方を商品一覧のまま数字で比較できる実績一覧にした。並び替え（新着順／成果順）で主役の2×2枠そのものが入れ替わる。折り返しはビューポートではなくコンテナクエリ（@container）基準なので、狭い枠に埋め込んでもレイアウトがずれない。リンクはセルにつき1本のstretched link（after:absolute inset-0）で<a>の入れ子を作らず、モーションはtransform/opacityのみ・すべてmotion-reduceで降格する。

Blocks
BLK-32

実績カルーセル（横スクロール・層視差）

アニメーションライブラリを使わず、ブラウザ標準のスクロールスナップだけで組んだ実績・事例カルーセル。トラックは overflow-x-auto + snap-x snap-mandatory なので、ドラッグ・スワイプ・ホイール・キーボードのフォーカス送りは実装せずに手に入る。JSが担うのは「今どこにいるか読む」ことと scrollTo で送ることだけで、送りの緩急はCSSのscroll-behaviorに委ねているため prefers-reduced-motion では自動的に瞬間移動へ降格する。カード内は、スクロール位置から求めた1つのCSS変数（--p）を地紋・アンバー図形・ゴースト番号・種別ロックアップの4層が別々の係数で読み、層ごとの移動量の差で視差の奥行きを作る（Reactのstateは経由せず再レンダーはゼロ）。自動送りは末尾で巻き戻さず進行方向を反転し、停止ボタン・画面外・ポインタ滞在・タブ非表示・reduced-motionの5条件で止まる。画像素材とライブラリ依存はゼロ、リンクはスライドにつき1本のstretched linkで<a>の入れ子を作らない。

Blocks
BLK-33

料金②機能比較マトリクス

プラン×機能を1枚の表で見せる料金ブロック。推奨プランの列だけ薄いアンバー地とバッジで縦に貫き、対応は細線チェック・非対応は淡いダッシュに落として表全体の濃度を均した。価格やページ数は tabular-nums で桁を揃え、狭い画面では先頭列を sticky にしたまま横スワイプで比較できる。

Blocks
BLK-34

制作フロー②スクロール連動ステップ

左の見出しをstickyで残したまま、右の工程リストを読み進みに応じてアクティブ化する制作フロー。縦の進捗罫がスクロール量ぶんだけ伸び、罫線が丸印に届いた工程から順に立ち上がる。対応環境ではCSSのスクロール駆動アニメーション（view-timeline）だけで動きJSはゼロ、非対応環境はrAFで同じCSS変数を書くfallbackに切り替わる。

Blocks
BLK-35

FAQ②カテゴリタブ＋2カラム

「料金について/進め方/納品後」のカテゴリタブで質問を絞り込むFAQブロック。開閉はネイティブの<details>/<summary>のまま、タブは roving tabindex と ←→キーに対応する。広い幅では前半／後半で割った2カラムに並べ、開いても隣の列が動かない。件数バッジはMontserrat + tabular-numsで桁が変わっても幅が揺れない。

Blocks
BLK-36

立方体6面のサービス切り替え

6つの提供領域を「1つの立方体の6面」に載せ、選ぶと最短経路で回ってその面が正面に来るサービスブロック。面は同じ正方形を `<回転> translateZ(calc(var(--cube)/2))` で自分の法線方向へ押し出しただけで、辺の長さはCSS変数1つに集約しているためレスポンシブでも箱が崩れない。角度は0〜360に丸めず連続値として貯め、現在値に最も近い等価角へ寄せてから代入するので、5番目→1番目でも逆回りに大回りしない。正対させると平らなカードと区別がつかないため、外側にもう1枚preserve-3dのラッパを噛ませて固定の傾き（rotateX(-9deg) rotateY(-15deg)）を与え、面の切り替えと見え方の姿勢で回転の役割を分けている。陰影は面に固定で塗らず「正面かどうか」でopacityを出し入れするため、どの面が来ても正面だけが明るい。見た目は3Dでも操作はタブ（縦tablist・ローミングtabindex・矢印/Home/End）で、正面以外の面はinertで読み上げから外す。prefers-reduced-motionでは3Dをやめて平面パネルの差し替えへ降格。ライブラリ依存ゼロ・画像素材ゼロ。

Blocks
BLK-37

お知らせ②ピックアップ＋カテゴリタブ

新着に「主従」を持ち込んだお知らせブロック。最新1件だけを左に大きくフィーチャーし（日付＋細枠カテゴリバッジ＋大見出し＋抄録＋テキストCTA）、残りは右の罫線リストへ畳む。差を付けるのは面や色ではなく文字サイズと余白だけなので、画像素材ゼロでも紙面が立つ。2カラムの境界は縦罫1本、1カラムに畳んだときは横罫へ入れ替える（同じDOMで区切り方だけ変える）。カテゴリ絞り込みは role="tablist" + roving tabindex の正しいタブUIで、←→/Home/End で移動しつつ主役も入れ替わる。切替は key の付け替えによる再マウント＋CSS animation で常に頭から再生し、行は 55ms ずつスタッガー。日付は欧文タブラーで年だけ薄く落とし、カテゴリは塗らない細枠バッジ。0件・1件（従が無い）の状態まで設計に含め、空の罫線枠を残さない。画像素材ゼロ・依存ゼロ。

Blocks
BLK-38

改修前後の比較スライダー

同じ座標に「改修前」と「改修後」の誌面を2枚重ね、境界をドラッグして見比べるブロック。上層は幅ではなく clip-path で削るため、動かしても中身が再レイアウトされず文字の折り返し位置が1pxも変わらない（幅を変える実装では折り返しが動いて「同じ紙面の比較」に見えなくなる）。境界位置は pointermove ごとに CSS カスタムプロパティへ直書きし、React state は rAF で間引いて読み上げ用の数値だけに使う＝指と境界の間に再レンダ分の遅れが出ない。inline style の初期値を state 由来にしないのが要点で、定数で1度だけ書けば以後 React がその属性に触らず直書きが生き残る。setPointerCapture で枠外へ出ても追従し、touch-action は pan-y にして狭幅の縦スクロールを殺さない。BEFOREバッジは上層のDOMに入れて境界が通れば一緒に切れるので、出し分けの状態を持たない。つまみは role="slider" で ←→ 2%・PageUp/Down 10%・Home/End で端まで。誌面は2枚ともDOMで組んであり画像素材ゼロ・依存ゼロ。初回だけ境界が1往復して「掴める」ことを伝え、prefers-reduced-motion では最初から動かさない。2026-08-24。

Blocks
BLK-39

数字で見る会社（hairline格子インフォグラフィック）

会社紹介・採用ページ向けの「数字で見る◯◯」ブロック。創業年数・累計実績・継続率などを優劣なく等価に並べ、カードで囲まずに1pxの罫線だけで格子に束ねる。親を grid gap-px bg-gray-200・セルを bg-white にすることで、隙間そのものが罫線になり列数が変わっても二重線が出ない。数字は特大Montserratのtabular-nums、単位と注記は小さく従える。IntersectionObserverで画面内に入るとrAFで0→目標値へカウントアップし、同じ進捗をamberの計測バーのscaleXにも流して数字と罫線を同じ時間軸で伸ばす。列の折り返しはコンテナクエリ（@md/@2xl）なので狭い枠に埋め込んでも破綻しない。画像素材ゼロ、prefers-reduced-motion時はカウントせず最終値を即表示（2026-08-25追加）。

Blocks
BLK-40

折り屏風カルーセル

板を1枚ずつ別々の消失点で回す横送りカルーセル。perspective をトラックではなくスライドの箱ごとに置くと、板は各自の中心を軸に回るため台形の歪みが出ず、「同じ板が角度だけ違う」＝屏風の折りとして読める。3D空間を共有しないので台紙側を普通に overflow-hidden でクリップでき（preserve-3d との併用と違って潰れない）、代わりに重なり順は DOM 順のままなので中央からの距離で z-index を配る。送り量は flex w-fit のトラック幅が板1枚×N枚である性質を使い translateX(-active * 100/N %) と％で書くため、板幅をブレークポイントで変えても寸法の測定が一切要らない。±90°を超えて回り込んだ板は backface-visibility が自動的に消すので「何枚見せるか」の計算も持たない（折り角を深くすると見える枚数がひとりでに減る）。角度と拡大率は CSS 変数として style で渡し transform 自体はクラスで書く（inline style の transform は media query より強く、モーション降格が効かなくなるため）。動かすのは transform と opacity だけ・依存ゼロ・prefers-reduced-motion では回転と遷移を捨てた素の横並びへ降格・2026-08-25。

Blocks
BLK-41

代表メッセージ（縦書きアクセント×エディトリアル）

会社案内の「代表挨拶」ブロック。写真も肩書きバッジも使わず、縦組みの本見出し1本と横組み2段の長文本文という組み方向の対比だけで格と余白をつくる。縦組みは高さ折り返しをブラウザに任せず1行=1要素をflex-row-reverseで並べて改行位置を固定し、行ごとの字下げも効かせる。強調は色や太字ではなく傍点（text-emphasisのfilled sesame・アンバー）、半角数字は縦中横（text-combine-upright）で立てる。本文はmulti-columnの流し込み＋段間hairlineで、狭い枠ではコンテナクエリで1段に戻る。動きは掛け軸を下ろすような縦マスクリビールと罫線のscaleだけで、transformとopacityしか触らない。角丸・英字キッカー・末尾の矢印リンクは使わず、締めは肩書き＋署名（2026-08-26追加）。

Blocks
BLK-42

深度視差ワードウォール（5層・掴んで送れる無限流し）

取り組み領域のキーワードを、速度の違う5層に分けて無限に流す帯。canvasもWebGLも使わず素のDOM要素を translate3d で動かすので、流れている語はテキストのまま選択・フォーカスでき、手前2層はボタンとしてキーボードで辿れる。無限ループは要素の生成破棄ではなく「レーン長の剰余」で作り、余った隙間は要素数で割って自動的に均す。ドラッグと横ホイールで送り量と進行方向を掴み替えられ（縦ホイールはページへ通す）、語を選ぶと流れが止まって説明が出る。prefers-reduced-motion では流さず、同じ語をhairlineの一覧として静止表示する。依存ゼロ。

Blocks
BLK-43
Blocks
BLK-44

選ばれる理由③ 自社と他の選択肢の比較

依頼先の選択肢と自社を並べて見せる比較ブロック。○×の記号表にせず、同じ観点について短文どうしを突き合わせて差を語る。比較相手は切替チップ（radiogroup・矢印キー対応）で1者ずつ選ぶため、狭い画面でも横スワイプや固定列を使わずに読み切れる。自社側は12カラム上で幅広に取り、本文と同じグリッドを重ねた1枚の帯で薄いアンバーの柱を通す（塗りは常時・立ち上がるのは縦罫1本だけなのでJSに依存しない）。最終行を「向いている場面」にして相手側の利点も書き、特定企業ではなく体制の傾向である旨の注記を添える。画像素材ゼロ・依存ゼロ。

Blocks
BLK-45

課題共感→解決ブリッジ（こんなお悩みありませんか）

悩みの列挙をカードにせず、hairline罫線＋チェックボックスの本物のチェックリストにしたLP定番の課題提起ブロック。読むだけの一覧ではなく複数選択でき、選んだ課題に対応する打ち手だけが下の転換帯に残る（ゼロ件のときは絞り込みを解いて全件を表示し、空白を見せない）。共感パートと解決パートは、scale-yで下へ伸びる縦罫と rotate-45 の三角だけでつなぐ。温度を変えるのは転換帯の面1枚だけで、bg-amber-50/70 と border-amber-600/25 に切り替え、上のリストは白のまま残す。件数の変化は aria-live="polite" の1文に集約し、リスト自体は live にしない。角丸ゼロ・英字キッカーなし・末尾の矢印リンクなし。画像素材ゼロ・依存ゼロ。

Blocks
BLK-46

資格・認証・受賞バッジ帯（標本枠＋取得年レール）

ISO・適合・受賞などの信頼要素を、ロゴ画像に一切頼らずタイポと細枠だけの標本バッジで掲示する帯。6件を取得年の昇順に並べ、カードで囲まず gap-px + 下地色の hairline で束ねる。各バッジは欧文ロックアップを四隅トンボ付きの細枠に収め、取得年を tabular-nums で下端にそろえる。hoverとキーボードフォーカスで一言説明のツールチップが開き、帯・セル・吹き出しの3つのrectを測って left を帯の内側へクランプするため端の列でも枠外へ出ない（三角だけは別途セル中央を指す）。読み上げ用の説明はボタン内の sr-only に常設し、aria-describedby のトグルに依存しない。帯の下には取得年の目盛レールを敷き、選択中の年のマーカーが translateX(%) だけで移動する。掲載内容はすべて表示サンプル。

Blocks
BLK-47

資料ダウンロードCTA（表紙モック＋最小フォーム）

配布資料の受け取りを促すCTA。文とボタンだけで押すのではなく、渡すものの実体を左に置く。表紙は画像素材を使わず、perspective と preserve-3d の上に「表紙・中の紙束・背表紙」の3面を立てて組んだ立体モックで、入場で角度が起き、hover でさらに正面へ向く。右は目次抜粋（章番号・タイトル・点線のリーダー罫・掲載ページ）と、欄が1つだけのフォーム。最上段には英字キッカーではなく配布物の書式（PDF・全24ページ・無料）を実務情報として敷く。角丸はどこにも使わず、罫線と余白だけで束ねている。送信すると完了パネルへ差し替えてフォーカスを受け止め、送り直しでは入力欄へ戻す。掲載内容はすべて表示サンプル。

Blocks
BLK-48

ブログ・コラム抜粋（エディトリアルリスト）

読了目安を第一の軸に据えた記事一覧。行の左端に読了分数を特大の欧文数字で置き、その下に最長記事との比で長さを固定したバーを敷くので、サムネイル画像がなくても「どれがどれくらい重いか」が一目で比較できる。数字が表すのは順序ではなく量なので、01/02 の番号マーカーのように手順へ誤読されない。並べ替えは新着順と読了目安の短い順の2つで、絞り込みと違って件数が変わらないため、件数ではなく「何順になったか」を sr-only の aria-live で伝える。カテゴリは枠付きバッジにせず文字色と hairline の縦罫だけで仕分け、行は面（背景・影・角丸）を一切持たない。hover では見出し下線の origin 反転ワイプとバーの overlay 表示だけを動かし、バーの長さは変えない（操作でデータの見た目を歪めない）。矢印リンク・英字キッカー・角丸は使わない。画像素材ゼロ・依存ゼロ。

Blocks
BLK-49

セミナー・イベント一覧（開催日ブロック型）

左端に月／日を特大のタブラー数字で積んだ日付ブロックを起点にする、セミナー・イベントの開催日一覧。1行が席という在庫を持ち、残席の状態（受付中／残りわずか／満席／受付終了）が席数ぶんの目盛りゲージ・申込締切・操作の可否をまとめて切り替える。満席回と終了回はカードではなく傾いた判子で示し、終了した回はスイッチで開閉する。角丸・英字キッカー・矢印リンクを使わず、hairline罫線と余白だけで月ごとに段を作る。画像素材ゼロ・依存ゼロ。

Blocks
BLK-50

拠点・店舗一覧（罫線グリッド）

複数拠点を1枚の台帳として横断比較させる一覧ブロック。拠点名・所在地・電話・営業時間を同じ列に揃え、角丸も影も面の塗りも使わず、横罫と縦罫の直交だけで律動を作る。現在時刻から各拠点の営業状況（営業中／まもなく終了／本日休業）を算出して表示し、エリア絞り込みと「営業中のみ」の2操作で候補を絞れる。電話は tel: リンク＋タブラー数字、地図は細字のテキストリンクに留めた。地図・写真を持たないため画像素材ゼロで成立する。

Blocks
BLK-51

対応エリア（簡略マップ＋エリアリスト）

「自社がどこにあるか」ではなく「相手の住所が範囲に入るか」を答える対応エリアブロック。実地図を使わず、共有格子点をジッタさせた自作SVGの区割り図に当日対応・翌営業日・要相談・対象外の4段をアンバーで塗り分け、右に市区町村の可否台帳（読み・出張費・最短訪問・条件）を並べる。地名や読み・区分名での検索が図と一覧を同時に絞り込み、hover/focusで図とリストが相互にハイライトする。塗りは拠点からの距離順に広がる。画像素材ゼロ・依存ゼロ。

Blocks
BLK-52

電話一次CTA帯（タップトゥコール）

電話を一次導線に置くCTA帯。最大の活字は見出しでもボタンでもなく電話番号そのもので、番号がそのまま tel: のタップ領域になる。狭い幅では全幅のアンバー面（タップで発信）、sm 以上では下線の引ける大活字へ戻る同一アンカー。上段には現在時刻から求めた受付状態（受付中／時間外・次の受付）を出し、右カラムに平日・土曜・日曜祝日の受付時間表を置いて今日の行に印を付ける。通話料無料などの注記は従、メール相談と折り返し予約は細字の下線リンクに落とす。角丸・英字キッカー・末尾の矢印は使わず、罫線と余白だけで束ねている。番号と時間はすべて架空の表示サンプル。

Blocks
BLK-53

空き枠カレンダー直結CTA

予約導線を二段にしたCTA。押す前に選ばせる型で、主役は文でもボタンでもなく在庫そのもの。直近1週間の日付を列、午前・午後・夜間を行に取ったマトリクスへ空き状況（◎空きあり／○残りわずか／×満席／–受付なし）を並べ、記号の意味は表の前の凡例で先に渡す。空きのある枠だけが押せるボタンで、満席の枠は disabled にしてタブ順から外す。枠を選ぶと選択面がスケールで立ち上がり、その列の日付見出しにアンバーの罫が入り、最下段の要約が日付・曜日・時間帯を文で読み上げ、それまで灰色だった予約ボタンが活性化する。今週／翌週の切り替えつき。日付はマウント後に描いて hydration のずれを避けている。角丸・英字キッカー・矢印リンクを使わず、hairline罫線と余白だけで束ねた。日付・空き状況はすべて架空の表示サンプル。

Blocks
BLK-54

候補選択→送信の2段CTA

選択がそのまま依頼文になる2段CTA。主役はボタンではなく、上段に置いた「（内容）を（時期）進めたい。」という穴埋め文で、空欄は未選択なら灰色の点線罫、埋まるとアンバーの実線罫に変わる。相談内容（新規制作／リニューアル／改善）と進めたい時期（今すぐ／3か月以内／検討段階）を1問ずつラジオで選ぶと、文字が下から持ち上がって空欄に入る。候補にホバーまたはキーボードでフォーカスするだけで文が先に書き換わるプレビューつきで、押す前に出来上がりが読める。選んだ内容に連動して「最初に伺うこと」3点・初回返信の目安・送信後に届くものが入れ替わり、送信ボタンの文言も「2つ選ぶと送信できます」→「あと1つ選ぶと送信できます」→「◯◯の相談を送る」と変わって、2つ揃うまで disabled のまま寸法だけ確保する。見える文は aria-hidden にし、確定した選択だけを sr-only の aria-live へ流すのでプレビューでは読み上げが暴れない。角丸・英字キッカー・末尾の矢印リンク・出現アニメを使わず、hairline罫線と余白だけで束ねた。選択肢と返信の目安は架空の表示サンプル。

Blocks
BLK-55

画面端の縦組み常設CTA

本文の外側・画面の右端に貼り付く常設のお問い合わせ導線。和文を縦組み（writing-mode: vertical-rl）にすることで44〜56pxの帯に本文級の活字を収め、本文の可読幅を削らずに読んでいる間ずっと相談への入口を残す。帯は導線であると同時に計器で、読了率のバー・節ごとの目盛り・現在の節名を同じ列に積む。読み始めの閾値で滑り込み、本文末のCTAへ到達すると自ら退いて役目を引き渡す。角丸・英字キッカー・末尾の矢印を使わず、直線とhairlineだけで画面の縁に接地させた。画像素材ゼロ。

Blocks
BLK-56

事実表一体型CTA（営業時間・対応エリア併記）

信頼情報の表そのものを面の主役に据えたCTA。受付時間・定休日・対応エリア・出張範囲・登録番号・開業と実績・初回相談・返信目安の8項目を、鍵を小文字英字1語に固定した2カラムの台帳に組み、申し込みボタンはその台帳の最終行として全幅のアンバー帯になる。文とボタンを左右に分ける帯でも、選択や入力をさせる型でもなく、読み終わりと押す場所が同じ列で一致する構図。列挙の長い対応エリアだけは行内のトグルで全14市町を開ける。折り返しはビューポートではなくコンテナクエリ（@2xl）で決めるため、狭い枠に埋め込んでも崩れない。角丸・英字キッカー・末尾の矢印は使わず、hairline罫線と余白だけで束ねた。小さな注記はアンバー帯に載せずコントラストの取れる白地へ出している。事実はすべて架空の表示サンプル。画像素材ゼロ・依存ゼロ。

Blocks
BLK-57

実績・事例（ピン留め横送り台帳）

区間を画面にピン留めし、縦スクロールの進捗をそのまま横移動へ写像する実績セクション。送るための横入力（スワイプ・ドラッグ・矢印ボタン）を一切持たず、ページを読み進めるだけで5件の台帳が右から左へ流れる。固定はJSではなく「背の高い助走路＋sticky」で作り、JSは進捗pを読んで --pw-x（px）と --pw-p（0〜1）の2変数を書くだけ（出力はtransformのみ・stateはカウンタ表示ぶんだけ更新する）。助走路の高さは横のはみ出し量から毎フレーム測り直すため、画面幅が変わっても縦と横の体感速度が揃う。板は幅も上下位置も1枚ずつ違え、番号・種別・一文・3項目の実数（期間/規模/変化）を載せた台帳スリップとして読ませる。固定ヘッダーの下へ1段目が潜らないよう、天井はヘッダーの実測高（--pw-top）ぶん下げる。ピン留め中はフォーカス送りで祖先がスクロールして位置が破綻するため、focusを捕まえてその板が中央に来る縦位置へページを送り返す。prefers-reduced-motion と、固定する余地の無い低い箱へ埋め込まれたときは、同じマークアップのまま素の横スクロール＋scroll-snapへ降格する。画像素材ゼロ・依存ゼロ・角丸なし。

Blocks
BLK-58

ミッション・ストーリー（背面レイヤー×前景シート）

会社の考え方を3章に分けて語るストーリーセクション。奥に貼り付けた100svhの一文は一切動かず、手前の不透明な白いシートがその上を滑って覆っていくことで章が進む。奥行きは影を使わず、遮蔽とアンバーが先に抜ける彩度の後退だけで作る。固定はCSSのstickyと積み順のみで成立し、JSは遮蔽量を1本のCSS変数へ書くだけ。短い箱へ埋め込んだときと動きを控える設定では、同じマークアップのまま縦積みの読み物へ降格する。画像素材・外部依存はゼロ。

Blocks
BLK-59

clip-pathワイプrevealフォトグリッド

写真主導のサイトに見られる「フェードではなく覆いが引かれて絵が出る」出現を、実績・事例のフォトグリッドとして再構築したブロック。出現は一度きりのトリガーではなくスクロール量に連動し、戻せばマスクも閉じる可逆・連続の動きで、行ごとに開く向きを左から・下から・右からと反転させ、行内はさらにスタッガーする。JSがするのはrAFで合体させた1本のハンドラがセクションへ --p（0→1）を書くことだけで、各タイルは clamp((--p - --s) / --w, 0, 1) で自分のローカル進捗をCSSのcalcだけで算出する（依存ライブラリなし・フレーム毎のsetStateなし）。マスクの中の画は閉じ側へ寄せた位置から戻るので、動いているのは覆いだけに見える。写真はCSSグラデーションと図形だけで組んだ画像素材ゼロのカットで、列比は行ごとに変えて等間隔の格子に見せない。情報は番号・見出し・業種・年だけに絞り、抜粋もタグチップも持たない。キーボードで到達したタイルは :focus-within で必ず開き切り、reduced-motion時はCSSで --p: 1 !important を当てて「最初から開き切っている」に畳む。

Blocks
BLK-60

特大英字ウォーターマーク付きセクション見出し

節の扉に置く見出しブロック。背面に版面幅いっぱいの特大英字を約4%の薄グレーで敷き、前景の和文見出し・リード・「この節で扱うこと」4行の索引と重ねる。透かしはインラインSVGのtextLengthで幅を固定するため、フォントが変わっても横スクロールが出ない。前景は一切アニメーションせず、索引は注目した行以外を薄くして視線だけを動かす（JS不要のサーバーコンポーネント）。

Blocks
BLK-61

破れ紙風セクション区切り

節と節の境目そのものを主題にした区切りブロック。60頂点あまりの不規則ポリゴンを clip-path に与え、白・生成り・墨の3つの色面を手で裂いた断面で分ける。裂け目は「うねり（低周波の正弦2本）」「ささくれ（1頂点ごとの微小な乱れ）」「食い込み（十数点に1度の深い落ち込み）」の3層とx刻みの不等分で組み立て、数px内側にもう1本引いた線との隙間を明るく塗って紙の繊維に見せる。乱数はシード付きなのでサーバーとクライアントで同じ形が出て、頂点数を固定してあるため「もう一度裂く」でポリゴン同士が滑らかにモーフする。画像素材・依存ライブラリはゼロ。

Blocks
BLK-62

モザイクタイル非同期ローテーション帯

12x6の不定形グリッドに敷いた色面タイル（アンバー濃淡＋グレー＋hairlineの枠）が、タイルごとに別の周期で色と図形を入れ替え続ける視覚帯。見出しとCTAは中央の白い一枚にまとめる。JS・canvas・依存ライブラリはゼロで、負のanimation-delayとタイルごとに散らしたdurationだけで非同期のローテーションを作る。動かすのはopacityとtransformのみ、図形は静的なclip-pathで切り替え、prefers-reduced-motionでは1枚の静止したモザイクになる。狭幅では地を帯の上側に1本のモザイクとして置き、文字と重ねない。

Blocks
BLK-63

回転ダイヤル型サイトインデックス

サイト全体の行き先を円周に並べ、環ごと回して頭に来たものを選ぶナビゲーション。水平リストやタブと違い、選択面そのものが回る。円周配置はCSSの三角関数だけで書き（--a から cos/sin で translate）、環の回転角は --rot という変数1つに集約してあるので、ラベルの正立は calc(var(--rot) * -1) の逆回転がCSS側で従属する（項目ごとに角度をJSで書き戻さない）。角度は0〜360に丸めず連続値で貯め、差分を±180°へ折り返してから足すので8番目→1番目でも大回りしない。掴んで回すドラッグは中心からのatan2の差分で、8px動くまでsetPointerCaptureしない（先に捕まえるとclickの発火先を奪って項目が押せなくなる）。キーボードは矢印/Home/Endで送れ、:focus-visible で来たフォーカスだけを選択に繋ぐため「到達＝選択」になり、Enterは常に遷移になる。中央のハブと右の案内窓は回らない側に置き、選択中の行き先の下位ページまで出す。prefers-reduced-motionでは環を止め、代わりに指標のティックを選択中の角度へ置き直す降格を用意。ライブラリ依存ゼロ・画像素材ゼロ。

Blocks
BLK-64

お客様の声③1件深掘りインタビュー

お客様の声を、短い引用の集合ではなく1社のインタビュー記事として読ませるブロック。冒頭に課題・施策・成果の3点サマリをgap-pxの1px格子（角丸なし）で置き、各セルはbuttonで該当の質問へジャンプする記事の目次を兼ねる。本文はQ&Aの縦積みで、質問は小さな英字ラベル＋アンバーの角罫、回答は本文フォントの段落に落とす。プルクオートは1箇所だけ特大にし、画面に入るとアンバーのマーカーがorigin-leftのscale-xで引かれる。長文と相性が悪いため節全体のスタッガー出現は掛けず、モーションはこのマーカーとhover/着地の合図だけに絞っている。ジャンプ先はtabIndex=-1でfocus({preventScroll:true})を受け、視線とフォーカスが同時に動く。画像素材ゼロ・prefers-reduced-motion時はマーカーが引き終わりの状態で静止し、スクロールもbehavior:autoに切り替わる。登場人物と数値はすべて架空。

Blocks
BLK-65

ローポリ地形バックドロップ（夜景）

地形・道・家・木・街灯をローポリの立体として組み、セクションの背面に敷く夜景バックドロップ。3Dが主役の展示台ではなく背景装飾なので操作は持たず、スクロール進捗に合わせてカメラが道の先の村へ寄っていくだけ。村の上は飛び越えないので手前は開けた地面のまま残り、そこが見出しとCTAの置き場になる。モデルデータもテクスチャ画像も読まず、地形はバリューノイズで押し出したPlaneGeometry、家と木と街灯は種を固定した乱数で配置したInstancedMesh（地形1＋道1＋家1＋窓1＋木1＋街灯1の計6ドローコールで、立体は200個を超えても増えない）。ローポリの見えはflatShadingだけで作る。夜の灯りは点光源を増やさずtoneMapped:falseの発光面（窓）で増やし、実際の光源は半球光・月光・アンバーの点光源2つに抑え、影は夜霧の中では見えないので持たない。空はCSSグラデーションのまま透過キャンバスを重ね、FogExp2の色を地平線の色に合わせて遠景を空へ溶かす。停止条件はprefers-reduced-motion（消さずに1フレームだけ描く）・画面外・タブ非表示・縮小プレビューの4つで、WebGL非対応時はCSSのシルエットへ降りる。

Blocks
BLK-66

強み・ベントーグリッド（不均等タイルの主従）

「選ばれる理由」を縦に積まず、3カラム×4行=12セルの不均等モザイクに置く強みブロック。タイルの面積そのものを情報量に割り当て、2×2の主役だけが本文と補足指標を持ち、1×1は言い切り1行だけを持つ（面積＝情報量のルールを先に決めておくのが要点）。grid-template-areasを書かずDOM順＝読み順のまま自動配置で「2×2＋1×2＋2×1＋1×1×2＋2×1」が穴なく埋まり、折り返しはビューポートではなくコンテナクエリなので狭い枠に埋め込んでも崩れない。形ごとに中の組み方を変える（横長はテキスト｜図版の横並び、縦長は図版を下端へ、正方は図版を上・見出しを下端）。カード感を消すため罫線はhairline1色・角丸2px・影なしに固定し、主役は薄いアンバーの塗りだけで示す。各タイルの小図版はdivのborderとbgだけのCSS図形で、ホバーで図版だけがtransformで微動する（タイルはリンクではないので文字と罫線は動かさない）。画像素材ゼロ・JSゼロ・依存ゼロ。

Blocks
BLK-67

相談メモ・貼り板（押した位置にふせんが残る）

対応できることを9枚のふせんにして、板の押した位置へ次々に貼り付けていく操作ブロック。貼られたふせんは丸まった状態から紙がめくれ広がるように開いて着地し、そのまま板に残り続ける。残った枚数と内訳は右の「控え」に数と罫線バーで積み上がるので、遊びで終わらず相談内容のたたき台になる。めくれは画像も3Dも使わず、clip-path の半平面で表面を切り、同じ折り目で鏡像反転させた裏面グラデーションを重ねる2枚構成で作り、折り目の位置だけを1つのカスタムプロパティで0→1へ動かす。幾何はすべて要素の辺長に対する割合で持つため、ふせんの大きさを clamp で可変にしてもJS側の計算は変わらない。開き終わったふせんは clip-path も鏡像レイヤーも捨てて表面1枚の軽い状態へ置き換えるので、24枚貯めても毎フレームの負荷は開いている最中の数枚にしか掛からない。位置は板に対する%で持ち、回転は rotate・中央寄せは translate プロパティへ分けて transform を空けてある。prefers-reduced-motion ではめくれも出現も行わず、押した位置へ即座に貼られる（操作そのものは死なない）。盤面は aria-hidden とし、同じ情報を控えのリストと role=status の通知で伝える。キーボードでは黄金比で散らした既定位置へ落ちる。依存ライブラリゼロ・画像素材ゼロ。クリック位置に要素を貼り付けて痕跡を残すという発想だけを外部作例から借り、コード・文言・配色・構図はすべて First CH のオリジナルとして再構築した（2026-09-18）。

Blocks
BLK-68

導入スケジュール（横タイムライン・期間バー）

お申し込みから公開までを共通の週スケール1本に載せるガント型の導入スケジュール。工程の所要期間はバーの長さ、同時進行はバーの重なりとして読め、担当（当社／ご一緒に／お客様）で塗りを分けるので「お客様の準備がどの工程と並走するか」が位置関係で分かる。週数はすべて等幅数字で揃え、viewport進入時にバーがscaleXで左から伸びる。狭幅では工程ごとの縦積みに切り替わり、週スケールはそのまま保たれる。画像素材ゼロ・依存ゼロ。

Blocks
BLK-69

時間帯で変わる空のバックドロップ（6シーン巡回）

未明・朝・正午・西日・日没・夜の6つの時間帯を連続で巡る、セクション背面の空。立体もモデルも画像も持たず、面1枚のフラグメントシェーダが天頂／中間／地平の3色・太陽と月・雲・星・地平の靄だけを描く。配色の移り変わりそのものが中身なので、6シーンの補間はJS側で行い、シェーダには「今の1状態」だけを渡す（同じ結果をCSSグラデーションのフォールバックにも使い回すので、非対応環境でも配色がズレない）。等速で混ぜると色相が回っているだけに見えるため、各区間の前半42%は配色を止めて溜めを作る。背景装飾でありながら下端に時刻レールを持ち、押すとその時間帯まで位相を早送りして途中の空も通る。前景は白い紙面を1枚置くので、空が真昼でも真夜中でも文字のコントラストは動かない。停止条件はprefers-reduced-motion（消さずに選んだ時間帯を1フレーム描き、自動送りだけ止める）・画面外・タブ非表示・縮小プレビューの4つ。

Blocks
BLK-70

監修者プロフィール（資格から根拠を引き当てる台帳）

記事・サービスの監修者を1人だけ深く見せる信頼ブロック。顔写真は使わず、イニシャルと登録番号を収めた角印のタイポグラフィで人物を示す。左カラムの保有資格は飾りのバッジではなく操作列で、押す・マウスを乗せる・フォーカスすると、右カラムの経歴と執筆・登壇実績のうちその資格を裏づける行だけが残る。非該当行は消さずに opacity で沈めるので、絞り込んでも行の高さとスクロール位置が動かない。該当の合図は幅2pxの縦罫の opacity だけで、レイアウトは一切動かさない。下見（hover/focus）とピン留め（click）を別の state に持ち、ピン留め中に他をなぞって戻れる。絞り込み結果は sr-only の aria-live で件数を読み上げ、視覚側のハイライトは装飾に留める。カードで囲わず gap-px の hairline と余白でグルーピングし、画像素材ゼロ・依存ゼロ。人物・経歴・実績はすべて表示サンプル。

Blocks
BLK-71

工数の流れ図（職能→工程→納品物）

総工数が職能から工程へ、工程から納品物へ分岐して合流する様子を帯の太さで見せるサンキー型の図解。量は帯の太さ、内訳は帯の分かれ方として読め、名前にふれると、そこにつながる帯だけが残る。職能の識別は色でなく塗りのパターン（斜線・横罫）で持ち、opacityは強調と減衰の状態表現に充てている。SVGには帯と節点だけを描き、ラベルと当たり判定は絶対配置のHTMLボタンを重ねるので、縮尺が変わっても文字サイズは一定でfocus-visibleがそのまま効く。狭幅では同じ配列から積み上げ棒のリストに組み替わる。画像素材ゼロ・依存ゼロ。

Blocks
PGE-01

スプリットヒーロー

コーポレートサイト冒頭のヒーロー。左に見出し+2ボタン+実績数値、右にCSSだけで作ったブラウザ枠のサイトプレビュー。画像素材なしで成立する。

Pages
PGE-02
Pages
PGE-03

全面ビジュアルヒーロー

全面KVを4×3のタイルに分解して見せ、タイルが着地して1枚の全景に戻る重厚な導入のヒーロー。白スクリムで和文の可読性を確保し、下部はhairline罫線だけで概要をグルーピングする（カードにしない）。出現はCSSの@keyframes＋animation-fill-mode: backwardsのみで組んでいるためJSゼロ・SSRの初期HTMLとreduced-motion時は完成状態で表示される。背景KV（/designs/hero-fullbleed-visual-kv.webp・文字なし）は生成画像で、imageSrcプロパティで差し替えられる。他社サイトに見られる「写真グリッド→全景」の導入演出を参考にブランド再構築（2026-08-01）。

Pages
PGE-04

キャンバス粒子ヒーロー（方眼＋バネ物理）

Canvas 2D の粒子をランダムではなく方眼グリッドに並べ、ポインタの斥力で押し出し、フックの法則と減衰でホーム座標へ戻す背景ヒーロー。「整っていたものが乱れて戻る」動きはドット方眼の標本モチーフと噛み合い、近傍の粒子だけアンバー（#d97706）へ寄る。速度と減衰はdtで正規化するため120Hzでも倍速にならず、prefers-reduced-motion・画面外（IntersectionObserver）・タブ非表示の3条件でrAFを止める。無操作が続くとLissajous曲線の仮想ポインタへ引き継ぐのでタッチ環境でも成立する。依存ライブラリゼロ・画像素材ゼロ。Canvasの粒子＋ポインタ物理という着想を、コード・文言・配色・構図すべてFirst CHのオリジナルとして再構築した（外部コードの取り込みなし・2026-08-08）。

Pages
PGE-05

リキッドガラス・ヒーロー背景（WebGL屈折＋メルト）

フルスクリーンの三角形1枚とフラグメントシェーダ1本だけで、ヒーロー背景に屈折するガラスの塊を敷いたブロック。3Dライブラリは使わず素のWebGL（GLSL ES 1.00）で組んでいるので、webgl2でもwebglでも同じシェーダが動き、依存ライブラリはゼロ。背景の方眼ドットとアンバーの斜め帯はテクスチャではなくシェーダ内の関数で描き、それを法線方向にずらして再サンプルすることで屈折を作る（R/G/Bで屈折率を1.035/1.00/0.965とずらす色収差つき）。塊どうしは距離場のsmin（多項式スムーズ最小値）で結合するため、近づくと首を作って溶け合う＝メルトになり、粘性kを時間で揺らすと呼吸して見える。ポインタは6つ目の塊として振る舞い、無操作が続くとリサージュ曲線の仮想ポインタが引き継ぐのでタッチ環境でも成立する。低スペック対策は解像度スケールの二段落とし（起動直後48フレームの平均が32msを超えたらバッキングストアを0.6倍、それでも超えたらrAFを止めてCSSの静的グラデーションへ降りる）。prefers-reduced-motion時はrAFを回さず同じシェーダで静止フレームを1枚だけ描き、画面外（IntersectionObserver）とタブ非表示でも停止する。webglcontextlostは必ずpreventDefaultで握り、アンマウント時はWEBGL_lose_contextでGPUリソースを明示的に解放する（同種ブロックが並ぶ一覧ページではコンテキスト数の上限に当たるため）。テキスト・配色・構図はすべてFirst CHのオリジナル、画像素材ゼロ。屈折・メルトのシェーダーをヒーロー背景に敷き通常のDOMを上に重ねるという構造だけを着想として再構築した（外部コードの取り込みなし・2026-08-14）。

Pages
PGE-06

3Dオブジェクト・ギャラリーHero（PBR・環境マップ・影）

「サイトに3Dを載せたい」に応えるためのヒーロー。金属・陶磁・ガラスの3標本を切り替えて質感を見せるが、モデルデータもテクスチャ画像も一切持たず、形は TorusKnot / Lathe（回転体のプロファイルを関数で作る）/ Extrude（角丸シェイプ＋ベベル押し出し）でコード生成する。映り込みは白い箱の内側に発光板を4枚置いた"撮影スタジオ"を組み、PMREMGenerator.fromScene() で畳んで scene.environment に渡す（HDRIファイルを読まずにPBRらしい面光源の映り込みが出る・アンバーの背面パネルで反射の色までブランドに寄せられる）。光源は方向光（影あり・PCF）＋アンバーの点光源＋半球光の3灯で、影は ShadowMaterial の床1枚だけを敷いて白背景を汚さずに接地感を出す。登場・退場・浮遊は AnimationMixer で扱う——モデルが無くても VectorKeyframeTrack('.scale') 等を手で組めばクリップになるので、rAFの中に手続きを書き散らさずに済む。標本の切り替えは canvas ではなく下の罫線台帳（button・aria-pressed）が正で、キーボードだけでも全て操作できる。3Dライブラリ（three）の採用はこのギャラリーの依存ゼロ方針に対する唯一の例外で、理由は「PBR・環境マップ・影・アニメーションを素のWebGLで書くと割に合わないため」——つまり素のWebGLで足りる表現（板ポリ・シェーダ背景・粒子）はこれまで通り依存ゼロで作り、3Dの質感実証だけをこのブロックに集約している。実測の追加コスト（three 0.185・本番ビルド）は追加チャンク 725,217バイト（約708KB）・gzip 181,641バイト（約177KB）で、静的importではなく useEffect 内の動的importで別チャンクに切り出し、実際に3Dを表示する画面でだけ読み込む（縮小プレビューでは親のscaleを rect.width÷offsetWidth で検出して読み込まない）。prefers-reduced-motion では自動回転もタイムラインも動かさず1フレームだけ描き、WebGL非対応・コンテキストロスト・低速時は静止パネルへ降りる。文言・配色・シェイプはすべてFirst CHのオリジナル。

Pages
PGE-07

分割ヒーロー（左テキスト×右ビジュアルの帯構成）

ヒーローを「テキスト面 / 細い分割レール / ビジュアル面」の縦3カラムに割った分割構成。右のビジュアル面は6本の縦帯に分解され、帯ごとに位置と長さの違う色片が下からせり上がる。その入りを90msずつずらすことで、視線が右のビジュアル→左の見出しへ流れる時間差を作る。画像素材ゼロ・JSゼロで、animation-fill-mode: backwards によりSSRの初期HTML・JS無効・reduced-motion では組み上がった完成状態で表示される。概要はカードにせず hairline罫線＋余白でグルーピング（2026-08-21）。

Pages
PGE-08

横送り展示ヒーロー（停まって読ませる4面）

ページ冒頭そのものを横送りにしたヒーロー。表紙を1面目として、縦スクロールの進み具合が4面の横移動へ写る。送りは等速ではなく、スクロール予算を「移動」と「静止」へ交互に配っているため、面に着くと一度止まり、その間に種別・見出し・リード・実数2つ・図版が順に開いてから次へ動き出す。止まりはタイムラインへ挟んだ空トゥイーンで作るので、進捗を1変数で transform へ掛ける実装では書けない緩急になる。固定は fixed ではなく transform 方式を選び、枠線やパディングのある入れ物へ埋め込んでも要素が画面全面へ飛び出さない。表紙の目次と上部の索引はどちらもクリックでその面へ飛ぶが、横方向の入力は持たず「ラベルの時刻→縦スクロール位置」を逆算して window を送るだけなので、送りの正はスクロール位置ひとつのまま保たれる。寸法はビューポートではなく面そのものを基準にするため（container query の cqw）、枠のある入れ物へ埋め込んでも見出しだけが大きく算出されて折り返すことがない。画像素材ゼロ（図版は hairline の方眼とアンバーの図形で作図）。縮小プレビューの中では固定を作らず表紙のまま静止し、reduced-motion では4面を縦に積んだ読み物へ降格する。

Pages