作業の進め方
css-animation は、実際のアプリ機能をブラウザー上で実演するデモを作成します。最初にアプリの視覚表現とレイアウトを調べ、操作前・操作・操作後のデモ、または複数画面のカルーセルを計画します。成果物は単体で動く HTML/CSS アニメーションとブリーフです。
レビューでは静止状態の正しさとタイミングを分けます。操作前後のレイアウトを固定して確認し、その後ループ全体を再生してテンポを調整します。デスクトップとモバイルは別の構図です。モバイルではシーンを簡略化し、カーソルをタップ表示に置き換えます。
想定される成果物
- デザイントークン、幾何配置、シーンのタイミングを記録した構造化ブリーフ。
- 単体で動く HTML の機能デモまたは画面カルーセル。
- 両方を依頼した場合は、個別のデスクトップ用・モバイル用ファイル。
ブリーフからレビューまで
- 01実際の画面を調査する
アクセス可能なアプリと必要な状態を確認します。対象ビューポートで色、文字、間隔、実際の幾何配置を記録します。
- 02デモを計画して制作する
単一機能の変化か複数画面のカルーセルを選びます。ブリーフを書き、要素位置を計算し、CSS と少量のクラスベースのループ制御を使います。
- 03静止画を確認してからタイミングを調整する
重要な状態を固定し、配置とラベルを確認します。正しくなったらループ全体を再生し、速すぎる・遅すぎる箇所を個別に調整します。