Static Site Animation 01
プロジェクト名: Renai Grand
目的: ウェブサイト向けのプロフェッショナルなアニメーション効果を構築するために、Liquid Design 技術と GSAP ライブラリを組み合わせてトレーニングを行う。
デザイン
ツール: Figma
業務要件
liquid design技術について調査し、タスク実施中にliquid designとresponsive designを柔軟に組み合わせること。- ウェブサイトが liquid design の原則に従って自動的に柔軟に拡大・縮小できるようにすること。
- アニメーション効果を構築するために
GSAPライブラリを調査・適用すること。 - デザインファイル内のトップページのアニメーション説明をよく読み、要件通りに正確に実装すること。説明が不明瞭な場合は、
example.mp4の動画を参照してください。 - リーダーから追加要件がない場合は、
top pageとlocation pageのみコーディングすればよい。 - SPデザインがない場合は、経験に基づいてタブレットおよびSPのインターフェースを自発的に構築し、ユーザーフレンドリーに仕上げること。
タスクと重要ポイント
- EJSでマークアップし、HTML要素が他のページでも再利用できるようにすること。
- SPデザインがないページについては、最もレスポンシブに適した状態を自分で仮定すること。
liquid design のセットアップガイド
概要: liquid design はビューポートのサイズに応じて柔軟に伸縮するインターフェースを目指します。パーセンテージや柔軟な単位を優先し、レイアウトがサイズ変更で崩れないよう固定値を避けます。
主な原則:
- 可能な場合は幅・高さにパーセンテージ（%）を使用し、最大幅を制限するには max-width を使用する。
- フォントサイズや間隔には rem / vw / clamp() / calc() を使用してブレークポイント間で滑らかにスケールさせる。
- padding/margin は px の固定値ではなく rem を使う。
以下のように CSS を設定します:
/* 基本値: 1rem = 10px */
html {
font-size: 10px;
}
/* 大きなブレークポイント未満のビューポートでは、幅に基づいて線形にスケールします。
必要に応じて 1400 を適切なブレークポイントに置き換えてください。 */
@media (max-width: 1400px) {
html {
font-size: calc(100vw / 1400 * 10);
}
}
/* 小さいモバイル用の特別設定。
必要に応じて 390 をデザイン参照のモバイル幅に置き換えてください。 */
@media (max-width: 767px) {
html {
font-size: calc(100vw / 390 * 10);
}
}