制作概要
| サイトURL | https://global-standard.saki-portfolio-create.com |
|---|---|
| Basic認証 | ユーザ名：demo パスワード：demo |
| 使用スキル | HTML / CSS / JS / jQuery |
| 制作範囲 | コーディング |
| 制作概要 | オンラインスクールの自主制作課題として制作した、架空企業の採用サイトです。 |
デザインデータ：Figma
CSS設計：BEM
Swiper
モーダル
アコーディオン
制作で意識したこと
CSS設計にはBEMを用い、保守性・再利用性を意識したコーディングを行いました。また、レスポンシブ対応を実施し、PC・タブレット・スマートフォンなど各デバイスで最適な表示になるよう調整しています。メディアクエリを用いてブレークポイントごとに余白やレイアウトを細かく調整し、デザインの再現性と閲覧時の快適さを意識しました。
工夫したこと
スライダーにはSwiperを使用し、デバイスごとに表示枚数を調整することで、画面幅に応じた見やすいレイアウトを実現しました。また、モーダルウィンドウやアコーディオンを取り入れ、情報を整理しながら快適に閲覧できる構成にしています。ファーストビューの無限スクロールはCSSのみで実装し、表示パフォーマンスにも配慮しました。CTAでは奥行き感のあるアニメーションを取り入れ、視覚的なアクセントを加えています。