株式会社カウカウ HP

Point 01　ライブラリに頼らないオリジナルテーマ

WordPressオリジナルテーマを一から構築。ドロワーメニューや物件スライダーは jQuery・スライダーライブラリを使わず素のJavaScriptで実装しました。

• BEM形式でクラス名を統一
• 動く部分は js- クラスで見た目用と分離し、保守しやすく

コード抜粋（JavaScript / properties.js）

const update = () => {
  elements.slides.forEach((slide, i) => {
    slide.classList.remove(...positions);
    const diff = ((i - current) % total + total) % total;
    if (diff < positions.length) {
      slide.classList.add(positions[diff]);
    }
  });

  elements.navItems.forEach((item, i) => {
    item.classList.toggle('is-active', i === current);
  });
};

Point 02　デザインを崩さないレスポンシブ設計

画面幅に合わせて比率ごと拡大・縮小する設計で、どの幅でもデザインカンプの見た目を保ちます。

• メイン画像は aspect-ratio で比率を固定（PC / SP）
• 強みの一覧は CSS Grid で 768px・480px の2段階切り替え

コード抜粋（CSS）

@media (max-width: 567px) {
  :root {
    --1px: calc(100vw / 390);
  }
}
@media (min-width: 567px) and (max-width: 1920px) {
  :root {
    --1px: calc(100vw / 1920);
  }
}

.properties__slide.is-pos-front {
  transform: translate(0, calc(192 * var(--1px)));
  z-index: 4;
}

Point 03　表示速度・使いやすさ・構造への配慮

• <picture> とWebPで画像を軽量化し、遅延読み込みを活用
• 流れる文字やフェードインは CSS アニメーションのみで実装
• スマホは画面下に電話・お問い合わせボタンを固定（タップで発信）
• h1〜h3 の見出し階層を正しく組み、SEOと読み上げに配慮