デザインデータをもとに静的HTMLコーディング

美容鍼サロン シーバイカリスタ
肌を育てる美容鍼サロンC by CALISTA(シーバイカリスタ)。根本ケアする独自のアプローチで内側からキレイに、すこやかで、若々しい肌づくりをお手伝いします。

期間

2022年8月〜2022年8月

お仕事概要

デザインデータをもとに静的HTMLのレスポンシブコーディングを行いました。

使用言語等

  • HTML
  • CSS、SCSS
  • JavaScript、jQuery
  • Adobe Illustrator

お仕事詳細

PC、SP用のデザインデータをご提供いただき、静的HTMLにてトップページのコーディングを担当させていただきました。

デザインデータの画像(PC、SP)

コーディング後のページ(PC、SP)

※画像は納品から数日経過しているため、デザインデータと異なる部分があります。
※ブラウザのスクリーンショットの画像となり実際の表示とは一部異なります。

また、下記の作業などを行いました。

  • レスポンシブコーディング
  • スクロールするとヘッダーが表示
  • メニューのトグル表示
  • スクロールによって表示されるCTAボタン
  • スライダーの作成
  • 画像最適化(WebP対応)

スクロールするとヘッダーが表示、メニューのトグル表示などではCSSアニメーションを使用しました。

スライダーはslick.jsというJavaScriptライブラリを使用しています。

SEO対策のページ表示高速化として、画像のファイルサイズを抑えることができるWebP対応を行いました。

※担当したサイトのURL(リンク)を記載させていただいていますが、納品時(当方で制作したもの)と異なる場合がございます。