MOTION IMPLEMENTATION / 01
WebサイトやLPの目的を読み解き、必要な場所にだけ、意味のある動きを加える。
このページ自体が、実装できるモーションの標本です。
カーソルを動かす
02 MOTION CONSOLE
強い動きが優れているわけではありません。伝える内容と見る人に合う強さを選び、選択内容はこの端末に保存します。
画像や見出しへ視線を導き、サイトの印象を一段深くします。
03 CAPABILITIES
用途に合うものだけを選んで実装します。この展示では、選択肢を知ってもらうために全パターンを収録しています。
読む順番をつくる。
見出しや章の開始で、読む順序を自然に示します。
CSS + OBSERVER特徴、実績、手順のまとまりと順序を伝えます。
STAGGER作品や商品の主役画像へ、視線を集中させます。
TRANSFORM SCALE前景と背景の差を使い、素材に奥行きを与えます。
POINTER DEPTH一画面へ集中させ、比較や段階説明を行います。
大きな実演を見る ↓工程やBefore / Afterを、順序と因果関係で伝えます。
SCROLL PROGRESS短い言葉の反復で、区切りとリズムをつくります。
CSS LOOP正式な映像素材がある場合、理解に必要な区間を大きく見せます。
MATERIAL REQUIRED操作可能性と状態変化を、hover・focus・activeで伝えます。
ACCESSIBLE STATES正確な切り抜き素材やSVGがある場合、構造や構成を見せます。
LAYER COMPOSITION04 SCROLL STORY
操作を奪わず、位置と場面を対応させる。画面を固定する理由がある時だけ、この方法を選びます。
ページの目的、要素の順番、既存機能を確認する。
理解・誘導・状態変化・ブランド体験のどれを担うか決める。
最も単純で保守しやすい方法から選び、端末ごとに調整する。
モバイル、操作、軽減設定、初期化失敗まで確認する。
05 WAYS TO WORK
動きが決まっている時も、まだ言葉になっていない時も、必要な深さから始められます。
対象箇所と動きが決まっている。指定範囲を解析し、そのまま実装します。
希望が未確定。複数案と推奨理由を示し、選ばれた案だけを実装します。
動画・画像・URLの演出原理を分解し、対象サイト向けの独自表現へ置き換えます。
目的と構造を読み、最も効果的な一案を選んで実装します。
現状の動きや改善点を診断し、ファイルを変更せずに報告します。
06 METHOD
軽い操作反応から複雑な時間軸まで、最小の方法から段階的に選びます。
hover、focus、開閉、短い登場。要素単体で完結する動き。
画面へ入ったタイミングで、表示と順序を制御する動き。
複数要素、固定、連続同期など、時間軸が必要な動き。
3Dでなければ成立しない目的と素材、保守条件が揃う場合だけ。
07 NON-NEGOTIABLES
動かす前より、
伝わりやすくなっているか。
文章、価格、CTA、画像、フォーム、計測、SEOを依頼なく変えません。
スクロールを置き換えず、クリック領域やフォーカス位置を安定させます。
PCの強い演出をそのまま縮めず、モバイルでは短縮・縦積み・静止へ切り替えます。
動きを減らしても情報と操作を失わず、重要な内容を表示したままにします。
参考表現は原理だけを読み取り、コードや素材、ブランド表現はコピーしません。
主要画面幅、再読み込み、高速スクロール、エラー、重なり、横崩れを確認します。
端末の設定でモーション軽減が有効な場合、このページの連続運動と移動演出は停止します。
MOTION STUDIES / END OF GALLERY