デザインカンプからのコーディング｜架空のダイビング施設サイト

片岡えりな🍎
Webコーダー
OVERVIEW

【Figma】デザインカンプからのコーディング。 CSS設計を意識して他者でも見やすく、使い回しができ、更新しやすいコードを心がけました。テキストの増減やアスペクト比の違った画像への差し替えにも対応できるコードになっています。

URL：https://eriii--web.conohawing.com/New-CodeUps/

BASIC認証
ユーザー名：codeups
パスワード：codeups@0721


◼︎制作概要

作業内容：コーディング

ページ数：15ページ（トップページ+下層14ページ）

サイト構成：トップページ、キャンペーン（一覧＋３カテゴリページ）、私たちについて、ダイビング情報、ブログ、ブログ詳細、お客様の声（一覧＋３カテゴリページ）、料金一覧、よくある質問、お問い合わせ、サンクスページ、サイトマップ、プライバシーポリシー、利用規約、404


◼︎実装内容

  • CSS設計を意識したBEM設計手法でのコーディング
  • テキストを増やしたり、アスペクト比の違う画像に差し替えても表示崩れを起こさない
  • スマホファーストでのコーディング、レスポンシブ対応
  • サイズ指定をremで統一


◼︎アニメーション

  • swiperを使用して画像切替（メインビュー、キャンペーン）
  • gsapを使用したアニメーション（ローディング）
  • ハンバーガー、ドロワーメニュー
  • 画像アニメーション、ボタンアニメーション
  • モーダル（AboutページGallery）
  • タブ切り替え（Informationページ）
  • アコーディオンメニュー（FAQページ）
  • スムーススクロール、ページトップボタン


◼︎WordPress構築

  • これからWordPress構築予定


WEBSITE