WEB DESIGN ENCYCLOPEDIA / 202600 / 99
INDEPENDENT EDITIONISSUE № 01

見て、触って、使える

WEB DESIGN
ENCYCLOPEDIA

2026

AI感のない
サイトデザイン図鑑

LAYOUT · TYPE · STYLE · TEXTURE
MOTION · INTERACTION · RENDERING
01

ABOUT THIS BOOK / この図鑑について

読むだけでは、
デザインは身につかない。

この図鑑は、Webデザインの技法をその場で「見る・触る・理解する」ための実験的なデジタルブックです。

01 / LOOK

見た目の特徴を観察する。

02 / TOUCH

動きと反応を実際に試す。

03 / BUILD

実装方法とAIプロンプトを持ち帰る。

技術は手段。目的は「伝えたい価値を、気持ちよく届けること」。
02

HOW TO USE / この本の読み方

横に、
めくる。

01 / MOVE

ホイール、トラックパッド、スワイプ、矢印キー、下部のPREV / NEXTでページを移動します。

02 / TRY

各技法ページの左側は実演です。TRY ITの指示どおりに触ると、技法そのものが動きます。

03 / TAKE

右下のAI PROMPTをコピーすれば、その技法をAIに実装させる指示として使えます。

04 / FIND

上部のINDEXで章から、SEARCHで名前から、A—Zで五十音ならぬアルファベット順から探せます。

KEYBOARD
  • ←→ 前後のページ
  • / 検索
  • i 検索を開く
  • Esc 閉じる
  • Home 表紙
  • End A—Z索引

情報量の多いページは、ホイールで下まで読んでから次のページへ進みます。
OSで「視差効果を減らす」を有効にしている場合、動きは静止した状態で表示されます。

03

TABLE OF CONTENTS

目次

SELECT A CHAPTER
04
LAYOUT / grid · editorial · hierarchy · negative-space

Swiss Typography

スイス・タイポグラフィ

  • DIFFICULTY easy
  • TREND classic
AaORDER
MAKES
MEANING01—26
DEFINITION

厳密なグリッド、強い文字階層、広い余白で情報を明快に見せる。

IMPRESSION
  • 静けさ●●●●●
  • 信頼感●●●●●
  • 遊び●●●●●
RELATED / 関連技法

WHY

装飾を足さず、情報の優先順位そのものを美しさに変えられる。

VISUAL
  • 左揃え
  • 明確なグリッド
  • 大胆なサイズ差
IMPLEMENTATION

CSS Grid · clamp() · thin rules

BEST FOR
  • ブランドサイト
  • ポートフォリオ
  • アーカイブ
AVOID
  • 余白を埋める。
  • 全要素を同じ大きさにする。
CODE
.page{display:grid;grid-template-columns:repeat(12,1fr);gap:2vw}
.headline{grid-column:1/7;font-size:clamp(2.5rem,6vw,6rem);line-height:.92;letter-spacing:-.04em}
.lead{grid-column:8/12;max-width:44ch;line-height:1.7}
.rule{grid-column:1/-1;border-top:1px solid currentColor;opacity:.35}
AI PROMPT

Create a Swiss editorial layout using a strict asymmetric grid, left-aligned typography, large scale contrast, generous negative space and thin rules.

05
LAYOUT / asymmetry · visual-balance · negative-space · grid

Asymmetric Layout

非対称レイアウト

  • DIFFICULTY medium
  • TREND classic
  • SOURCES 4
  • RESEARCHED 2026-08-14
OFFBALANCE

ポインターを左右に動かすか、タッチで面をなぞり、重心と余白の釣り合いを観察する。

DEFINITION

左右や上下を鏡写しにせず、大きさ・位置・色・余白の異なる要素を釣り合わせ、意図的な重心と読む流れをつくる構成技法。

非対称レイアウトは、単に要素を不規則にずらす手法ではない。画面を一つの場として扱い、強い見出しや図版を一方に置き、反対側の余白、細い文字、色面などで視覚的な釣り合いをつくる。New Typographyでは対称的な段組みを離れ、文字と図版を調和した非対称構成へ置く方法として展開された。WebではCSS Gridで二次元配置を設計できるが、視覚位置だけを変えて意味上の順序を壊してはいけない。

IMPRESSION
  • 緊張感●●●●●
  • 躍動感●●●●●
  • 秩序●●●●●
RELATED / 関連技法

WHY
  • 主役と補助要素の重さを変えることで、最初に見る場所と次に読む方向を明確にできる。
  • 広い余白と偏った重心から、対称構成にはない緊張感や動きを静止画面の中につくれる。
  • グリッドを骨格に残しながら一部だけを外すと、秩序と意外性を両立できる。
VISUAL
  • 大きな見出しや図版が中央から外れ、一方の領域に強い視覚的な重心をつくる。
  • 反対側の広いネガティブスペースや小さな要素が、主役の重さと釣り合う。
  • 異なる列幅、段差、対角線上の配置によって視線が画面内を移動する。
  • 整列線や反復する間隔が、非対称でも偶然に見えない秩序を支える。
IMPLEMENTATION

semantic HTML · CSS Grid · grid-template-areas · clamp() · media queries

  • 見出し、本文、図版を意味が通るDOM順序で記述し、Gridは視覚的な配置調整に限定する。
  • 12列などの基準線を用意し、主役、補助情報、空白がどの線に沿うかを明示する。
  • 狭い幅では一列へ戻し、余白とサイズ差で階層を残す。固定高さや大きな負のマージンに依存しない。
  • 装飾的な重なりはpointer-eventsやz-indexを確認し、リンクやフォーカス表示を遮らないようにする。
BEST FOR
  • ポートフォリオ、文化施設、ファッションなど図版と余白を強く演出するサイト。
  • キャンペーンやランディングページのキービジュアルと短いメッセージ。
  • 見出し、本文、図版に明確な優先順位があるエディトリアルページ。
AVOID
  • 整列基準や視覚的な釣り合いを持たず、要素を偶然に散らしただけの構成。
  • CSS Gridの配置やorderで意味上の順序を入れ替え、視覚順と読み上げ・キーボード順を食い違わせる。
  • 小画面でも大きなオフセットや固定寸法を維持し、文字の重なりや二方向スクロールを起こす。
  • ホバーやポインター移動だけで情報の優先順位や内容を伝える。
ACCESSIBILITY
  • 視覚的な位置ではなく、見出しから本文・図版へ自然に通る意味順でDOMを作り、読み上げ順とフォーカス順を維持する。
  • 320 CSS px相当の幅や400%拡大で一列へリフローし、内容の欠落や二方向スクロールを起こさない。
  • タッチ、キーボード、音声入力でも同じ情報と操作へ到達できるようにし、ホバー位置を必須条件にしない。
  • 非対称化にアニメーションは不要。要素の移動や再配置を演出する場合はprefers-reduced-motionで即時の最終状態へ切り替える。
  • 重なった図版や色面の上でも本文、リンク、フォーカスリングのコントラストと可視性を保つ。
PERFORMANCE
  • 装飾用の絶対配置要素や合成レイヤーを増やしすぎず、基本構成はCSS Gridと通常フローで組む。
  • 大きな主役画像は表示寸法に合うsrcsetとsizesを用意し、画像由来のレイアウトシフトを防ぐため寸法またはaspect-ratioを指定する。
  • ポインター追従を加える場合もレイアウト値を毎フレーム変更せず、必要性を確認して動きのない代替状態を既定にする。
CODE
.asym{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2vw,2rem);align-items:start}.asym__title{grid-column:1/8;font-size:clamp(3rem,9vw,8rem);line-height:.9}.asym__figure{grid-column:7/-1;margin:8rem 0 0}.asym__figure img{display:block;width:100%;height:auto}.asym__lead{grid-column:2/6;max-width:38ch}@media(max-width:48rem){.asym{display:block}.asym__figure{margin:2rem 0}.asym__lead{max-width:60ch}}
SOURCES
AI PROMPT

Design an asymmetric page with one dominant anchor, deliberate negative space, and a clear reading order.

Create an asymmetric editorial webpage on a disciplined grid. Place one dominant headline or image off-center, balance it with deliberate negative space and smaller supporting elements, and use alignment lines and scale contrast to make the reading order unmistakable. Preserve semantic DOM and keyboard order, collapse to a readable single column at narrow widths, keep all essential content available without hover, and show the final static state under reduced-motion preferences.

  • Avoid random scattering without alignment or visual balance.
  • Avoid CSS reordering that conflicts with source and focus order.
  • Avoid clipped text, fixed-height compositions, and two-dimensional scrolling at zoom.
  • Avoid pointer-only meaning and decorative motion without a reduced-motion state.
06
LAYOUT / editorial · magazine · reading-order · columns · captions

Editorial Layout

エディトリアルレイアウト

  • DIFFICULTY medium
  • TREND classic
  • SOURCES 5
  • RESEARCHED 2026-08-14

THE
HUMAN
PAGE

FORM FOLLOWS
THE READING EYE.

VOL. 01

見出し、本文、図版、補助情報の順に視線が導かれる静的な誌面構成を読む。

DEFINITION

見出し、本文、図版、キャプション、引用、罫線を編集し、雑誌や新聞のように情報のまとまりと読む順番を設計する構成技法。

エディトリアルレイアウトは、均一なカードを並べるのではなく、記事の内容に応じて見出しの尺度、本文の行長、段組み、図版、キャプション、引用、余白を組み合わせ、読みのリズムをつくる。Webではarticle、section、見出し、figure、figcaptionなどで意味構造を保ち、CSS GridとMulti-columnを表示幅に応じて使い分ける。誌面らしさより先に、一本の論理的なDOM順序と小画面でのリフローを成立させる必要がある。

IMPRESSION
  • 物語性●●●●●
  • 知性●●●●●
  • 密度●●●●●
RELATED / 関連技法

WHY
  • 長文と複数の図版を、章、補足、引用、キャプションという意味のまとまりに分けて読ませられる。
  • 見出しの大小、行長、段組み、余白の変化によって、内容上の山場と読む速度を設計できる。
  • 記事ごとに情報階層を編集するため、同じ大きさのカードを反復する構成より題材の個性を出しやすい。
VISUAL
  • ディスプレイ見出しと読みやすい本文の大きな尺度差。
  • 本文の単段・複数段、図版の横断配置、引用や補足による変化のある段組み。
  • 図版に結び付いたキャプション、クレジット、番号などの小さな補助文字。
  • 細い罫線、ノンブル風の番号、広い余白が章や情報群の境界を示す。
IMPLEMENTATION

semantic HTML · CSS Grid · CSS Multi-column Layout · figure and figcaption · container queries

  • 記事全体をarticle、話題の区切りをsectionと見出し、自己完結した図版をfigureとfigcaptionで記述する。
  • ページ全体の図版と本文の関係はGrid、連続する短い本文の段組みはcolumn-widthを使い、用途を分ける。
  • 固定column-countより読みやすい最小行長を基準にcolumn-widthを選び、狭い幅では一段へ戻す。
  • 図版は『上の画像』のような位置参照ではなく、番号やラベルで本文から参照し、再配置しても意味を保つ。
  • 本文、注、引用の書体と色は役割ごとに一貫させ、細い補助文字も拡大と高コントラスト表示で読めるようにする。
BEST FOR
  • 特集記事、インタビュー、ケーススタディなどの長文コンテンツ。
  • 文化、報道、ブランドストーリーなど図版と文章を一体で見せるページ。
  • 調査レポートやアーカイブのように本文、注釈、出典、図表を整理する画面。
AVOID
  • 誌面風の装飾を優先し、見出し階層や本文の意味構造をdivだけで組む。
  • 画面より高い固定段組みを作り、読者に下へ進んでから上へ戻る移動を繰り返させる。
  • 長い本文を狭すぎる列や多すぎる列へ流し、拡大時に横スクロールや読順の混乱を起こす。
  • 図版の説明を近接位置だけに依存させ、キャプションや参照ラベルとの対応を曖昧にする。
ACCESSIBILITY
  • 見出し階層、article、section、figure、figcaptionを使い、CSSを外しても記事と図版の関係が理解できるDOMにする。
  • 視覚的な段組みと意味上の順序を一致させ、Gridの配置で読み上げ順やフォーカス順を入れ替えない。
  • 320 CSS px相当の幅や400%拡大では一段へ戻し、情報や機能を失わず二方向スクロールを避ける。
  • リンクや注釈の操作を小さなノンブル・ホバーだけに任せず、タッチとキーボードで認識・操作できる大きさとフォーカス表示を確保する。
  • スクロール連動の章演出は必須にせず、追加する場合はprefers-reduced-motionで静止した最終状態を提示する。
PERFORMANCE
  • 長文全体を過剰な入れ子Gridや個別絶対配置にせず、通常フローと少数のレイアウトコンテナで構成する。
  • 記事内画像は適切な寸法、srcset、sizes、遅延読み込みを使い、最初に見える主役画像だけは優先度を別途判断する。
  • Webフォントの書体数とウェイト数を絞り、本文表示を遅らせないフォールバックとfont-display方針を決める。
  • 長い記事の装飾やスクロール監視を増やす前に、低性能端末でレイアウト・描画・メモリ使用量を測定する。
CODE
.story{display:grid;grid-template-columns:minmax(0,2fr) minmax(16rem,1fr);gap:clamp(2rem,6vw,7rem)}.story__head h1{font-size:clamp(3.5rem,10vw,9rem);line-height:.86}.story__body{min-width:0}.story__copy{column-width:18rem;column-gap:2rem;column-rule:1px solid #bbb}.story figure{margin:3rem 0}.story img{display:block;width:100%;height:auto}.story figcaption{margin-top:.6rem;font-size:.85rem}@media(max-width:48rem){.story{display:block}.story__copy{columns:auto}}
SOURCES
AI PROMPT

Create a magazine-like long read with semantic structure, varied columns, captions, and a clear reading rhythm.

Design a responsive editorial long read with a strong display headline, restrained body typography, varied but purposeful columns, labeled figures with captions, pull quotes, fine rules, and generous section spacing. Keep the article in a logical semantic DOM order, use Grid for composition and multi-column flow only where line length and viewport height remain comfortable, collapse to one column at narrow widths and high zoom, make every link usable by touch and keyboard, and present a static final state when reduced motion is requested.

  • Avoid reducing the article to a uniform grid of cards.
  • Avoid fixed-height columns that force down-and-up reading or horizontal overflow.
  • Avoid decorative headings without semantic levels or images without connected captions and alt text.
  • Avoid tiny hover-only annotations and scroll-driven motion without a reduced-motion state.
07
LAYOUT / split-screen · two-column · comparison · dual-entry

Split Screen

画面分割

  • DIFFICULTY medium
  • TREND classic
  • SOURCES 4
  • RESEARCHED 2026-08-14

左右それぞれをホバーまたはフォーカスし、二つの入口の強調を比較する。

DEFINITION

画面を二つの明確な領域に分け、関連する内容や二つの選択肢を並列に提示するレイアウト技法。

左右または上下の二領域へ内容を分け、対比、補完関係、二つの入口を一画面で示す。単なる二段組みより各領域の独立性と境界が強く、広い画面では同時比較を促し、狭い画面では意味のあるDOM順を保って一列へリフローさせる。

IMPRESSION
  • 対比●●●●●
  • 明快さ●●●●●
  • 均衡●●●●●
  • 選択性●●●●●
RELATED / 関連技法

WHY
  • 二つの主題を同じ視野内に置き、違いと関係を短時間で認識させやすい。
  • 画像と説明、二つの製品、異なる利用者向け入口など、大きな内容ブロックを混雑させず結び付けられる。
VISUAL
  • 画面を横または縦に二分する明確な境界線や色面。
  • 同程度の面積を持つ二領域と、それぞれに独立した見出しや行動要素。
  • 片側を強調しても、もう一方の存在と選択可能性が残る。
IMPLEMENTATION

CSS Grid · Flexbox · media queries · :focus-visible · prefers-reduced-motion

  • 基本構造は二つの意味あるsectionまたはlinkをDOM上の自然な順序で並べ、広い領域だけ二列Gridにする。
  • 内容に応じたブレークポイントで一列へ切り替え、固定高ではなくminmaxやmin-block-sizeを使って長文を受け止める。
  • hoverによる幅変更を行う場合はfocus-withinでも同じ状態を提供し、タップでは各領域そのものを明確なリンクまたはボタンにする。
  • 境界、見出し、ラベルを併用し、色だけで二領域を区別しない。
BEST FOR
  • 二つのサービス、対象者、ブランド、製品を選ばせる入口。
  • 写真と文章、現在と未来、課題と解決など、補完または対比する内容。
  • 主要な二案を同じ画面で比較させるランディングページ。
AVOID
  • 三つ以上の選択肢を無理に細分化し、各領域の判別と操作を難しくする。
  • 狭い画面でも左右二分を固定し、文字や操作対象を縮小・切り詰める。
  • hoverだけで選択肢の説明や操作を表示し、タッチ・キーボード利用者に情報を隠す。
  • 片側の拡大アニメーションで他方のフォーカス、ラベル、操作対象を覆う。
ACCESSIBILITY
  • 二領域の意味と選択結果がDOM順でも自然に理解でき、視覚順と読み上げ・フォーカス順が一致するようにする。
  • 320 CSS px相当の幅や400%拡大で一列へリフローし、情報や機能を失わず二次元スクロールを避ける。
  • 各領域の操作対象には可視フォーカス、明確な名前、十分なターゲット寸法を設け、hover以外でも操作できるようにする。
  • 色面だけに意味を依存せず、各領域に見出しやテキストラベルを置き、文字とUIのコントラストを確認する。
  • 領域の拡大、背景移動、スクロール連動は装飾に限定し、prefers-reduced-motion: reduceでは停止または即時切り替えにする。
PERFORMANCE
  • 両側に大きな画像や動画を置く場合は、表示寸法に合うレスポンシブ画像、圧縮、遅延読み込みを使う。
  • hoverやフォーカスの強調は可能ならtransformやopacityで行い、列幅を連続変更するレイアウト再計算を避ける。
  • 自動再生動画を二領域へ重ねず、静止画フォールバックと明示的な再生制御を用意する。
CODE
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-block-size:70svh}.split__panel{display:grid;align-content:end;padding:clamp(1.5rem,5vw,5rem)}.split__panel:focus-visible{outline:3px solid currentColor;outline-offset:-6px}@media(max-width:48rem){.split{grid-template-columns:1fr;min-block-size:auto}.split__panel{min-block-size:45svh}}@media(prefers-reduced-motion:reduce){.split__panel{transition:none}}
SOURCES
AI PROMPT

Design a responsive split-screen entry with two equally legible choices.

Create a responsive split-screen landing entry with two distinct but equally legible content panels, a decisive divider, contrasting fields, persistent headings and clear calls to action. Stack the panels in meaningful DOM order on narrow screens, support keyboard focus and touch without hover-only content, preserve readable contrast and target sizes, and disable non-essential expansion or parallax when reduced motion is requested.

  • Avoid more than two competing primary panels.
  • Avoid hover-only labels, hidden calls to action, or color-only distinctions.
  • Avoid fixed desktop columns that clip text on mobile or at zoom.
  • Avoid motion that covers the inactive choice or conflicts with reduced-motion preferences.
08
LAYOUT / grid · dashboard · card · information-density

Bento Grid

ベントーグリッド

  • DIFFICULTY easy
  • TREND current
MAIN0203040506
DEFINITION

大小のセルを弁当箱のように敷き詰め、情報の粒度を一枚で見せる。

IMPRESSION
  • 整理●●●●●
  • 現代性●●●●●
  • 静けさ●●●●●
RELATED / 関連技法

WHY

項目が多くても、面積の差だけで主役と脇役を伝えられる。

VISUAL
  • 矩形の反復
  • 大小のリズム
  • 均一な余白
IMPLEMENTATION

CSS Grid · grid-template-areas · gap

BEST FOR
  • 機能一覧
  • ダッシュボード
  • まとめページ
AVOID
  • 全セルを同じ大きさにする。
  • 隙間を詰めて呼吸を止める。
CODE
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(120px,auto);gap:12px}
.bento>.hero{grid-column:span 2;grid-row:span 2}
.bento>.wide{grid-column:span 2}
@media(max-width:720px){.bento{grid-template-columns:repeat(2,1fr)}.bento>*{grid-column:span 1}}
AI PROMPT

Build a bento grid with varied cell sizes, one hero cell, consistent gaps and a reading order that survives when cells reflow.

09
LAYOUT / broken-grid · asymmetry · overlap · editorial

Broken Grid

崩しグリッド

  • DIFFICULTY advanced
  • TREND current
  • SOURCES 4
  • RESEARCHED 2026-08-14
GRIDOUT OF
LINE

基準グリッドを残したまま、画像と見出しが列をまたいで重なる構成を確認する。

DEFINITION

基準となるグリッドの秩序を残しつつ、一部の要素を列や領域から意図的にはみ出させ、重なりや非対称性を作る技法。

規則をなくすのではなく、文字、画像、余白を支える基準線を保ちながら、少数の要素だけをずらす。整った読みやすさと予想外の重なりを対比させ、視線の起点やブランドらしいリズムを作る。視覚配置が複雑でも、DOMの意味順、文字の可読性、狭い画面でのリフローは崩さない。なお本書では、基準となるグリッド線が存在し少数の要素が意図的にその線を越えるものをBroken Grid、グリッド自体を非対称に設計するものをAsymmetric Layoutとして区別する。前者は規則の破壊、後者は規則の設計である。

IMPRESSION
  • 緊張感●●●●●
  • 意外性●●●●●
  • 秩序●●●●●
  • 編集性●●●●●
RELATED / 関連技法

WHY
  • 均一なグリッドの予測可能性に例外を作り、重要な画像や見出しへ視線を集められる。
  • 非対称配置、重なり、余白の差によって、編集的で固有性のあるリズムを生み出せる。
VISUAL
  • 全体を支える列や基準線と、そこから意図的にはみ出す少数の要素。
  • 画像と文字の重なり、非対称な余白、異なる幅のブロック。
  • 崩した箇所以外には反復する整列や間隔が残り、例外が識別できる。
IMPLEMENTATION

CSS Grid · grid line placement · negative margin · z-index · media queries

  • まず通常のGridで意味のあるDOM順と読みやすい基準線を作り、少数の装飾要素だけに列のまたぎや負の余白を適用する。
  • Gridアイテムは交差する領域、負の余白、位置指定によって重ねられ、z-indexで重なり順を管理できる。
  • 狭い画面では重なりとオフセットを解除し、内容を一列の通常フローへ戻す。
  • 装飾図形はpointer-events: noneにし、リンクやボタンの操作とフォーカス表示を妨げない。
BEST FOR
  • 作品紹介、ポートフォリオ、特集記事など、少数の主役を強調するページ。
  • 写真や大きな見出しで独自の編集リズムを作るブランドサイト。
  • 標準グリッドを基礎にしながら、特定セクションだけに視覚的な驚きを加える構成。
AVOID
  • すべての要素を無秩序にずらし、基準線と強調箇所の差をなくす。
  • CSSの視覚配置で意味のあるDOM順やキーボードのフォーカス順を逆転させる。
  • 重なりで本文、リンク、フォーカス表示を覆い、文字拡大や翻訳時に内容を欠落させる。
  • 小画面でも負の余白や絶対配置を固定し、横スクロールと小さなタッチ対象を発生させる。
ACCESSIBILITY
  • 視覚的に交差させても、見出し、本文、リンクのDOM順を意味のある読み順にし、Grid配置を論理順の代用にしない。
  • 重ねた画像や装飾がテキスト、操作対象、可視フォーカスを覆わないよう、重なり順と十分な背景コントラストを確認する。
  • 320 CSS px相当の幅や400%拡大では一列へ戻し、情報や機能の欠落と二次元スクロールを防ぐ。
  • タッチ操作は重なった小さな領域に依存させず、リンクとボタンに十分な大きさと間隔を確保する。
  • 視差やスクロール連動で要素をグリッド外へ動かす場合は装飾に限定し、prefers-reduced-motion: reduceで静止させる。
PERFORMANCE
  • 大きな重なり画像は適切な寸法、形式、圧縮、遅延読み込みを使い、画面外の高解像度資産を先読みしすぎない。
  • スクロール中にtop、left、grid trackを連続更新せず、動きが必要なら合成可能なtransformとopacityを限定的に使う。
  • 過剰な絶対配置と深い重なりコンテキストを避け、レスポンシブ変更時の再レイアウトと描画負荷を実機で測定する。
CODE
.broken{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.75rem,2vw,2rem);align-items:center}.broken__copy{grid-column:2/7;grid-row:1;z-index:2}.broken__media{grid-column:6/13;grid-row:1}.broken__accent{grid-column:1/4;grid-row:1;transform:translateY(35%);pointer-events:none}@media(max-width:48rem){.broken{display:block}.broken__copy,.broken__media,.broken__accent{margin:0;transform:none}.broken__accent{display:none}}
SOURCES
AI PROMPT

Create an editorial broken-grid layout with controlled asymmetry and overlap.

Create a responsive editorial broken-grid page built on a visible column rhythm. Let only one or two hero elements cross grid lines or overlap, while body copy, navigation and calls to action remain readable and operable. Preserve meaningful DOM and focus order, remove risky overlap on narrow screens and at zoom, keep touch targets unobstructed, and freeze any decorative parallax when reduced motion is requested.

  • Avoid random offsets on every element or a layout with no recoverable grid rhythm.
  • Avoid visual reordering that contradicts DOM, reading, or keyboard order.
  • Avoid overlaps that cover text, controls, focus indicators, or touch targets.
  • Avoid fixed coordinates, horizontal overflow, and motion-dependent meaning.
10
LAYOUT / full-bleed · edge-to-edge · hero-image · responsive-image

Full Bleed

フルブリード

  • DIFFICULTY medium
  • TREND classic
  • SOURCES 5
  • RESEARCHED 2026-08-14
NO
MARGINEDGE TO EDGE

表示比率を切り替え、画像の焦点と文字の安全領域が保たれるか比較する。

DEFINITION

画像や色面を通常の本文幅から外へ広げ、画面またはコンテナの端まで届かせる一方、文字と操作は安全な読み取り領域に保つ構図技法。

Full Bleedは、印刷の裁ち落としに似た端まで続く面をWebのヒーロー、写真、色面へ応用する。本文は読みやすい最大幅に残し、特定の視覚要素だけをグリッド外端へまたがせる。画像を固定高でcoverすると周辺が切れるため、主題の安全領域、object-position、画面比率ごとのアートディレクション、文字コントラスト、適切な画像候補を一体で設計する。

IMPRESSION
  • 没入感●●●●●
  • 写真主役●●●●●
  • 情報密度●●●●●
  • 静けさ●●●●●
RELATED / 関連技法

WHY
  • 写真や色の連続面で表示領域の境界を弱め、主題への没入感を強められる。
  • 本文幅と視覚要素の幅を分離し、長文の可読性を保ちながら大きな図版を提示できる。
  • 章の切り替えや主要メッセージを、余白の内側に閉じない面積差で明確にできる。
VISUAL
  • 画像、映像、背景色の少なくとも一辺が画面または親コンテナの端へ達する。
  • 本文や操作は中央の読み取り幅に残り、全幅の面との幅差が階層を作る。
  • 異なる画面比率でも主題が残るよう、画像の焦点位置や切り抜きが調整される。
IMPLEMENTATION

CSS Grid · object-fit · object-position · HTML picture · srcset · sizes

  • 本文グリッドに左右の全幅トラックを用意し、通常要素は本文列、全幅要素だけを外端のグリッド線までまたがせる。
  • 固定比率の枠へ画像を満たす場合は object-fit: cover と object-position を使い、各画面比率で主題が切れないことを確認する。
  • 表示幅だけが違う場合はsrcsetとsizes、構図自体を変える場合はpictureとmedia条件でアートディレクションする。
  • 100vwによる意図しない横スクロールを避け、親グリッドの端または利用可能なコンテナ幅を基準にする。
BEST FOR
  • 旅行、飲食、建築、ファッションなど写真が主要情報となるヒーロー。
  • 記事本文の流れを区切る大型図版や章扉。
  • ブランドカラーや映像をページ全体の雰囲気として見せるキャンペーン。
AVOID
  • 重要な人物、商品、文字をcoverによる切り抜きの安全領域外へ置く。
  • 明度差の大きい写真へ対策なしで文字を重ね、表示箇所ごとにコントラストを変動させる。
  • 本文や主要操作まで画面端へ寄せ、ズーム時のリフローや端末の安全余白を失う。
  • 必要表示寸法を超える単一の巨大画像を全端末へ配信する。
ACCESSIBILITY
  • 情報を伝える画像には目的に合う代替テキストを付け、純粋な装飾画像は支援技術から無視できるようにする。
  • 画像上の文字は、画像の全候補と切り抜き位置で十分なコントラストを確保し、必要なら不透明な背景面を置く。
  • 320 CSS px相当の幅と200%拡大でも、重要な内容と操作を失わず二次元スクロールを要求しないことを確認する。
  • 背景画像だけに重要情報を持たせず、重要な被写体が切り抜かれる場合は構図違いの画像か非トリミング表示を用意する。
  • パンやズームの演出を加える場合は本文を動かさず、prefers-reduced-motionで静止画へ切り替える。
PERFORMANCE
  • srcsetとsizesで実表示幅に近い画像候補を選ばせ、必要以上に大きな画像転送を避ける。
  • widthとheightまたはaspect-ratioで表示領域を先に確保し、読み込み後のレイアウト移動を抑える。
  • ファーストビューの主要画像は遅延読み込みにせず、圧縮形式と優先度を実測してLCPを確認する。
  • 画面外の大型図版は遅延読み込みし、動画を全幅背景にする場合はポスター、停止手段、通信量を別途設計する。
CODE
/* 100vwを使わず名前付きグリッド線で全幅トラックを作る。横スクロールが出ない */
.prose{display:grid;grid-template-columns:[full-start] minmax(1rem,1fr) [content-start] minmax(0,64ch) [content-end] minmax(1rem,1fr) [full-end]}
.prose > *{grid-column:content}
.bleed{grid-column:full;margin-block:clamp(1.5rem,5vw,4rem)}
.bleed img{inline-size:100%;block-size:clamp(14rem,45svh,32rem);object-fit:cover;object-position:50% 40%}
.bleed figcaption{max-inline-size:64ch;margin-inline:auto;padding:.75rem 1rem}
@media (prefers-reduced-motion: reduce){.bleed img{animation:none;transition:none}}
SOURCES
AI PROMPT

Design an edge-to-edge image layout with a protected readable content column.

Create a full-bleed editorial hero where responsive imagery reaches the viewport edges while semantic copy and controls stay inside a readable safe column. Preserve the subject across aspect ratios with verified focal positioning or art-directed sources, maintain text contrast, meaningful alt text and zoom reflow, reserve image dimensions, and deliver right-sized responsive assets.

  • Avoid cropping essential subjects, embedded text, controls, or product details.
  • Avoid placing readable text directly over uncontrolled high-contrast imagery.
  • Avoid fixed heights that clip enlarged text or create two-dimensional scrolling.
  • Avoid oversized single-source images and nonessential motion without a reduced-motion fallback.
11
LAYOUT / overlap · z-index · stacking-context · depth · editorial · composition

Layered Layout

レイヤードレイアウト

  • DIFFICULTY medium
  • TREND current
  • SOURCES 4
  • RESEARCHED 2026-08-14
DEPTH
BY ORDER

ポインターを動かし、前景・中景・背景の位置差と重なり順を確認する。

DEFINITION

テキスト、画像、色面などを意図的に前後へ重ね、重なり順と部分的な隠れによって視覚階層や奥行きを作るレイアウト技法。

Layered Layoutは、要素同士の重なりを構図へ取り込み、前景・中景・背景を作る。CSS Gridの同一領域への配置やposition、z-indexを使えるが、重なり順は単純な数値比較ではなくstacking contextごとに決まる。通常フローと意味の通るDOM順序を土台にし、重要な文字や操作を覆わず、小画面や拡大時には重なりを弱めることが要点となる。

IMPRESSION
  • 立体感●●●●●
  • 大胆さ●●●●●
  • 編集的●●●●●
  • 情報密度●●●●●
RELATED / 関連技法

WHY
  • 画面を単純に分割せず、前後関係で情報の主従と奥行きを同時に示せる。
  • 画像、文字、色面を一つの構図として結び付け、注目させる要素を限定できる。
  • グリッドを基礎に一部だけを重ねることで、秩序を残したまま視覚的な緊張を作れる。
VISUAL
  • 画像、文字、カード、色面の一部が交差し、背後の要素も認識できる。
  • 前景・中景・背景の役割が、面積、コントラスト、重なり順で区別される。
  • 同じグリッド領域を共有する要素や、境界を越える要素が構図の焦点になる。
  • 余白と見えている輪郭が、隠れた要素の連続性を示す。
IMPLEMENTATION

CSS Grid · CSS position · CSS z-index · CSS transform · CSS isolation

  • まずGridや通常フローで内容の寸法と読み順を成立させ、同一grid-areaへの配置や一部のpositioningで必要箇所だけを重ねる。
  • position:absoluteは要素を通常フローから外すため、親の寸法がその要素だけに依存しないようにする。
  • z-indexはstacking context内で評価される。transform、filter、opacity、isolationなどが新しいcontextを作る条件を確認する。
  • 狭いコンテナや長い翻訳では、重なり量を減らすか一列へ戻すフォールバックを用意する。
BEST FOR
  • ブランドサイトやキャンペーンのヒーロー。
  • 写真と大見出しを統合するポートフォリオやエディトリアルページ。
  • 前景と背景の関係で物語を見せる短いランディングページ。
AVOID
  • 本文、リンク、ボタン、フォーカス表示が別レイヤーに覆われる構成。
  • 全要素を通常フローから外し、内容量や画面幅の変化で崩れる配置。
  • 小画面や文字拡大でもデスクトップと同じ重なりを強制する。
  • 装飾レイヤーを増やし続け、どれが主要情報か判別できなくする。
ACCESSIBILITY
  • 意味の通るDOM順序を保ち、見た目の前後関係を読み上げ順やフォーカス順の代替にしない。
  • 文字、リンク、ボタン、フォーカス表示が装飾や透明レイヤーに覆われず、ポインター操作も遮られないことを確認する。
  • 背景上の文字は背景の全状態でコントラストを確保し、必要なら不透明な文字面を置く。
  • 200%文字拡大と320 CSS px相当の幅で、文字のクリップ、重複、機能欠落、二次元スクロールが起きない構成へ戻す。
  • ポインター追従は内容理解や操作の必須条件にせず、タッチとキーボードでは同じ情報を静的に提示する。
  • レイヤーを動かす場合はprefers-reduced-motionで追従や視差を停止する。
PERFORMANCE
  • 巨大な半透明面、filter、backdrop-filter、blend modeの重ね過ぎを避け、低性能端末で描画を計測する。
  • 追従アニメーションを使う場合は毎フレームのレイアウト計測を避け、transform中心でも実測する。
  • will-changeを常用せず、必要な要素と期間に限定する。
  • 背景・前景画像は表示寸法に合う候補と圧縮形式を配信し、領域を事前確保する。
CODE
.layered{display:grid;isolation:isolate}.layered>*{grid-area:1/1}.layered img{width:min(76%,48rem)}.layered h1{z-index:1;justify-self:end;align-self:center;font-size:clamp(3rem,10vw,9rem);line-height:.85}@media(max-width:40rem){.layered h1{align-self:end;font-size:clamp(2.5rem,15vw,5rem)}}
SOURCES
AI PROMPT

Editorial layered web layout with deliberate overlap and a clear reading order.

Create a responsive editorial website with a clear foreground, middle ground and background. Overlap one large headline, one image and one restrained color field on a stable grid, preserve semantic DOM and focus order, keep every word and control legible, reduce overlap on narrow or zoomed layouts, provide a static touch and keyboard experience, and stop layer motion when reduced motion is requested.

  • Avoid random overlap and arbitrary z-index escalation.
  • Avoid covered body text, controls, focus indicators, or pointer targets.
  • Avoid absolute-positioning the entire document or preserving desktop overlap on small screens.
  • Avoid pointer-only meaning, excessive filters, and motion without a reduced-motion state.
11a
LAYOUT / container-query · responsive-component · css-containment

Container Query Layout

コンテナクエリ・レイアウト

  • DIFFICULTY medium
  • TREND rising
  • SOURCES 3
  • RESEARCHED 2026-08-14
REUSABLE CARDADAPTIVE

参照するのはビューポートではなく、この枠の幅。

DRAG THE CORNER OR SLIDER

カードの外枠をドラッグするか、WIDTHスライダーで幅を変え、縦積みと横並びの切り替えを確認する。ビューポートの幅は変わっていない。

DEFINITION

ビューポートではなく、部品を収める祖先コンテナの寸法などを条件に、内部レイアウトを切り替えるレスポンシブ技法。

メディアクエリが端末や表示領域を参照するのに対し、コンテナクエリはカードや記事など各部品の置かれた領域を参照する。同じ部品をメイン領域、サイドバー、グリッド内で再利用しても、利用可能な幅に応じて縦積み、横並び、文字サイズを局所的に調整できる。

IMPRESSION
  • 整然さ●●●●●
  • 安定感●●●●●
  • 軽快さ●●●●●
  • 劇的さ●●●●●
RELATED / 関連技法

WHY
  • 再利用部品をページ全体のブレークポイントから切り離し、配置先に応じて自律的に適応させられる。
  • 部品ごとの読みやすさを、実際に利用できるインライン寸法に基づいて保ちやすい。
VISUAL
  • 狭い領域では画像、見出し、本文が一列に積まれる。
  • 広い領域では画像と本文が横並びになり、余白や文字階層も段階的に広がる。
  • 同じカードでも配置先ごとに構成が変わり、内容と操作の順序は維持される。
IMPLEMENTATION

CSS container-type · CSS @container · CSS container query units · CSS Grid

  • 通常は祖先に container-type: inline-size を設定し、その子孫を @container のインライン寸法条件で切り替える。
  • 複数の候補がある場合は container-name を付け、意図した祖先コンテナを明示する。
  • container-type: inline-size はインラインサイズ包含と独立した整形コンテキストを生むため、コンテナの寸法が内容だけに依存しない設計を確認する。
  • 部品の既定状態を先に実装し、コンテナクエリ非対応環境でも内容と操作が成立するようにする。
BEST FOR
  • カード、メディアオブジェクト、商品一覧など複数の場所で再利用する部品。
  • サイドバーと本文領域で共通コンポーネントを使う編集・管理画面。
AVOID
  • コンテナの寸法だけでDOM順序を逆転させ、視覚順と読み上げ・キーボード順を食い違わせる。
  • 細かな閾値を増やしすぎて、幅の変化ごとにレイアウトが不安定に切り替わる設計。
  • 内容由来の最小幅や長い語句を確認せず、固定寸法に依存する。
ACCESSIBILITY
  • 狭いコンテナでも内容を欠落させず、拡大時に横方向と縦方向の二次元スクロールを要求しない構成を確認する。
  • CSS Gridの配置変更で意味のあるDOM順序やフォーカス順序を変えない。
  • 文字拡大、長い翻訳、ユーザー指定の文字間隔でも重なりや切り詰めが起きないか確認する。
  • レイアウト切り替えに動きを加える必要はない。遷移を追加する場合は prefers-reduced-motion で抑制できるようにする。
PERFORMANCE
  • 必要な部品だけをクエリコンテナにし、深い入れ子と過剰な条件分岐を避ける。
  • 寸法変化を連続アニメーションさせる場合は、頻繁な再レイアウトと条件の往復が起きないか測定する。
CODE
.card-area{container:card / inline-size}
/* 既定状態を先に決める。コンテナクエリ非対応でも内容と操作は成立する */
.card{display:grid;gap:1rem}
.card img{inline-size:100%;aspect-ratio:16/9;object-fit:cover}
/* DOM順は変えず列を増やすだけ。読み上げ順とフォーカス順は保たれる */
@container card (inline-size > 30rem){
  .card{grid-template-columns:minmax(0,12rem) minmax(0,1fr);align-items:center}
  .card img{aspect-ratio:1}
}
@media (prefers-reduced-motion: no-preference){.card{transition:grid-template-columns .2s}}
SOURCES
AI PROMPT

Design a reusable card that responds to its container width, not the viewport.

Create a reusable editorial card with container queries. Use a single-column default, switch to a balanced image-and-copy grid only when the card container is wide enough, preserve semantic DOM and focus order, allow text reflow and zoom, and keep a functional no-query fallback.

  • Avoid viewport-only breakpoints for component decisions.
  • Avoid visual reordering that conflicts with DOM or keyboard order.
  • Avoid clipped text, fixed heights, and excessive micro-breakpoints.
12
TYPOGRAPHY / display-type · fluid-type · clamp · hero-heading

Oversized Typography

巨大文字

  • DIFFICULTY medium
  • TREND current
  • SOURCES 4
  • RESEARCHED 2026-08-14
TYPEIS AN IMAGE

巨大な語が画面端で切り替わる構図を見ながら、文字の判別性と本文の読みやすさを確認する。

DEFINITION

短い見出しや語句を画面の主要な視覚要素になるほど大きく組み、文字の意味と字形の量感を同時に伝える技法。

Oversized Typographyは、大きな表示文字を画像の代わりとなる構図の主役として扱う。CSSのfont-sizeは長さや割合、数式を受け取り、clamp()で最小値・流動値・最大値を組み合わせられる。ただし、巨大化そのものを目的にせず、意味のあるテキストはDOM上の文字として保ち、狭い画面や200%拡大でも本文や操作を覆わないサイズ、折返し、切り抜き範囲を設計する。

IMPRESSION
  • 迫力●●●●●
  • 視認性●●●●●
  • 動的印象●●●●●
  • 余白感●●●●●
  • 繊細さ●●●●●
RELATED / 関連技法

WHY
  • 画像を追加せず、言葉そのものを第一の視覚的焦点にできる。
  • サイズ差によって見出しと補助情報の階層を一目で示せる。
  • 短いブランドメッセージの声量と字形の個性を同時に表現できる。
VISUAL
  • 一語または短い見出しがビューポートの大部分を占める。
  • 文字の一部を端で切り、画面外へ続くスケールを示す。
  • 巨大な表示文字と小さな本文・ラベルの極端なサイズ対比がある。
IMPLEMENTATION

CSS font-size · clamp() · rem · vw · overflow-wrap

  • font-size: clamp(最小値, remとvwを組み合わせた流動値, 最大値)として、極端な画面幅でも上下限を保つ。
  • 意味を伝える見出しは画像化せずHTMLの見出し要素に置き、装飾用の複製は支援技術から除外する。
  • 意図的な切り抜きは装飾部分だけに限定し、狭幅、横向き、200%拡大、文字間隔変更で再確認する。
BEST FOR
  • キャンペーンやイベントのファーストビュー。
  • 章扉や特集ページの短いタイトル。
  • 写真を使わず文字を主役にするブランドステートメント。
AVOID
  • 長文や主要操作まで巨大化し、読む順序を不明瞭にする。
  • 重要な文字を過度に切り抜き、単語を判別できなくする。
  • 固定したビューポート単位だけでサイズを決め、小画面や拡大時に本文と重ねる。
ACCESSIBILITY
  • 意味を担う語句は完全な文字列をDOMに残し、画像だけで同じ情報を提示しない。
  • 大きな文字でも背景とのコントラストを確認し、重要な本文や操作を覆わない。
  • 200%拡大と狭い表示幅で、切り詰め、重なり、横方向への不要なスクロールが起きないことを確認する。
  • スクロール連動で文字を移動・拡大する場合はprefers-reduced-motionで静的な構図に置き換える。
PERFORMANCE
  • 巨大見出しのためだけに重い画像を用意せず、可能なら実テキストとCSSで構成する。
  • Webフォントを使う場合は必要な字種とウェイトに絞り、読み込み前後の改行変化とレイアウト移動を測定する。
  • スクロールごとのfont-size変更を避け、静的な流動サイズを基本にする。
CODE
.oversized{display:grid;gap:clamp(1rem,3vw,2rem);padding:clamp(1rem,4vw,4rem)}
/* remを混ぜた流動値。vw単独にしないので拡大時も上下限が効く */
.oversized__title{margin:0;font-size:clamp(3rem,2rem + 13vw,11rem);line-height:.9;overflow-wrap:anywhere}
.oversized__lead{max-inline-size:60ch}
@media (prefers-reduced-motion: reduce){.oversized__title{animation:none;transition:none}}
SOURCES
AI PROMPT

Use one oversized typographic statement as the main visual shape.

Design a responsive hero around one short oversized typographic statement. Treat the glyphs as the dominant visual shape, allow only decorative edges to crop, preserve the full semantic heading in HTML, keep body copy and controls unobscured at narrow widths and 200% zoom, use bounded fluid sizing, and provide a static composition when reduced motion is requested.

  • Avoid cropping letters needed to identify the message.
  • Avoid fixed viewport-only sizing that overlaps content on small screens.
  • Avoid scroll-driven motion without a reduced-motion fallback.
13
TYPOGRAPHY / kinetic-type · letter-animation · timing · display-type

Kinetic Type

動く文字

  • DIFFICULTY medium
  • TREND current
  • SOURCES 3
  • RESEARCHED 2026-08-16

ボタンで短い単語を再生し、字ごとの遅延と最終的な静止状態を確認する。

DEFINITION

短い文字列の字ごとの出現、移動、変形、停止を設計し、読む速度と語気をタイポグラフィの造形として扱う技法。

文字を字または語の単位へ分け、遅延、加減速、変形と静止点を組み合わせて、コピーを読む時間そのものを設計する。装飾的な連続運動ではなく、短い表示文字が明確な順序で現れ、最後に安定して読めることが重要になる。なお本書では、CSSを中心に短い見出しへ字送りの演出を加えるものをKinetic Type（本項）、GSAPなど外部ライブラリで長めのシーケンスを組むものをGSAP Motion Typography（MOTION章）として区別する。

IMPRESSION
  • 躍動感●●●●●
  • リズム●●●●●
  • 表現力●●●●●
  • 静けさ●●●●●
RELATED / 関連技法

WHY
  • 静止した見出しへ発話の間と強弱を加えられる。
  • 画像に頼らず文字自体を主役の視覚要素にできる。
  • 字ごとの時間差で短いコピーの読み順を強調できる。
VISUAL
  • 一文字または一語ごとの短い遅延。
  • 移動、回転、可変軸など字形に関わる変化。
  • 演出後に全字が読める決定的な静止状態。
IMPLEMENTATION

CSS Animations · Web Animations API · CSS transforms · @property

  • 元のHTMLには完全な文字列を置き、視覚的な分割は補助的なspanで行う。
  • transformとopacityを中心に短いシーケンスを作り、完了状態を保持する。
  • 文字の読み順とDOM順を一致させる。
BEST FOR
  • キャンペーンの短い見出し。
  • 展示や章扉のタイトル。
  • ブランドの語気を文字だけで示すヒーロー。
AVOID
  • 本文や長文を一字ずつ動かす。
  • 出現完了まで内容を長く待たせる。
  • 点滅や画面を横断する大移動を繰り返す。
  • JavaScript失敗時に文字を非表示のまま残す。
ACCESSIBILITY
  • 支援技術には分割前の一つの読み上げ可能な文字列を提供する。
  • prefers-reduced-motionでは遅延と移動を除き、完成状態を即時表示する。
  • 点滅や高頻度の明暗反転を避け、操作ボタンには可視フォーカスを付ける。
PERFORMANCE
  • 必要な短い文字列だけを分割し、長文や多数の見出しを個別DOMにしない。
  • transformとopacityを優先し、毎フレームのレイアウト計測を避ける。
  • 再生は画面内の一回または明示操作に限定する。
CODE
/* 読み上げは分割前の1文字列。視覚的な分割spanはaria-hiddenにする */
.ktype span span{display:inline-block;animation:ktype-in .5s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes ktype-in{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
/* 演出後は必ず読める静止状態で止める（bothでfinal状態を保持） */
@media (prefers-reduced-motion: reduce){.ktype span span{animation:none}}
SOURCES
AI PROMPT

Animate a short display word letter by letter and end in a stable readable state.

Create kinetic display type for one short headline using small per-letter delays, purposeful easing and a decisive readable resting state. Preserve one semantic text string for assistive technology, keep the sequence brief, expose replay as a keyboard-operable button, and show the final state immediately when reduced motion is requested.

  • Do not animate body copy or split every heading.
  • Do not loop, flash, or move text across the viewport.
  • Do not hide the message when JavaScript fails.
14
TYPOGRAPHY / variable-font · opentype · optical-sizing · font-axis

Variable Font Axes

可変フォント軸

  • DIFFICULTY medium
  • TREND rising
  • SOURCES 5
  • RESEARCHED 2026-08-14
Type Aa 図鑑wght軸のみ。この書体はwdth軸を持たない

太さ（wght）のスライダーと表示サイズを動かし、同じ見出しの字形と行長の変化を比較する。このデモの書体は幅（wdth）軸を持たないため、幅の比較には対応する書体が必要。

DEFINITION

単一の可変フォント資源が持つ太さ、幅、傾き、光学サイズなどの軸を連続値で選び、文脈に合う字形へ調整する技法。

可変フォントは、フォント作者が定義した一つ以上のデザイン軸と、その最小・既定・最大値を持つ。Webでは太さ、幅、スタイル、光学サイズに対応する高水準CSSプロパティを優先し、独自軸など必要な場合だけ font-variation-settings を使う。単なる文字アニメーションではなく、階層、行長、表示サイズに合わせて字形と密度を設計する点が中心となる。

IMPRESSION
  • 抑揚●●●●●
  • 力強さ●●●●●
  • 精密感●●●●●
  • 静けさ●●●●●
RELATED / 関連技法

WHY
  • 一つのファミリー内で細かな太さや幅を選び、見出しと本文の階層を連続的に調整できる。
  • 光学サイズ軸がある書体では、表示サイズに応じた字形を選択できる。
  • 複数の静的フォントファイルを使う構成より、選択肢と資源数を整理できる場合がある。
VISUAL
  • 同一骨格の文字が、太さや幅の軸に沿って滑らかに変化する。
  • 見出しでは幅や太さが強まり、本文では行長と可読性に適した値へ戻る。
  • 光学サイズ対応書体では、小さな文字と大きな文字で細部や字間の設計が変化する。
IMPLEMENTATION

OpenType variable fonts · CSS Fonts · @font-face · font-variation-settings · font-optical-sizing

  • 書体のfvarテーブルまたは公式資料で、利用できる軸タグと最小・既定・最大値を確認する。
  • wght、wdth、slnt、ital、opszは可能な限りfont-weight、font-width、font-style、font-optical-sizingで制御する。
  • 独自軸を使うときだけfont-variation-settingsを追加し、未対応時は標準プロパティと代替フォントで読める状態を保つ。
BEST FOR
  • 多段階の文字階層を少ないフォント資源で構成するエディトリアルサイト。
  • 幅の異なる部品に合わせて文字密度を調整するレスポンシブUI。
  • ブランドの声量を太さや幅の連続変化で表現する短い見出し。
AVOID
  • 書体が実装していない軸や範囲を推測して指定する。
  • 本文を常時変形・振動させ、読みやすさを損なう。
  • font-variation-settingsで標準軸を一括指定し、通常のfont-weightなどのカスケードやフォールバックを壊す。
ACCESSIBILITY
  • 本文の軸値は装飾性より判読性を優先し、細すぎる線、狭すぎる字幅、極端な傾きを避ける。
  • ユーザーが行間、字間、単語間を変更しても文字の重なり、切り詰め、機能欠落が起きないことを確認する。
  • 軸をアニメーションする場合は短い見出しに限定し、prefers-reduced-motionでは静的な読みやすい値を提示する。
PERFORMANCE
  • 実際に使う文字集合を考慮してフォントをサブセット化し、転送量と初回描画を計測する。
  • 多数の軸を連続アニメーションすると再描画負荷が増えるため、低性能端末で確認する。
  • font-displayと適切なフォールバックメトリクスを設計し、読み込み時のレイアウト移動を抑える。
CODE
@font-face{font-family:'Body var';src:url('/fonts/body.woff2') format('woff2-variations');font-weight:100 900;font-display:swap}
.vf{font-family:'Body var',system-ui,sans-serif;font-optical-sizing:auto}
/* 標準軸は標準プロパティで指定する。未対応環境でもカスケードとフォールバックが生きる */
.vf__display{font-weight:720;font-width:96%;font-size:clamp(2.5rem,8vw,6rem);line-height:1}
.vf__body{font-weight:400;max-inline-size:62ch}
/* 独自軸だけ font-variation-settings を足す */
@supports (font-variation-settings: normal){.vf__body{font-variation-settings:'GRAD' 88}}
@media (prefers-reduced-motion: reduce){.vf__display{transition:none}}
SOURCES
AI PROMPT

Build a readable variable-font specimen with controlled weight and width axes.

Design an editorial variable-font specimen using verified axis ranges. Use standard CSS font properties for registered axes, reserve custom variation settings for a documented custom axis, keep body text stable and legible, preserve user text spacing, provide a static fallback, and stop axis animation when reduced motion is requested.

  • Avoid invented axis tags or out-of-range values.
  • Avoid ultra-thin, over-condensed, or continuously moving body text.
  • Avoid clipping text or overriding user spacing preferences.
15
TYPOGRAPHY / outline-text · stroke · svg-text · display-type

Outline Type

アウトライン文字

  • DIFFICULTY medium
  • TREND niche
  • SOURCES 4
  • RESEARCHED 2026-08-14
HOLLOWHOVER TO FILL

輪郭文字にポインターを重ねると塗りへ変化する。タッチやキーボードでも情報は静止状態のまま読める必要がある。

DEFINITION

文字内部の塗りを抑え、グリフの輪郭線を主に見せることで、背景を透かしながら大きな字形を構図に組み込む技法。

Outline Typeは、文字の内部より輪郭を強調し、背景との重なりと塗り文字との対比を作る表示用タイポグラフィである。SVG 2はテキストをfillとstrokeで描画でき、CSS Fill and Strokeもテキストの塗りと線を扱う方向を定義しているが、後者は作業草案である。本文や唯一の情報伝達には使わず、輪郭だけの静止状態でも十分な判読性を確保し、hoverによる塗りへの変化は補助的な演出に限定する。

IMPRESSION
  • 透過感●●●●●
  • 装飾性●●●●●
  • 緊張感●●●●●
  • 判読安定性●●●●●
  • 密度感●●●●●
RELATED / 関連技法

WHY
  • 大きな文字の面積感を抑え、背景の写真や色面を見せながら字形を重ねられる。
  • 塗り文字と輪郭文字を対比させ、語句や状態の階層を作れる。
  • 輪郭の線幅と色によって、ポスター的なリズムを少ない要素で加えられる。
VISUAL
  • 文字の内部が透明または背景色に近く、外周の線が字形を示す。
  • 太い表示書体を大きく置き、線幅が小さなカウンターを潰さないよう調整される。
  • 通常時は輪郭、操作時は塗りという対比を使う場合がある。
IMPLEMENTATION

SVG text · SVG fill · SVG stroke · CSS -webkit-text-stroke · @supports · Media Queries

  • 相互運用性を重視する場合は、SVGのtextにfillとstrokeを指定し、同じ文字列をアクセシブルなテキストとして扱う。
  • -webkit-text-strokeを使う実装では@supportsで対応を確認し、未対応時は十分なコントラストを持つ塗り文字へ戻す。
  • hoverで塗りを変える場合も、静止状態だけで語句を読めるようにし、focus-visibleやタップに情報を依存させない。
  • 既定は-webkit-text-stroke（@supportsで判定し未対応時は塗り文字へ戻す）とし、太い輪郭や可変の線幅が必要な場合にSVGのfill/strokeへ切り替える。
BEST FOR
  • 章扉、ヒーロー、ポスター風の短い見出し。
  • 写真を完全に覆わずに重ねる装飾的なタイトル。
  • 同じ語句の塗りと輪郭を対比する短いブランド表現。
AVOID
  • 本文、説明文、フォームラベルを輪郭だけで表示する。
  • 複雑な写真の上で細い線を使い、文字の一部を背景に溶け込ませる。
  • hoverしなければ読めない、または情報を取得できない状態を作る。
ACCESSIBILITY
  • 輪郭線とその内外に接する背景色の組み合わせを実画面で確認し、短い大文字でも判別できる線幅を選ぶ。
  • 意味のある文字列はHTMLまたは適切にラベル付けしたSVGテキストとして残し、輪郭化した画像だけにしない。
  • hoverは装飾的な変化に限定し、タッチ、キーボード、hoverなしの環境でも同じ情報へ到達できるようにする。
  • 塗りや線幅をアニメーションする場合はprefers-reduced-motionで即時切替または静止表示にする。
PERFORMANCE
  • 多数の文字へ多重text-shadowで擬似輪郭を作らず、短い表示文字に適用範囲を絞る。
  • 複雑なSVGフィルターを輪郭表現の必須要件にせず、fillとstrokeを基本にする。
  • 操作中に線幅を連続更新する場合は対象を一つの短い見出しに限定し、低性能端末で描画を確認する。
CODE
/* 既定は-webkit-text-stroke。未対応なら塗り文字へ戻す */
.outlined{font:900 clamp(3rem,10vw,8rem)/1 Arial,sans-serif;color:#e6c56f}
@supports (-webkit-text-stroke: 2px currentColor){
  .outlined{color:transparent;-webkit-text-stroke:2px #e6c56f}
}
/* 静止状態だけで読めること。hoverの塗りは補助に留める */
.outlined:hover{color:#e6c56f}
@media (prefers-reduced-motion: reduce){.outlined{transition:none}}
SOURCES
AI PROMPT

Use readable outlined display type over a controlled background.

Create a short outlined display heading using a verified text stroke method, with a controlled background and sufficient contrast along the full glyph contour. Keep the semantic text accessible, provide a solid-fill fallback, make hover-to-fill purely decorative and usable without hover or precise touch, and disable animated fill or stroke changes when reduced motion is requested.

  • Avoid outlined body copy, labels, or instructions.
  • Avoid thin contours over busy or changing imagery.
  • Avoid making hover the only way to read or understand the text.
16
TYPOGRAPHY / vertical-writing · japanese · writing-mode · text-orientation

Vertical Type

縦方向タイポ

  • DIFFICULTY medium
  • TREND classic
  • SOURCES 4
  • RESEARCHED 2026-08-14
VERTICAL RHYTHM
FOR JAPANESE TEXTwriting-mode: vertical-rl

文字は、
縦にも流れる。

縦組み ＋ 横組みの補助情報

日本語を上から下へ読み、次の行へは右から左へ進む縦組みと、横組みの補助情報を比較する。

DEFINITION

日本語を上から下へ、行を右から左へ流す縦組みを用い、文字列を縦の軸として画面構成へ組み込むタイポグラフィ技法。

Vertical Typeは、文字を90度回転した装飾ではなく、文章のインライン方向と行の進行方向を変える縦組みである。Webではwriting-mode: vertical-rlを基礎に、文字種ごとの向きをtext-orientation、短い数字などの縦中横をtext-combine-uprightで調整する。日本語の見出しや短文に縦の帯と余白をつくれる一方、欧文、数字、ルビ、句読点、スクロール方向を含む読み順を実内容で確認する必要がある。

IMPRESSION
  • 文化性●●●●●
  • 静けさ●●●●●
  • 方向性●●●●●
RELATED / 関連技法

WHY
  • 横組み中心の画面へ直交する文字軸を加え、画像や余白との関係を明確にできる。
  • 日本語の縦組みが持つ上から下、右から左という読みの流れを、文化施設や出版物の文脈に活用できる。
  • 横組みのキャプションや欧文見出しと併用し、情報の役割を組方向の違いで分けられる。
VISUAL
  • 日本語の文字が上から下へ並び、複数行は右から左へ進む。
  • 縦の文字列と横組みの欧文・補助情報が直交して配置される。
  • 文字列の周囲に縦長の余白が生まれ、画面上の帯や柱として見える。
  • 句読点や長音記号などが、縦組みに適した位置・字形で表示される。
IMPLEMENTATION

semantic HTML · CSS Writing Modes · writing-mode · text-orientation · text-combine-upright · CSS logical properties

  • 日本語の縦組みはwriting-mode: vertical-rlを基礎にし、文字列そのもののDOM順序は自然な論理順に保つ。
  • 和欧混植ではtext-orientation: mixedを基準に、短い数字だけ必要に応じてtext-combine-uprightでまとめる。
  • margin-inlineやpadding-blockなどの論理プロパティを使い、組方向が変わっても余白の意味を維持する。
  • 縦組みに適した句読点や縦用字形を持つ日本語フォントを選び、実際の漢字・仮名・英数字で確認する。
  • 狭い画面では短い縦見出しに限定するか横組みへ戻し、ページ全体に横方向スクロールを強制しない。
BEST FOR
  • 日本語の特集見出し、章扉、短い引用。
  • 出版、文学、飲食、伝統文化、文化施設のブランド表現。
  • 横組みの本文に対して、短いタイトルやラベルだけを別軸で示す構成。
AVOID
  • writing-modeを使わず長文全体をtransformで90度回転し、読順や選択を壊す。
  • 長い欧文を縦組みに入れ、横倒しの行や一文字ずつ立つ読みにくい列を作る。
  • 固定した高さに文章を詰め込み、拡大や文字間隔変更で内容を切り落とす。
  • 縦組みの開始位置やスクロール方向を示さず、読む順番を曖昧にする。
ACCESSIBILITY
  • DOM上の文字列は自然な論理順で記述し、CSSを外しても見出しと本文の順序が理解できるようにする。
  • 200%拡大、文字間隔・行間の変更、狭い画面で、縦組みの文字が切れたり重なったりしないことを確認する。
  • 長文や重要な操作ラベルは読みやすい横組み版も検討し、視覚的な位置だけで読む順番を説明しない。
  • 縦組み自体は静的に保ち、スクロール連動や文字移動を加える場合はprefers-reduced-motionで最終状態へ固定する。
  • タッチ端末でもホバーを前提にせず、縦見出しと本文を操作なしで読める状態にする。
PERFORMANCE
  • 文字ごとに要素を分割せず、一つの意味あるテキスト要素へwriting-modeを適用してDOM数を抑える。
  • 縦組み用の日本語Webフォントは収録文字が大きくなりやすいため、必要な字種、サブセット、font-displayを検討する。
  • 文字位置をJavaScriptで測定・再配置せず、CSSの組版と通常フローを優先してリサイズ時の再計算を抑える。
  • 縦長コンテナの固定寸法とoverflow clippingを避け、実機で再レイアウトとスクロール範囲を計測する。
CODE
.vertical-feature{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:start}.vertical-feature h2{writing-mode:vertical-rl;text-orientation:mixed;max-block-size:10em;line-height:1.6}.vertical-feature p{max-inline-size:40em;line-height:1.8}@media(max-width:36rem){.vertical-feature{display:block}.vertical-feature h2{writing-mode:horizontal-tb;max-block-size:none}}
SOURCES
AI PROMPT

Combine true vertical Japanese typesetting with a restrained horizontal Latin subhead.

Design a responsive Japanese editorial composition using semantic text and writing-mode: vertical-rl rather than rotating the content. Set a short Japanese title from top to bottom with lines progressing right to left, pair it with a restrained horizontal Latin subhead, preserve logical DOM and reading order, use a suitable Japanese font, prevent clipping at text zoom and custom spacing, keep all content visible without hover on touch devices, and freeze any optional motion when reduced motion is requested.

  • Avoid rotating a long horizontal paragraph with transform.
  • Avoid long sideways Latin passages, ambiguous starting points, or clipped vertical columns.
  • Avoid hover-only content and animated reading text without a reduced-motion state.
17
TYPOGRAPHY / glyph · cropping · scale · svg-text · typographic-composition

Text as Shape

文字を造形として使う

  • DIFFICULTY medium
  • TREND current
  • SOURCES 4
  • RESEARCHED 2026-08-14
あAFORM BEFORE MEANING

ポインターで巨大な字形の見える範囲を変え、同時に表示された読める名称との違いを確認する。タッチでは静止した構図を表示する。

DEFINITION

文字の意味だけでなく字形の輪郭、内部空間、線、反復を視覚素材として扱い、拡大・切り抜き・重なりで画面の骨格をつくる技法。

Text as Shapeは、一つの文字や短い語を極端に拡大し、画面端で切り取り、反復や重なりによって図形のように構成するディスプレイタイポグラフィである。CSSの実テキスト、SVG text、必要に応じたclipやmaskを使えば、字形を描画素材として扱いながら文字データを保持できる。ただし造形化した文字は読めない可能性を前提に、同じ名称やメッセージを自然な順序の読みやすいテキストとして別に提示する。

IMPRESSION
  • 造形性●●●●●
  • 大胆さ●●●●●
  • 可読性●●●●●
RELATED / 関連技法

WHY
  • 写真やイラストを追加せず、書体固有の輪郭と内部空間だけで強い主役をつくれる。
  • 文字の拡大、反復、部分表示によって、余白、境界、重なりを決める構造材として使える。
  • 読める小さな表記と抽象化した巨大文字を対比させ、意味と形の二層をつくれる。
VISUAL
  • 単一のグリフや短い語が画面幅を超えるほど拡大される。
  • 文字の一部だけがコンテナや画面端で切り取られ、曲線や直線として見える。
  • 同じ文字が異なる尺度、位置、透明度で反復される。
  • 前景の読めるラベルと背景の抽象化した字形が、明確な階層で共存する。
IMPLEMENTATION

semantic HTML · CSS typography · overflow: clip · CSS transforms · SVG text · clip-path · masking

  • 主要な名称やメッセージは通常のh1やpとして一度だけ意味のある順序で置き、装飾用の反復はaria-hiddenで読み上げ対象から除外する。
  • CSSの実テキストかSVGのtext要素を優先し、検索・選択・拡大可能な文字データを保つ。
  • 巨大文字の切り抜きは寸法を持つ装飾コンテナ内でoverflow: clipまたはclip-pathを使い、ページ全体の横スクロールを生まない。
  • 文字の輪郭をパスへ変換するのはロゴなど形が不可欠な場合に限定し、同等の読める名前を併記する。
  • ポインター追従は装飾だけに限定し、touch-actionやスクロールを妨げず、操作なしでも完成した構図を表示する。
BEST FOR
  • 章扉、キャンペーンのヒーロー、イベントタイトル。
  • ロゴや頭文字を中心にしたブランド表現。
  • 短い名称を図形と情報の両方として見せるポスター的なランディングページ。
AVOID
  • 重要な見出しや操作ラベルを切り抜いた字形だけで表し、読める同等テキストを用意しない。
  • 本文の各文字を個別要素へ分解し、読み上げ・選択・翻訳・検索を壊す。
  • 複数の巨大文字、blend、filter、maskを無制限に重ね、主情報と描画性能を損なう。
  • ポインター位置に追従する変形を必須にし、タッチやキーボードで同じ内容へ到達できなくする。
ACCESSIBILITY
  • 情報を伝える語は画像化・パス化した字形だけにせず、選択・拡大できる実テキストとして同じ画面に提示する。
  • 装飾目的で重複する巨大文字はaria-hiddenにし、読み上げが同じ語を何度も反復しないようにする。
  • 読ませる文字は十分なコントラストと通常の字形を保ち、切り抜き、blend、maskの外側に置く。
  • 200%拡大や文字間隔変更でも読める版が切れず、ページに意図しない二方向スクロールが生じないことを確認する。
  • ポインター追従やスクラブは補助演出に限定し、タッチ・キーボード・ホバーなしでも情報が揃うようにし、prefers-reduced-motionでは静止させる。
PERFORMANCE
  • 同じグリフを多数のDOM要素で複製せず、疑似要素、少数のSVG text、または一つの装飾要素で構成する。
  • 巨大な文字を画像として書き出す場合は必要解像度と圧縮を管理し、可能なら解像度非依存の実テキストやSVGを使う。
  • mix-blend-mode、filter、maskの重なりを絞り、低性能端末でペイント時間とメモリを測定する。
  • ポインター追従を実装する場合はrequestAnimationFrame等で更新を抑制し、レイアウトを起こしにくいtransformを使う。
CODE
.glyph-hero{position:relative;display:grid;place-items:center;min-block-size:28rem;overflow:clip;isolation:isolate}.glyph-hero__shape{position:absolute;z-index:-1;font-size:clamp(24rem,70vw,70rem);font-weight:900;line-height:.7;transform:translateX(-8%);color:#e7ff42}.glyph-hero__copy{max-inline-size:34rem;padding:2rem;background:#111;color:#fff}@media(prefers-reduced-motion:reduce){.glyph-hero__shape{transform:none}}
SOURCES
AI PROMPT

Treat one glyph as a bold compositional shape while preserving a readable text equivalent.

Create a poster-like responsive hero that treats one glyph as a compositional shape through extreme scale, cropping, repetition, and controlled overlap. Keep the meaningful title as semantic selectable text in natural DOM order, mark duplicate decorative glyphs as hidden from assistive technology, preserve strong contrast for the readable version, contain all cropping without page overflow, show a complete static composition on touch and keyboard input, and remove pointer-driven motion when reduced motion is requested.

  • Avoid conveying the only copy as an outlined image or unreadable cropped glyph.
  • Avoid splitting meaningful words into noisy per-character DOM nodes.
  • Avoid excessive filters, blend layers, hover-only meaning, and unavoidable motion.
18
COLOR & STYLE / neo-brutalism · hard-shadow · thick-border · bold-color

Neo Brutalism

ネオブルータリズム

  • DIFFICULTY easy
  • TREND current
  • SOURCES 6
  • RESEARCHED 2026-08-15

黄色いブロックをクリック、タップ、またはキーボードで押すと、RAWラベルの傾きとカウンターが切り替わる。現行DemoはネイティブbuttonなのでSpace／Enterでも起動できるが、明示的なフォーカスリングは実装確認が必要。

DEFINITION

太い輪郭線、平坦で強い色、ぼかさないオフセット影、大胆な文字と意図的なズレを、操作可能性を保ちながら用いるWebの視覚スタイル。

Webブルータリズムは均質化したインターフェースへの反動として語られ、荒さ、直接性、規範からの逸脱を前面に出す。ここで扱うNeo Brutalismは、その姿勢を太線、原色に近い色面、硬い影、幾何学的なブロックへ整理した実用寄りの表現である。荒々しさは見た目に限定し、ボタンの意味、キーボード操作、フォーカス表示、文字のコントラストは崩さない。建築史上のNew Brutalismと同一の様式定義ではなく、現代Webで流通する呼称として扱う。本書が扱う範囲は、2018年前後以降のWebで流通した太線、原色に近い色面、硬い影、システムフォントを特徴とする様式に限定し、1990年代の意図的に粗いWebブルータリズムやanti-designとは区別する。

IMPRESSION
  • 力強さ●●●●●
  • 遊び心●●●●●
  • 荒々しさ●●●●●
  • 親近感●●●●●
  • 静けさ●●●●●
RELATED / 関連技法

WHY
  • 太線と硬い影が要素の境界を明快にし、短い画面でも強いブランド記憶を作れる。
  • 整いすぎたテンプレート的UIへの反動として、遊び心と制作者の姿勢を直接伝えられる。
  • 押下時に影と位置を反転させると、物理的に押し込むような触覚的フィードバックをCSSだけで表現できる。
VISUAL
  • 3〜5px程度の黒い境界線と、ぼかし半径0のオフセット影。
  • 黄、赤、青などの平坦で強い色面を、大きな矩形ブロックとして隣接させる。
  • 極太の見出し、直線的な形、わずかな回転やグリッドからのズレ。
  • 角丸や繊細なグラデーションを抑え、前景と背景の層を輪郭で示す。
IMPLEMENTATION

CSS border · CSS box-shadow · CSS transform · semantic HTML button

  • 影は box-shadow: 8px 8px 0 のようにblurを0にし、境界線と同じ暗色で硬い奥行きを作る。
  • 押下時は transform と影のオフセットを同時に縮め、レイアウトを動かさず視覚だけを変える。
  • 装飾的な回転は内容の読み順やクリック領域を変えない要素に限定する。
  • タッチ領域を十分に確保し、hoverだけでなく :active、:focus-visible、キーボード押下でも同じ結果を確認できるようにする。
BEST FOR
  • 音楽、イベント、コミュニティ、ゲームなど、短時間で強い個性を伝えるサイト。
  • クリエイティブスタジオや個人ポートフォリオのキービジュアル。
  • 押す、選ぶ、並べ替えるといった直接操作を、物理的な見た目で強調するUI。
AVOID
  • 金融・医療・行政など、静かな信頼感と大量情報の速読が優先される画面全体への乱用。
  • 意図的なズレを理由に、見出し階層、整列、DOM順序、フォーカス順序まで崩すこと。
  • 強い色同士を無検証で組み合わせ、本文、状態、フォーカスリングのコントラストを失わせること。
  • すべての要素へ太線と影を付け、主要操作と装飾の優先順位を同じにすること。
ACCESSIBILITY
  • 操作ブロックにはネイティブbuttonを使い、SpaceとEnter、タップ、クリックのすべてで同じアクションを実行する。
  • 黒い太線とは別に識別できる高コントラストの :focus-visible を設け、フォーカスを影だけで示さない。
  • 本文は通常サイズ4.5:1以上、大きな文字は3:1以上を目安に、実際に隣接する色の組み合わせごとに確認する。
  • 色、傾き、影だけで状態を伝えず、ラベル、形、aria-pressedなど意味に合う状態を併用する。
  • タッチでも主要操作を44px前後以上の押しやすい領域にし、回転後も隣接操作と重ならないようにする。
  • 大きな移動や反復アニメーションは避け、prefers-reduced-motion: reduceでは位置変化を即時または無効にする。
PERFORMANCE
  • 太線、単色背景、少数のbox-shadowは画像素材を必要とせず軽量に実装できる。
  • 大面積の多重box-shadowやfilterを連続アニメーションさせず、操作時のtransform変更を短く限定する。
  • 極太Webフォントを使う場合は必要なウェイトと文字集合だけを配信し、フォールバック時のレイアウト移動を測る。
CODE
.brutal-card { border: 4px solid #111; background: #f2c94c; color: #111; padding: 1rem 1.5rem; box-shadow: 8px 8px 0 #111; font: 900 1.25rem/1 sans-serif; }
.brutal-card:active { transform: translate(4px, 4px); box-shadow: 4px 4px 0 #111; }
.brutal-card:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .brutal-card { transition: none; } }
SOURCES
AI PROMPT

Design a usable neo-brutalist interface with thick borders, flat bold colors and hard offset shadows.

Design a neo-brutalist interface with thick black borders, flat primary colors, oversized type, hard zero-blur offset shadows, and a few intentionally imperfect alignments. Keep semantic heading order and native buttons, preserve a clear visible focus ring and WCAG contrast, make every action usable by keyboard and touch, avoid overlap at narrow widths, and remove non-essential movement when reduced motion is requested.

  • Avoid chaotic DOM or focus order, illegible novelty type, and low-contrast color collisions.
  • Avoid making every element equally loud or using decoration as the only state cue.
  • Avoid hover-only actions, tiny touch targets, and continuous shaking or parallax.
19
COLOR & STYLE / monochrome · single-hue · tonal-scale · grayscale

Monochrome

モノクロ

  • DIFFICULTY easy
  • TREND classic
  • SOURCES 5
  • RESEARCHED 2026-08-15
ONE HUE

同じ色相・彩度で明度だけを92、74、56、38、20%へ変えた5本の帯を比較する。現行Demoは帯へポインターを重ねるとその帯が広がるが、キーボードとタッチで同等に選ぶ操作は未実装のため人間による改善判断が必要。

DEFINITION

色相を一つに絞り、主に明度と彩度の段階差で階層、奥行き、焦点を組み立てる配色技法。白黒だけでなく有彩色の単色系も含む。

Monochromeは厳密には一つの色で作る表現で、実務では一色が支配的な構成も含めて使われる。色数を減らすことで、文字組み、余白、写真、質感、階調差が画面の質を直接決める。CSSでは同じhsl()の色相を保ちながら明度と彩度を段階化できるが、HSLのLightnessは知覚的に均等ではないため、実際の前景・背景のコントラストを測る。画像のgrayscale()は無彩色化の手段であり、情報階層まで自動で設計するものではない。

IMPRESSION
  • 静けさ●●●●●
  • 統一感●●●●●
  • 品格●●●●●
  • 硬質感●●●●●
  • にぎわい●●●●●
RELATED / 関連技法

WHY
  • 色相の競合を減らし、構図、文字、写真、余白へ視線を集中させられる。
  • 一つの色から再利用可能な階調トークンを作り、ブランド面全体へ一貫した空気を与えられる。
  • 色数を抑えながらも明度差を広く取れば、静けさと明確な情報階層を両立できる。
VISUAL
  • 一つの固定した色相と、白に近い面から黒に近い面まで連続する階調。
  • 彩度を抑えた背景に、同系色の濃い文字や輪郭を置く。
  • 写真、質感、タイポグラフィの差が、色数の多い画面より強く見える。
  • 強調色を使う場合は一か所または一役割に限定し、単色系の支配を崩さない。
IMPLEMENTATION

CSS custom properties · CSS hsl() · CSS currentColor · CSS filter grayscale()

  • 色相と彩度をカスタムプロパティに固定し、背景、面、境界、本文、強調の明度段階を別トークンにする。
  • HSLのLightnessは知覚的に均等ではないため、数値間隔ではなく実測コントラストで文字色と背景色を決める。
  • アイコンや境界にはcurrentColorを使い、テーマ変更時にも単色系を維持する。
  • 既存画像を無彩色化する場合だけgrayscale()を使い、可能なら配信前に最適化した画像も用意する。
BEST FOR
  • 写真、建築、アート、報道など、素材や構図を主役にするサイト。
  • 落ち着いたブランドページ、長文エディトリアル、展示会の告知。
  • 少数の色トークンで一貫したダーク／ライトの階層を作るデザインシステム。
AVOID
  • 近すぎる階調だけで本文、境界、操作状態を分け、要素を見失わせること。
  • 成功、警告、エラーなど意味の異なる状態を明度差だけで伝えること。
  • 複数の例外的なアクセント色を追加し、単色構成の焦点を分散させること。
  • カラー写真へgrayscale()をかけるだけで、焦点、コントラスト、代替テキストの検討を済ませること。
ACCESSIBILITY
  • 同じ色相でも本文と背景は通常サイズ4.5:1以上、大きな文字は3:1以上になる組み合わせを測定する。
  • リンク、選択、成功、警告などの意味を色や明度だけで示さず、下線、形、ラベル、アイコンを併用する。
  • 階調を切り替える操作にはbuttonやradio groupなど意味に合う要素を使い、クリック、タップ、Space、Enter、矢印キーに対応させる。
  • hoverで帯幅を変える場合は :focus-visible と選択状態でも同じ変化を提供し、タッチでは常時ラベルまたは明示的な選択ボタンを表示する。
  • forced-colorsでも情報が消えないよう、重要な境界とフォーカスはシステム色や輪郭で補う。
  • 階調帯の幅をアニメーションする場合、prefers-reduced-motion: reduceではtransitionを無効にし、静止状態でも各段階を判別可能にする。
PERFORMANCE
  • CSS色トークンと単色背景は画像を必要とせず、パレット変更の再利用性も高い。
  • 大きな画像へのfilterは描画コストを確認し、一覧では事前生成したサムネイルや最適化済み画像を優先する。
  • 多数の階調帯の幅を連続アニメーションせず、必要な要素だけ短いtransitionに限定する。
CODE
:root { --mono-h: 206; --mono-s: 18%; --mono-92: hsl(var(--mono-h) var(--mono-s) 92%); --mono-38: hsl(var(--mono-h) var(--mono-s) 38%); --mono-20: hsl(var(--mono-h) var(--mono-s) 20%); }
.mono-card { background: var(--mono-92); color: var(--mono-20); border: 1px solid var(--mono-38); padding: 1.5rem; }
.mono-card a { color: currentColor; text-decoration-thickness: .15em; }
.mono-card a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
SOURCES
AI PROMPT

Build a monochrome interface from one hue and a clearly separated tonal scale.

Build a monochrome interface from one hue with a wide, tested tonal range for background, surfaces, borders, body text, and emphasis. Reserve at most one accent role, keep all text and focus indicators at WCAG contrast, distinguish links and states with shape or labels as well as tone, provide keyboard and touch controls for any tone switcher, preserve forced-colors behavior, and disable non-essential tonal or width transitions when reduced motion is requested.

  • Avoid near-identical tones for text, controls, and boundaries.
  • Avoid using color or lightness as the only carrier of status or action.
  • Avoid treating grayscale filtering as a complete hierarchy or accessibility solution.
20
COLOR & STYLE / duotone · two-color · grayscale · blend-mode · image-treatment

Duotone

デュオトーン

  • DIFFICULTY medium
  • TREND classic
  • SOURCES 5
  • RESEARCHED 2026-08-15
TWO COLORS

画像へポインターを重ね、二色のまま階調コントラストが変化する様子を見る。

DEFINITION

写真の階調を基準に二つの色を割り当て、暗部から明部までを二色の濃度と混色で表現する画像処理技法。

Duotoneは、元画像をグレースケールとして捉え、二つのインクまたは色のカーブで各階調を着色する。Webでは、グレースケール化した画像へ二色のグラデーションをcolorやluminosityのブレンドモードで合成する方法が使える。単に画像を二つのベタ色へ分断するのではなく、中間階調には二色の比率が残る。写真群の色調を統一しやすい一方、人物の表情、製品色、図版の意味を色処理で失わない確認が必要になる。

IMPRESSION
  • 鮮烈さ●●●●●
  • 統一感●●●●●
  • 劇的さ●●●●●
  • 自然さ●●●●●
RELATED / 関連技法

WHY
  • 撮影条件や色温度が異なる写真群を、限られたブランド色の中へ統合できる。
  • 写真の情報量を保ちながら色相を絞り、見出しやキャンペーンの強い記号性を作れる。
  • 暗部と明部の色関係を設計し、単色化より豊かな奥行きと階調を残せる。
VISUAL
  • 暗部側と明部側を支配する二つの色相と、その間に生じる連続した混色。
  • 元写真の色相が抑えられ、輪郭、明暗、質感が前面に出る。
  • 複数の写真を並べても共通パレットに収まり、画面全体の色面が揃う。
  • 高いコントラスト設定では、影やハイライトが大きな色の塊として見える。
IMPLEMENTATION

CSS filter · mix-blend-mode · isolation · SVG filters · responsive images

  • 意味を持つ画像は通常のimg要素と適切なaltで置き、色処理はラッパーの疑似要素へ分離する。
  • 画像をgrayscale()で無彩色化し、二色グラデーションをmix-blend-mode: colorで重ねると、元の明度を保った着色を作れる。
  • isolation: isolateでブレンド範囲を閉じ、隣接する背景や文字へ合成が漏れないようにする。
  • 元画像との切り替えが意味を持つ場合は明示的なボタンにし、hoverだけに依存しない。
  • 処理後の画像と、その上に置く文字・操作要素のコントラストを実際の全画像で確認する。
BEST FOR
  • 音楽、イベント、展覧会、キャンペーンのキービジュアル。
  • 出典や撮影環境の異なる人物写真を一つのブランドパレットへ揃える一覧。
  • 写真を背景として使いながら、限定色のアートディレクションを維持するヒーロー。
AVOID
  • 顔の表情、製品の識別色、データ上の色分けなど、原色が意味を持つ画像へ一律適用する。
  • 二色の相対輝度を近づけすぎ、輪郭と文字背景のコントラストを失わせる。
  • 画像上の文字までフィルターやブレンド対象に含め、可読性を不安定にする。
  • hover時だけ元画像や追加情報を見せ、タッチとキーボード利用者へ同等の内容を提供しない。
ACCESSIBILITY
  • 色処理前後で人物、物体、図版の必要な識別情報が残るか確認し、意味を持つ画像には内容を表す代替テキストを付ける。
  • 二色の違いだけで状態や分類を伝えず、文字、形、アイコンなど別の手掛かりを併用する。
  • 画像上の文字と操作要素は処理後の全領域で必要なコントラストを満たすか確認し、必要なら独立した不透明背景を置く。
  • 原色表示への切り替えを操作にする場合はbuttonとして実装し、キーボードの可視フォーカス、明確な名前、十分なタッチ対象を提供する。
  • 320 CSS px相当と文字拡大で画像が文章や操作を覆わず、意味のある情報が切り抜きで失われないようにする。
  • 色やコントラストの遷移は非本質的な装飾に限定し、prefers-reduced-motionでは即時切り替えにする。
PERFORMANCE
  • 大きな写真には表示寸法に合うsrcset、sizes、圧縮形式、widthとheightを指定し、不要な高解像度転送とレイアウト移動を抑える。
  • filterとblend-modeは描画・合成コストを伴うため、全画面動画や多数のカードへ同時適用せず、対象領域を限定して実機計測する。
  • 色が固定ならサーバーまたは制作工程でデュオトーン画像を書き出し、実行時フィルターを省く選択肢も比較する。
  • 疑似要素のブレンド範囲をisolationとoverflowで閉じ、画面全体へ不要な再合成を波及させない。
CODE
.duotone{position:relative;isolation:isolate;overflow:hidden;background:#3a1d6e}.duotone img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2);mix-blend-mode:luminosity}.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#32145f,#f06b8a);mix-blend-mode:color}@media(prefers-reduced-motion:reduce){.duotone img{transition:none}}
SOURCES
AI PROMPT

Create a legible duotone image treatment mapping grayscale detail into two distinct brand colors.

Create a responsive duotone campaign image by mapping a grayscale photograph into two distinct brand colors with clear luminance separation and continuous midtone mixtures. Keep faces and essential objects recognizable, isolate blending from text and controls, preserve image alt text, maintain readable contrast, provide a keyboard-and-touch button for any meaningful before-and-after state, and make decorative transitions immediate under reduced motion.

  • Do not flatten meaningful facial detail, product color, or data-coded color into unreadable blocks.
  • Do not choose two colors with nearly identical luminance or place text directly over unstable image contrast.
  • Do not blend navigation, labels, or focus indicators into the treated image.
  • Do not make original-color information available only on hover or load oversized imagery and filters across every card.
21
COLOR & STYLE / retro-digital · pixelated · monospace · window-chrome · limited-palette

Retro Digital

レトロデジタル

  • DIFFICULTY medium
  • TREND current
  • SOURCES 5
  • RESEARCHED 2026-08-15

ウィンドウをクリックし、タイトルバーのディスク番号が切り替わる状態表示を見る。

DEFINITION

初期GUIや低解像度ディスプレイの視覚語彙を、現代の意味構造と操作性を保ちながら意図的に再構成するスタイル。

Retro Digitalは、ピクセルの角、限定色、等幅文字、太い枠、硬い影、タイトルバーやウィンドウ操作部品など、過去のコンピューター環境を想起させる手掛かりを組み合わせる。特定のOSを忠実に複製する必要はなく、少数の識別可能な特徴で時代感を作る。見た目が古くてもHTMLの意味、キーボード操作、タッチ対象、コントラスト、レスポンシブ対応は現在の要件で設計する。本書では特定OSの再現に限定せず、1984年から1999年ごろの端末、DOS、初期Web、家庭用ゲーム機までを含む広い編集カテゴリとして扱い、参照機種は特定しない。

IMPRESSION
  • 懐かしさ●●●●●
  • 遊び心●●●●●
  • 機械感●●●●●
  • 滑らかさ●●●●●
RELATED / 関連技法

WHY
  • 均質で滑らかな現代UIへ、時代の記憶と物理的な操作感を持つ個性を加えられる。
  • ウィンドウ枠、端末表示、ピクセル図形など既知の比喩で、ゲームや音楽の世界観を短時間で伝えられる。
  • 限定パレットと反復する部品を使い、少ない素材でも一貫したビジュアルシステムを作れる。
VISUAL
  • 整数倍に拡大された粗いピクセル画像と、アンチエイリアスを抑えた角の表現。
  • 黒、蛍光色、低彩度色などを絞って反復する限定パレット。
  • タイトルバー、閉じる記号、太い境界、硬いオフセット影を持つ箱型の画面。
  • 固定幅の等幅文字、端末風の短い状態表示、点滅カーソルや走査線の控えめな装飾。
IMPLEMENTATION

semantic HTML · CSS custom properties · image-rendering · repeating-linear-gradient · monospace fonts · prefers-reduced-motion

  • リンク、ボタン、ダイアログは見た目に対応するHTML要素で作り、装飾的なウィンドウ部品はaria-hiddenとpointer-events: noneで操作対象から外す。
  • 小さなラスター画像を拡大する場合だけimage-rendering: pixelatedを使い、本文やSVGアイコンの可読性を意図的に劣化させない。
  • monospaceは文字幅を固定するが、日本語の収録文字と実際のフォールバックを確認し、本文は読みやすいシステム書体も選択肢にする。
  • 太い枠、角丸なし、硬いbox-shadow、限定色をカスタムプロパティ化し、少数の部品へ一貫して適用する。
  • 点滅やウィンドウ移動を加える場合も最終状態を常時理解できるようにし、reduced motionでは静止させる。
BEST FOR
  • ゲーム、音楽、映像、デジタル文化を扱うキャンペーンや作品サイト。
  • 個人ポートフォリオ、実験的プロジェクト、期間限定イベントのテーマUI。
  • 短い状態表示、実績カード、プロフィールなど、限定された領域のアクセント。
AVOID
  • 業務画面や長文全体へ装飾を広げ、読み取り速度と作業効率を下げる。
  • 閉じる記号、ボタン、入力欄に見える装飾を非操作要素として置き、利用者を誤誘導する。
  • 小さなピクセル書体や低解像度画像で本文、ラベル、重要な状態を表す。
  • 高速な点滅、走査線、ノイズ、画面揺れを常時動かし、情報へ集中しにくくする。
  • マウスだけを想定した小さな部品を再現し、タッチ対象とキーボード操作を失う。
ACCESSIBILITY
  • 古い外観を再現しても、見出し、リンク、ボタン、入力欄には現代の意味あるHTMLと明確なアクセシブル名を使う。
  • 操作できそうな装飾記号は操作要素から外し、実際に操作できる部品には一貫したhover、focus、pressed状態を提供する。
  • 本文と重要なラベルを画像化せず、200%文字拡大と320 CSS px相当で情報や機能を失わずリフローさせる。
  • 通常文字とUI境界のコントラストを確認し、走査線やノイズの疑似要素が文字とフォーカス表示を覆わないようにする。
  • ボタンとリンクはキーボードで操作でき、可視フォーカスと十分なタッチ対象寸法または間隔を持たせる。
  • 点滅、画面揺れ、タイプ表示、ウィンドウ移動は非本質的な装飾に限定し、prefers-reduced-motionでは静止した最終状態を表示する。
PERFORMANCE
  • image-rendering: pixelatedは画像の転送量を減らさないため、小さな元画像、適切な形式、widthとheightを別途用意する。
  • 走査線やノイズは小さな画像を繰り返すか単純なCSSグラデーションに限定し、多数の全画面合成レイヤーを重ねない。
  • 点滅カーソルや状態更新に常時JavaScriptループを使わず、必要な領域だけをCSSまたは利用者操作で更新する。
  • 装飾用Webフォントは収録文字、ウェイト、サブセットを確認し、日本語フォールバックを含む実際の転送量と描画を測る。
CODE
:root{--retro-bg:#0d1a16;--retro-fg:#4ad2a0;--retro-ink:#d8f5e8}.retro-window{position:relative;max-width:34rem;padding:3.5rem 1.5rem 2rem;border:3px solid var(--retro-fg);background:var(--retro-bg);color:var(--retro-ink);box-shadow:8px 8px 0 var(--retro-fg);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.retro-window__bar{position:absolute;inset:0 0 auto;padding:.5rem;background:var(--retro-fg);color:#07100d}.retro-window button{min-width:44px;min-height:44px;border:3px solid var(--retro-fg);background:transparent;color:inherit;box-shadow:5px 5px 0 var(--retro-fg)}.retro-window button:focus-visible{outline:3px solid #fff;outline-offset:5px}@media(max-width:30rem){.retro-window{box-shadow:4px 4px 0 var(--retro-fg)}}@media(prefers-reduced-motion:reduce){.retro-window *{animation:none;transition:none}}
SOURCES
AI PROMPT

Design a retro-digital interface with pixel edges and vintage window chrome, using modern accessible controls.

Create a responsive retro-digital interface inspired by early graphical computer systems: a limited high-contrast palette, pixel-edged imagery, fixed-width type, chunky window chrome, concise status text, and hard offset shadows. Keep every apparent control semantically real or clearly decorative, use readable live text instead of rasterized labels, provide visible keyboard focus and touch-size targets, reflow at narrow widths, and freeze blinking, typing, scanline, or window motion under reduced motion.

  • Do not reproduce tiny historical controls, low-contrast phosphor text, or unreadable bitmap body copy.
  • Do not create fake close boxes, buttons, or input fields that appear operable but do nothing.
  • Do not rely on mouse-only interaction, hover-only states, or decorative symbols without accessible names.
  • Do not use rapid blinking, full-screen jitter, dense scanlines, excessive noise layers, or heavy unsubsetted fonts.
22
COLOR & STYLE / minimalism · negative-space · restrained-palette · visual-hierarchy

Minimalism

ミニマリズム

  • DIFFICULTY medium
  • TREND classic
  • SOURCES 5
  • RESEARCHED 2026-08-15
ONE

余白の中で一つだけ置かれた文字と小さな色点の焦点関係を見る。

DEFINITION

必要な情報と操作を残し、装飾や競合する要素を減らして、余白、比率、文字階層、一つの焦点で構成する視覚技法。

Minimalismは単に要素数を減らすことではなく、目的に必要な内容を選別し、明確な階層と十分な余白で提示する。色数、書体、罫線、画像を限定すると、残した要素の寸法、整列、文言の曖昧さが強く見える。ラベル、ナビゲーション、フォーカス表示まで削ると利用性を失うため、視覚的な静けさと情報の十分性を別々に検証する。

IMPRESSION
  • 静けさ●●●●●
  • 開放感●●●●●
  • 精緻さ●●●●●
  • 熱量●●●●●
RELATED / 関連技法

WHY
  • 競合する装飾を減らし、主要なメッセージ、画像、操作へ視線を集めやすくする。
  • 少数の要素へ寸法、文字、素材の品質を集中し、落ち着いた一貫性を作れる。
  • 情報価値の低い要素を除きながら、必要な情報の相対的な見つけやすさを保てる。
VISUAL
  • 要素間と画面端に広い負の空間があり、まとまり同士の境界が明確になる。
  • 背景、本文、控えめな強調色という少数の色役割で階層を作る。
  • 一つの見出し、画像、または操作が焦点となり、他の要素は寸法と位置で後退する。
  • 装飾的な影や模様を抑え、文字組み、整列、細い罫線などの差が目立つ。
IMPLEMENTATION

semantic HTML · CSS Grid · clamp() · CSS custom properties · media queries

  • 見出し、本文、ナビゲーション、主要操作を意味の通るHTML順で置いてから、Gridと最大幅で視覚階層を整える。
  • 余白、文字サイズ、行長を少数のカスタムプロパティへ集約し、clamp()で極端な拡大と縮小を避ける。
  • 色は背景、本文、強調の役割で管理し、罫線やプレースホルダーを含む実際の組み合わせを検証する。
  • 320 CSS px相当では複数列を一列へ戻し、重要な情報と操作を省略しない。
BEST FOR
  • 一つの製品、作品、写真を主役にする紹介ページ。
  • 建築、家具、文化施設など、素材と余白をブランド表現に使うサイト。
  • 短い声明、招待状、章扉のように伝える主題が限定された画面。
AVOID
  • 説明、ラベル、現在位置、主要ナビゲーションまで削り、何を操作できるか分からなくする。
  • 薄い文字や低コントラストの罫線を静けさの代わりに使う。
  • 巨大な空白だけで長いスクロールを作り、情報同士の関係を遠ざける。
  • デスクトップの余白比率を固定し、小画面や文字拡大で内容を押し出す。
ACCESSIBILITY
  • 視覚要素を減らしても、ページの目的、見出し、ナビゲーション、入力ラベル、エラー説明を省略しない。
  • 本文は通常文字4.5対1以上を基準にし、細い罫線やフォーカス表示など意味を持つ非テキスト要素も背景との差を確認する。
  • 200%文字拡大と320 CSS px相当で、情報や機能を失わず二次元スクロールなしにリフローさせる。
  • 主要操作はリンクまたはボタンとして実装し、キーボードの可視フォーカスと24 CSS px以上の対象寸法または十分な間隔を保つ。
  • 色、位置、余白だけに状態や関係を委ねず、文字ラベルとHTMLの見出し構造を残す。
  • 導入アニメーションを加える場合は最終内容を初めからDOMに置き、prefers-reduced-motionでは移動や遅延なしで表示する。
PERFORMANCE
  • 要素が少ない見た目だけでは軽量とは限らないため、ヒーロー画像とWebフォントの転送量を個別に測る。
  • 画像には表示寸法に合うsrcsetとsizes、widthとheightを指定し、読み込み後のレイアウト移動を抑える。
  • 使わないフォントウェイト、装飾ライブラリ、全画面動画を読み込まず、静止したCSS構成を基準にする。
  • ファーストビューの主要資源とLCPを実測し、余白の大きさを性能改善の根拠にしない。
CODE
:root { --space: clamp(1rem, 4vw, 4rem); --measure: 62ch; }
.minimal { min-block-size: 100svh; display: grid; align-content: center; gap: var(--space); padding: var(--space); max-inline-size: 90rem; margin-inline: auto; }
.minimal h1 { max-inline-size: 12ch; font-size: clamp(2.5rem, 9vw, 8rem); line-height: .95; }
.minimal p { max-inline-size: var(--measure); }
.minimal a:focus-visible { outline: 3px solid currentColor; outline-offset: .25rem; }
@media (prefers-reduced-motion: reduce) { .minimal * { animation: none; scroll-behavior: auto; } }
SOURCES
AI PROMPT

Design a minimal page around one message, one focal element, and generous structured negative space.

Create a minimalist brand page with one clear message, one focal visual, a restrained background-text-accent palette, deliberate negative space, and a compact readable measure. Keep semantic headings, navigation, labels, visible keyboard focus, sufficient contrast, 320px reflow, and touch-size controls. Preserve every necessary task cue; if motion is added, show the final state immediately under reduced motion.

  • Do not remove labels, navigation, focus indicators, or necessary explanatory content in pursuit of emptiness.
  • Do not use low-contrast gray text, hairline controls, or whitespace as the only grouping cue.
  • Do not create long empty scroll regions or fixed desktop spacing that breaks zoom and mobile reflow.
  • Do not add decorative motion, heavy video, or multiple accent colors that compete with the single focal point.
23
COLOR & STYLE / maximalism · eclectic · layering · pattern · saturated-color

Maximalism

マキシマリズム

  • DIFFICULTY medium
  • TREND current
  • SOURCES 2
  • RESEARCHED 2026-08-16
MOREMOREMORE

密度の高い面へ触れ、重なりの中でも主題が独立して見える構成を確認する。

DEFINITION

色、柄、文字、装飾、異なる参照を意図的に重ね、過剰さと異質な要素の併置を視覚的な主題にする表現様式。

マキシマリズムは、単なる無秩序や要素数の多さではなく、異なる色、模様、尺度、時代参照を編集して、豊かさと過剰さを成立させる。Webでは主見出し、主要操作、本文の読み順を強く固定し、その外側で反復柄や重なりを増やすと、密度と利用性を両立しやすい。

IMPRESSION
  • 熱量●●●●●
  • 過剰さ●●●●●
  • 遊び心●●●●●
  • 情報密度●●●●●
  • 静けさ●●●●●
RELATED / 関連技法

WHY
  • 高い視覚密度をブランドの熱量や祝祭性として表現できる。
  • 異なる素材や文化的参照を一画面で衝突させ、新しい意味を作れる。
  • 反復と尺度差により探索する楽しさを生める。
VISUAL
  • 高彩度色、異種パターン、装飾の重なり。
  • 極端な尺度差と複数の焦点。
  • 余白を埋めつつも、主要導線だけは独立した形や面で保護される。
IMPLEMENTATION

CSS Grid · CSS gradients · background-blend-mode · CSS transforms

  • 主見出し、本文、CTAの順序を先に固定してから装飾層を追加する。
  • 色、柄、書体のうち少なくとも一つは反復規則で統一する。
  • 装飾はaria-hiddenにし、操作対象へ重ならないようpointer-eventsを管理する。
BEST FOR
  • 音楽、文化、ファッションのキャンペーン。
  • 祝祭性を伝えるイベントやコミュニティ。
  • 多様な作品や参照を見せるポートフォリオ。
AVOID
  • 主要操作と装飾を同じ強さで競合させる。
  • 色、柄、書体を規則なく増やし、読順を消す。
  • 背景の全領域で文字コントラストを不安定にする。
  • アニメーションまで常時重ね、注意と性能を消耗させる。
ACCESSIBILITY
  • 文字と主要操作は装飾から独立した不透明面を持たせ、コントラストを安定させる。
  • 色だけで状態を示さず、文言、形、位置を併用する。
  • DOM順と見た目の読み順を一致させ、装飾を読み上げ対象にしない。
PERFORMANCE
  • 大きな背景画像を重ねず、反復可能なCSSグラデーションや小さな資源を使う。
  • ブレンド、フィルター、アニメーションを同一領域へ過剰に積層しない。
  • 小画面では装飾層の数と解像度を下げる。
CODE
/* 密度は外側で上げ、主導線だけは独立した面で守る */
.maximal{background:repeating-linear-gradient(45deg,#2b1a4a 0 18px,#3a1f5e 18px 36px);color:#fff5e6;padding:clamp(1rem,4vw,4rem)}
.maximal__ornament{position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,#ef8e92 0 12%,transparent 12%),radial-gradient(circle at 80% 70%,#e6c56f 0 9%,transparent 9%);opacity:.7;pointer-events:none}
.maximal__cta{position:relative;z-index:1;display:inline-block;padding:1rem 2rem;background:#0f0a17;color:#fff;border:3px solid #e6c56f}
.maximal__cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion: reduce){.maximal *{animation:none}}
SOURCES
AI PROMPT

Compose a curated maximalist page with dense color, pattern and type around one protected primary action.

Design a curated maximalist campaign using saturated color, eclectic patterns, layered display type and deliberate scale clashes. Establish a clear reading order first, isolate the primary action on a stable high-contrast surface, hide decorative layers from assistive technology, reduce effects on small screens, and keep motion optional.

  • Do not confuse random clutter with intentional density.
  • Do not bury navigation, body copy, or focus indicators.
  • Do not use unstable image contrast behind essential text.
24
TEXTURE / paper · ink · printmaking · registration · tactile

Paper & Ink

紙とインク

  • DIFFICULTY medium
  • TREND classic
  • SOURCES 5
  • RESEARCHED 2026-08-15
IMPERFECTPRINT / 2026

紙の上でポインターを動かすと、インクの乗りとかすれが場所によって変わる。粒子と版ズレは静止状態でも見える。

DEFINITION

紙の繊維、インクの濃淡やかすれ、わずかな見当ずれを視覚的に再構成し、均質なデジタル画面へ印刷物の物質感を加える表現技法。

印刷では、インクを付けた版から紙などの支持体へ圧力を使って像を転写する。多色刷りでは版と紙の正確な位置合わせがregistrationと呼ばれる。Paper & Inkは、この材料と工程に由来する濃淡、紙面の粒、版の重なりをWeb上で控えめに模倣する。ただし、意図的なかすれや見当ずれは装飾であり、本文の可読性や操作領域まで不完全にしてよい理由にはならない。なおPaper & Inkは本書独自の編集上の分類であり、標準化されたWeb技法名ではない。

IMPRESSION
  • 温かみ●●●●●
  • 手仕事感●●●●●
  • 素朴さ●●●●●
  • 懐かしさ●●●●●
  • 精密さ●●●●●
RELATED / 関連技法

WHY
  • 平坦な色面へ細かな密度差を加え、紙や印刷物を思わせる触覚的な奥行きを作れる。
  • 文化、工芸、出版、飲食など、材料や制作工程をブランドの物語として伝える場面と相性がよい。
  • 均一なデジタル形状へ限定的なかすれや位置差を加え、人が制作したような温度を演出できる。
VISUAL
  • 生成紙を思わせる暖色寄りの地色と、黒、焦げ茶、朱など限定されたインク色。
  • 低い不透明度で重ねる微細な点、短い繊維状の線、むらのある色面。
  • 見出しや装飾図形に限定したごく小さな版の位置差。
  • 輪郭の一部だけが欠けるかすれと、圧力差を思わせる濃淡。
IMPLEMENTATION

CSS pseudo-elements · CSS repeating-radial-gradient() · CSS mix-blend-mode · SVG feTurbulence · optimized texture image

  • 紙色とインク色をCSSカスタムプロパティとして定義し、本文はテクスチャなしでも成立させる。
  • 紙粒は疑似要素へ分離し、pointer-events: noneと低いopacityを設定する。
  • 不規則な面は低オクターブのfeTurbulenceまたは最適化済みタイルで作る。
  • 版ズレは装飾用の複製だけに適用し、文字本体は一つに保つ。
BEST FOR
  • 工芸、食品、書店、出版社、展覧会など素材感を価値として伝えるサイト。
  • ポスター、冊子、チケット、包装紙を参照するキャンペーンページ。
  • 短い見出しと大きな余白を使い、印刷物の雰囲気を主役にするブランド面。
AVOID
  • 本文や小さな注釈へ強いノイズ、かすれ、歪みを直接適用する。
  • 見当ずれをフォームやフォーカスリングなど正確さが必要な要素へ適用する。
  • 最終合成状態の文字コントラストを確認しない。
  • 高解像度の紙画像を画面全面へ無条件に配信する。
ACCESSIBILITY
  • 通常文字4.5:1以上、大きな文字3:1以上を最終合成状態で確認する。
  • かすれ、色、紙目だけで状態を伝えず、下線、ラベル、輪郭を併用する。
  • 装飾層はpointer-events: noneとし、操作やテキスト選択を遮らない。
  • 強度調整はネイティブrangeまたはbuttonを使い、タッチとキーボードで操作可能にする。
  • 粒や版を動かす場合はprefers-reduced-motionで停止する。
PERFORMANCE
  • 細かすぎるCSSグラデーションを大面積へ適用する場合は描画負荷を実測する。
  • ラスター紙素材は表示寸法へ縮小・圧縮し、小さなタイルの反復を優先する。
  • feTurbulenceのオクターブ数と適用面積を抑える。
  • blend modeとfilterの多重適用を避け、静的装飾は事前合成も比較する。
CODE
.paper-card{position:relative;isolation:isolate;overflow:hidden;background:#d8ccb6;color:#492a23;padding:clamp(1.5rem,5vw,4rem)}.paper-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-radial-gradient(circle,rgb(0 0 0/.22) 0 1px,transparent 1px 4px);opacity:.06;mix-blend-mode:multiply}@media(forced-colors:active){.paper-card::before{display:none}}
SOURCES
AI PROMPT

Create a restrained paper-and-ink interface with readable type and subtle print texture.

Create a tactile paper-and-ink web interface using a warm paper base, limited ink colors, subtle fibers, restrained edge wear, crisp semantic text, WCAG contrast, visible focus, pointer-transparent texture layers, reduced-motion handling, and optimized raster assets.

  • Avoid distressed body text and blurred controls.
  • Avoid registration errors on forms or focus rings.
  • Avoid large unoptimized paper images.
25
TEXTURE / grain · noise · feTurbulence · dithering · texture-overlay

Grain / Noise

グレイン・ノイズ

  • DIFFICULTY medium
  • TREND classic
  • SOURCES 5
  • RESEARCHED 2026-08-15
GRAIN2—5%

ポインターを動かすと粒の位置がずれる。実制作での適量は本文の2—5%で、このデモは見えるように強めている。

DEFINITION

微細で不規則な明暗粒子を色面や画像へ低い強度で重ね、均質なデジタル面に表面の密度差と質感を加える視覚表現。

WebのGrain / Noiseは、ラスタータイル、CSS画像、SVG feTurbulenceなどで生成した細粒を装飾層として重ねる技法である。一方、色数の限られた画像でバンディングを抑えるditheringは、画素を混ぜて利用できない色を知覚的に補う処理であり、任意の装飾ノイズを載せるだけで同じ効果が保証されるわけではない。

IMPRESSION
  • ざらつき●●●●●
  • ノスタルジー●●●●●
  • 統一感●●●●●
  • 静けさ●●●●●
  • 清潔感●●●●●
RELATED / 関連技法

WHY
  • 平坦な背景や写真へ微細な密度差を加え、表面の奥行きを作れる。
  • 複数の写真や色面へ同じ粒を重ね、異なる素材を一つのトーンへまとめられる。
  • 適切に設計されたditheringはバンディングを目立ちにくくできる。
VISUAL
  • 細かな明暗点が不均一な密度で分布する。
  • 内容より先に見えない低い不透明度と小さな粒径。
  • 写真、グラデーション、ベタ面をまたぐ表面層。
  • 静止粒または少ないフレームで切り替わる粒。
IMPLEMENTATION

SVG feTurbulence · CSS pseudo-elements · CSS mix-blend-mode · optimized raster tile · CSS animation · prefers-reduced-motion

  • 粒は内容と別の疑似要素へ置き、pointer-events:noneにする。
  • feTurbulenceのbaseFrequency、numOctaves、seedと適用面積を抑える。
  • ラスターは継ぎ目のない小さなタイルへ最適化する。
  • バンディング低減は装飾粒とは別にditheringとして検証する。
BEST FOR
  • 映画、音楽、写真、ファッションなど空気感を重視するサイト。
  • 異なる撮影条件の写真を共通の表面処理でまとめるポートフォリオ。
  • 限定色のビジュアルでditheringを設計する場面。
AVOID
  • 本文や小さなUIへ高コントラストの粒を重ねる。
  • 装飾ノイズをditheringと同一視する。
  • 高速な粒移動を停止手段なしで続ける。
  • 大きなPNGや複雑なfilterを全面へ重ねる。
ACCESSIBILITY
  • 最終合成状態で文字コントラストを確認する。
  • ノイズ層は操作やテキスト選択を遮らない。
  • 粒や色だけで状態を表さない。
  • 強度変更にはラベル付き標準コントロールを使う。
  • prefers-reduced-motionでは粒の移動と点滅を停止する。
PERFORMANCE
  • feTurbulenceの適用領域とnumOctavesを抑える。
  • filter値を毎フレーム再生成せず既存タイルのtransformを低頻度で変える。
  • ラスター素材は小さな反復タイルへ圧縮する。
  • blend modeとfilterの大面積・多重適用を避ける。
CODE
.grain-panel{position:relative;isolation:isolate;overflow:hidden;background:#8a8170;color:#171914;padding:4rem}.grain-panel::before{content:"";position:absolute;inset:-15%;z-index:-1;pointer-events:none;background:#fff;filter:url(#grain-filter);opacity:.045;mix-blend-mode:soft-light;animation:grain-shift 2s steps(2,end) infinite}@keyframes grain-shift{to{transform:translate(2%,-1%)}}@media(prefers-reduced-motion:reduce){.grain-panel::before{animation:none;transform:none}}
SOURCES
AI PROMPT

Add restrained grain without harming legibility.

Add restrained monochrome grain in a pointer-transparent decorative layer. Distinguish decorative noise from dithering, preserve contrast and focus, provide keyboard and touch controls for adjustable intensity, stop animation for reduced motion, and optimize raster or SVG textures.

  • Avoid high-contrast noise over text or controls.
  • Avoid claiming arbitrary grain removes banding.
  • Avoid rapid infinite movement and large unoptimized textures.
26
TEXTURE / halftone · dots · screen-angle · print · radial-gradient · canvas

Halftone

ハーフトーン

  • DIFFICULTY advanced
  • TREND classic
  • SOURCES 6
  • RESEARCHED 2026-08-15
DOTS

ポインターを動かすと網点の位置がずれる。動きは装飾で、内容や読み取れる情報は変わらない。

DEFINITION

連続階調の画像を、規則的に配置した網点の大きさや密度へ置き換え、離れて見たときに明暗の段階として知覚させる印刷由来の画像表現。

Halftoneは、インクの有無しか直接扱えない印刷工程で写真などの連続階調を再現するために発達した。一般的な網点では、セル内の点が大きいほど暗く、小さいほど明るく見える。スクリーン線数、角度、点形状は細部、粗さ、モアレの出方を左右する。Webでは、CSSで印刷風の点模様を重ねる方法と、Canvasなどで画素の輝度を点径へ変換する方法を区別する必要がある。

IMPRESSION
  • 印刷感●●●●●
  • 粗さ●●●●●
  • 規則性●●●●●
  • 滑らかさ●●●●●
RELATED / 関連技法

WHY
  • 写真をそのまま表示するより情報量を整理し、出版物やポスターを連想させる質感を加えられる。
  • 点の大きさ、間隔、角度、色を限定し、画像群を一貫した画調へ統合できる。
  • 遠目では明暗、近くでは点として見える二重の読みを作れる。
VISUAL
  • 一定の格子や角度に沿って並ぶ反復要素。
  • 暗部では大きく、明部では小さく見える点。
  • 低いスクリーン線数による粗い印刷感。
  • 複数のスクリーンが干渉した場合のモアレ。
IMPLEMENTATION

CSS radial-gradient · CSS mask-image · Canvas 2D · SVG filters · responsive images · server-side image processing

  • 単純な印刷風テクスチャはradial-gradientを疑似要素で反復する。
  • 画像依存の網点はCanvasで輝度から点半径を算出するか制作工程で処理する。
  • 一定径ドットの重ねだけを真正な階調変換と説明しない。
  • 意味画像はimgとaltを保持し装飾点を分離する。
BEST FOR
  • 出版、新聞、ZINE、音楽、展覧会、ポスターのキービジュアル。
  • 写真群へ共通の印刷感と限定色を与えるページ。
  • 細部損失を許容できる大型ビジュアル。
AVOID
  • 顔、細線、QRコード、図表、文字など判別が重要な内容を強く処理する。
  • 本文や操作ラベルを画像化する。
  • 異なる角度や縮尺を無計画に重ねモアレを生む。
  • 細かい反復パターンを広い画面で常時移動させる。
ACCESSIBILITY
  • 意味を持つ写真には内容と目的を表す代替テキストを付ける。
  • 人物や製品の識別に必要な細部が残るか確認する。
  • 文字はHTMLテキストとして網点レイヤーの外に保つ。
  • 点の色や密度だけで状態を伝えない。
  • 調整デモは標準コントロールで実装する。
  • prefers-reduced-motionでは追従とアニメーションを停止する。
PERFORMANCE
  • 密なパターンの広域アニメーションは実機で計測する。
  • Canvasは表示寸法に合わせdevicePixelRatioへ上限を設ける。
  • 静的画像は処理済みAVIFやWebPとsrcsetを検討する。
  • 点間隔を画面解像度より細かくしすぎない。
  • pointermove更新はrequestAnimationFrameで抑える。
CODE
.halftone{position:relative;isolation:isolate;overflow:hidden;background:#e8e2d4}.halftone img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.25)}.halftone::after{content:"";position:absolute;inset:-12%;pointer-events:none;background:radial-gradient(circle,#171717 0 36%,transparent 38%) 0 0/10px 10px;mix-blend-mode:multiply;opacity:.72;transform:rotate(-12deg)}@media(prefers-reduced-motion:reduce){.halftone::after{animation:none}}
SOURCES
AI PROMPT

Create a legible print-inspired halftone treatment with controlled dots and screen angle.

Create a responsive halftone image treatment inspired by editorial printing. Map luminance to visible dot sizes, keep essential silhouettes recognizable, leave live text outside the treatment, preserve alt text, prevent moire, provide keyboard and touch controls for meaningful adjustment, and stop decorative movement for reduced motion.

  • Do not rasterize live body text or data graphics.
  • Do not claim a constant overlay is luminance-driven halftone conversion.
  • Do not create uncontrolled moire or pointer-only information.
27
TEXTURE / blur · defocus · filter · backdrop-filter · depth · focus

Blur

ブラー

  • DIFFICULTY medium
  • TREND classic
  • SOURCES 5
  • RESEARCHED 2026-08-15
BACKGROUNDIN FOCUS

デモにホバー、またはキーボードでフォーカスすると背景の焦点が合う。前面のパネルは常に鮮明なまま。

DEFINITION

画像や要素の局所的な細部と輪郭をぼかし、鮮明な前景との対比によって焦点、前後関係、視線の優先順位を作る画像処理表現。

CSSのblur()は入力画像へガウスぼかしを適用し、指定長を標準偏差として扱う。filterを要素へ指定すると、その要素の背景、境界、内容、子孫をまとめた描画結果へ効果が及ぶため、読ませる文字とぼかす背景を別レイヤーにする必要がある。backdrop-filterは半透明要素の背後に描かれた内容を処理する。ブラーは細部とエッジコントラストを実際に失わせるため、可読性、フォールバック、描画コストを最終合成状態で確認する。

IMPRESSION
  • 柔らかさ●●●●●
  • 奥行き●●●●●
  • 静けさ●●●●●
  • 鮮明さ●●●●●
RELATED / 関連技法

WHY
  • 鮮明な前景と不鮮明な背景の差で前後関係と主従を伝えられる。
  • 背景を完全に消さず、モーダルや注目パネルへ視線を寄せられる。
  • 写真や光の境界を柔らかくし、空気感のある背景を作れる。
VISUAL
  • 細部と高周波成分が減り輪郭が周囲へにじむ。
  • 鮮明な前景とぼけた背景の対比。
  • 色境界が混ざる光のにじみ。
  • 半透明パネルの背後だけがぼける局所効果。
IMPLEMENTATION

CSS filter · CSS backdrop-filter · CSS gradients · pseudo-elements · responsive images · dialog

  • filter対象と鮮明に保つ文字を別レイヤーにする。
  • 背景画像は独立レイヤーへfilterを指定しoverflowで端を隠す。
  • backdrop-filterには不透明色のフォールバックを先に定義する。
  • モーダルの意味構造とフォーカス管理はブラーと別に実装する。
  • 意味のある焦点切替は標準コントロールを使う。
BEST FOR
  • モーダルやコマンドパレットの前景分離。
  • 主役を抽象化した背景から浮かせるヒーロー。
  • 光源や色面を柔らかく混ぜる装飾背景。
AVOID
  • 本文、ラベル、入力値、エラーをぼかす。
  • 背景ぼかしだけでモーダルのフォーカス管理を省略する。
  • ブラーを機密情報を隠す手段に使う。
  • 大きなblurを連続アニメーションする。
  • hoverだけで意味のある焦点を変える。
ACCESSIBILITY
  • 文字と操作要素は鮮明な独立レイヤーに保つ。
  • 最終合成後の文字とUIのコントラストを確認する。
  • ブラーだけで状態を伝えない。
  • モーダルはdialog構造、フォーカス移動、Escape、背景操作抑止を実装する。
  • 焦点変更はキーボード、タッチ、ポインターで操作可能にする。
  • prefers-reduced-motionではblur値の連続変化を停止する。
  • prefers-reduced-transparencyでは不透明な面へ置き換える。
PERFORMANCE
  • ぼかす領域、半径、同時適用数を最小限にする。
  • 全画面、入れ子、多数のbackdrop-filterを避ける。
  • 静的背景は事前にぼかした画像との性能差を比較する。
  • ぼかしで細部が見えない画像へ過剰な解像度を配信しない。
  • 低性能端末では静止状態へフォールバックする。
CODE
.blur-scene{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;min-height:24rem}.blur-bg{position:absolute;inset:-8%;z-index:-1;background:conic-gradient(#7ea7e8,#ef8e92,#e6c56f,#7ea7e8);filter:blur(2.5rem)}.blur-scene article{max-width:34rem;padding:2rem;color:#fff;background:rgb(9 13 20/.9)}@media(prefers-reduced-transparency:reduce){.blur-scene article{background:#09101a}}@media(prefers-reduced-motion:reduce){.blur-bg{transition:none;animation:none}}
SOURCES
AI PROMPT

Use controlled blur to recede a decorative background while keeping foreground content sharp.

Create a responsive layered composition with a softly blurred decorative background and fully sharp foreground content. Apply blur only to a separate background, provide an opaque fallback, verify contrast, provide keyboard and touch controls for meaningful focus changes, replace transparency when requested, stop blur transitions under reduced motion, and constrain filtered area for performance.

  • Do not blur required text or controls.
  • Do not use blur as a privacy mechanism.
  • Do not rely on blur for modal semantics.
  • Do not use hover-only focus changes or large animated backdrop filters.
28
TEXTURE / chromatic-aberration · rgb-split · color-fringing · feOffset · blend

Chromatic Aberration

色収差

  • DIFFICULTY medium
  • TREND niche
  • SOURCES 6
  • RESEARCHED 2026-08-15
SHIFT

ポインターを動かすとRGBのずれが増える。離すと元に戻り、動きを減らす設定では追従しない。

DEFINITION

赤・緑・青の色成分や複製レイヤーを数pxずつ異なる方向へずらし、レンズ由来の色縁に似た光学的不安定さを意図的に作る表現。

光学上のchromatic aberrationは、レンズが異なる波長の光を同じ位置へ結像できないために色縁が生じる現象である。Webでは、同一文字や画像の色分解レイヤーをtext-shadow、mix-blend-mode、SVG feOffsetなどでずらして模倣する。これは実際のレンズモデルを物理的に再現するとは限らず、RGB splitとしての編集的な近似である。文字本体は一つに保ち、色複製は装飾として支援技術から除外する。

IMPRESSION
  • 緊張感●●●●●
  • 不安定さ●●●●●
  • 鋭さ●●●●●
  • 未来感●●●●●
  • 穏やかさ●●●●●
RELATED / 関連技法

WHY
  • 静止したタイトルへ光学的な緊張と不安定さを加えられる。
  • 音楽、映像、実験的作品の世界観を短い表示文字で強調できる。
  • 状態変化と連動させ、反応の強度を色縁の幅として示せる。
VISUAL
  • 輪郭の左右に現れる赤・シアンの色縁。
  • 中心に残る鮮明な文字本体と数pxずれた色複製。
  • 動きやhover時だけ増幅し静止時には弱まるずれ。
  • 暗い背景と高彩度の色分解レイヤー。
IMPLEMENTATION

CSS text-shadow · CSS pseudo-elements · CSS mix-blend-mode · SVG feOffset · SVG feBlend · Pointer Events · prefers-reduced-motion

  • 文字本体は一つだけ置き、色複製は装飾として扱う。
  • ずれ量はCSS変数へ上限付きで渡し静止時に戻す。
  • pointermove更新はrequestAnimationFrameでまとめpointerleaveで初期化する。
  • タッチとキーボード向けに強度コントロールを用意する。
  • reduced motionでは追従を停止する。
  • ずれ量は0.02em〜0.06em程度を上限とし、装飾的な短い見出しにのみ適用する。
BEST FOR
  • 音楽、映像、ゲーム、デジタルアートの短いタイトル。
  • 実験的なポートフォリオの一時的な反応。
  • 光学装置や信号を想起させる装飾的なヒーロー。
AVOID
  • 本文、フォームラベル、長い見出しへ適用する。
  • ずれを大きくして複数の文字として誤認させる。
  • 色ずれだけで状態を伝える。
  • pointermoveだけで意味のある情報を提供する。
  • RGB splitを物理的に正確なレンズシミュレーションと断定する。
ACCESSIBILITY
  • 意味を持つ文字はDOM上で一つに保つ。
  • 中心文字と背景のコントラストを確認する。
  • 色縁だけで状態やエラーを伝えない。
  • 効果調整は標準コントロールで提供する。
  • pointermoveがなくても同じ情報を取得可能にする。
  • prefers-reduced-motionでは追従を停止する。
PERFORMANCE
  • 短い見出しではtext-shadowを優先する。
  • pointermoveの更新をrequestAnimationFrameでまとめる。
  • SVG filterを大面積へ重ねる場合は計測する。
  • 高解像度の色分解画像を複数配信しない。
  • 画面外ではイベント更新を停止する。
CODE
.chroma-title{--shift:2px;color:#f7f7f2;font:900 clamp(4rem,14vw,12rem)/.8 sans-serif;text-shadow:calc(var(--shift)*-1) 0 #ff3158,var(--shift) 0 #20d9ff}.chroma-toggle:focus-visible{outline:3px solid currentColor;outline-offset:4px}@media(prefers-reduced-motion:reduce){.chroma-title{--shift:0px}}@media(forced-colors:active){.chroma-title{text-shadow:none}}
SOURCES
AI PROMPT

Add a subtle RGB split to short display type while keeping one crisp accessible text layer.

Create a restrained chromatic-aberration effect on short display type using one crisp semantic text node and decorative red and cyan offsets capped to a few pixels. Preserve contrast and focus, provide touch and keyboard controls, reset pointer offsets, disable tracking for reduced motion, and avoid full-screen repaint-heavy layers.

  • Avoid RGB splitting body text or controls.
  • Avoid large offsets and duplicate accessible text.
  • Avoid color-only states and pointer-only behavior.
  • Avoid claiming physical lens accuracy.
29
TEXTURE / glass · backdrop-filter · transparency · blur · surface

Glass

ガラス質感

  • DIFFICULTY medium
  • TREND current
  • SOURCES 3
  • RESEARCHED 2026-08-16
FROSTEDbackdrop-filter

ポインターを動かし、背景が変化しても半透明面の文字が読めるか確認する。

DEFINITION

半透明の面越しに背面をぼかし、淡い境界線やハイライトを加えて、すりガラス状の奥行きと面の厚みを示す技法。

Glassは、半透明色とbackdrop-filterによる背面ぼかしを組み合わせた面表現である。ぼかしは文字コントラストを自動保証しないため、色付きの半透明面を必ず併用し、未対応環境では十分に不透明な背景へフォールバックする。すべてのカードへ使うのではなく、前景と背景の関係を示す限定的なパネルに向く。

IMPRESSION
  • 透明感●●●●●
  • 浮遊感●●●●●
  • 奥行き●●●●●
  • 素朴さ●●●●●
RELATED / 関連技法

WHY
  • 背景の文脈を残したまま前景の操作面を分離できる。
  • 境界線とぼかしで、強い影を使わず面の厚みを示せる。
  • 地図や画像上のオーバーレイを背景から完全に切り離さず配置できる。
VISUAL
  • 背面が透けてぼける半透明面。
  • 明るい細線と局所的なハイライト。
  • 背景色を受けながら内容部分は安定したコントラストを保つ。
IMPLEMENTATION

backdrop-filter · rgba colors · CSS borders · @supports

  • 半透明のbackground-colorを必ず併用する。
  • @supportsでbackdrop-filterを検出し、未対応時はより不透明な背景へ戻す。
  • 背景ルートや祖先のopacity、filter、maskがぼかし範囲を変える点を確認する。
BEST FOR
  • 地図や画像の上に置く操作パネル。
  • メディアプレイヤーや一時的なオーバーレイ。
  • 少数の前景カードで奥行きを示すヒーロー。
AVOID
  • ぼかしだけに文字の可読性を依存する。
  • 全パネルを透明にして面の階層を曖昧にする。
  • 未対応環境で透明背景だけを残す。
  • 大面積の多層ぼかしを常時アニメーションする。
ACCESSIBILITY
  • 実際の背景画像や状態ごとに文字とUIのコントラストを検査する。
  • 透明度を下げたい利用者向けに、不透明な代替面を設計する。
  • 境界の知覚をぼかしだけに頼らず、線、余白、見出しで構造を示す。
PERFORMANCE
  • backdrop-filterの領域と枚数を限定し、スクロール中の描画を実機計測する。
  • 多重ぼかしや大きなblur半径を避ける。
  • 低性能環境では静的な半透明色へフォールバックする。
CODE
.glass-scene{display:grid;place-items:center;min-block-size:24rem;background:linear-gradient(140deg,#1d3a5c,#7a3b6b 45%,#c9793f)}
.glass-card{padding:2rem;border:1px solid rgb(255 255 255/.35);border-radius:16px;color:#fff;
  background:rgb(255 255 255/.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* backdrop-filter非対応・透明度を減らす設定では不透明な面へ戻す */
@supports not (backdrop-filter: blur(1px)){.glass-card{background:rgb(16 24 38/.9)}}
@media (prefers-reduced-transparency: reduce){.glass-card{background:rgb(16 24 38/.92);backdrop-filter:none;-webkit-backdrop-filter:none}}
SOURCES
AI PROMPT

Build one readable frosted-glass panel with a robust opaque fallback.

Create one frosted-glass interface panel over a textured background using a tinted semi-transparent fill, restrained backdrop blur, a subtle border and stable text contrast. Include an opaque fallback for unsupported or reduced-transparency environments, limit the filtered area, and never rely on blur alone for legibility.

  • Do not make every surface transparent.
  • Do not place text over uncontrolled contrast.
  • Do not stack large animated backdrop filters.
30
TEXTURE / soft-shadow · box-shadow · elevation · light-source · depth

Soft Shadow

ソフトシャドウ

  • DIFFICULTY easy
  • TREND classic
  • SOURCES 3
  • RESEARCHED 2026-08-16
LIFT ME

カードへポインターまたはフォーカスを移し、影と輪郭で高さの変化を確認する。

DEFINITION

共通の光源を想定した低不透明度の複数影で、要素の接地、高さ、前後関係を穏やかに表す面設計。

Soft Shadowは、box-shadowのoffset、blur、spread、colorを一つまたは複数組み合わせ、面の高さと接地感を示す。影は装飾ではなく階層の補助として使い、同じ高度には同じ影を割り当てる。境界や操作状態を影だけで伝えず、線、色、余白、フォーカス表示を併用する。

IMPRESSION
  • 柔らかさ●●●●●
  • 立体感●●●●●
  • 穏やかさ●●●●●
  • 鋭さ●●●●●
RELATED / 関連技法

WHY
  • 枠線を増やさず前景と背景を分離できる。
  • 影の距離とぼけで面の高さの差を補助できる。
  • hoverや押下の小さな高度変化を視覚的に伝えられる。
VISUAL
  • 低い不透明度と大きめのぼかし半径。
  • 一貫した方向へ伸びる影。
  • 接地影と環境光を模した複数の影。
IMPLEMENTATION

CSS box-shadow · CSS custom properties · CSS transitions

  • 高度ごとの影をCSS変数へまとめる。
  • 複数影は前から後ろの順にカンマ区切りで指定する。
  • hoverやfocus-visibleでは影だけでなく輪郭や色も変える。
BEST FOR
  • カード、ダイアログ、ポップオーバー。
  • 持ち上がる操作を示す少数のボタン。
  • 背景と近い色の面を穏やかに分離するUI。
AVOID
  • 全要素へ同じ影を付ける。
  • 光源の方向を画面内で混在させる。
  • 影だけで選択、フォーカス、エラーを表す。
  • hover時に大きく移動させてレイアウトを揺らす。
ACCESSIBILITY
  • フォーカス状態はbox-shadowだけにせず明確なoutlineを併用する。
  • 影が見えない高コントラスト環境でも境界と状態を理解できるようにする。
  • 持ち上がる遷移は短くし、Reduced Motionでは移動を除く。
PERFORMANCE
  • 多数の大きなぼかし影やアニメーションする影を避ける。
  • 影のトークン数を絞り、一覧では静的に使う。
  • filter: drop-shadowとの違いを踏まえ、箱形の面にはbox-shadowを優先する。
CODE
/* 共通の光源を1つ決め、影は段階をトークン化する */
:root{--shadow-1:0 1px 2px rgb(12 16 20/.08),0 2px 6px rgb(12 16 20/.06);
  --shadow-2:0 2px 4px rgb(12 16 20/.08),0 8px 20px rgb(12 16 20/.10);
  --shadow-3:0 4px 8px rgb(12 16 20/.10),0 18px 40px rgb(12 16 20/.14)}
.card{background:#fff;border-radius:12px;box-shadow:var(--shadow-1);transition:box-shadow .2s,transform .2s}
.card:hover,.card:focus-within{box-shadow:var(--shadow-2);transform:translateY(-2px)}
/* 影だけで状態を示さない。境界線も併せて持たせる */
.card{border:1px solid rgb(12 16 20/.06)}
@media (prefers-reduced-motion: reduce){.card{transition:none}.card:hover{transform:none}}
@media (forced-colors: active){.card{border-color:CanvasText}}
SOURCES
AI PROMPT

Define restrained layered shadows from one consistent light source.

Design a small elevation system with restrained layered CSS box shadows from one consistent light source. Reuse the same shadow token for the same height, pair interactive elevation with a visible focus outline and color change, avoid layout movement, and remove non-essential lift motion for reduced motion.

  • Do not give every element a shadow.
  • Do not mix light directions or use opaque black clouds.
  • Do not rely on shadow alone for focus or state.
31
MOTION / typography · animation · stagger · timing · keyframes

GSAP Motion Typography

GSAPモーションタイポグラフィ

  • DIFFICULTY medium
  • TREND current
  • SOURCES 3
  • RESEARCHED 2026-08-15

短い見出しを単語単位で順に表示し、動きが読む順番と語気をどう変えるか確認する。

DEFINITION

GSAPのタイムラインやstaggerを使って文字の出現、移動、変形、停止を制御し、言葉の意味や読む順番を動きで補強する技法。

文字を時間を持つ視覚要素として扱い、語句の順番、速度差、停止、強弱をGSAPのタイムラインで編成する。CSSで閉じる短い字単位演出を扱うKinetic Typeとは分け、複数の語、状態、再生制御を一つの時間軸へまとめる必要がある場面を中心とする。GSAPは目的ではなく、複雑なタイムラインを管理する実装手段である。

IMPRESSION
  • 躍動感●●●●●
  • 演出性●●●●●
  • 情報性●●●●●
  • 静けさ●●●●●
RELATED / 関連技法

WHY
  • 語句を順番に提示し、読む順序と注意の配分を設計できる。
  • 速度、停止、遅延、スケール差によって言葉の強弱や感情を視覚化できる。
  • 画像を増やさず、ブランドの声量や人格をタイポグラフィだけで表現できる。
VISUAL
  • 文字、単語、行単位の時間差。
  • 短い移動、拡大縮小、回転、opacity変化。
  • 動きの後に安定した読み取り可能な最終状態が残る。
IMPLEMENTATION

CSS Animations · @keyframes · CSS transforms · Web Animations API · GSAP

  • 単純な出現はCSSで実装する。
  • 複雑な文字分割や再生制御ではWAAPIまたはGSAPを検討する。
  • GSAPは必須条件ではない。
BEST FOR
  • ヒーローコピーやキャンペーンタイトル。
  • 章扉や短いブランドメッセージ。
  • 動画的なリズムを持たせたいランディングページ。
AVOID
  • 長文本文を文字単位に分解して常時動かす。
  • 読む速度より遅い演出で情報への到達を待たせる。
  • reduced-motion利用者にも大きなzoomや画面横断移動を表示する。
  • アニメーション終了後も文字を揺らし続ける。
ACCESSIBILITY
  • 初期HTMLに読める文字を置き、JavaScriptやアニメーションが無効でも内容を失わない。
  • prefers-reduced-motion: reduceではtranslate、scale、rotation、staggerを停止し最終状態を即時表示する。
  • 必要なら小さなopacity変化だけを残し、情報理解に不要な移動を除去する。
  • 文字の出現順をDOM順と矛盾させず、フォーカス可能要素を画面外へ移動しない。
  • 点滅や高頻度の明暗反転を使用しない。
PERFORMANCE
  • transformとopacityを優先し、top、left、width、height変更を避ける。
  • 数百文字を個別DOMへ分割する実装は低性能端末で計測する。
  • 短いシーケンスではCSSを優先し、毎フレームのレイアウト計測を避ける。
CODE
/* aria-labelで1つの文字列を渡し、分割spanは支援技術から隠す */
.kt span span{display:inline-block;animation:kt-rise .5s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--i) * 60ms)}
@keyframes kt-rise{from{opacity:0;transform:translateY(.5em) rotate(4deg)}to{opacity:1;transform:none}}
/* 完成状態を保持する。GSAPは必須ではない */
@media (prefers-reduced-motion: reduce){.kt span span{animation:none}}
SOURCES
AI PROMPT

Create purposeful kinetic typography with a clear reading sequence and a stable final state.

Animate a short headline as kinetic typography. Trigger once when it enters the viewport. Use a 500–700ms sequence, 60–100ms stagger between words, ease-out timing, no more than 20px of vertical travel, and finish with every word fully readable and stationary. For prefers-reduced-motion remove translation, scale and stagger.

  • Do not animate long body copy character by character.
  • Do not keep text moving after the message is revealed.
  • Do not require GSAP for a CSS-sized sequence.
  • Do not hide text when JavaScript fails.
32
MOTION / scroll · animation-timeline · view-timeline · progress

Scroll-driven Animation

スクロールドリブン・アニメーション

  • DIFFICULTY advanced
  • TREND rising
  • SOURCES 2
  • RESEARCHED 2026-08-15
ENTERREVEALHOLDEXIT

スクロール量に合わせて図形と進捗表示を変化させ、閲覧位置がアニメーションを進めることを確認する。

DEFINITION

スクロール位置や要素のビューポート通過率をアニメーションの進行時間として扱い、閲覧の進行と視覚変化を同期させる技法。

時間ではなくスクロール進行をタイムラインとして扱う。CSS Scroll-driven Animationsではscroll timelineとview timelineをCSS AnimationsやWeb Animations APIへ接続できる。対応差があるため、通常表示を基本にしたprogressive enhancementが必要になる。

IMPRESSION
  • 連動感●●●●●
  • 物語性●●●●●
  • 没入感●●●●●
  • 静けさ●●●●●
RELATED / 関連技法

WHY
  • スクロール進行と説明の変化を結び付け、因果関係を理解しやすくできる。
  • 長いページで現在位置、進行度、章の変化を時間的な情報階層として示せる。
  • 製品構造やデータ変化など、順番に理解する内容へ物語性を与えられる。
VISUAL
  • スクロール量に比例した進行。
  • 要素のviewport進入と退出に同期した変化。
  • 進行方向を戻すと視覚状態も自然に戻る。
IMPLEMENTATION

CSS Scroll-driven Animations · animation-timeline · scroll() · view() · Web Animations API · IntersectionObserver

  • 対応ブラウザではanimation-timelineをprogressive enhancementとして使用する。
  • 単純なenter revealのfallbackにはIntersectionObserverを使用できる。
  • スクロールイベントを毎フレーム直接処理する方式を第一選択にしない。
BEST FOR
  • ストーリーテリング型の長いページ。
  • 製品構造や工程の段階説明。
  • 読書進捗やセクション状態の可視化。
AVOID
  • wheelやtouchイベントをキャンセルして独自スクロール速度を強制する。
  • 本文を読むために不要な大移動や回転を連続させる。
  • 最新animation-timeline APIだけに内容理解を依存する。
  • スクロール方向と異なる大きな横移動を大量に組み合わせる。
ACCESSIBILITY
  • prefers-reduced-motionではtranslate、scale、rotation、parallaxを停止する。
  • reduced-motion時も内容、章順、進捗情報を静的な見出しや通常レイアウトから取得できるようにする。
  • wheel、touch、keyboard、scrollbarによるネイティブスクロールを妨げない。
  • フォーカス要素を演出で隠さない。
  • スクロール量だけを情報伝達の唯一の手段にしない。
PERFORMANCE
  • 対応環境では宣言的なscroll timelineを優先し、main threadでの大量scroll handlerを減らす。
  • transformとopacity中心で構成し、スクロール中のlayoutとpaintを最小化する。
  • IntersectionObserverのfallbackでは可視状態の切り替えだけを行い連続計測を避ける。
CODE
/* 既定は表示済み。非対応でもJS失敗でも内容は読める */
.reveal-on-scroll{opacity:1}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal-on-scroll{animation:fade-in linear both;animation-timeline:view();animation-range:entry 10% entry 60%}
    @keyframes fade-in{from{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}
  }
}
SOURCES
AI PROMPT

Create a progressively enhanced scroll-driven animation without hijacking native scrolling.

Create a scroll-driven section where one visual changes from 0% to 100% as the section crosses the viewport. Use native scrolling, a view or scroll timeline where supported, transform and opacity only, a restrained maximum translation of 24px, and linear progress. Preserve the final readable layout at every point. For prefers-reduced-motion disable progress-linked movement and show the completed static visual. Provide a normal static fallback when animation-timeline is unsupported.

  • Do not cancel wheel or touch scrolling.
  • Do not require animation-timeline for accessing content.
  • Do not combine multiple large parallax layers.
  • Do not hide keyboard focus during the sequence.
33
MOTION / clip-path · mask · reveal · overflow

Mask Reveal

マスク・リビール

  • DIFFICULTY medium
  • TREND current
  • SOURCES 2
  • RESEARCHED 2026-08-15
REVEALHOVER THE FIELD

見出しと画像を一方向のマスクから短時間で露出し、終了後は完全な静止状態を保つ。

DEFINITION

要素全体を移動させるのではなく、clipやmaskの可視領域を変化させ、隠れていた文字や画像を方向性を持って露出させる技法。

遮蔽境界を時間軸で変化させて内容を見せる。単純なfadeより登場方向と編集的なリズムを設計できる。CSS clip-path、mask、overflowとtransformなどで実装できるが、情報を長時間隠さず、reduced-motion環境では最終表示状態を直ちに提供する。

IMPRESSION
  • 編集感●●●●●
  • 緊張感●●●●●
  • 上品さ●●●●●
  • 連続感●●●●●
RELATED / 関連技法

WHY
  • 情報を一度に見せず露出順を制御し、読む順番を設計できる。
  • 画像そのものを大きく移動させず、フレームや編集面の存在を強調できる。
  • 前後のセクションを切り替える瞬間に視覚的な区切りを作れる。
VISUAL
  • 矩形や形状の境界が移動して内容を露出する。
  • 画像または文字本体の移動量は小さい。
  • 露出終了後は完全な要素が静止して残る。
IMPLEMENTATION

clip-path · CSS Masking · overflow · CSS transforms · CSS Animations · Web Animations API

  • 矩形revealならoverflow:hiddenとtransformだけでも実装できる。
  • 複雑な形状ではclip-pathまたはmaskを利用する。
  • JavaScriptは再生制御や動的sequencingが必要な場合だけ追加する。
BEST FOR
  • 見出しや短いコピー。
  • 写真や作品の登場。
  • 章やセクションの切り替え。
AVOID
  • 重要情報を長時間mask内部へ隠す。
  • 全要素に異なる方向のrevealを適用する。
  • フォーカスされた操作要素をclipで切り取る。
  • reduced-motion時にも大きなmask sweepを強制する。
ACCESSIBILITY
  • reduced-motionではclipの移動を停止し、最終的な完全表示状態を最初から描画する。
  • opacityのみの短いfadeへ置き換える場合も内容へのアクセスを遅延させない。
  • フォーカス可能要素のoutlineをclip-pathで切り落とさない。
  • アニメーション失敗時にもテキストと画像が不可視状態に残らないようstatic firstで実装する。
PERFORMANCE
  • 単純なrevealでは要素本体のtransformを利用し、複雑な巨大maskの連続paintを避ける。
  • 高解像度画像への複雑なmask animationはモバイル端末でpaint負荷を確認する。
  • 同時に多数のmasked elementを動かさない。
CODE
/* 矩形revealはoverflowとtransformだけで足りる */
.reveal{overflow:hidden}
.reveal__inner{display:inline-block;animation:reveal-up .6s cubic-bezier(.2,.9,.2,1) both}
@keyframes reveal-up{from{transform:translateY(100%)}to{transform:none}}
/* 複雑な形状のときだけclip-pathへ切り替える */
.reveal--shape{animation:reveal-clip .7s ease both}
@keyframes reveal-clip{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion: reduce){.reveal__inner,.reveal--shape{animation:none}}
SOURCES
AI PROMPT

Reveal content through a restrained directional mask and finish fully readable.

Reveal one headline and one image through a directional mask when the section enters the viewport. Use a 500ms ease-out reveal, one consistent direction, no more than 80ms between headline and image, and keep the content stationary once revealed. For prefers-reduced-motion skip the mask movement and display the final unmasked state immediately, optionally retaining only a subtle opacity fade.

  • Do not mask every element on the page.
  • Do not leave important content clipped.
  • Do not clip keyboard focus rings.
  • Do not delay access to text for decorative timing.
34
MOTION / parallax · depth · layers · transform

Parallax

パララックス

  • DIFFICULTY medium
  • TREND classic
  • SOURCES 2
  • RESEARCHED 2026-08-15
BACKDEPTHFRONT

三つのレイヤーを小さな速度差で動かし、本文を固定したまま奥行きだけを感じる構成を確認する。

DEFINITION

前景・中景・背景など複数レイヤーの移動量や速度に差を付け、平面の画面内に視差と奥行きを感じさせるモーション技法。

複数レイヤーの相対運動によって空間的距離を示す。写真、背景、装飾などを異なる量で動かすことで奥行きを生める一方、強い視差は前庭障害の利用者に不快感を与える可能性がある。小さな移動量、安定した本文、reduced-motionでの完全停止を基本とする。

IMPRESSION
  • 奥行き●●●●●
  • 没入感●●●●●
  • 動的●●●●●
  • 安定感●●●●●
RELATED / 関連技法

WHY
  • レイヤー間の速度差によって前後関係と空間認識を補強できる。
  • 写真やブランド世界観に没入感を与えられる。
  • スクロール方向と奥行き変化を関連付け、物語の進行を空間的に表現できる。
VISUAL
  • 前景と背景で異なる移動量。
  • 安定した基準レイヤーと動く装飾レイヤー。
  • 小さな視差から生まれる奥行き感。
IMPLEMENTATION

CSS transforms · CSS Scroll-driven Animations · requestAnimationFrame · Pointer Events · GSAP

  • 単純なscroll-linked版は対応ブラウザでCSS Scroll-driven Animationsを利用できる。
  • pointer parallaxはPointer EventsとrequestAnimationFrameで実装できる。
  • GSAPは高度なtimeline管理が必要な場合のみ選択する。
BEST FOR
  • 旅行、建築、映画、ブランドストーリー。
  • 写真主体のヒーローセクション。
  • 空間や距離を説明する演出。
AVOID
  • 本文や操作UIを背景と別速度で大きく動かす。
  • スクロールと逆方向へ画面全体を高速移動させる。
  • 大きなzoomとparallaxを同時に使用する。
  • reduced-motion設定を無視する。
ACCESSIBILITY
  • prefers-reduced-motionでは視差移動を停止し、全レイヤーを通常位置に固定する。
  • 本文、ナビゲーション、フォーカス対象は安定したレイヤーに置く。
  • 視差がなくても前後関係や情報構造を理解できる静的構成にする。
  • 大きなscale、zoom、回転をparallaxと組み合わせない。
  • ユーザー独自のmotion off controlを設ける場合は設定をページ内で維持する。
PERFORMANCE
  • transform中心で実装し、scroll中のtopやbackground-position等による高コスト更新を避ける。
  • requestAnimationFrameでは1frame内でDOM計測と更新を整理する。
  • 巨大画像や多数レイヤーを同時compositeしない。
  • 低性能モバイル端末でGPUメモリとframe dropを確認する。
CODE
.parallax{position:relative;overflow:clip}
/* 対応ブラウザだけで有効化する。スクロールイベントを毎フレーム処理しない */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .parallax__layer{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes drift{from{transform:translateY(-8%)}to{transform:translateY(8%)}}
  }
}
SOURCES
AI PROMPT

Create restrained three-layer parallax with a stable readable foreground.

Build a restrained three-layer parallax composition. Keep the primary text completely stable, move decorative middle and background layers no more than 12px and 24px, use smooth progress, and never zoom the viewport. For prefers-reduced-motion remove all parallax transforms and preserve the same static layered composition.

  • Do not move body text.
  • Do not hijack scroll.
  • Do not combine large zoom and parallax.
  • Do not require motion to understand spatial hierarchy.
35
MOTION / svg · path · stroke · line-drawing

SVG Path Animation

SVGパス・アニメーション

  • DIFFICULTY medium
  • TREND classic
  • SOURCES 2
  • RESEARCHED 2026-08-15
FOLLOW THE LINE

単純な一本のSVG pathを短時間で描画し、完成後は線を保持する。

DEFINITION

SVGのstrokeを段階的に露出させ、線、ロゴ、地図、図形などが経路に沿って描かれていく過程を時間として見せる技法。

stroke-dasharrayとstroke-dashoffsetなどを利用し、完成した線を一度に表示せず描画過程として提示する。オブジェクトがpath上を移動するCSS Motion Pathとは異なる。ロゴや地図、工程の説明に適するが、複雑なpathや大量の線を同時に動かさないことが重要になる。

IMPRESSION
  • 精密さ●●●●●
  • 手描き感●●●●●
  • 物語性●●●●●
  • 重量感●●●●●
RELATED / 関連技法

WHY
  • 完成形だけでなく形が生成される過程を示せる。
  • 地図や工程で開始点から終了点までの因果関係を伝えられる。
  • ロゴや署名へ手作業的なブランド人格を加えられる。
VISUAL
  • 線が始点から終点へ伸びる。
  • strokeの長さと空白が時間とともに変化する。
  • 終了後に完成したベクター形状が残る。
IMPLEMENTATION

SVG · stroke-dasharray · stroke-dashoffset · CSS Animations · Web Animations API

  • 単純な線描画はCSSだけで実装できる。
  • 複数pathのsequenceや再生制御が必要な場合にWAAPIまたはJavaScriptを追加する。
  • Motion Pathのoffset-pathとは別技法として扱う。
BEST FOR
  • ロゴや署名。
  • 地図や経路表示。
  • 工程や関係図の説明。
AVOID
  • 非常に複雑なSVGを一本ずつ長時間描く。
  • 文字情報そのものをpath化してアクセシブルテキストを失う。
  • 完成状態を表示せず繰り返し消去する。
  • 大量のpathを同時に連続アニメーションする。
ACCESSIBILITY
  • 情報を伝えるSVGには適切なテキスト代替または周辺説明を用意する。
  • prefers-reduced-motionではstroke drawingを停止し完成したpathを即時表示する。
  • 線の描画順だけに情報の意味を依存させない。
  • 点滅するstrokeや高頻度の色反転を使用しない。
PERFORMANCE
  • path数とpoint数を必要以上に増やさない。
  • 大量SVGの同時animationを避け、画面内の必要なpathだけを動かす。
  • 複雑なfilterやmaskをstroke animationへ同時適用する場合はpaint負荷を計測する。
CODE
/* pathLength=1にすると経路長を測らずにdasharrayを指定できる */
.draw{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.draw{animation:none;stroke-dashoffset:0}}
SOURCES
AI PROMPT

Animate one simple SVG path from start to finish and hold the completed mark.

Animate a simple SVG path as a line drawing when it enters the viewport. Use stroke-dasharray and stroke-dashoffset, a 900ms ease-in-out duration, one clear start point, no looping, and hold the completed path permanently after the animation. For prefers-reduced-motion skip the drawing sequence and show the complete SVG immediately.

  • Do not animate hundreds of path segments.
  • Do not convert essential text into inaccessible outlines.
  • Do not erase the final mark after completion.
  • Do not loop decorative path drawing indefinitely.
36
MOTION / marquee · loop · continuous-motion · ticker · CSS-animation

Marquee

マーキー

  • DIFFICULTY easy
  • TREND current
  • SOURCES 3
  • RESEARCHED 2026-08-15
NEWS · 2026 · WEB DESIGN ENCYCLOPEDIA · NEWS · 2026 · WEB DESIGN ENCYCLOPEDIA · NEWS · 2026 · WEB DESIGN ENCYCLOPEDIA · NEWS · 2026 · WEB DESIGN ENCYCLOPEDIA · 
HOVER TO PAUSE

短い文字列を一定速度で循環させる。Pause操作とreduced-motion時の静止を確認する。

DEFINITION

文字、ロゴ、画像などを一定方向へ連続的に流し、始点と終点の継ぎ目を感じさせず反復することで、画面に持続的な時間とリズムを作る技法。

同じコンテンツを連結または複製し、終端が次の始端へ自然につながる連続モーションを作る。ブランドやイベントの副次的な情報帯に向くが、重要情報を流れる状態だけで提示せず、長時間自動再生にはPause、Stop、Hideを用意する。

IMPRESSION
  • 連続感●●●●●
  • 活気●●●●●
  • リズム●●●●●
  • 静けさ●●●●●
RELATED / 関連技法

WHY
  • 言葉やシンボルを反復し、ブランドやキャンペーンの記憶定着を強められる。
  • 横方向の持続的な流れによって、静的レイアウトへ時間軸とリズムを加えられる。
  • 画面外へ内容が続く感覚を作り、イベントやニュースの連続性を表現できる。
VISUAL
  • 文字列、ロゴ、画像列が一定方向へ移動する。
  • 同一内容を連結し、継ぎ目が目立たない。
  • 一定速度と方向を保つ帯状領域。
IMPLEMENTATION

CSS Animations · @keyframes · CSS transform · animation-play-state · prefers-reduced-motion

  • CSS animationとtransformだけで実装できる。
  • 複製内容は支援技術へ重複して読ませない。
  • hoverだけでなくキーボード操作可能なPauseを提供する。
BEST FOR
  • イベント名や短いキャンペーンコピー。
  • スポンサーやブランドロゴの装飾表示。
  • 主情報とは別の短い告知帯。
AVOID
  • 重要情報を流れる状態だけで提示する。
  • 停止手段なしで5秒を超える自動スクロールを継続する。
  • 高速で流しユーザーの読む速度を奪う。
  • 複数の高速Marqueeを異なる方向へ同時表示する。
ACCESSIBILITY
  • 5秒を超えて動き続ける場合はPause、Stop、Hideを提供する。
  • prefers-reduced-motionでは自動ループを開始せず静的表示にする。
  • 複製した文字やロゴをスクリーンリーダーへ重複して伝えない。
  • 重要な告知や価格をMarqueeだけに置かない。
  • 点滅や急激な明暗反転を混在させない。
PERFORMANCE
  • transformを優先しleftやmarginをアニメーションしない。
  • 大量の複製DOMや高解像度画像を避ける。
  • 画面外のloopを無制限に動かし続けない。
  • will-changeを大量に恒久設定しない。
CODE
.marquee{overflow:hidden}
.marquee__track{display:flex;inline-size:max-content;animation:marquee 18s linear infinite}
/* hoverだけに頼らない。focus-withinとボタンでも止まる */
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee[data-paused="true"] .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee__track{animation:none}}
SOURCES
AI PROMPT

Create a slow accessible marquee with seamless repetition and explicit pause control.

Create a seamless horizontal marquee for a short non-essential brand phrase. Start automatically only without reduced motion, use transform-only movement, a full cycle of at least 12 seconds, one direction, and visually seamless duplicated content. Provide a keyboard-accessible Pause and Resume control and keep essential information available elsewhere as static text.

  • Do not use marquee as the only location for essential information.
  • Do not rely on hover as the only pause mechanism.
  • Do not use rapid movement or flashing.
  • Do not expose duplicated content repeatedly to screen readers.
37
MOTION / page-transition · view-transition · navigation · shared-element · state-change

Page Transition

ページ・トランジション

  • DIFFICULTY medium
  • TREND rising
  • SOURCES 3
  • RESEARCHED 2026-08-15

一覧と詳細の状態を切り替え、短い遷移で前後の位置関係を保つ。

DEFINITION

ページ、ビュー、UI状態が切り替わる前後を短い視覚変化でつなぎ、移動方向、要素の対応関係、状態変化を理解しやすくするモーション技法。

旧状態から新状態への変化を時間軸で示し、空間的・因果的な連続性を作る。fade、slide、mask、shared elementなどの表現があり、View Transition APIも実装選択肢になるが、非対応環境でも通常navigationが成立するprogressive enhancementとして設計する。

IMPRESSION
  • 連続感●●●●●
  • 自然さ●●●●●
  • 洗練●●●●●
  • 派手さ●●●●●
RELATED / 関連技法

WHY
  • 遷移前後の要素の対応関係を示し、現在位置を見失う認知コストを減らせる。
  • 進む、戻る、階層を下る関係を方向や距離で補助できる。
  • 状態変化を画面交換ではなく因果関係として示せる。
VISUAL
  • 旧画面と新画面の短いcross-fade。
  • 前後関係に合わせた一方向の移動。
  • 同一画像やカードが位置やサイズを連続的に変える。
IMPLEMENTATION

View Transition API · document.startViewTransition() · @view-transition · view-transition-name · CSS Transitions · CSS Animations · Web Animations API

  • 技法とView Transition APIを区別する。
  • same-documentではdocument.startViewTransition()を利用できる。
  • 非対応時は通常navigationまたはDOM更新へfallbackする。
BEST FOR
  • 一覧から詳細への移動。
  • 画像ギャラリー。
  • 章やセクションの切り替え。
  • same-originページ間のナビゲーション。
AVOID
  • すべての遷移を長い映画的animationにする。
  • 戻ると進むで空間方向を矛盾させる。
  • 遷移終了まで内容を不必要に待たせる。
  • API非対応時にnavigation自体を失敗させる。
ACCESSIBILITY
  • reduced-motionでは大きなtranslate、zoom、scale、shared-element movementを停止する。
  • 遷移後のkeyboard focusを論理的な位置へ移す。
  • transitionがskipされてもdestinationへ到達できるようにする。
  • 方向だけを現在位置の唯一の手掛かりにしない。
  • 点滅や高頻度の明暗切り替えを使用しない。
PERFORMANCE
  • 遷移対象を必要な要素へ限定する。
  • transformとopacityを優先する。
  • layoutを繰り返すpropertyを避ける。
  • 巨大画像や複雑なfilterを含むsnapshotを実機計測する。
CODE
/* cross-documentの遷移を宣言的に有効化する */
@view-transition{navigation:auto}
.hero{view-transition-name:hero}
/* 動きを減らす設定では遷移アニメーションだけ止める（遷移自体は成立する） */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none}
}
SOURCES
AI PROMPT

Create a short progressive page transition that preserves spatial context.

Create a page transition between a gallery or card list and its detail view. Trigger only on explicit navigation, complete in 250–400ms with ease-out timing, preserve one clear spatial relationship, and finish with a stable interactive destination. Use View Transition API only as progressive enhancement and provide ordinary navigation fallback. For reduced motion remove translation and scaling.

  • Do not make navigation depend on API support.
  • Do not exceed 500ms.
  • Do not animate every element independently.
  • Do not delay focus management behind animation.
38
MOTION / stagger · sequence · animation-delay · timing · reveal

Stagger Motion

スタッガー・モーション

  • DIFFICULTY easy
  • TREND current
  • SOURCES 3
  • RESEARCHED 2026-08-15

5個程度の要素を短い時間差で順番に表示し、reduced-motionではdelayも含めて即時表示する。

DEFINITION

複数の関連要素へ短い開始時間の差を与え、一斉に動かすのではなく順番に立ち上げることで、読む順序と時間的な情報階層を作る技法。

カード、リスト、ナビゲーション、文字などへ小さなanimation delayを順番に与え、時間差を情報構造として利用する。少数要素、短いoffset、統一した方向とeasingを基本にし、reduced-motionでは移動とdelayを除去する。

IMPRESSION
  • リズム●●●●●
  • 整然さ●●●●●
  • 躍動感●●●●●
  • 混沌●●●●●
RELATED / 関連技法

WHY
  • 複数要素を一度に提示せず、重要度やDOM順に沿って視線を順番に誘導できる。
  • 同じ種類の要素へ共通の動きを与え、開始時間の差でグループのリズムを作れる。
  • 時間差によって情報の親子関係や一連のまとまりを感じさせられる。
VISUAL
  • 同じ方向、距離、easingの要素が少しずつ遅れて開始する。
  • 40〜80ms程度の短いoffsetで視覚的な波が生まれる。
  • 終了後はすべて同じ安定した最終状態に揃う。
IMPLEMENTATION

CSS Animations · animation-delay · @keyframes · :nth-child() · CSS custom properties · Web Animations API

  • 固定要素ならanimation-delayと:nth-child()で実装できる。
  • 動的件数ではCSS custom propertyへindexを渡す。
  • 複雑なsequenceのみWAAPIやJavaScriptを検討する。
BEST FOR
  • 少数のカードや作品一覧。
  • ナビゲーションメニュー。
  • 短い機能一覧や特徴リスト。
AVOID
  • 長いリストへ全項目分のdelayを積み上げる。
  • 最後の項目まで数秒待たせる。
  • 方向、距離、easingをばらばらにして読み順を曖昧にする。
  • reduced-motion時にdelayを残す。
ACCESSIBILITY
  • reduced-motionではtranslate、scale、rotationとstagger delayを0にする。
  • animationなしでもすべての内容が最終状態で表示されるstatic-firstにする。
  • DOM順と視覚的な出現順を不必要に食い違わせない。
  • keyboard focusを持つ要素をdelay中に不可視にしない。
PERFORMANCE
  • transformとopacity中心にする。
  • 大量の要素へ個別animationを設定しない。
  • JavaScriptで各要素を毎frame計測しない。
  • 最後の項目までの累積delayに上限を設ける。
CODE
/* 件数が動的でもカスタムプロパティにindexを渡せば済む */
.stagger li{animation:stagger-in .45s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes stagger-in{from{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.stagger li{animation:none}}
SOURCES
AI PROMPT

Create a short staggered sequence that establishes reading order without making users wait.

Animate four to six related items as a staggered sequence. Use the same movement and easing, 40–80ms between starts, 300–450ms per item, no more than 16px translation, and follow semantic reading order. For reduced motion remove translation and scale and set all delays to zero.

  • Do not stagger dozens of list items.
  • Do not accumulate several seconds of delay.
  • Do not reverse semantic reading order without reason.
  • Do not leave delays active in reduced-motion mode.
39
INTERACTION / pointer-events · hover · touch · focus · magnetic-button

Adaptive Pointer Feedback

適応型ポインターフィードバック

  • DIFFICULTY medium
  • TREND current
  • SOURCES 3
  • RESEARCHED 2026-08-15

マウスでは軽い吸着、Tabでは固定したフォーカスリング、タッチでは押下状態を確認する。動きが減らされてもCTAの機能と状態は変わらない。

DEFINITION

ポインターの種類や近接・押下状態に応じて反応を強めつつ、タッチやキーボードでは同じ機能を静的で確実な状態変化として返す技法。

Magnetic Buttonのような追従演出を、マウス専用の装飾ではなく入力能力に適応するフィードバックとして再定義する。hover可能なfine pointerでは軽い吸着やliftを追加できるが、クリック領域や意味は動かさない。touchではpressed、keyboardではfocus-visibleを中心に同じ操作可能性を示し、動きはprefers-reduced-motionで停止または単純化する。

IMPRESSION
  • 触覚感●●●●●
  • 即応性●●●●●
  • 装飾性●●●●●
  • 堅牢性●●●●●
RELATED / 関連技法

WHY
  • ポインター操作に質感を足しながら、入力方式ごとの能力差を前提に設計できる。
  • Magnetic Buttonを『必須機能』ではなく段階的な拡張として扱える。
  • Pointer EventsとCSS capability queriesを同時に学べる。
VISUAL
  • fine pointerでは数px程度の吸着・lift・ハイライト。
  • touchでは位置追従を行わず、押下状態を色・輪郭・縮尺の小さな変化で返す。
  • keyboardでは要素を動かさず、明瞭なfocus indicatorを維持する。
IMPLEMENTATION

CSS @media (hover/pointer) · Pointer Events · CSS :focus-visible · CSS transform · prefers-reduced-motion

  • 基本機能はbutton/linkのclickとfocusで成立させ、pointer追従は拡張として追加する。
  • Magnetic効果は@media (hover: hover) and (pointer: fine)など能力判定の内側で有効化する。
  • pointermoveではtransform用の値だけを更新し、レイアウト計測を毎イベント繰り返さない。
BEST FOR
  • ブランドサイトの主要CTA。
  • 作品・商品カードのpointer-enhancement。
  • 入力方式の違いを教材として見せるデモ。
AVOID
  • hoverがないと操作できないUI。
  • 標準カーソルを消し、カスタムカーソルだけで位置を示す。
  • ボタンそのものを大きく逃がし、クリック対象の位置を不安定にする。
  • 全リンク・全ボタンへ常時pointermove処理を付ける。
ACCESSIBILITY
  • hoverを唯一の手掛かりや唯一の操作手段にしない。
  • キーボードフォーカス時はボタンを移動させず、可視フォーカスを維持する。
  • タッチでは静的なtap/pressedフィードバックを提供し、pointer追従を要求しない。
  • prefers-reduced-motion: reduceでは吸着移動を無効化し、色・輪郭など非運動の状態表示へ置き換える。
PERFORMANCE
  • pointermoveは必要な要素・端末だけで購読し、requestAnimationFrame相当の更新頻度に抑える。
  • left/topではなくtransform中心で描画し、layout thrashingを避ける。
  • getBoundingClientRectなどの計測値はpointerenterやresize時に更新し、各pointermoveで再計測しない。
CODE
/* 基本機能はclickとfocusだけで成立する */
.magnet__btn{padding:.9rem 1.5rem}
.magnet__btn:focus-visible{outline:3px solid currentColor;outline-offset:3px}
/* 追従は能力判定の内側でだけ有効化する */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  .magnet__btn{transform:translate(var(--dx,0px),var(--dy,0px));transition:transform .18s}
}
SOURCES
AI PROMPT

Design pointer-aware feedback that enhances fine-pointer input without depending on hover.

Create an accessible CTA with adaptive pointer feedback. Keep the semantic button or link fully usable by click, touch and keyboard. Only add a restrained magnetic transform when hover and a fine pointer are available, preserve a strong focus-visible state, provide a touch pressed state, and replace positional motion when reduced motion is requested.

  • Do not hide the native cursor.
  • Do not make hover the only way to discover or activate the control.
  • Do not move the actual hit target aggressively.
  • Do not run expensive layout reads on every pointermove.
40
INTERACTION / focus-visible · keyboard · focus-ring · wcag

Focus-Visible Feedback

フォーカス可視化フィードバック

  • DIFFICULTY easy
  • TREND classic
  • SOURCES 2
  • RESEARCHED 2026-08-15
LINK

Tab / Shift+Tabで操作対象を移動し、hoverに頼らず現在位置が明確に追えるか確認する。

DEFINITION

キーボードや支援技術でフォーカスされた操作対象を、位置・輪郭・コントラストの明確な変化で示し、現在の操作地点を見失わせない技法。

Focusは単なるアクセシビリティ対応ではなく、入力に対する最重要フィードバックの一つ。ネイティブなフォーカス挙動と論理的なTab順を土台にし、:focus-visibleでキーボード操作時のリングを強調する。sticky要素やoverflowのためにフォーカス対象が隠れないことも含め、pointerのhoverとは別の入力状態として設計する。

IMPRESSION
  • 明瞭性●●●●●
  • 実用性●●●●●
  • 静けさ●●●●●
  • 普遍性●●●●●
RELATED / 関連技法

WHY
  • キーボードユーザーに現在位置と次の操作可能性を即座に伝えられる。
  • hoverとfocusを混同しない入力設計を学べる。
  • CSS中心で実装でき、JavaScript依存がほぼない。
VISUAL
  • Tab移動に合わせて太さ・色・offsetを持つリングが現れる。
  • hover色とは独立したfocus stateを持つ。
  • フォーカスされた要素がsticky headerや切り抜き領域の裏に完全に隠れない。
IMPLEMENTATION

semantic HTML · :focus-visible · outline · outline-offset · CSS custom properties

  • button、a、inputなどネイティブ要素のフォーカス可能性を優先する。
  • 正のtabindexで順序を作り直すよりDOM順を整える。
  • ブランド表現に合わせても、フォーカスリングの面積とコントラストを十分に確保する。
BEST FOR
  • ナビゲーション、フォーム、CTA。
  • カード内リンクやツールバーなど操作要素の多いUI。
  • キーボード操作の品質を教えるデモ。
AVOID
  • outline: noneだけで標準リングを消す。
  • hoverと同じ薄い色変化だけでfocusを示す。
  • CSSの視覚順とDOMのTab順を食い違わせる。
  • フォーカス要素をoverflow:hiddenやsticky要素の裏へ完全に隠す。
ACCESSIBILITY
  • WCAG 2.4.7に沿い、キーボードフォーカスが見える状態を必ず用意する。
  • フォーカス順は読み順・操作順と一致させる。
  • フォーカスされた要素が固定ヘッダー等で完全に隠れないことを確認する。
  • focus indicatorを色だけに依存させず、輪郭や太さ・offsetでも示す。
PERFORMANCE
  • CSSのみで実装できるため、通常JavaScriptは不要。
  • box-shadowを大量に重ねずoutline中心にすると描画コストを抑えやすい。
  • フォーカス時に要素サイズが変わってレイアウトシフトしないようborder追加よりoutlineを優先する。
CODE
:root{--focus-ring:3px solid #8ac0a0;--focus-offset:3px}
/* ネイティブ要素のフォーカス可能性をそのまま使う。正のtabindexで順序を作らない */
:is(a,button,input,select,textarea,summary,[tabindex="0"]):focus-visible{
  outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:2px
}
/* ホバーとは別の見た目にする。ホバー色の流用はキーボード位置を示せない */
.btn:hover{background:#1c2422}
/* 強制カラーモードでもリングを残す */
@media (forced-colors: active){:focus-visible{outline-color:Highlight}}
SOURCES
AI PROMPT

Design a strong focus-visible system for keyboard navigation.

Design keyboard focus feedback for semantic links, buttons and form controls. Preserve logical DOM order, use :focus-visible with a high-contrast outline and offset, keep focused controls visible around sticky content, and make focus visually distinct from hover without changing layout.

  • Never remove the browser outline without an equivalent or stronger replacement.
  • Do not use positive tabindex to visually reorder the interface.
  • Do not rely on a subtle color-only change.
  • Do not animate focused elements away from their hit area.
41
INTERACTION / drag · reorder · pointer-capture · keyboard · direct-manipulation

Drag & Reorder

ドラッグ＆並べ替え

  • DIFFICULTY advanced
  • TREND current
  • SOURCES 3
  • RESEARCHED 2026-08-15
POINTER CAPTURE

ドラッグに加え、項目の『上へ／下へ』ボタンとキーボードでも同じ順序変更ができることを確認する。

DEFINITION

要素を直接つかんで移動・並べ替えできる操作に、タップ可能な移動ボタンやキーボード操作を同等の結果として併設する直接操作技法。

Drag Interactionを、Pointer Eventsの実装だけでなく『ドラッグできない人にも同じ結果を渡す』設計まで含めて再定義する。pointer captureで追従を安定させ、drop位置を視覚化する一方、各項目に上へ・下へ等の単一ポインター操作を用意する。並べ替え完了はテキストやstatusで通知し、慣性は機能にしない。

IMPRESSION
  • 直接性●●●●●
  • 操作感●●●●●
  • 学習価値●●●●●
  • 複雑さ●●●●●
RELATED / 関連技法

WHY
  • 直接操作の分かりやすさを保ちながらWCAG 2.5.7のドラッグ代替を実践できる。
  • Pointer Events、pointer capture、touch-actionの実装知識をまとめて学べる。
  • 並べ替え・カンバン・ギャラリーなど実務用途が広い。
VISUAL
  • つかんだ項目がpointerに追従し、drop候補が明確に強調される。
  • 各項目に『上へ』『下へ』などタップ可能な代替コントロールが現れる。
  • 操作完了後に新しい位置が視覚・テキストの両方で分かる。
IMPLEMENTATION

Pointer Events · setPointerCapture() · touch-action · CSS transform · semantic buttons · ARIA status

  • pointerdown後にsetPointerCaptureを使い、要素外へpointerが出てもdrag状態を追跡する。
  • drop確定時はDOM/データ順も更新し、Tab順と読み上げ順を見た目と一致させる。
  • 各項目にクリック/タップで使える移動ボタンを用意し、ドラッグと同じ結果へ接続する。
BEST FOR
  • リストや優先順位の並べ替え。
  • カンバン、ギャラリー、ダッシュボード。
  • 画像・カードの順序編集。
AVOID
  • ドラッグしか移動手段を用意しない。
  • 小さなgrab handleだけを唯一のターゲットにする。
  • 強い慣性や物理演出でdrop位置を予測しにくくする。
  • DOM順を更新せず見た目だけtransformで並べ替える。
ACCESSIBILITY
  • WCAG 2.5.7に対応し、ドラッグ操作の全機能を単一ポインターでdragせず実行できる代替コントロールを提供する。
  • キーボードでも同じ並べ替え結果へ到達できる操作を用意する。
  • drop候補、選択中、完了位置を色だけに依存せず伝える。
  • タッチターゲットはWCAG 2.5.8の24×24 CSS px基準と例外条件を確認し、実用上は十分な余白も確保する。
PERFORMANCE
  • pointermoveではtransform更新を中心にし、各フレームで全項目のgeometryを再計算しない。
  • 長いリストではdrag中に重い影・filter・大量の再レンダリングを避ける。
  • 並べ替え状態の更新はdrop時など必要なタイミングへ限定する。
CODE
.sortable__item{display:flex;gap:.5rem;align-items:center;touch-action:none}
.sortable__item[data-dragging="true"]{position:relative;z-index:1}
.sortable__item button:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
SOURCES
AI PROMPT

Build drag-and-reorder with an equivalent non-drag alternative.

Create a reorderable list using Pointer Events and pointer capture for direct dragging. Keep the DOM order synchronized with the visual order, show clear drop targets, and provide visible Move up and Move down controls that perform the same operation with a single tap or click. Support keyboard activation and announce the new position with a polite status message.

  • Never make dragging the only way to reorder.
  • Do not use inertia that makes the destination unpredictable.
  • Do not leave the DOM order different from the visual order.
  • Do not hide the alternative controls from touch users.
42
INTERACTION / details · summary · aria-expanded · accordion · show-hide

Progressive Disclosure

段階的開示

  • DIFFICULTY easy
  • TREND classic
  • SOURCES 2
  • RESEARCHED 2026-08-15
WHAT IS PROGRESSIVE DISCLOSURE?

必要な情報だけを最初に見せ、開閉操作に応じて詳細を追加表示する。フォーカスはsummaryに残り、開いた内容は自然なTab順に入る。

クリック、タップ、Enter、Spaceで同じ詳細を開閉し、状態とフォーカス順が一致するか確認する。

DEFINITION

必要な情報や操作だけを最初に見せ、ユーザーの明示的な開閉操作に応じて詳細を追加表示し、画面の認知負荷を段階的に制御する技法。

Hover Distortionの代わりに、入力に対する状態変化が明確なShow/HideパターンをINTERACTIONの中核へ置く。単純な開閉はHTMLのdetails/summaryを優先し、カスタムUIではbuttonとaria-expandedを用いる。hoverでだけ内容を出さず、タップ・Enter・Spaceで同じ状態を変更でき、開閉しても意味のある見出し構造を保つ。

IMPRESSION
  • 整理力●●●●●
  • 静けさ●●●●●
  • 実用性●●●●●
  • 発見性●●●●●
RELATED / 関連技法

WHY
  • 情報量の多い画面で、最初に必要な選択肢へ注意を集中できる。
  • HTMLネイティブのdetails/summaryとARIA Disclosure Patternの使い分けを学べる。
  • mouse、touch、keyboardで同じopen/closed状態を扱いやすい。
VISUAL
  • 見出しや要約が常に見え、開くと詳細がその直下へ現れる。
  • 矢印やplus/minusだけでなくopen/closed状態がテキスト構造と同期する。
  • フォーカスは開閉ボタンに残り、展開内容は自然なTab順へ入る。
IMPLEMENTATION

HTML details/summary · button · aria-expanded · aria-controls · CSS

  • 単純な開閉はdetails/summaryを第一候補にする。
  • 独自Disclosureではbuttonを用い、aria-expandedと表示状態を同一stateから更新する。
  • 閉じた領域内のfocusable要素がTab移動の対象に残らない構造にする。
BEST FOR
  • FAQ、仕様詳細、補足説明。
  • モバイルで二次情報を折りたたむ画面。
  • 設定やフォームの追加オプション。
AVOID
  • hoverした時だけ重要情報を表示する。
  • detailsをtabsやmenuの代替として誤用する。
  • 『もっと見る』だけで何が開くか分からないラベルを乱用する。
  • 開閉アニメーションのためにキーボードフォーカス可能な内容を隠れたままTab順に残す。
ACCESSIBILITY
  • 開閉コントロールはEnter/Space、click/tapで同じ結果になるようにする。
  • 状態を矢印の向きや色だけで伝えず、aria-expanded等のプログラム上の状態と同期する。
  • 展開後も論理的な見出し・Tab順を維持する。
  • 動きは補助に留め、prefers-reduced-motionでは即時開閉でも理解できる。
PERFORMANCE
  • details/summaryなら基本機能にJavaScriptは不要。
  • heightを毎フレーム計測する開閉アニメーションを避け、必要なら短いopacity等へ縮小する。
  • 非表示領域の重い画像・埋め込みは必要に応じて遅延読み込みする。
CODE
/* 単純な開閉はdetails/summaryが第一候補。click/tap/Enter/Spaceとフォーカス順が標準で揃う */
.disclosure summary{cursor:pointer}
.disclosure summary:focus-visible{outline:3px solid currentColor;outline-offset:2px}
SOURCES
AI PROMPT

Create progressive disclosure with native details/summary or an accessible disclosure button.

Design progressive disclosure that keeps the summary visible and reveals secondary content only on explicit user request. Prefer native details and summary for simple cases; for a custom control use a semantic button with aria-expanded synchronized to the panel. Support click, touch, Enter and Space, keep focus order logical, and make any opening animation optional.

  • Do not reveal essential content on hover only.
  • Do not use details as a replacement for tabs or menus.
  • Do not hide focusable descendants only visually.
  • Do not let animation delay access to the revealed content.
43
INTERACTION / form · validation · aria-live · aria-invalid · error-message

Inline Validation

インラインバリデーション

  • DIFFICULTY medium
  • TREND current
  • SOURCES 2
  • RESEARCHED 2026-08-15

不正な値を入力し、blur・submitでエラー理由と修正方法が視覚・読み上げの両方へ返ることを確認する。

DEFINITION

入力内容の妥当性や修正方法を、操作中またはフォーカス移動・送信の適切な時点で対象フィールドの近くへ返し、エラー回復を支援する技法。

Tilt Interactionの代わりに、入力そのものへの意味ある反応を扱う。HTMLのconstraint validationを土台に、必要な独自ルールだけJavaScriptで補う。エラーは色やアイコンだけでなく短いテキストで示し、aria-describedbyやaria-live等で支援技術へ関連付ける。毎キー入力で責めるようにエラーを出すのではなく、内容に応じてblur・submit・十分な入力後など通知タイミングを選ぶ。

IMPRESSION
  • 明瞭性●●●●●
  • 実務性●●●●●
  • 安心感●●●●●
  • 即応性●●●●●
RELATED / 関連技法

WHY
  • フォームの失敗理由と直し方を操作の近くで返し、再試行コストを下げる。
  • HTML標準のvalidationとARIA通知を実務的に学べる。
  • 操作結果のフィードバックというINTERACTION章の軸が明確になる。
VISUAL
  • 対象フィールドの直下に短いエラーまたは成功メッセージ。
  • invalid状態は輪郭・アイコン・テキストが同期する。
  • 送信時に複数エラーがある場合は全体要約から各フィールドへ移動できる。
IMPLEMENTATION

HTML Constraint Validation API · ValidityState · aria-describedby · aria-invalid · aria-live / role=alert · JavaScript

  • required、type、minlength、pattern等のHTML制約で表現できるルールは標準機能を優先する。
  • 独自ルールではsetCustomValidity等を使い、表示メッセージと実際のvalidity stateを同期する。
  • サーバー側でも必ず再検証し、返却エラーを同じフィールドフィードバックへ接続する。
BEST FOR
  • 会員登録、購入、問い合わせなどのフォーム。
  • ユーザー名・日付・フォーマット確認。
  • 複数ステップ入力のエラー回復。
AVOID
  • 入力開始直後から毎キー入力でエラーを読み上げる。
  • 赤い枠だけで失敗理由を伝える。
  • placeholderだけをlabel代わりにする。
  • クライアント側validationだけをセキュリティ検証として信頼する。
ACCESSIBILITY
  • エラー内容と修正方法をテキストで示し、色だけに依存しない。
  • エラーメッセージをaria-describedby等で対象入力と関連付ける。
  • 動的通知は重要度に合わせてaria-live=politeやrole=alertを使い分け、過剰な読み上げを避ける。
  • 送信時のエラーでは必要に応じて最初のinvalid fieldやエラー要約へ到達しやすくする。
PERFORMANCE
  • 標準HTML validationで済む範囲はJavaScriptを増やさない。
  • keyupごとのネットワーク検証は避け、必要ならdebounce・blur・明示操作で回数を制御する。
  • 入力ごとにフォーム全体を再レンダリングせず、対象フィールドの状態だけ更新する。
CODE
<label for="email">メール</label><input id="email" name="email" type="email" required aria-describedby="email-msg"><p id="email-msg" role="status"></p>
SOURCES
AI PROMPT

Design calm inline validation with clear correction guidance.

Create an accessible form that uses native HTML constraint validation first and adds custom validation only where necessary. Show concise text feedback near the field, associate it with the control, set invalid state consistently, choose polite or assertive live announcements based on urgency, and avoid showing errors prematurely on every keystroke. Always keep server-side validation as the source of truth.

  • Do not communicate errors with color alone.
  • Do not validate noisily on every keystroke without need.
  • Do not use placeholder text as the only label.
  • Do not treat client-side validation as a security boundary.
44
INTERACTION / scroll-snap · carousel · section-navigation · css-scroll-snap

Scroll Snap Sequencing

スクロールスナップ・シーケンス

  • DIFFICULTY easy
  • TREND current
  • SOURCES 2
  • RESEARCHED 2026-08-14
01 STOP02 ALIGN03 PEEK04 ESCAPE05 REACH

カード列をドラッグ、横スワイプ、矢印キー、スクロールバーで移動し、各入力で停止位置と脱出性を確認する。位置合わせはCSSに任せ、JavaScriptでの移動は行っていない。

DEFINITION

スクロールコンテナに停止候補と整列位置を定義し、通常のスクロール操作を保ちながら内容の節目へ穏やかに位置合わせする技法。

CSS Scroll Snapは、スクロールの終了位置を見出し、カード、章などの意味ある境界へ近づける。軸と厳格さはコンテナ、整列位置は子要素に指定する。ページ送りを強制する演出とは異なり、ユーザーエージェントのスクロール方式を利用し、proximityを基本に、内容の長さ、固定ヘッダー、キーボード操作、ズームを妨げない範囲で節度を作る。

IMPRESSION
  • リズム感●●●●●
  • 整然さ●●●●●
  • 連続感●●●●●
  • 緊張感●●●●●
RELATED / 関連技法

WHY
  • 横並びカードや章の境界を揃え、次に読む単位を視覚的に明確にできる。
  • ドラッグ、ホイール、タッチ、キーボードなど既存のスクロール操作を土台にできる。
  • JavaScriptで位置を強制するより、CSSで宣言的に停止候補を示せる。
VISUAL
  • 操作を終えると最寄りのカード端、中央、章見出しへ静かに整列する。
  • 前後の項目が少し見え、続きがあることを示す余白やピークが残る。
  • 固定ヘッダーがある場合もscroll-paddingにより見出しが隠れず停止する。
IMPLEMENTATION

CSS Scroll Snap · scroll-snap-type · scroll-snap-align · scroll-padding · overflow

  • コンテナにoverflowとscroll-snap-typeを設定し、子要素にscroll-snap-alignを指定する。
  • 通常はproximityから始め、全項目がスクロール領域内で到達可能か実機で確認してから厳格さを上げる。
  • 固定ヘッダーや内側余白はscroll-padding、個別項目の余白はscroll-marginで停止領域へ反映する。
BEST FOR
  • 横方向の商品・作品カルーセル。
  • 一画面に近い章で構成するストーリーやオンボーディング。
  • 見出し単位で長文を探索する縦スクロール領域。
AVOID
  • 長い内容にmandatoryを使い、項目の途中へスクロールできなくする。
  • scroll-snap-stop: alwaysを連続適用し、素早い移動や支援技術の操作を妨げる。
  • スクロールバー、前後ボタン、位置表示をすべて隠し、到達可能な項目数を分からなくする。
  • 縦ページ全体に強いスナップを適用し、ユーザーの意図した停止位置を奪う。
ACCESSIBILITY
  • キーボード、タッチ、ホイール、スクロールバー、支援技術の各操作で全項目へ移動でき、スナップ位置から脱出できることを確認する。
  • フォーカスされた要素が固定ヘッダーやコンテナ端に隠れないよう、scroll-paddingとフォーカス表示を確保する。
  • 200%拡大や文字間隔変更で項目がスクロールポートより長くなっても、内容の途中を読める設定にする。
  • 前後ボタンを設ける場合は意味のあるアクセシブル名を付け、現在位置を視覚だけに依存して伝えない。
PERFORMANCE
  • 基本の位置合わせはCSSに任せ、スクロールイベントごとのDOM計測と位置補正を追加しない。
  • カルーセル内の画像には適切な寸法と遅延読み込みを設定し、読み込み後の寸法変化による再スナップを抑える。
  • 大量の項目を描画する場合は、スナップ以外の描画・画像コストも含めて低性能端末で計測する。
CODE
/* proximityから始める。厳格にするのは全項目へ到達できると確認してから */
.snap{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:1rem}
.snap__item{flex:0 0 min(80%,28rem);scroll-snap-align:start;scroll-margin-inline:1rem}
/* 位置はCSSに任せる。JSでscrollLeftを強制しない */
@media (prefers-reduced-motion: no-preference){.snap{scroll-behavior:smooth}}
SOURCES
AI PROMPT

Create a restrained CSS scroll-snap sequence that keeps native scrolling fully usable.

Build a semantic card sequence with CSS Scroll Snap. Prefer proximity snapping, preserve native touch, wheel, keyboard and scrollbar navigation, expose previous and next controls with clear labels, reserve scroll padding for fixed headers, keep long or zoomed content fully reachable, and use a normal overflow layout as the fallback.

  • Avoid mandatory full-page snapping for variable-length content.
  • Avoid trapping users at snap points or hiding focused content.
  • Avoid scroll hijacking, wheel cancellation, and JavaScript position forcing.
  • Avoid relying on motion or partial card peeks as the only navigation cue.
45
INTERACTION / pressed · selected · toggle · status · microinteraction

State Feedback Microinteraction

状態フィードバック・マイクロインタラクション

  • DIFFICULTY easy
  • TREND current
  • SOURCES 4
  • RESEARCHED 2026-08-15
TOGGLE IT

toggleや保存を操作し、視覚状態・aria state・status textが同時に変わることを確認する。reduced motionでも意味は失われない。

DEFINITION

押下・選択・保存・成功・失敗などユーザー操作で生じた状態変化を、短く一貫した視覚変化と意味のある状態・メッセージで即座に返す技法。

従来のMicro Interactionを『小さく動かす演出』ではなく『状態が変わったことを確実に返す設計』へ絞る。pressed、selected、checked、busy、savedなどの状態を、semantic HTMLやARIA stateと視覚表現で同期する。非同期処理の完了はrole=status等でフォーカスを奪わず通知し、モーションは補助に留める。

IMPRESSION
  • 即応性●●●●●
  • 安心感●●●●●
  • 普遍性●●●●●
  • 華やかさ●●●●●
RELATED / 関連技法

WHY
  • 操作が受理されたか、現在どの状態かという不安を減らせる。
  • hover・focus・pressed・selected・disabled等の状態体系を実務UIへ接続できる。
  • 短いCSS transitionとsemantic stateだけでも成立し、重いアニメーションライブラリが不要。
VISUAL
  • 押下直後にpressed状態が返り、toggle後は選択状態が残る。
  • 保存完了や件数更新は近くの短いstatus textへ反映される。
  • 色に加え、形・アイコン・テキスト・ARIA stateの複数手掛かりが同期する。
IMPLEMENTATION

semantic HTML · aria-pressed / aria-selected / aria-busy · role=status · CSS :active · CSS transitions · prefers-reduced-motion

  • UIの状態を一つのstate sourceからDOM属性と見た目へ反映し、aria stateとCSS classを別々に管理しない。
  • 一時的なpressedと持続するselected/checkedを区別する。
  • 非同期完了は必要に応じてrole=statusで通知し、重要なエラーのみより強い通知を検討する。
BEST FOR
  • トグル、保存、favorite、filter。
  • フォーム送信や非同期更新の成功・失敗。
  • 購入・設定など状態確定が重要なUI。
AVOID
  • 成功・失敗を一瞬のアニメーションだけで示す。
  • 色だけでselected/disabled/errorを区別する。
  • 頻繁な操作ごとに長いbounceやscaleを再生する。
  • 状態更新のたびにフォーカスをstatus messageへ移動する。
ACCESSIBILITY
  • 状態を色だけに依存せず、テキスト・アイコン・形状・programmatic stateを組み合わせる。
  • toggleにはbuttonのaria-pressedやcheckbox等、意味に合うネイティブ/ARIA状態を使用する。
  • status更新は通常フォーカスを奪わず支援技術へ通知する。
  • prefers-reduced-motionではscale・bounce等を削り、状態そのものは即時に更新する。
PERFORMANCE
  • 通常はCSSとアプリの既存state更新だけで十分で、専用animation libraryを追加しない。
  • transform/opacity中心の短いfeedbackにし、layoutを揺らすwidth/heightアニメーションを避ける。
  • 連打や高頻度更新でアニメーションキューを積まず、最新状態を優先する。
CODE
/* 見た目はaria-pressedを直接見る。aria stateとCSS classを二重管理しない */
.toggle{transition:background .18s,border-color .18s}
.toggle[aria-pressed="true"]{background:#8ac0a0;color:#101615}
.toggle:active{transform:scale(.98)}
.toggle:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media (prefers-reduced-motion: reduce){.toggle{transition:none}.toggle:active{transform:none}}
SOURCES
AI PROMPT

Design a microinteraction around state clarity, not decorative motion.

Design a compact UI interaction where pressed, selected, loading, saved and error states are explicit and synchronized with semantic HTML or ARIA states. Give immediate visual feedback using more than color, announce non-blocking asynchronous status changes politely without moving focus, and keep motion brief, optional and removable under reduced motion.

  • Do not use animation as the only evidence that an action succeeded.
  • Do not communicate state with color alone.
  • Do not move focus just to announce routine status updates.
  • Do not add long bounce or scale effects to high-frequency controls.
46
CREATIVE CODING / shader · gradient · webgl · glsl · color-blend

Shader Gradient

シェーダーグラデーション

  • DIFFICULTY advanced
  • TREND rising
CANVAS 2D · CONTINUOUS BLEND

4つの色点が別々の速度で動き、境界を持たないまま混ざり続ける。動きを減らす設定では静止した1フレームになる。

DEFINITION

複数の色点を画面全体で連続的に補間し、時間とともにゆっくり変形させ続ける、境界を持たない色面をつくる技法。

IMPRESSION
  • 没入感●●●●●
  • 滑らかさ●●●●●
  • 未来感●●●●●
  • 素朴さ●●●●●
RELATED / 関連技法

WHY
  • 写真素材を使わずに、面全体で強い印象を作れる。
  • 色そのものをブランドの主表現として扱える。
  • 静止画では出せない、ゆっくりした呼吸のような時間を画面へ与えられる。
VISUAL
  • 色と色の間に明確な境界線がない。
  • 複数の色の中心が別々の速度で移動する。
  • 面全体が低い彩度差でゆっくり循環する。
IMPLEMENTATION

WebGL · GLSL fragment shader · Canvas 2D · CSS gradients

  • 本番はfragment shaderで色を補間するのが一般的だが、少数の色点ならCanvas 2Dの加算合成やCSSの多重グラデーションでも近似できる。
  • 本書のデモはCanvas 2Dの加算合成による近似実装で、GPUシェーダーは使っていない。
  • 文字を載せる領域だけは色の振れ幅を抑えるか、不透明な面を挟む。
BEST FOR
  • プロダクトのヒーロー領域。
  • 抽象的なブランドサイトの背景。
  • 読み物の章扉。
AVOID
  • 本文や操作の直下に高コントラストの色面を敷き、可読性を落とす。
  • 彩度と明度を大きく振り、文字とのコントラストを場所ごとに破綻させる。
  • 常時全画面でGPUを回し続け、電池と発熱を無視する。
ACCESSIBILITY
  • 文字を重ねる場合は、色が動いた全状態で最小コントラストを満たすか確認する。
  • 色面だけで情報や状態を伝えない。
  • prefers-reduced-motionでは変形を止め、静止した1フレームを表示する。
PERFORMANCE
  • 画面外では描画を止める。
  • 解像度はdevicePixelRatioの上限を決めて描く。
  • 全画面の常時アニメーションは電池消費が大きいので適用範囲を限定する。
CODE
/* シェーダーを使わない近似。色点ごとにradial-gradientを重ねる */
.mesh{position:relative;isolation:isolate;min-block-size:60svh;background:#0a0d14}
.mesh::before{content:"";position:absolute;inset:-20%;z-index:-1;filter:blur(60px);
  background:radial-gradient(circle at 30% 30%,#7ea7e8,transparent 55%),radial-gradient(circle at 70% 40%,#ef8e92,transparent 55%),radial-gradient(circle at 50% 75%,#e6c56f,transparent 55%);
  animation:mesh-drift 24s ease-in-out infinite alternate}
@keyframes mesh-drift{to{transform:translate3d(4%,-3%,0) scale(1.08)}}
/* 文字を載せる面は色の振れから切り離す */
.mesh__panel{position:relative;max-inline-size:38rem;margin:auto;padding:2rem;background:rgb(9 13 20/.82);color:#fff}
@media (prefers-reduced-motion: reduce){.mesh::before{animation:none}}
AI PROMPT

Create a slow animated mesh gradient background with no hard color boundaries.

Build a slow, continuously blending multi-point gradient background. Keep color transitions boundary-free, hold sufficient contrast for any text placed on top across every animation state, stop drawing when off-screen, and render a single static frame when reduced motion is requested.

  • Do not place body copy directly on the most saturated area.
  • Do not run a full-screen shader loop when the section is out of view.
47
CREATIVE CODING / flow-field · vector-field · generative · canvas · noise

Flow Field

フローフィールド

  • DIFFICULTY medium
  • TREND niche

クリックすると場の定義が変わり、線の流れ方が変化する。動きを減らす設定では1フレームだけ描く。

DEFINITION

画面の各点に向きを持たせたベクトル場を先に定義し、その向きに沿って多数の線や点を走らせて流れそのものを描く生成技法。

IMPRESSION
  • 有機性●●●●●
  • 複雑さ●●●●●
  • 方向性●●●●●
  • 規則性●●●●●
RELATED / 関連技法

WHY
  • 手で描けない密度の軌跡を、少数の規則から作れる。
  • 場の定義を変えるだけで全体の表情を一括で変えられる。
  • 風、水、磁場のような自然の運動を抽象化して示せる。
VISUAL
  • 線が互いに交差せず、緩やかに並走する。
  • 場の特異点を中心に密度が偏る。
  • 線の長さと太さの差が奥行きを作る。
IMPLEMENTATION

Canvas 2D · requestAnimationFrame · 擬似乱数 · ノイズ関数

  • 場は座標を入力にした角度関数として定義し、線はその角度へ一定歩幅で進める。
  • 前フレームを半透明で塗り重ねると軌跡が残り、少ない線数でも密度が出る。
  • 線の開始点はseedから決めると、同じ絵を再現できる。
BEST FOR
  • 抽象的なキーヴィジュアル。
  • データの方向性を象徴的に示す図。
  • 読み込み中や待機状態の背景。
AVOID
  • 実データに基づかない流線を、実際の観測結果のように見せる。
  • 線の密度を上げすぎて操作要素や文字を覆う。
  • 毎フレーム全線を再計算して発熱させる。
ACCESSIBILITY
  • 背景として使う場合は前面の文字とのコントラストを確保する。
  • 流れの向きだけで意味を伝えない。
  • prefers-reduced-motionでは1フレームで止める。
PERFORMANCE
  • 線数と1本あたりの分割数の積が描画量になるので、両方に上限を置く。
  • 画面外では停止する。
CODE
// 場を先に定義する。線はこの角度に沿って進むだけ
const angleAt = (x, y, t) => (Math.sin(x * 0.008) + Math.cos(y * 0.009) + Math.sin((x + y) * 0.004 + t / 140)) * Math.PI;

function drawFlow(ctx, w, h, t) {
  ctx.fillStyle = t <= 1 ? '#0c0e14' : 'rgba(12,14,20,.14)';  // 残像を残す
  ctx.fillRect(0, 0, w, h);
  for (let i = 0; i < 70; i++) {
    let x = Math.random() * w, y = Math.random() * h;
    ctx.beginPath(); ctx.moveTo(x, y);
    for (let s = 0; s < 18; s++) {
      const a = angleAt(x, y, t);
      x += Math.cos(a) * 6; y += Math.sin(a) * 6;
      ctx.lineTo(x, y);
    }
    ctx.strokeStyle = 'rgba(184,146,210,.5)';
    ctx.stroke();
  }
}
AI PROMPT

Draw flow lines that follow a vector field on a canvas.

Define an angle function over the canvas coordinates, then trace many short polylines that follow it, fading the previous frame to leave trails. Cap the number of lines and their segment count, stop the loop when off-screen, and render one static frame under reduced motion.

  • Do not present decorative flow lines as if they were measured data.
  • Do not let line density obscure text or controls.
48
CREATIVE CODING / physics · gravity · spring · collision · simulation

Physics Motion

物理モーション

  • DIFFICULTY medium
  • TREND current

クリックすると大きさの違う球が落ち直す。跳ね方と接地の影は高さに連動する。動きを減らす設定では静止する。

DEFINITION

所要時間とイージング曲線で動きを指定するのではなく、質量、速度、重力、反発、摩擦といった物理量から運動を計算し、その結果として動きを得る手法。

IMPRESSION
  • 実在感●●●●●
  • 遊び心●●●●●
  • 予測しやすさ●●●●●
  • 静けさ●●●●●
RELATED / 関連技法

WHY
  • 曲線を手で調整しなくても、重さのある自然な動きが得られる。
  • 操作の勢いがそのまま結果へ伝わり、直接触っている感覚を作れる。
  • 要素どうしの衝突や連鎖など、手付けでは破綻しやすい関係を扱える。
VISUAL
  • 行き過ぎてから戻る、減衰しながら収束する。
  • 終了時刻が入力の強さによって変わる。
  • 接地、反発、揺れ戻しなど質量を感じさせる挙動。
IMPLEMENTATION

Canvas 2D · requestAnimationFrame · CSS linear() easing · Web Animations API · 物理エンジン

  • バネ1つの追従なら、CSSのlinear()で近似した減衰曲線や小さな自前の積分で足りる。
  • 多数の剛体の衝突を扱う場合にだけ物理エンジンの導入を検討する。
  • 本書のデモは外部ライブラリを使わず、放物運動を解析的に計算している。
  • 減衰の下限を決め、目に見えない微小な揺れは打ち切る。
BEST FOR
  • ドラッグして離す操作の余韻。
  • 開閉パネルやシートの追従。
  • 遊びの要素が主題のキーヴィジュアル。
AVOID
  • 読み込みや保存など、完了時刻を約束すべき箇所へ使う。
  • 収束しない揺れを画面に残し続ける。
  • 主要導線の操作結果を、予測できない物理挙動に委ねる。
ACCESSIBILITY
  • 動きの完了を待たずに次の操作へ進めるようにする。
  • 位置や勢いだけで状態を伝えず、ラベルや文字でも示す。
  • prefers-reduced-motionでは物理挙動を止め、最終状態へ即座に置く。
PERFORMANCE
  • 1フレームあたりの計算量を要素数で見積もり、上限を決める。
  • 画面外ではシミュレーションごと停止する。
CODE
// 時間ではなく力から位置を決める。減衰の下限を切って必ず収束させる
const GRAVITY = 0.6, RESTITUTION = 0.72, FLOOR = 300;
let y = 0, vy = 0;

function step() {
  vy += GRAVITY;
  y += vy;
  if (y > FLOOR) { y = FLOOR; vy = -vy * RESTITUTION; }
  if (Math.abs(vy) < 0.4 && y === FLOOR) { vy = 0; return true; }  // 収束したら止める
  return false;
}

// 動きを減らす設定では計算せず最終状態へ置く
if (matchMedia('(prefers-reduced-motion: reduce)').matches) { y = FLOOR; vy = 0; }
AI PROMPT

Animate elements with gravity and restitution instead of fixed easing curves.

Drive motion from physical quantities such as velocity, gravity, restitution and damping rather than a fixed duration and easing curve. Clamp the damping floor so motion actually settles, keep interaction available before the motion ends, pause the simulation off-screen, and jump straight to the resting state under reduced motion.

  • Do not use physics for progress or saving states that need a promised completion time.
  • Do not leave a never-settling oscillation on screen.
49
CREATIVE CODING / transform · perspective · preserve-3d · css-3d · depth

3D Transform

3D変形

  • DIFFICULTY medium
  • TREND classic
FRONTSIDETOP
MOVE TO ORBIT

静止時も既定の角度で三面が見えている。ポインターを動かすとそこから回り、面の角度が変わる。動きを減らす設定では既定の角度のまま静止する。

DEFINITION

perspectiveで消失点を与え、transform-style: preserve-3dで子要素を三次元空間に置くことで、DOM要素のまま奥行きのある構成をつくるCSSの手法。

IMPRESSION
  • 立体感●●●●●
  • 操作感●●●●●
  • 意外性●●●●●
  • 平面性●●●●●
RELATED / 関連技法

WHY
  • WebGLを導入せずに、CSSと通常のHTMLだけで奥行きを表現できる。
  • 面の裏表や回転で、限られた面積に複数の情報を収められる。
  • 要素は通常のDOMのままなので、文字の選択も検索も効く。
VISUAL
  • 近い面が大きく、遠い面が小さく描かれる。
  • 回転に伴って面の角度と明るさが変わる。
  • 消失点の位置によって構図全体の視点が決まる。
IMPLEMENTATION

CSS transform · perspective · transform-style: preserve-3d · backface-visibility · CSS custom properties

  • 親にperspectiveを置き、子にpreserve-3dと各面のrotate/translateZを与える。
  • 面の位置は要素サイズの半分だけtranslateZすると立方体になるので、寸法をカスタムプロパティで持つと崩れにくい。
  • 裏面を隠す場合はbackface-visibility: hiddenを使う。
BEST FOR
  • カードの表裏の切り替え。
  • 製品を回して見せる小さな展示。
  • 章扉の立体的なタイトル構成。
AVOID
  • 本文や入力欄を傾け、読みにくく押しにくくする。
  • 奥行きだけで階層を示し、平面の情報設計を省く。
  • 回転し続ける面に重要な情報を置き、静止時に読めなくする。
ACCESSIBILITY
  • 回転してもDOM順とフォーカス順を変えない。
  • 傾いた面の文字は静止状態で読める角度と大きさに留める。
  • ポインタ追従で回す場合も、キーボードやタッチで同じ情報へ到達できるようにする。
  • prefers-reduced-motionでは回転を止め、既定の角度で静止した状態を出す。
PERFORMANCE
  • transformとopacityに限定して合成レイヤーで処理させる。
  • 大きな面の連続回転は重ねすぎない。
CODE
.scene{perspective:900px;display:grid;place-items:center;min-block-size:20rem}
/* 面の位置は寸法の半分。サイズを変数で持つと崩れない */
.cube{--s:132px;position:relative;inline-size:var(--s);block-size:var(--s);transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(28deg);transition:transform .25s}
.cube span{position:absolute;inset:0;display:grid;place-items:center;border:1px solid rgba(184,146,210,.6);background:rgba(184,146,210,.14);backface-visibility:hidden}
.cube span:nth-child(1){transform:translateZ(calc(var(--s)/2))}
.cube span:nth-child(2){transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.cube span:nth-child(3){transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
@media (prefers-reduced-motion: reduce){.cube{transition:none;transform:none}}
AI PROMPT

Build a CSS 3D scene with perspective and preserve-3d.

Compose a small 3D scene using CSS only: set perspective on the parent, transform-style: preserve-3d on the child, and place each face with rotate plus translateZ derived from the element size. Keep DOM and focus order stable while rotating, keep any text legible at rest, and show the front-facing static state under reduced motion.

  • Do not tilt body copy or form controls.
  • Do not put essential information on a continuously rotating face.
50
CREATIVE CODING / webgl · 3d · gpu · shader · realtime

WebGL Scene

WebGLシーン

  • DIFFICULTY advanced
  • TREND current
PERSPECTIVE PROJECTION · 8 VERTICES

8頂点を回転させ、遠近で割って平面へ落としている。GPUを使わずCanvas 2Dで投影の原理だけを示している。

DEFINITION

頂点を座標変換して画面へ投影し、各画素の色をGPUで並列に計算することで、ブラウザ上に実時間の三次元場面を描画する仕組み。

IMPRESSION
  • 没入感●●●●●
  • 技術的迫力●●●●●
  • 実装コスト●●●●●
  • 手軽さ●●●●●
RELATED / 関連技法

WHY
  • CSSでは扱えない光、影、反射、多数の頂点を扱える。
  • 製品や空間を実際に回して確かめられる体験を作れる。
  • 画面全体を一つの表現として設計できる。
VISUAL
  • 遠近によって大きさと間隔が変わる。
  • 光源に応じて面の明るさが変化する。
  • 視点の移動に対して全要素が一貫して連動する。
IMPLEMENTATION

WebGL · WebGPU · Three.js · GLSL · canvas

  • 実務ではThree.jsなどのライブラリで頂点、材質、光源、カメラを組む。
  • 本書のデモは外部ライブラリを使わず、8頂点の遠近投影をCanvas 2Dで計算して原理だけを示している。
  • 初期表示は軽い代替を出し、3Dは遅延読み込みにする。
  • 3D内の情報は必ずDOM側にも等価な形で用意する。
BEST FOR
  • 製品の3Dビューワー。
  • ブランドサイトの主表現。
  • 空間や地図の可視化。
AVOID
  • 静的な情報の提示に、初期読み込みの重い3Dを持ち込む。
  • 3D内にしか存在しない情報を作り、DOM側に等価な情報を残さない。
  • 低性能端末や省電力設定を考慮せず常時描画する。
ACCESSIBILITY
  • 3Dキャンバスに代替テキストを与え、同じ情報をDOMからも取得できるようにする。
  • 視点操作はポインタだけでなくキーボードでも行えるようにする。
  • 自動で回り続ける場面はprefers-reduced-motionで停止する。
PERFORMANCE
  • 描画は画面内に限定し、離れたら停止する。
  • 頂点数とテクスチャ寸法に上限を設ける。
  • 初期バンドルへ3Dライブラリを含めず、必要になった時点で読み込む。
CODE
// 3Dライブラリは初期バンドルに含めず、必要になった時点で読み込む
async function mountScene(canvas) {
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return renderStill(canvas);
  const THREE = await import('three');
  const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
  renderer.setPixelRatio(Math.min(devicePixelRatio, 2));  // 解像度に上限を置く
  // …scene / camera / mesh
  const io = new IntersectionObserver(([e]) => {
    e.isIntersecting ? renderer.setAnimationLoop(draw) : renderer.setAnimationLoop(null);
  });
  io.observe(canvas);
}
// canvasには必ず代替の説明を置き、同じ情報をDOMからも取得できるようにする
AI PROMPT

Add a lightweight real-time 3D scene with a DOM fallback.

Render a real-time 3D scene on a canvas, lazy-loading the 3D library rather than shipping it in the initial bundle. Give the canvas a meaningful accessible description, expose the same information in the DOM, allow keyboard control of the viewpoint, cap vertex and texture budgets, and stop rendering when off-screen or when reduced motion is requested.

  • Do not make information reachable only inside the 3D scene.
  • Do not ship a heavy 3D runtime for a static decorative background.
51
CREATIVE CODING / particles · canvas-2d · requestAnimationFrame · simulation · generative

Particle System

パーティクルシステム

  • DIFFICULTY advanced
  • TREND current
  • SOURCES 4
  • RESEARCHED 2026-08-16
CANVAS 2D · 90 PARTICLES

ポインターを動かし、速度の異なる粒子群の流れを確認する。画面外では更新を停止する。

DEFINITION

多数の小さな要素へ位置、速度、寿命などの状態と更新規則を与え、群れ、流れ、散逸を時間的に生成する表現技法。

Particle Systemは、同じ単純形状を大量に複製し、粒子ごとの位置、速度、寿命、色をフレームごとに更新して全体の流れを作る。WebではCanvas 2Dが多数要素の描画に向き、requestAnimationFrameで表示更新へ同期する。粒子数の上限、画面外停止、Reduced Motionの静止画を初めから設計する。

IMPRESSION
  • 躍動感●●●●●
  • 浮遊感●●●●●
  • 有機性●●●●●
  • 静けさ●●●●●
RELATED / 関連技法

WHY
  • 単純な点の差と数から有機的な動きを作れる。
  • ポインター、音、データなど連続入力へ反応する背景を構成できる。
  • 画像素材を固定せず、毎回異なるが同じ規則の画面を生成できる。
VISUAL
  • 粒子ごとの速度、方向、大きさ、透明度の差。
  • 局所的な密度差と全体としての流れ。
  • 発生、移動、消滅が連続する時間構造。
IMPLEMENTATION

Canvas 2D · requestAnimationFrame · IntersectionObserver · Page Visibility API

  • 粒子状態を配列で保持し、一つのCanvasへまとめて描画する。
  • devicePixelRatioへ上限を設け、CSS寸法と内部解像度を分ける。
  • IntersectionObserverとdocument.visibilityStateでループを停止する。
BEST FOR
  • 音楽や実験的ブランドの背景。
  • 入力へ穏やかに反応するヒーロー。
  • 待機、接続、生成など継続状態の抽象表現。
AVOID
  • 粒子数を端末性能と無関係に増やす。
  • 画面外や非表示タブでも更新を続ける。
  • 速い全画面移動や点滅を必須情報に使う。
  • Canvasだけに意味や操作を置く。
ACCESSIBILITY
  • 装飾Canvasは支援技術から隠し、意味のある内容はHTMLで提供する。
  • prefers-reduced-motionでは一枚の静止フレームにする。
  • ポインター反応だけを情報や操作の唯一の手段にしない。
PERFORMANCE
  • 粒子数、内部解像度、接続線探索を端末と表示面積に応じて制限する。
  • 画面外、非表示タブ、Reduced Motionで更新ループを止める。
  • フレーム時間を測り、毎フレームのDOM参照とオブジェクト生成を避ける。
CODE
// 粒子ごとに状態と更新規則を持たせる。寿命が尽きたら再生成する
const particles = Array.from({length: 90}, () => spawn());
function spawn() {
  return {x: Math.random(), y: Math.random(), vx: 0.2 + Math.random() * 0.9, life: 1};
}
function step(ctx, w, h, dt) {
  ctx.clearRect(0, 0, w, h);
  for (const p of particles) {
    p.x += (p.vx * dt) / w; p.life -= dt * 0.0004;
    if (p.x > 1 || p.life <= 0) Object.assign(p, spawn(), {x: 0});
    ctx.globalAlpha = Math.max(0, p.life);
    ctx.beginPath(); ctx.arc(p.x * w, p.y * h, 1.8, 0, Math.PI * 2); ctx.fill();
  }
  ctx.globalAlpha = 1;
}
SOURCES
AI PROMPT

Render a bounded, pausable Canvas particle field with a static reduced-motion frame.

Build a Canvas 2D particle field with bounded particle count, individual position and velocity, subtle pointer influence, deterministic initialization, capped device pixel ratio, and requestAnimationFrame updates. Pause when off screen or hidden, expose no essential information only in canvas, and render one static frame for reduced motion.

  • Do not run off screen or in hidden tabs.
  • Do not use unbounded particle counts or pairwise connections.
  • Do not flash, race across the screen, or encode meaning only in motion.
52
CREATIVE CODING / procedural · seed · pseudo-random · canvas-2d · tiling

Procedural Pattern

プロシージャル模様

  • DIFFICULTY medium
  • TREND current
  • SOURCES 2
  • RESEARCHED 2026-08-16

ボタンでseedを進め、同じ規則から別の模様が再現可能に生成される様子を見る。

DEFINITION

画像素材を直接配置せず、幾何規則とseed付き疑似乱数から、再生成可能な模様や質感を計算して描く技法。

Procedural Patternは、格子、距離、反復、乱数など少数の規則から面全体の模様を生成する。seedを同じにすれば同じ結果を再現できる設計にすると、ブランド資産、テスト、共有URLで扱いやすい。Canvasはピクセル描画に向くが、意味を持つ情報はHTMLへ残し、静的画像への書き出しも選択肢にする。

IMPRESSION
  • 規則性●●●●●
  • 意外性●●●●●
  • 精緻さ●●●●●
  • 手仕事感●●●●●
RELATED / 関連技法

WHY
  • 固定画像を増やさず多数の固有バリエーションを作れる。
  • 少数のパラメータで密度、方向、色、反復を一貫して制御できる。
  • seedを保存すれば生成結果を再現、共有、承認できる。
VISUAL
  • 明確な反復規則と局所的な乱れ。
  • 格子、線、点、セルのパラメータ変化。
  • 異なる出力にも共通する色域と密度。
IMPLEMENTATION

Canvas 2D · seeded pseudo-random generator · URL parameters · OffscreenCanvas

  • seedと生成パラメータを直列化できる形で保持する。
  • 同じseedと寸法から同じ出力になる自動テストを用意する。
  • 背景用途ではCSS寸法に応じた上限付き解像度で生成する。
BEST FOR
  • 背景、カード、パッケージ風の面装飾。
  • ユーザーごとに変化するが再現可能なブランド資産。
  • 実験的なポスターやジェネラティブアート。
AVOID
  • seedを保存せず承認済みの見た目を再現不能にする。
  • 乱数だけへ依存し、ブランドの規則を失う。
  • 文字の背面でコントラストを不安定にする。
  • リサイズごとに無制限に高解像度で再生成する。
ACCESSIBILITY
  • 装飾模様は読み上げ対象から外し、情報を模様だけで伝えない。
  • 文字の背面では不透明面またはコントラストを保証する領域を設ける。
  • 再生成操作はbuttonにし、キーボードと明確なラベルを提供する。
PERFORMANCE
  • 描画回数と内部解像度を制限し、リサイズ処理を間引く。
  • 確定した模様は画像としてキャッシュまたは事前生成する。
  • ピクセル単位の重い処理はWorkerやOffscreenCanvasを検討する。
CODE
// 同じseedからは必ず同じ模様が出る（再生成可能であることが要件）
const rand = (s) => { const x = Math.sin(s) * 43758.5453; return x - Math.floor(x); };

function drawPattern(ctx, w, h, seed, step = 26) {
  for (let y = 0; y < h; y += step) {
    for (let x = 0; x < w; x += step) {
      const k = rand(seed * 97 + x * 0.37 + y * 0.11);
      ctx.strokeStyle = k > 0.72 ? '#e6c56f' : '#7b6ea8';
      ctx.beginPath();
      if (k < 0.5) { ctx.moveTo(x, y); ctx.lineTo(x + step, y + step); }
      else { ctx.moveTo(x + step, y); ctx.lineTo(x, y + step); }
      ctx.stroke();
    }
  }
}
SOURCES
AI PROMPT

Generate a reproducible branded pattern from explicit rules and a saved seed.

Create a procedural Canvas pattern from a documented grid rule, constrained brand palette and seeded pseudo-random generator. Persist the seed, make regeneration a labeled keyboard button, cap render resolution, preserve a quiet high-contrast area for text, and provide a cached static fallback.

  • Do not use unseeded randomness for approved assets.
  • Do not let every parameter vary or destroy brand consistency.
  • Do not regenerate continuously or obscure text contrast.
53
DATA VISUALIZATION / encoding · chart · perception · accuracy · channel

Data Encoding

データの視覚符号化

  • DIFFICULTY medium
  • TREND classic

クリックすると同じ5つの値が、位置と長さ、面積、色の明度へ順に割り当て替わる。どの符号なら差を読み取れるかを見比べる。

DEFINITION

数値や分類を、位置、長さ、角度、面積、明度、色相、形のどの視覚的性質へ割り当てるかを決め、読み取り精度に見合った符号を選ぶ設計。

IMPRESSION
  • 明快さ●●●●●
  • 正確さ●●●●●
  • 分析性●●●●●
  • 装飾性●●●●●
RELATED / 関連技法

WHY
  • 同じデータでも符号の選び方で読み取り精度が大きく変わる。
  • 比較したい関係を、図の形そのものに担わせられる。
  • 装飾を足さずに、図の説得力を上げられる。
VISUAL
  • 共通の基準線に沿って値が並ぶ。
  • 量の比較は長さや位置、分類の区別は色相や形が担う。
  • 1つの図で同時に使う符号の数が絞られている。
IMPLEMENTATION

SVG · Canvas 2D · HTML table · CSS custom properties

  • 量の比較は共通基準線からの位置または長さを第一候補にする。
  • 面積を使う場合は半径ではなく面積が値に比例するよう平方根で写す。
  • 色で量を示すときは明度の連続的な変化を使い、色相の切り替えは分類に割り当てる。
  • 図とは別に、同じ値をHTMLの表としても提供する。
BEST FOR
  • 値どうしを正確に比較させたい図。
  • 分類と量を同時に見せる必要がある図。
  • 読み手が数値の根拠を確かめる報告書。
AVOID
  • 量の比較を面積や角度だけに委ね、差を読み取れなくする。
  • 色相の違いだけで量の大小を示す。
  • 1つの図へ多数の符号を重ね、どれが主題か分からなくする。
ACCESSIBILITY
  • 色だけで系列を区別せず、直接ラベル、形、位置も併用する。
  • 図と同じ内容の数値表を必ず用意する。
  • 前景と背景、隣接する系列どうしのコントラストを確認する。
PERFORMANCE

点数が多い場合はCanvasを使い、対話が必要な要素だけをDOMに残す。

CODE
/* 量は共通基準線からの長さで示す。色相は分類にだけ使う */
.bars{display:flex;align-items:flex-end;gap:.75rem;block-size:12rem;margin:0;padding:0;list-style:none}
.bars li{display:flex;flex-direction:column;justify-content:flex-end;flex:1;block-size:100%;font-size:.75rem}
.bars span{block-size:var(--v);background:#69a6a8}
/* 面積で示す場合は半径ではなく面積を値に比例させる（sqrtで写す） */
.bubble{inline-size:calc(sqrt(var(--v)) * 1px);aspect-ratio:1;border-radius:50%}
.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
AI PROMPT

Choose visual encodings by how accurately each one can be read.

Map quantities to position or length along a shared baseline first, reserve hue for categories and use a continuous lightness ramp for magnitude, scale circles by area rather than radius, limit how many channels appear in one chart, and always pair the chart with an accessible data table carrying the same values.

  • Do not encode magnitude with hue alone.
  • Do not rely on area or angle when precise comparison matters.
54
DATA VISUALIZATION / chart · interaction · filter · tooltip · drill-down

Interactive Chart

対話的グラフ

  • DIFFICULTY medium
  • TREND current

バーを選ぶと詳細が出る

バーをクリックまたはキーボードで選ぶと、その値が下の読み上げ領域に文字で表示される。もう一度選ぶと解除される。

DEFINITION

図に絞り込み、強調、詳細表示などの操作を与え、全体像から個別の値へ読み手自身が降りていけるようにする設計。

IMPRESSION
  • 探索性●●●●●
  • 情報密度●●●●●
  • 明快さ●●●●●
  • 一覧性●●●●●
RELATED / 関連技法

WHY
  • 限られた面積に、全体と詳細の両方を収められる。
  • 読み手が自分の関心に沿って データ を確かめられる。
  • 一枚の図では答えられない問いに、その場で答えられる。
VISUAL
  • 選択中の要素と、それ以外の抑制された要素の差。
  • 選択に応じて更新される数値の読み上げ領域。
  • 全体の文脈を保ったまま一部が強調される。
IMPLEMENTATION

semantic HTML · button · aria-pressed · role=status · SVG · Canvas 2D

  • 対話する要素はネイティブのbuttonにして、クリック、タップ、Enter、Spaceを標準で扱えるようにする。
  • 選択結果はrole=statusの領域へ文字として書き出し、視覚以外にも伝える。
  • ホバーは補助に留め、初期表示だけで主要な結論が読めるようにする。
  • データ点が多い場合はCanvasで描き、操作対象だけをDOMに置く。
BEST FOR
  • 項目数が多く一覧では追えないデータ。
  • 読み手ごとに関心が異なる指標。
  • 社内の分析ダッシュボード。
AVOID
  • ホバーしなければ値が一切分からない図を作る。
  • 操作しないと結論に到達できない構成にする。
  • 選択状態を色の変化だけで示す。
ACCESSIBILITY
  • すべての操作をキーボードだけで完了できるようにする。
  • 選択状態はaria-pressedやaria-selectedなど意味に合う属性で示し、色の変化だけに頼らない。
  • 選択に応じた値の変化をrole=statusで通知する。
  • タッチ操作でも押しやすい大きさと間隔を確保する。
PERFORMANCE
  • 再描画は変化した部分だけに限定する。
  • 高頻度の入力はまとめて1フレームに1回処理する。
CODE
<div class="chart" role="group" aria-label="四半期別の指標"><button type="button" aria-pressed="false" style="--v:62%"><span></span>Q1</button><button type="button" aria-pressed="false" style="--v:38%"><span></span>Q2</button></div><p id="readout" role="status">バーを選ぶと詳細が出る</p>
AI PROMPT

Make a chart explorable with keyboard-operable selection and a text readout.

Add selection, filtering and detail-on-demand to a chart using native buttons so click, tap, Enter and Space all work. Reflect selection with aria-pressed rather than color alone, announce the selected value through a role=status region, keep the main conclusion readable before any interaction, and redraw only what changed.

  • Do not make values reachable only on hover.
  • Do not indicate the selected state with color alone.
55
DATA VISUALIZATION / chart · data · interpolation · transition · canvas

Animated Chart

動くチャート

  • DIFFICULTY advanced
  • TREND current
  • SOURCES 3
  • RESEARCHED 2026-08-16

データセットを切り替え、固定した軸の上で棒の高さが新しい値へ移る様子を確認する。

DEFINITION

チャートの軸と対応関係を保ちながら、値や状態の変更を図形の補間として見せ、前後差の理解を助ける技法。

Animated Chartは、棒の高さ、点の位置、色などを旧状態から新状態へ補間し、何が変わったかを示す。比較基準となる軸、並び、尺度を不用意に変えず、現在値を常に文字でも読めるようにする。モーションは理解の補助であり、Reduced Motionでは同じデータを即時更新してよい。

IMPRESSION
  • 明快さ●●●●●
  • 連続性●●●●●
  • 分析性●●●●●
  • 装飾性●●●●●
RELATED / 関連技法

WHY
  • 前後の対応を保ったまま増減や順位変化を示せる。
  • 更新対象へ注意を向け、変化した箇所を見つけやすくできる。
  • 状態変更の結果と操作の因果関係を補助できる。
VISUAL
  • 同じ図形が旧値から新値へ滑らかに補間される。
  • 軸、目盛り、ラベルは比較の基準として安定する。
  • 変化後の値が静止状態で明示される。
IMPLEMENTATION

Canvas 2D · D3 transitions · requestAnimationFrame · HTML data table

  • 旧値と新値を同じキーで対応付けて補間する。
  • 軸の範囲とゼロ基準をデータ更新間で明示的に管理する。
  • 現在値と単位をHTMLまたはアクセシブルSVGで常に提供する。
BEST FOR
  • ダッシュボードの期間切り替え。
  • 実績や進捗の前後比較。
  • 少数系列の更新を説明するレポート。
AVOID
  • 更新のたびに軸範囲を変え、増減を誤認させる。
  • アニメーション中しか値を確認できない状態にする。
  • 全系列を異なる速度や派手な弾性で動かす。
  • Canvasだけに数値とラベルを置く。
ACCESSIBILITY
  • チャートの要点と現在値を文章またはデータ表でも提供する。
  • 色だけに系列を依存せず、ラベル、線種、形を併用する。
  • prefers-reduced-motionでは補間を省き、新状態を即時表示する。
PERFORMANCE
  • 更新対象だけを再描画し、データ数に応じてCanvasとSVGを選ぶ。
  • 非表示タブや画面外ではアニメーションを停止する。
  • 短い遷移へ制限し、更新入力が連続するときは前の遷移を整理する。
CODE
// 旧値から新値へ補間する。軸と目盛りは比較の基準なので動かさない
function transition(from, to, ms, draw) {
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return draw(to);
  const t0 = performance.now();
  const tick = (now) => {
    const p = Math.min(1, (now - t0) / ms);
    draw(from.map((v, i) => v + (to[i] - v) * p));
    if (p < 1) requestAnimationFrame(tick);
  };
  requestAnimationFrame(tick);
}
// 変化後の値は静止状態でも読めるよう、HTMLの表を併記する
SOURCES
AI PROMPT

Animate chart values between keyed states while keeping axes and textual values stable.

Create an animated bar chart that interpolates keyed values between two datasets while keeping the scale, baseline, labels and reading order stable. Always expose current values and units in text or a data table, use color plus labels, keep the transition brief, and switch instantly for reduced motion.

  • Do not rescale axes invisibly between states.
  • Do not reveal values only during animation or only in canvas.
  • Do not use elastic motion, racing bars, or color alone for meaning.
56
DATA VISUALIZATION / data-storytelling · narrative · annotation · steps · data-visualization

Data Storytelling

データストーリーテリング

  • DIFFICULTY advanced
  • TREND current
  • SOURCES 4
  • RESEARCHED 2026-08-16

ボタンで3段階を進み、同じ図の強調系列と短い主張が順に変わる様子を見る。

DEFINITION

データ、注釈、文章、段階的な視覚強調を一つの順序へ編集し、数値の根拠と主張を物語として伝える技法。

Data Storytellingは、チャートへ物語を後付けするのではなく、導入、注目点、比較、結論を段階として設計する。作者が示す順序と読者が自由に探索する余地の配分が中心課題になる。各段階は一つの主張へ絞り、完全なデータ、出典、静的な要約へいつでも到達できる構造が必要である。

IMPRESSION
  • 物語性●●●●●
  • 説得力●●●●●
  • 段階性●●●●●
  • 一覧性●●●●●
RELATED / 関連技法

WHY
  • 数値の羅列から、何をどの順番で見るべきかを明示できる。
  • 注釈と強調で変化点や例外へ注意を向けられる。
  • 作者主導の説明と読者主導の探索を同じ資料に共存させられる。
VISUAL
  • 一段階につき一つの主張と短い注釈。
  • 同じ図を保った段階的な系列・地点の強調。
  • 導入、比較、結論の見通しが分かる進行表示。
IMPLEMENTATION

HTML sections · SVG or Canvas · IntersectionObserver · state management · data tables

  • 物語の各段階を見出しと文章を持つHTMLセクションとして構造化する。
  • 可視化状態は段階IDから再現できるようにする。
  • 出典、期間、単位、母数、完全な表を物語とは独立して参照可能にする。
BEST FOR
  • 調査報道や研究結果の解説。
  • 決算、政策、公共データの要点提示。
  • 教育コンテンツや複雑な時系列の案内。
AVOID
  • 操作しないと結論や出典へ到達できない構成にする。
  • 都合の良い区間だけを強調し、尺度や母数を隠す。
  • 段階を増やしすぎて全体像を失わせる。
  • スクロールを奪って読み手の速度を強制する。
ACCESSIBILITY
  • 各段階の主張を文章として読み、可視化なしでも筋が通る構成にする。
  • チャートには要約とデータ表を用意し、色だけで強調しない。
  • 次へ・前へ操作はbuttonとし、現在段階を文字で示す。
  • Reduced Motionでは図を即時切り替え、スクロール連動演出を除く。
PERFORMANCE
  • 全段階の重い可視化を同時描画せず、共通図の状態だけを更新する。
  • データ処理と画像資源を先読みしすぎず、静的要約を先に表示する。
  • 画面外の動画やCanvas更新を停止する。
CODE
/* 図は据え置き、強調だけを段階で切り替える */
.story{display:grid;gap:2rem;grid-template-columns:minmax(0,18rem) minmax(0,1fr)}
.story li{opacity:.45;transition:opacity .2s}
.story li[aria-current="step"]{opacity:1}
@media (max-width:48rem){.story{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.story li{transition:none}}
SOURCES
AI PROMPT

Build a stepped data narrative with one claim per step and a complete static evidence path.

Create a stepped data narrative with a clear introduction, one evidence-backed claim per step, stable scales, concise annotations and explicit progress. Balance author-guided sequencing with optional exploration, expose source, units, denominator and full data table outside the interaction, make controls keyboard operable, and switch states instantly for reduced motion.

  • Do not hide the conclusion, source, or complete data behind interaction.
  • Do not manipulate scales or omit denominators to dramatize a claim.
  • Do not hijack scrolling, overload each step, or rely on color alone.
57
DESIGN RECIPE

Swiss + Asymmetric + Grain

端正な骨格に、ひとつだけの逸脱

仕上がり / RESULT

厳密なグリッドの上に一箇所だけ重心のズレと紙の粒子が乗り、静かなのに手触りのある画面になる。

使う技法 / USES

BEST FOR / 向く用途

ブランドサイト、アーカイブ、写真家のポートフォリオ

STRENGTH / 強み

情報の秩序を保ったまま、テンプレート感だけを外せる。

CAUTION / やりすぎ注意

ズレも粒子も一箇所ずつ。両方強めると、ただ雑な画面に見える。

AI PROMPT

Design a Swiss-grid editorial page with one deliberate asymmetric break and a restrained paper grain overlay. Keep hierarchy strict, keep the grain under 5% opacity.

58
DESIGN RECIPE

Editorial + Oversized + Mask Reveal

読ませる誌面に、山場をひとつ

仕上がり / RESULT

雑誌的な段組みに巨大見出しが載り、章の変わり目でマスクが開く読み物になる。

使う技法 / USES

BEST FOR / 向く用途

特集記事、インタビュー、ブランドストーリー

STRENGTH / 強み

長文でも、読む順番と山場の位置を設計できる。

CAUTION / やりすぎ注意

マスク演出を全見出しに使うと、読む速度そのものを落としてしまう。

AI PROMPT

Create a magazine-style long read with varied columns, one oversized headline per chapter and directional mask reveals limited to chapter openings.

59
DESIGN RECIPE

Neo Brutalism + Matter.js

触れる、落ちる、ぶつかる

仕上がり / RESULT

太線と原色のブロックが物理演算で落下・衝突する、触って遊べる画面になる。

使う技法 / USES

BEST FOR / 向く用途

イベント、コミュニティ、実験的なキャンペーン

STRENGTH / 強み

触った結果が予測できないこと自体が、そのまま体験の価値になる。

CAUTION / やりすぎ注意

物理演算は入力の届かない領域を作りやすい。キーボードでも同じ情報に到達できるようにする。

AI PROMPT

Build a neo-brutalist page where blocks fall and collide with a 2D physics engine. Provide a static, keyboard-reachable version of the same content.

60
DESIGN RECIPE

Minimal + Kinetic Type

静けさの中で、言葉だけが動く

仕上がり / RESULT

余白の広い静かな画面で、短いコピーだけが時間差で立ち上がる。

使う技法 / USES

BEST FOR / 向く用途

プロダクトのティザー、企業ステートメント、招待状

STRENGTH / 強み

要素が少ないほど、動きの質がそのままブランドの印象になる。

CAUTION / やりすぎ注意

動きが主役になるため、reduced-motion時の静止状態を先に設計する。

AI PROMPT

Design a minimal statement page where one short line of copy animates with staggered timing, and define the reduced-motion static state first.

61
DESIGN RECIPE

Monochrome + WebGL

色を捨て、光だけを残す

仕上がり / RESULT

単一色相の画面に、光と歪みだけが生きた質感として乗る。

使う技法 / USES

BEST FOR / 向く用途

音楽、映像、テック系プロダクト、実験的ポートフォリオ

STRENGTH / 強み

色を絞るほど、シェーダーの微細な階調が読み取れるようになる。

CAUTION / やりすぎ注意

GPU負荷と発熱。低性能端末では静止画へ切り替える判断を先に決める。

AI PROMPT

Combine a single-hue monochrome layout with a restrained WebGL light-and-distortion background, falling back to a static image on low-power devices.

62
DESIGN RECIPE

Data + Motion + Editorial

数字を、文章の流れの中で見せる

仕上がり / RESULT

数値が本文の流れの中で図になり、読み進めると形が変わる記事になる。

使う技法 / USES

BEST FOR / 向く用途

調査レポート、実績紹介、報道

STRENGTH / 強み

数値の意味を、説明ではなく視覚の変化として伝えられる。

CAUTION / やりすぎ注意

動くグラフは読み取り精度を下げる。静止状態と数値表を必ず併記する。

AI PROMPT

Write a data-driven editorial article where charts transform as the reader advances, always paired with a static state and an accessible data table.

63
AI PROMPTS / HOW TO WRITE

AI Promptの書き方

AIに投げる指示は「きれいなサイト」ではなく、判断できる条件の並びにする。目的 → 構図 → 文字 → 色 → 動き → 禁止、の順で書くと崩れにくい。

  • 最初の一文で「何のページか」を確定させる。
  • 構図は列数ではなく、視線の順番で指定する。
  • 色は数ではなく役割で指定する（背景・本文・強調を各1つ）。
  • 動きは秒数と対象を書く。「おしゃれに動かす」は指示ではない。
  • 最後に禁止事項を並べる。これが一番効く。
TEMPLATE
Design a [page type] for [audience]. Reading order: [1st] → [2nd] → [3rd]. Layout: [grid or composition]. Type: [display face + body face + scale contrast]. Color: one background, one text, one accent. Motion: [element] only, under [ms]. Avoid: generic SaaS cards, uniform rounded corners, purple-blue gradients, decorative glass.
64
AI PROMPTS / THE AVOID LIST

AIっぽくしない禁止指定

生成物が「AIっぽい」のは、多くの場合ここに挙げた既定値が残っているから。プロンプトの末尾に貼って使う。

  • 同じ角丸・同じ影のカードを並べただけの構成
  • 紫〜青のグラデーション背景
  • 意味のないガラス表現とぼかし
  • 全要素を中央に揃えた対称レイアウト
  • 一般的なアイコンライブラリの機械的な配置
  • ホバーで全カードが3px浮く演出
  • 本文と見出しが同じ書体・同じ太さ
TEMPLATE
Avoid: identical rounded cards in a row, purple-to-blue gradients, decorative glassmorphism, fully centered symmetric layouts, generic icon sets, uniform 3px hover lift, and identical typeface and weight for headings and body.
65
AI PROMPTS / 構図の指示

Layout Prompt

レイアウトは「12カラム」ではなく、どこを最初に見せ、どこを空けるかで指定する。

  • 主役を1つだけ決める。
  • 余白を残す場所を明示する。
  • 崩す箇所を1箇所だけ許可する。
TEMPLATE
Build an asymmetric editorial layout on a strict grid. One dominant visual anchor at the top left, generous negative space on the right, thin rules between sections, and exactly one element that deliberately breaks the grid.
66
AI PROMPTS / 文字の指示

Typography Prompt

書体名を指定できないときは、対比とサイズ差で書く。可変フォントを使うなら軸と範囲まで書く。

  • 見出しと本文の役割を分ける。
  • サイズ差は倍率で指定する。
  • 可変フォントは軸名と範囲を書く。
TEMPLATE
Use a large display sans for headlines and a neutral sans for body, with at least a 6x size contrast. If a variable font is available, drive weight between 300 and 800 with standard CSS font properties. Keep body text stable and never animate it.
67
AI PROMPTS / 動きの指示

Motion Prompt

動きは時間と理由をセットで書く。理由のない浮遊は必ず削る。

  • 対象・距離・時間・イージングを書く。
  • reduced-motion時の状態も同時に指示する。
  • 同時に動かす要素は3つまで。
TEMPLATE
Animate only the headline and the primary image. Stagger by 60ms, 400ms duration, one custom easing, and a decisive resting state. Under prefers-reduced-motion, present the final state immediately with no movement.
68
AI PROMPTS / 反応の指示

Interaction Prompt

入力手段を先に書く。マウス前提の指示は、そのままではタッチとキーボードで壊れる。

  • ポインタ・タッチ・キーボードの3つを明示する。
  • 反応の範囲と戻り方を指定する。
  • 代替操作を必ず並記する。
TEMPLATE
Add a magnetic hover to the primary CTA with a maximum 12px follow and a smooth return. Preserve keyboard focus styles, provide identical behavior via keyboard activation, and disable pointer following on touch devices.
69
AI PROMPTS / サイト全体の指示

Full Site Prompt

1ページではなくサイト全体を任せるときの雛形。章ごとにアートディレクションを変える指示を入れておく。

  • ページ一覧と役割を先に書く。
  • 共通UIと可変部分を分ける。
  • 禁止事項をサイト全体に適用する。
TEMPLATE
Build a five-page site: home, work, about, journal, contact. Keep navigation, page numbering and footer identical across pages, but give each section its own art direction in grid, texture and motion. Use one accent color per section, keep AA contrast, and apply the avoid list site-wide.
97

GLOSSARY / 用語集

WORDS
FOR SHAPE

Baselineベースライン
文字が乗る基準線。複数要素の視覚的な揃えの基準になる。
Blend Modeブレンドモード
重なった色の混ざり方。質感づくりの中心的な道具。
Container Queryコンテナクエリ
ビューポートではなく親要素の幅で切り替えるレスポンシブ手法。
Deep Linkディープリンク
特定の技法やページへ直接到達できるURL。
Duotoneデュオトーン
暗部と明部を二色に割り当てる写真処理。
Easingイージング
動きの加減速。全部ease-in-outにすると表情が消える。
Grainグレイン
微細なノイズ。デジタルの平坦さを和らげる。
Gridグリッド
要素の位置と幅を決める見えない骨格。列数より、揃える基準の数が重要。
Halftoneハーフトーン
濃淡を点の大小に置き換える印刷由来の表現。
Hierarchy階層
何を最初に読ませるかの設計。サイズ・位置・色の差で作る。
Leading行送り
行と行の間隔。本文では文字サイズの1.5〜1.9倍が目安。
Maskマスク
領域を切り抜いて見せ方を制御する手法。clip-pathやmask-image。
Negative Space余白
埋める対象ではなく、意味のまとまりを作る構造材。
Optical Size光学サイズ
表示サイズに応じて字形を最適化する可変フォントの軸。
Particleパーティクル
多数の小さな点を個別に動かして群れの表現を作る手法。
Reduced Motion動きの低減
OSの設定。有効時は動きを止め、情報量は減らさない。
Scroll Snapスクロールスナップ
スクロールの停止位置を意味の区切りへ寄せるCSSの仕組み。
Shaderシェーダー
GPUで画素単位の計算を行うプログラム。光や歪みの表現に使う。
Staggerスタッガー
複数要素に少しずつ遅延を与えて順に動かすこと。
Tracking字送り
文字同士の間隔。大きな見出しほど詰める。
99

A—Z INDEX / 技法索引

FIND BY
NAME