Web Design Atlas / ウェブデザインのことばと視覚

次の表現を実装してください。 グリッド / Grid. 行と列をそろえて並べる。 同じ種類の項目を比べる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 ベントーグリッド / Bento grid. 大小の区画を組み合わせる。 機能ごとに情報量を変える. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 スプリットスクリーン / Split screen. 画面を二つの面に分ける。 説明と図を見比べる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 非対称レイアウト / Asymmetric layout. 左右の幅や位置に差をつける。 一つの要素を主役にする. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 余白 / Whitespace. 要素の周囲に空間を残す。 情報のまとまりを分ける. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 エディトリアルレイアウト / Editorial layout. 大きな見出しと段組みを組み合わせる。 記事の読む順番を示す. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 グラスモーフィズム / Glassmorphism. ガラスのような半透明の面から背景がぼけて見える。 背景の上に補助パネルを重ねる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 ニューモーフィズム / Neumorphism. 明暗の影で面の凹凸を表す。 装飾パネルに柔らかい立体感をつける. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 ネオブルータリズム / Neo-brutalism. 太い輪郭とずれた影を使う。 強い区切りと存在感を出す. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 グラデーション / Gradient. 色を連続して変化させる。 背景やアクセントに色の幅をつける. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 デュオトーン / Duotone. 明暗を二つの色へ置き換える。 図や画像の色調を統一する. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 アウトライン文字 / Outline typography. 文字の輪郭だけを描く。 短い装飾見出しをつくる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 フェードイン / Fade-in. 透明な状態から徐々に現れる。 要素の登場を穏やかに示す. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 スライドイン / Slide-in. 位置をずらしながら現れる。 要素が来る方向を示す. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 スタッガー / Stagger. 複数の要素を時間差で表示する。 項目の並び順を示す. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 テキストリビール / Text reveal. 文字列を下から順に現す。 短い見出しの登場を見せる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 マスクリビール / Mask reveal. 見える領域を広げて内容を現す。 図や写真の登場を見せる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 ブラーイン / Blur-in. ぼけた状態から鮮明になる。 短い登場演出をつける. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 タイプライター / Typewriter. 文字を一文字ずつ表示する。 短いメッセージを順に見せる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 カウントアップ / Count-up. 数値が目標値まで増える。 数値の登場を強調する. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 スクロール連動 / Scroll-linked animation. スクロール量に応じて表示が変わる。 読む位置を進捗バーで示す. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 パララックス / Parallax. 前景と背景が異なる速度で動く。 装飾の奥行きを表す. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 スクロールズーム / Scroll zoom. スクロールに合わせて拡大する。 図の一部へ注目を集める. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 画像シーケンス / Image sequence. スクロールに合わせて連番画像を切り替える。 段階的な形の変化を見せる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 スティッキー / Sticky. 領域内で要素が同じ位置に留まる。 説明を読んでいる間に図を残す. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 スクロールスナップ / Scroll snap. スクロール後に区画の位置へそろう。 カードを一枚ずつ比べる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 SVGラインドロー / SVG line draw. 線が端から描かれていく。 経路やつながりを順に見せる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 マーキー / Marquee. 文字列が横へ流れる。 短い装飾語を繰り返す. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。