スプリットヒーロー
コーポレートサイト冒頭のヒーロー。左に見出し+2ボタン+実績数値、右にCSSだけで作ったブラウザ枠のサイトプレビュー。画像素材なしで成立する。
PagesPGE-01
LIVE DESIGN LIBRARY
コードごと使える、 UIデザイン見本集
First CH の制作現場で生まれたUIを、ソースコードとAI Scriptつきでストックしています。コピーして、そのまま次のプロジェクトへ。
プレビュー・コード・AI Scriptの使い方 →まずは、ページ全体から
エディトリアル大タイポヒーロー
白背景に明朝の巨大英文を主役に据えたエディトリアル型ヒーロー。階段状のぼかしモチーフ・縦書きScroll Downインジケータ・下線ワイプのテキストCTAで、画像素材ゼロのまま"間"と高級感を作る。smoothScrollプロパティでLenisの慣性スクロールをopt-in適用できる。
PagesPGE-02
全面ビジュアルヒーロー
全面KVを4×3のタイルに分解して見せ、タイルが着地して1枚の全景に戻る重厚な導入のヒーロー。白スクリムで和文の可読性を確保し、下部はhairline罫線だけで概要をグルーピングする（カードにしない）。出現はCSSの@keyframes＋animation-fill-mode: backwardsのみで組んでいるためJSゼロ・SSRの初期HTMLとreduced-motion時は完成状態で表示される。背景KV（/designs/hero-fullbleed-visual-kv.webp・文字なし）は生成画像で、imageSrcプロパティで差し替えられる。
PagesPGE-03
キャンバス粒子ヒーロー（方眼＋バネ物理）
Canvas 2D の粒子をランダムではなく方眼グリッドに並べ、ポインタの斥力で押し出し、フックの法則と減衰でホーム座標へ戻す背景ヒーロー。「整っていたものが乱れて戻る」動きはドット方眼の標本モチーフと噛み合い、近傍の粒子だけアンバー（#d97706）へ寄る。速度と減衰はdtで正規化するため120Hzでも倍速にならず、prefers-reduced-motion・画面外（IntersectionObserver）・タブ非表示の3条件でrAFを止める。無操作が続くとLissajous曲線の仮想ポインタへ引き継ぐのでタッチ環境でも成立する。依存ライブラリゼロ・画像素材ゼロ。
PagesPGE-04
新着のデザイン
すべて見る →
文字の形の窓を通り抜けるスクロールヒーロー最初は大きな英字の形だけが写真をのぞく窓になっていて、スクロールするとその窓が広がり、文字の縦画の中へ入り込んで写真が画面いっぱいに広がるヒーロー。区間はページ上にピン留めされ、進み具合はスクロール位置だけで決まるので、戻せば同じ道をたどって文字の形へ戻ります。窓は白い面に文字の穴を開けた SVG マスクで作り、写真そのものにはマスクを掛けないため、拡大しても写真がぼけません。拡大の原点は文字「I」の縦画の中心に置き、倍率は縦画の実測幅から画面を覆う量を逆算します。窓の文字とは別に実テキストの見出し・リードを白い札に載せて常に手前へ置くので、写真が全面になった後も見出しが読めます。札のボタンで写真の全面表示と見出しへの戻りを切り替えられ、次の節へのリンクは着地先へフォーカスも移すため、キーボードだけで最後まで操作できます。動きを控える設定では、写真と見出しを左右に並べた静的なヒーローとして表示します。依存ライブラリなし、出力は transform と opacity だけです。
写真の注釈ピン（番号の点を押すと説明が出る）店内や製品の写真1枚の上に番号つきの点を置き、押すとその場所の説明が吹き出しで出る注釈ブロックです。点の位置は元の写真に対する割合で持ち、写真の枠を container-type: size にしたうえで object-fit: cover と同じ計算を CSS の calc と cqw・cqh 単位で行うため、写真の切り抜き方（2:1・3:2・4:3）を変えても点は同じ物の上に残ります。点は名前つきの button で aria-expanded と aria-controls によって説明と結び、前へ・次へで番号順に回れて、閉じるボタンと Esc キーで閉じると点へフォーカスが戻ります。点の上では左右キーと Home/End で前後の点へ移れるので、キーボードだけで操作が完結します。枠が狭いときや点どうしが近いときは、点を番号だけの小さな印にして説明を写真の下に出し、写真を吹き出しで隠しません。同じ説明は写真の下に番号付きリストでも載せており、スクリーンリーダーや印刷でも内容を読めます。吹き出しの出現は opacity と transform だけを動かし、prefers-reduced-motion では動きを止めます。新規の依存はありません。
写真ギャラリー（石積みレイアウト＋拡大表示ライトボックス）縦横比の異なる写真を隙間なく石積みに並べ、押した1枚をその位置から全画面へ拡大して見せる写真ギャラリーです。並べ方は列ごとに縦へ詰めるのではなく、写真ごとに縦横比に比例した flex-grow と flex-basis を当てる行単位の石積みなので、見た目の並び順・DOMの順・Tabキーでのフォーカス順が常に一致し、同じ行の写真は同じ高さで行幅ぴったりに収まります（幅の計算にJSを使いません）。拡大表示はネイティブの dialog を showModal で開き、サムネイルとの位置の差を transform で打ち消してから戻すFLIPで拡大し、Escキーや閉じるボタンでは同じ道を縮んで一覧へ戻ります。ダイアログには名前と aria-modal を持たせ、初期フォーカスは閉じるボタン、Tabキーはダイアログ内で循環し、閉じた後は表示していた写真のサムネイルへフォーカスを返します。閉じる・前へ・次へのボタンは常に表示し、左右キー・Home/End・横スワイプでも送れて、送った結果は読み上げられます。全写真に内容を説明する代替テキストを付け、prefers-reduced-motion では拡大・縮小・送りの動きを省いて即時に切り替えます。新規の依存はありません。
並べ替えと絞り込みができる仕様比較表製品を行、価格・容量・出力・重さ・充電時間・寸法・対応機能を列に並べた、件数の多い仕様比較表。列見出しのボタンで昇順・降順を切り替え（th の aria-sort を更新）、上のチップで重さと対応機能を絞り込める。結果の件数と並び順は aria-live で読み上げ、条件はまとめて外せる。該当が0件のときは、どの条件を外すと何件になるかをボタンで示す。スマホでは機種名の列を固定して横スクロールし、端の影でまだ続きがあることを伝える。並べ替えたときだけ行が新しい位置へ滑らかに移り、動きを減らす設定では即座に並び替わる。角丸・英字キッカー・矢印リンクは使わず、hairline 罫線と余白で組む。画像素材ゼロ・追加依存ゼロ。
スプリットヒーロー
コーポレートサイト冒頭のヒーロー。左に見出し+2ボタン+実績数値、右にCSSだけで作ったブラウザ枠のサイトプレビュー。画像素材なしで成立する。
PagesPGE-01
エディトリアル大タイポヒーロー
白背景に明朝の巨大英文を主役に据えたエディトリアル型ヒーロー。階段状のぼかしモチーフ・縦書きScroll Downインジケータ・下線ワイプのテキストCTAで、画像素材ゼロのまま"間"と高級感を作る。smoothScrollプロパティでLenisの慣性スクロールをopt-in適用できる。
PagesPGE-02
全面ビジュアルヒーロー
全面KVを4×3のタイルに分解して見せ、タイルが着地して1枚の全景に戻る重厚な導入のヒーロー。白スクリムで和文の可読性を確保し、下部はhairline罫線だけで概要をグルーピングする（カードにしない）。出現はCSSの@keyframes＋animation-fill-mode: backwardsのみで組んでいるためJSゼロ・SSRの初期HTMLとreduced-motion時は完成状態で表示される。背景KV（/designs/hero-fullbleed-visual-kv.webp・文字なし）は生成画像で、imageSrcプロパティで差し替えられる。
PagesPGE-03
キャンバス粒子ヒーロー（方眼＋バネ物理）
Canvas 2D の粒子をランダムではなく方眼グリッドに並べ、ポインタの斥力で押し出し、フックの法則と減衰でホーム座標へ戻す背景ヒーロー。「整っていたものが乱れて戻る」動きはドット方眼の標本モチーフと噛み合い、近傍の粒子だけアンバー（#d97706）へ寄る。速度と減衰はdtで正規化するため120Hzでも倍速にならず、prefers-reduced-motion・画面外（IntersectionObserver）・タブ非表示の3条件でrAFを止める。無操作が続くとLissajous曲線の仮想ポインタへ引き継ぐのでタッチ環境でも成立する。依存ライブラリゼロ・画像素材ゼロ。
PagesPGE-04
リキッドガラス・ヒーロー背景（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のオリジナル、画像素材ゼロ。
PagesPGE-05
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のオリジナル。
PagesPGE-06
分割ヒーロー（左テキスト×右ビジュアルの帯構成）
ヒーローを「テキスト面 / 細い分割レール / ビジュアル面」の縦3カラムに割った分割構成。右のビジュアル面は6本の縦帯に分解され、帯ごとに位置と長さの違う色片が下からせり上がる。その入りを90msずつずらすことで、視線が右のビジュアル→左の見出しへ流れる時間差を作る。画像素材ゼロ・JSゼロで、animation-fill-mode: backwards によりSSRの初期HTML・JS無効・reduced-motion では組み上がった完成状態で表示される。概要はカードにせず hairline罫線＋余白でグルーピング（2026-08-21）。
PagesPGE-07
横送り展示ヒーロー（停まって読ませる4面）
ページ冒頭そのものを横送りにしたヒーロー。表紙を1面目として、縦スクロールの進み具合が4面の横移動へ写る。送りは等速ではなく、スクロール予算を「移動」と「静止」へ交互に配っているため、面に着くと一度止まり、その間に種別・見出し・リード・実数2つ・図版が順に開いてから次へ動き出す。止まりはタイムラインへ挟んだ空トゥイーンで作るので、進捗を1変数で transform へ掛ける実装では書けない緩急になる。固定は fixed ではなく transform 方式を選び、枠線やパディングのある入れ物へ埋め込んでも要素が画面全面へ飛び出さない。表紙の目次と上部の索引はどちらもクリックでその面へ飛ぶが、横方向の入力は持たず「ラベルの時刻→縦スクロール位置」を逆算して window を送るだけなので、送りの正はスクロール位置ひとつのまま保たれる。寸法はビューポートではなく面そのものを基準にするため（container query の cqw）、枠のある入れ物へ埋め込んでも見出しだけが大きく算出されて折り返すことがない。画像素材ゼロ（図版は hairline の方眼とアンバーの図形で作図）。縮小プレビューの中では固定を作らず表紙のまま静止し、reduced-motion では4面を縦に積んだ読み物へ降格する。
PagesPGE-08
規約・ポリシーの長文ページ（条・項・号の番号組み）
利用規約・プライバシーポリシー・特定商取引法表記のような、数千字の条文を最後まで読ませるためのページ型。移動の単位を条番号に統一し、左の目次・本文中の相互参照・改定履歴の対象条項が、すべて同じ条へのジャンプで繋がる（飛んだ先は面の重ねで一瞬だけ示す）。条・項・号の階層はインデントを足さず、ぶら下げ番号の桁揃えと罫線だけで示すので、狭い幅でも行頭が階段状に逃げない。行長は em で決めてあり、文字サイズを標準／大に切り替えても1行が約46文字のまま変わらない。末尾の改定履歴は日付降順。角丸・装飾・出現アニメは使わず、可読性だけで組んでいる。掲載文は架空のサンプル条文。画像素材ゼロ・依存ゼロ。
PagesPGE-09
送信完了（サンクス）ページ
問い合わせ送信後に着地する独立ページ。祝辞ではなく「いつまでに返信するか」を最上部に置き、受付時刻から営業カレンダー（平日10:00–19:00・土日祝は次の営業日）で返信期限を実時間で算出して絶対時刻で表示する。受付番号の控え（コピー可）、返信が届かないときの導線、待っている間に見てほしいものを3件だけ。計測タグをURL到達で発火させる前提の設計で、onConversion prop をセッション内1回だけ呼ぶ。角丸・スクロール出現アニメ・英字キッカーなし、画像素材ゼロ・依存ゼロ。
PagesPGE-10
記事本文の読み物レイアウト（質問形見出し・余白註・参考文献）
ブログ・コラムの本文組みを1セットにした記事レイアウト。見出しを質問形にし、追従する索引が質問と「答えの1行」を対で持つので、読む前に主張の全体が分かり、節がそのまま引用の単位になる。脚注・図版の注記・出典は本文の右の余白に、参照した段落と上端を揃えて並ぶ（狭い画面では同じDOMのまま段落の直下に落ちる）。本文の番号から註へ、註から出典へ、出典の引用箇所から本文へ、どの向きにも戻れる。引用ブロック・図表キャプション・参考文献リストまで込みで、装飾ボックスは使わず行長38文字・行間2.0と hairline 罫線だけで読ませる。掲載文はすべて架空のサンプル。
PagesPGE-11
全面写真ヒーロー（ゆっくり寄るスライドショー・一時停止つき）
画面いっぱいの写真4枚が、ゆっくり拡大と平行移動をしながら重なって切り替わるヒーローです。見出しは写真の上に固定し、下側の暗いグラデーションで写真の明るさに関わらず白文字が読めます。写真の下の白い操作帯には、番号と写真の説明、自動送りの残り時間を示す進捗バー、前後送り、常に表示する一時停止・再生ボタンを並べています（WCAG 2.2.2）。マウスを載せているあいだは一時的に止まり、キーボードでフォーカスが入ると停止して、再生を押すまで再開しません。表示していない写真は aria-hidden と inert で読み上げとタブ移動から外します。進捗バーの CSS アニメの終了で次へ進むため、一時停止は animation-play-state を切り替えるだけで寄り・進捗・送りが同時に止まります。prefers-reduced-motion では自動送りと寄りを止め、手動の切り替えだけを残します。画面外とタブ非表示のあいだも止まります。写真は文字を含まない生成画像で、SLIDES 配列で差し替えられます。依存ライブラリはありません。
PagesPGE-12
文字の形の窓を通り抜けるスクロールヒーロー
最初は大きな英字の形だけが写真をのぞく窓になっていて、スクロールするとその窓が広がり、文字の縦画の中へ入り込んで写真が画面いっぱいに広がるヒーロー。区間はページ上にピン留めされ、進み具合はスクロール位置だけで決まるので、戻せば同じ道をたどって文字の形へ戻ります。窓は白い面に文字の穴を開けた SVG マスクで作り、写真そのものにはマスクを掛けないため、拡大しても写真がぼけません。拡大の原点は文字「I」の縦画の中心に置き、倍率は縦画の実測幅から画面を覆う量を逆算します。窓の文字とは別に実テキストの見出し・リードを白い札に載せて常に手前へ置くので、写真が全面になった後も見出しが読めます。札のボタンで写真の全面表示と見出しへの戻りを切り替えられ、次の節へのリンクは着地先へフォーカスも移すため、キーボードだけで最後まで操作できます。動きを控える設定では、写真と見出しを左右に並べた静的なヒーローとして表示します。依存ライブラリなし、出力は transform と opacity だけです。
PagesPGE-13
CTAバナー
ページ下部に置く行動喚起ブロック。淡いアンバーのグラデーション面にアイブロウ+見出し+2ボタン。部品ではなくセクション単位の標本。
BlocksBLK-01
料金プラン
3段階の料金カード。中央の「おすすめ」プランだけアンバーの枠とリングで強調し、ボタンも塗り。LPやサービス紹介ページ用のセクション。
BlocksBLK-02
制作フロー
番号つきの工程ステップ。制作の流れなど「順序が意味を持つ」内容向け。丸番号を細い罫線で連結し、デスクトップで横並びになる。
BlocksBLK-03
サービス・ジグザグ（脱カード）
サービス／特徴を3-upのカード羅列にせず、左右交互（ジグザグ）の全幅バンドで縦に積むエディトリアル変種。各行は「ドット方眼の面プレート＋大インデックス数字」と「箱で囲まないテキスト」を12カラム上でorder入れ替えして互い違いに配置し、hairline罫線＋広い余白でグルーピングする。画像素材ゼロ。アンバー罫線とMontserratの巨大アウトライン数字で標本的な編集感を出す。
BlocksBLK-04
強み・数字（宣言型スタッツ）
「選ばれる理由・強み」を数字で言い切る宣言型ブロック。1つのKPIをfeature statとして巨大タイポで支配的に置き、残り3つをhairline罫線で仕切ったsupporting行に従える（少数の主張の階層化）。数字はIntersectionObserverで画面内に入るとrAFで0→目標値にカウントアップし、tabular-numsで桁幅を固定してガタつきを防ぐ。カードで囲まず罫線＋余白でグルーピングし、画像素材ゼロで成立。prefers-reduced-motion時はカウントせず最終値を即表示。
BlocksBLK-05
実績・事例（グリッド）
制作実績・導入事例を情報密度高く一覧するブロック。影付きカードの羅列ではなく、gap-pxのhairline罫線で仕切った「レジャー（台帳）」で並べ、各事例に疑似ロゴ・ロックアップ（モノグラム＋欧文社名／画像ゼロ）・業種タグ・巨大ゴースト番号を与えて一覧の律動を作る。ホバー（＋キーボードfocus）で抜粋がフェードイン／矢印がスライドし、抜粋の高さは常に予約してリフローを起こさない。業種フィルタはhiddenトグルでリフローアニメを付けず即時に絞り込み、件数はaria-liveで通知。IntersectionObserverでスクロールインするとスタッガーでリビール、prefers-reduced-motion時は即最終状態。
BlocksBLK-06
お客様の声（引用の主従・声の台帳）
「お客様の声」を、引用の主従で見せるブロック。1件を主となる声として大きな引用文で置き、氏名・属性はamber hairlineを添えて控えめに従える。残りの声はカードで囲まず、左に縦レール1本＋divide罫線で束ねた“声の台帳”として並べる。Swiperに頼らず、各証言のマーカーへ共有keyframeをanimation-delayでずらして掛けることで、明滅のハイライトが縦に流れる律動をCSSだけで作る（マーカーは各行にアンカーされるので行高が可変でも整列が崩れない）。氏名はイニシャル・年代・属性で、個人を特定しすぎずに添える。画像素材ゼロ・prefers-reduced-motion時は静的マーカーと即時表示にフォールバック。
BlocksBLK-07
グローバルヘッダー・ナビ
ロゴ左・ナビ右のコーポレート定番ヘッダー。CTAはナビ右端に1本だけ置き、縦hairlineで主従を仕切る。スクロールすると背景（bg-white/90 + backdrop-blur）が opacity で立ち上がり、下端のhairlineが左からワイプして出る（高さ・paddingは動かさないのでリフローなし）。SPはハンバーガー→フルスクリーンオーバーレイ（Escapeで閉じる・閉じている間はinertでtab到達を止める）。スキップリンク同梱・画像素材ゼロ。ギャラリー表示用にスクロールするデモシェルとダミー本文を同梱している。
BlocksBLK-08
サイトフッター
白地にhairlineの区切りだけで組む3段フッター。1段目=サービス／会社案内／法務の多段リンク（SPは横罫の積み上げ・PCは縦罫の列にdivideの向きを入れ替える）、2段目=小さく再掲したロゴ＋住所1行＋電話・受付、3段目=コピーライトと「トップへ戻る」。背景の色面もカードも使わず、ページ末尾を重くしない。ロゴはワードマークだけに落としてヘッダーと役割を衝突させない。上端のアンバーtickはIntersectionObserverで1度だけ左からワイプし、リンクのホバーは文字の2px移動と下線のscale-xのみ。画像素材ゼロ。
BlocksBLK-09
CTA（スプリット帯）
本文の流れに差し込む横長のCTA帯。左に和文ラベル+見出し+短い説明、右にPrimary/Secondaryの2ボタンを置き、内側は縦罫1本だけで分割する。極薄アンバー（bg-amber-50/60）は行動側のカラムにだけ敷き、左は白のまま余白で押す。既存 cta-banner（BLK-01・中央寄せのグラデ面）と対になる「罫線」型で、ページ末の締めではなく通過点のCTAに効く。画像素材ゼロ。
BlocksBLK-10
写真ギャラリー（石積みレイアウト＋拡大表示ライトボックス）
縦横比の異なる写真を隙間なく石積みに並べ、押した1枚をその位置から全画面へ拡大して見せる写真ギャラリーです。並べ方は列ごとに縦へ詰めるのではなく、写真ごとに縦横比に比例した flex-grow と flex-basis を当てる行単位の石積みなので、見た目の並び順・DOMの順・Tabキーでのフォーカス順が常に一致し、同じ行の写真は同じ高さで行幅ぴったりに収まります（幅の計算にJSを使いません）。拡大表示はネイティブの dialog を showModal で開き、サムネイルとの位置の差を transform で打ち消してから戻すFLIPで拡大し、Escキーや閉じるボタンでは同じ道を縮んで一覧へ戻ります。ダイアログには名前と aria-modal を持たせ、初期フォーカスは閉じるボタン、Tabキーはダイアログ内で循環し、閉じた後は表示していた写真のサムネイルへフォーカスを返します。閉じる・前へ・次へのボタンは常に表示し、左右キー・Home/End・横スワイプでも送れて、送った結果は読み上げられます。全写真に内容を説明する代替テキストを付け、prefers-reduced-motion では拡大・縮小・送りの動きを省いて即時に切り替えます。新規の依存はありません。
BlocksBLK-100