Blue Sky採用サイトLPを制作しました

✅制作期間と費用の目安
・制作期間：1週間程度
・制作費：5〜6万円

✅サイト仕様
・種類：ランディングページ
・セクション数：10
・高さ：約11,500px

✅使用アニメーションなど
・ハンバーガーメニュー/ドロワーメニュー
・ヘッダーのドロップダウンメニュー
・Swiperによるスライダー、またカスタムプログレスバーのドラッグ操作によるスライド制御
・アコーディオン
・タブ切り替え
・モーダルウインドウ
・GSAP ScrollTriggerを利用したスクロール連動アニメーション
・線やドットの伸長アニメーション
・CTAボタンの表示・非表示制御
・パララックス

✅担当範囲
・コーディング

✅サイト概要
・架空の採用ランディングページです。
・GSAPとScrollTriggerを用いて、斜めに動くスライダーやフェード、拡大アニメーション、スクロールに応じて伸縮するタイムラインなど、多様な演出を組み合わせました。
・タブ切り替えとアコーディオンを組み合わせることで、情報量が多くても快適に閲覧できるよう配慮しました。

✅実装の工夫
・斜めスライダーは、どのデバイスでもレイアウトが崩れないよう、スライド幅や余白を細かく調整しています。
・タイムラインの各ポイントをテキスト量に左右されることなく精緻に配置するJavaScript実装により、ユーザーは時系列情報を直感的に理解できる高い視認性と操作性を得られます。 さらに、動的なコンテンツの変化にも柔軟に追従することで、堅牢かつ拡張性の高いUIを実現しています。
・FAQセクションでは、表示数を画面幅に応じて自動調整。タブ切り替えやリサイズ後も状態を維持できるよう設計し、全体を関数化することで再利用性や拡張性も意識しています。
・横スライダーのプログレスバーを自作し、バーをマウスドラッグしてスライド可能な実装を行いました。これにより操作性が大幅に向上し、ユーザーは直感的でストレスのない体験を得られます。

カテゴリー

ホームページ制作・作成

業種

IT・通信・インターネット

制作期間

7日

参考価格

50,000 円

最終更新日

2025年8月7日