自主制作
介護派遣サービスサイト
確かな実績と専門性をアピールする介護派遣サイト
デザインカンプからの課題教材を使用し、架空介護派遣サイトのコーディングをました。
力強いメッセージ性のあるサイトですが、アニメーション要素は柔らかさを意識し、親しみやすさを演出しました。
Planning
企画設計
自動ループのアニメーションや2枚ずつ動くスライダー、元々開いているアコーディオンパネルなどがあるので、注意深く実装することを目指しました。
Point
こだわったところ
ファーストビューで配置されている円の中文字が、余白がほとんどない
状態だったので、フォントや擬似要素の大きさを細かく調整し、どのデバイスでもはみださず、見やすいようにしました。
アコーディオンパネルは構造がシンプルなdetailsとsummaryタグを使用、セクションタイトルのフェードインアニメーションはGSAPを使用しました。
Review
振り返り
スライダー部分はswiperライブラリを使用しました。スマートフォン実機テストでデフォルトの余白がついていたためボタンの位置がずれていることがあり、実機テストでしかわからない問題を解決することができました。
- Tools
- Figma cursor
- Language
- HTML CSS JQuery GSAP
- ID、passward
- セキュリティ保護のため、ベーシック認証を使用しています。
以下の情報を入力してご覧ください。
ユーザー名：demo
パスワード：demo
ブラウザでアクセスすると、認証画面が表示されますので、上記の情報を入力してください。
View Site