Entersight

WebCatalog

動きのWebカタログ

ちょっとした動きの引き出し。UI に「わかりやすさ」と「心地よさ」を足すための アニメーション集です。全 43 点、すべて Entersight の自前実装で、 そのまま制作に組み込めます。

用途

ボタン・リンク

8

押せることを伝え、迷いを消す。問い合わせ率に直結する部分。

  • 背景が左から満ちる主要ボタンに。押す前の期待をつくる
  • 背景が中央から広がる中央寄せのCTAに合う
  • 下線が伸びるテキストリンクの標準形
  • 波紋が広がるタップした感触を返す
  • 影がついて浮き上がるカード型のボタンに
  • 押し込まれる確定・送信ボタンに
  • 矢印が前に出る「次へ」「詳しく」の誘導
  • 枠線が一周する控えめな第二ボタンに

見出し・テキスト

6

読ませたい順番をつくる。スクロールの気持ちよさを決める部分。

  • ふわっと下から出現いちばん使う出現。全体の基調に
  • マスクが上がって出現大見出しに。紙面的な佇まい
  • 1文字ずつ出現キャッチコピーを印象づける
  • 背景色が伸びて強調言い切りたい一語に
  • タイピング風に出現語りかけるトーンに
  • ぼけから合焦写真と併走させると効く

ナビゲーション

5

今どこにいるか、どこへ行けるかを常に示す。

  • 現在地の下線が移動追従ヘッダーの現在位置表示
  • ドロップダウンが開くページ数が多いサイトに
  • 3本線が×に変わるスマホの開閉ボタン
  • パネルが横から入るスマホの全画面メニュー
  • スクロールでヘッダーが縮む読む面積を稼ぐ

スクロール連動

5

下に続きがあることを伝え、読み進めさせる。

  • 縦線が伸びて先を促すファーストビューの下端に
  • マウスの中で点が下がる全画面ヒーローの定番
  • 読了バーが伸びる長い記事・LPに
  • 画面内で順に現れる一覧・カード群の見せ方
  • 背景がゆっくりずれる奥行きを出す

読み込み・待ち時間

4

待たされている感覚を減らす。体感速度の話。

  • 円が回る送信中・検索中の合図
  • バーが伸びる進捗が読める待ち方
  • 点が順に跳ねるチャットの入力中表示
  • 幕が開くページ遷移の演出

開閉・切り替え

5

情報を隠して、必要なときだけ出す。ページを短く保つ。

  • 中央に拡大して現れる注意喚起・画像の拡大
  • 高さが開くよくある質問に
  • タブが切り替わる料金プランの比較
  • 引き出しが出る絞り込み・カート
  • 吹き出しが出る専門用語の補足

画像・カード

5

実績や商品を魅せる。クリックしたくなるかを左右する。

  • ホバーで画像が寄る実績一覧・商品一覧
  • ホバーで持ち上がるカード型の一覧
  • マスクが開いて画像が出る写真を主役にする見せ方
  • キャプションが下から出るギャラリーの説明表示
  • 横に流れ続けるロゴ並べ・実績の物量訴求

背景・装飾

5

主役を邪魔せず、余白に呼吸を持たせる。

  • グラデーションが流れる無地の面に動きを足す
  • 波が動くセクションの区切りに
  • 粒が漂う静かな背景の演出
  • 罫線が伸びる紙面的な区切り
  • ほのかに光る注目させたい一点に