![](https://portfolio.duotres.com/wp-content/uploads/2023/01/cbycalista様_top_サムネ.png)
デザインデータをもとに静的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(リンク)を記載させていただいていますが、納品時(当方で制作したもの)と異なる場合がございます。