美容サロン向けWebサイト制作（デモサイト）

美容サロン向けのWebサイトを題材にした、実務テスト用のデモ案件です。
支給されたデザインカンプをもとに、PC／SP両方を意識したレスポンシブコーディングと、オリジナルテーマとしてのWordPress構築を行いました。実案件に近い条件で「デザイン再現性」と「実装の丁寧さ」が求められる内容です。

クライアントワークを想定した実務テストとして、以下の点が求められていました。

• デザインカンプを崩さずに、ピクセルパーフェクトで再現できるか
• 用意されたコーディングガイドライン（命名規則・コメント・ディレクトリ構成など）を正しく遵守できるか
• スマートフォンでの閲覧のみならず、いかなるブラウザサイズにおいても、余白・タイポグラフィ・コンポーネントのバランスを最適化できるか
• 将来的なコンテンツ追加やページ拡張を見据えた、WordPressテーマの構成になっているか

これらを限られた制作時間のなかでまとめ上げることが課題でした。

• Figmaで支給されたデザインカンプをもとに、HTML・CSS（SCSS）・JavaScriptで構築
• セクションごとにBEMベースのクラス設計を採用し、後からの修正・拡張を行いやすいマークアップに整理
• いかなる画面幅においても、レイアウト崩れが起きないように調整
• ヘッダーやボタン、セクションタイトルなど共通パーツをコンポーネント化し、WordPressテンプレートから再利用できる構造に設計
• トップページ用テンプレートを中心にオリジナルテーマとして実装し、管理画面からメニュー・テキスト・画像を更新しやすい構成に調整
• ボタンホバーやセクションのフェードインなど、世界観を損なわない範囲で指定されたアニメーションを実装

実務テストとして提出したのち、デザイン再現性・レスポンシブ対応・マークアップの整理度合いを評価いただきました。
実案件に近い条件で制作したデモとして、以降の提案やポートフォリオにおいても「美容系サイトのコーディング・WordPress構築ができる」ことを示す事例として活用しています。