自主制作
AI業務支援サービスを想定したランディングページです。リキッドレイアウトで柔軟なレスポンシブ設計を行い、導入事例にはスライダーを実装しました。スムーススクロールを取り入れ、自然な導線を意識しています。
Basic認証
ID：demo PW：demo
ホバー時に文字色を変化させるとともに、疑似要素を用いて下線が中央から伸びるアニメーションを実装しました。transform と scaleX を用いることでパフォーマンスに配慮し、自然で滑らかな動きを実現しています。
メニュー項目クリック時にページ内リンクへスムーススクロールする処理を実装しました。 固定ヘッダー分の高さを考慮し、スクロール位置を動的に補正しています。また、ドロワーメニュー表示時にはスクロールと同時にメニューを閉じる処理を組み込み、自然なUXを意識した設計としています。
固定ブレイクポイントのみに依存せず、clamp() を活用したリキッドレイアウトを採用しました。画面幅に応じてフォントサイズや余白が滑らかに変化する設計と、デザイン崩れを防ぎながら自然なレスポンシブ対応を実現しています。
