架空LPサイトのコーディング

OVERVIEW

架空LPのデザインカンプ(XD)からのコーディングを行っております。 左右非対称であったり、背景とずれたコンテンツを忠実にカンプに沿って再現するよう心がけています。

YEAR 2022

URL : https://mota-file.conohawing.com/sample-corp

ユーザー名 : mota

パスワード : web2022

制作期間目安 : 7日間

【仕様】

  • 最大幅1280px
  • header上部固定
  • ページ内リンクスムーススクロール、スマホ時のドロワーメニュー表示、アコーディオンをjQueryで実装
  • formのバリデーション設定、checkbox・radioボタンは各種ブラウザ統一のため、独自CSSをあて、googleフォームと紐付け
  • ページTOPボタンが一定スクロールで表示切り替え(jQuery)
  • スライダーにはswiper使用(pagenationも独自CSS)
  • googlemap埋め込み
  • SNSボタンはFont Awesome使用
  • レスポンシブ化(ブレイクポイントは768px)

【気をつけたこと】

  • perfect pixelでカンプの再現を重視
  • Sass使用してのコーディング
  • 画像圧縮し、サイト速度を意識
  • カンプ幅以外でも表示崩れしないようチェック