HP制作：介護派遣サービス

目次

1. サイトURLと認証パスワード

2. 使用しているアニメーション機能（Javascript / jQuery）

3. コーディングで工夫したポイント（HTML / CSS）

4.Webサイト全体画像（PC / スマホ）

1. サイトURLと認証パスワード

こちらから、サイトをご確認いただけます。

Basic認証をかけておりますので、ユーザーIDとパスワードをご入力ください。

ユーザーID：demo

パスワード：demo

2. 使用しているアニメーション機能（Javascript / jQuery）

◎ハンバーガーメニュー

タブレット〜スマホ幅で、ヘッダーのナビゲーションメニューを非表示にし、ハンバーガーメニューを表示します。

内部リンクのクリックで、自動的にメニューが閉じる仕様です。

◎固定ヘッダー

ヘッダーが追従します。

これにより、ユーザーが興味のあるページに遷移しやすくなります。

また、CTAボタン（資料請求）への誘導もしやすくなります。

◎Swiper

トップページの以下2箇所を、Swiperで実装しています。

①ファーストビュー直下

5枚の画像が自動で無限ループする仕様です。

②導入事例

左右の矢印をクリックすることで、PC幅では2スライドずつ、スマホ幅では1スライドずつ左右に動く仕様です。

◎アコーディオンリスト

よくある質問について、クリックでアコーディオンリストが開き、回答が表示される使用です。

3. コーディングで工夫したポイント（HTML / CSS）

◎レスポンシブ対応での配置調整

図形の大きさや位置を調整して、どの画面幅でも自然なデザインになるようにいたしました。

4.Webサイト全体画像（PC / スマホ）

左がPC、右がスマホ幅です。