SEO対策アニメーションコーディングスライダーレスポンシブデザイン動的コンテンツ

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

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

期間

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（リンク）を記載させていただいていますが、納品時（当方で制作したもの）と異なる場合がございます。