04 / LEVEL 02
JUNKBRANDING
Creative Studio Corporate
スクールの学習用デモ作品です。実在の受注実績を表すものではありません。
制作姿勢と仕事を伝えるスタジオの企業サイト。
作品情報
- 想定業種
- Creative Studio
- 技術スタック
- HTML / CSS / Vanilla JS / GSAP
- デザインコンセプト
- タイポグラフィと制作事例の写真を中心に、スタジオの姿勢と仕事を紹介する構成。
- アニメーション
- GSAPとScrollTriggerによるスクロール演出。動きを減らす設定に対応する実装を含む。
主な実装機能
- 実績一覧のカテゴリ絞り込みと6件の詳細ページ
- スタジオ紹介、サービス案内、ジャーナル一覧と記事
- 入力チェックと完了表示を備えたデモ専用フォーム
学習できる内容
- スタジオの強みと仕事の進め方を整理し、作品紹介だけでは伝わらない依頼する理由をページ構成に落とし込む。
- 文字サイズ・余白・色・ボタンのルールを定め、トップ・実績・会社紹介に共通するデザインを作る。
- GSAPで見出しや作品の出現タイミングを制御し、読む順序を助ける動きと装飾の動きを使い分ける。
- 事例を課題・提案・制作範囲の順に紹介し、サービス案内から関連事例、相談へつながる導線を設計する。
- 動きの低減、キーボード操作、長いタイトルへの対応を確認し、演出を止めても情報が伝わる状態を作る。
ソースコードについて
HTML・CSS・Vanilla JavaScriptでページを構成し、GSAPでスクロールに合わせた表現を加えています。制作事例の一覧と詳細を行き来できる構成です。
ポートフォリオ制作のポイント
- 提供されたデザイン・コードと、自分で変更・制作した範囲を分けて説明する。
- 実績紹介から問い合わせまでの導線と、画面幅に応じた配置の判断を説明する。
この制作例から学ぶ
デモを操作した後は、使われている技術と課題のつながりを確認できます。