02 / LEVEL 01
JUNKBRANDING
Consulting Landing Page
スクールの学習用デモ作品です。実在の受注実績を表すものではありません。
相談までの判断を支えるコンサルティングLP。
作品情報
- 想定業種
- Consulting
- 技術スタック
- HTML / CSS / Vanilla JS / GSAP
- デザインコンセプト
- 「Thought → Value.」を軸に、太いタイポグラフィとオレンジの矢印で思考から価値への変化を表現。
- アニメーション
- GSAP 3.13.0とScrollTriggerによる見出し表示、スクロール演出、数値カウント。動きを減らす設定では静的に表示。
主な実装機能
- 事例詳細を開くダイアログ
- 相談フォームの入力検証（送信・保存なし）
- FAQの開閉
- スマートフォン用メニュー
- PCのサービス紹介の横スクロール
学習できる内容
- サービス・強み・実績・FAQを相談までの流れに沿って並べ、訪問者の疑問に答えるLPを設計する。
- GSAPとScrollTriggerで見出しや横スクロールを制御し、画面幅と動きの設定に応じて演出を切り替える。
- 事例カードから詳細ダイアログを開き、閉じた後に元のカードへ操作を戻す処理を実装する。
- フォームの未入力・メール形式・文字数を検証し、エラーの場所と直し方を伝える表示を作る。デモでは送信しない。
- FAQやメニューを操作し、外部ライブラリが読み込めない場合にも本文を読めるか、主要機能を使えるかを検証する。
ソースコードについて
静的HTML・CSS・JavaScriptのES Modulesで構成しています。スクロール演出にはGSAPとScrollTriggerを使い、読み込むバージョンを固定しています。
ポートフォリオ制作のポイント
- 相談までの情報の順序とサービスの見せ方を説明する
- 動きを減らす設定や外部ライブラリが読み込めない場合の表示も確認する
この制作例から学ぶ
デモを操作した後は、使われている技術と課題のつながりを確認できます。