06 / LEVEL 02
JUNKBRANDING
Fashion Brand
スクールの学習用デモ作品です。実在の受注実績を表すものではありません。
コレクションの世界観を伝えるブランドサイト。
作品情報
- 想定業種
- Fashion
- 技術スタック
- HTML / CSS / JavaScript / GSAP / Canvas
- デザインコンセプト
- 解体と再構築をテーマに、モノクロの服・素材写真と大きな文字でコレクションを紹介する。
- アニメーション
- GSAP 3.15.0、ScrollTrigger、Flipによるスクロールと配置変更の演出。モーション低減時は静的な表示へ切り替える。
主な実装機能
- 3シーズンのコレクション紹介とルックの絞り込み
- 動画の再生・停止、キーボードで切り替えられるタブ
- 写真ギャラリーと拡大ダイアログ、Canvasによる型紙の描画
- ブランド紹介と入力検証を備えた送信しないデモフォーム
学習できる内容
- コレクションのコンセプトを写真の順序・文字組み・配色へ展開し、一貫したブランドの見せ方を作る。
- 縦長・横長のルック写真を組み合わせ、画面幅が変わっても服や人物の見せたい部分が残る配置を設計する。
- GSAPで写真とコピーの切り替えを組み立て、スクロールと演出の速度を調整する。
- Canvasで型紙を描画し、表示サイズとピクセル密度に合わせた寸法調整、描画できない場合の代替を確認する。
- 演出を減らした表示と静止画の代替を用意し、コレクションの閲覧や商品情報への移動を妨げないか確認する。
ソースコードについて
静的HTML・CSS・JavaScriptに画像・動画を組み合わせています。GSAPによる演出を使い、フォントはGoogle Fontsから読み込みます。
ポートフォリオ制作のポイント
- 提供素材・コードと自分で制作した範囲を区別する。
- 画面幅、モーション低減、ライブラリが使えない場合の閲覧体験を説明する。
検証範囲
ChromiumでPC・スマートフォン相当の画面幅と主要操作を確認。実機端末、Safari、Firefoxでの表示・性能は別途確認が必要です。
この制作例から学ぶ
デモを操作した後は、使われている技術と課題のつながりを確認できます。