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

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

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

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

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

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

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

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

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

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

次の表現を実装してください。 3Dフリップ / 3D flip. カードが軸を中心に立体的に回転する。 面の向きの変化を見せる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 サークルリビール / Circular reveal. 円形の範囲を広げて内容を現す。 中心から画像を見せる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

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

次の表現を実装してください。 モーションパス / Motion path. 決めた経路に沿って要素が移動する。 順路や工程の流れを見せる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 シェイプモーフィング / Shape morphing. 頂点を動かして図形の形を変える。 二つの形の対応を見せる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 カラートランジション / Color transition. 背景色を別の色へ徐々に変える。 区間の切り替わりを示す. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 ホバーリフト / Hover lift. 指すかフォーカスすると要素が浮き上がる。 操作できる場所を示す. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 フォーカスリング / Focus ring. 選択中の操作対象を輪郭で示す。 キーボードの操作位置を見せる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 アコーディオン / Accordion. 見出しを操作して内容を開閉する。 補足情報を必要なときに読む. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 タブ / Tabs. 選んだ見出しに対応する内容へ切り替える。 同じ場所で情報を切り替える. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

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

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

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

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

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

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

次の表現を実装してください。 メイソンリーレイアウト / Masonry layout. 高さの異なる項目を縦に積む。 画像の一覧を見比べる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 オーバーラップ / Overlapping layout. 要素を重ねて配置する。 主役と補助情報の関係を示す. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 フルブリード / Full-bleed layout. 画像や背景を領域の端まで広げる。 写真の印象を大きく伝える. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 カードレイアウト / Card layout. 関連する情報を枠ごとにまとめる。 項目の単位を分かりやすくする. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

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

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

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

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

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

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

次の表現を実装してください。 ソフトシャドウ / Soft shadow. ぼけた影で面の高さを示す。 操作できる面を区別する. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 グレインテクスチャ / Grain texture. 細かな粒子で表面に質感を加える。 背景の単調さを和らげる. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 メッシュグラデーション / Mesh gradient. 複数の色を面の中でなめらかに混ぜる。 背景に色の広がりを出す. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。

次の表現を実装してください。 ハーフトーン / Halftone. 点の並びで濃淡を表す。 印刷のような質感を出す. 対象ときっかけを指定してください。スクロール連動の場合はページ上の表示位置とスクロール量で変化させ、上へ戻すと巻き戻してください。本文は常に読める状態にし、320px幅とキーボードに対応してください。動きの低減時は完成した静止表示にしてください。