背景色やライト/ダークを切り替えながら、好みの動きをその場ですり合わせられます。
背景色や表示モードを変えると、同じ動きでも印象が変わります。
表示モード
ライト＝明るいUI / ダーク＝暗いUI
背景色（白 → 黒）
読み込み中の見せ方を、さまざまなパターンで比較できます。
スピナー
ドット
プログレス（ループ）
数字カウント
バー＋数字
バー＋数字＋開く
ロゴ
ロゴ（アウトライン）
手書き風ロゴ
ページの切り替え方や、背景の広がり方を選べます。
フェード
スライド
スケール
上から
下から
左から
右から
中央から外
中央から上下
斜め
円形・中央へ
四角・四隅へ
ドロップダウンや現在地表示など、サイトのメニューまわりを比較できます。
開閉の動きの違いを比較できます。
リンクにマウスを乗せたときの見せ方のバリエーションです。
中心から外に線が伸びる（下部）
中心から外（中央）テキストの高さの真ん中
左から右（下部）
左から右（上部）
左から右・背景
線→背景（横）
線→背景（上下）
ドット→線
テキスト入れ替え
線→枠線
左右→枠線
タブの切り替え方を比較できます。
写真や作品の見せ方のパターンを比較できます。
写真の一覧や絞り込み、メイン画像の切り替え方を選べます。
グリッド一覧
グリッドで一覧表示カテゴリフィルター
タブで絞り込み複合検索ギャラリー
検索で写真名を絞るとプルダウンも該当カテゴリに合わせるメイン画像切替1
下のサムネで切替メイン画像切替2
4枚表示・矢印で左右グループ画像一覧
グループ→一覧→画像で全画面画面いっぱいに動画を流すパターンです。
画面全体に背景動画
ロゴなし · load 後にふわっと表示
YouTube背景動画
Loading → 中央ロゴ → 再生（右下ロゴは再生中）
ボタンにマウスを乗せたとき・押したときの見せ方を比較できます。
検索窓の出し方のバリエーションです。
虫眼鏡をクリックすると検索窓が伸びて出現する
虫眼鏡をクリックすると全画面表示で検索窓が出現
虫眼鏡をクリックすると下からふわっと検索窓が出現
右上の下に検索窓スクロールで表示されるページトップボタンのパターンです。
ページ内の見出しへ移動するリンクのパターンです。
次のコンテンツへ誘導するスクロールの見せ方です。
開閉するパネルのパターンです。
ツールチップやニュースティッカーの見せ方です。
数値の動きでグラフを表示するパターンです。
ページ表示時やクリック時に重ねて表示するパターンです。
ページを開くと → テキスト表示
開いた瞬間に背景が暗くなりテキストをポップアップ
ページを開くと → 動画表示
開いた瞬間に背景が暗くなり動画をポップアップ
クリックすると → 動画・画像・テキスト
リンクをクリック → 背景が暗くなり各コンテンツを表示
選んだパターンを1ページで確認し、実装用のコードを出力します。載っていないものは採用しません。
採用なし
まだパターンが選ばれていません。気になるカードをクリックして選んでください。