⚫︎ デザイン意図

このサイトは、デザインカンプからのコーディング課題を元にした作品で、セクション構成は課題と一緒です。HTML/CSSでコーディングから、WordPress化まで行いました。

Figmaデザインカンプを基に、HTML5・SCSS・jQueryで忠実なコーディングを行いました。余白やフォントサイズ、配色、アセットの配置まで細部を正確に合わせ、ピクセルパーフェクトに近い再現度を実現しています。コーディングはBEM命名規則を採用し、SCSSの変数やmixinを活用して構造を最適化。コンポーネント単位で管理することで、修正や拡張に強いコード設計としました。

レスポンシブ対応では、ブレークポイントごとにフォントサイズやレイアウト、タップ領域を調整し、モバイルからデスクトップまで快適に閲覧できる環境を提供。主要ブラウザ（Chrome / Safari / Edge）と複数デバイスでの表示検証を行い、互換性を確保しました。

WordPress化では、テーマファイルをゼロから構築し、カスタム投稿タイプやカスタムフィールドを用いて運用性を向上。お問い合わせフォームはContact Form 7をベースにカスタマイズし、サンクスページやバリデーションも実装しました。