hair&beauty LoKaHi様

概要

兵庫県尼崎市の美容室「hair&beauty LoKaHi」のWebサイトを制作しました。オーナーさまがご多忙なため、「時間をかけてゆっくり作りたい」というご要望に合わせ、LINEでこまめにやり取りしながら約2ヶ月かけて進めました。

コーディングはAI（Claude）を主体に行い、要件整理・実装指示・外部サービスの設定・最終確認を担当しています。お知らせ・スタイルギャラリー・お客様の声はmicroCMSで管理し、オーナーさまご自身で更新できる構成にしました。

サイト内の画像は、スタイル写真はオーナーさまからご提供いただいたものを使用し、一部の画像はご提供の内観写真をもとにAIで生成しています。

工夫したポイント

• 表示速度の改善：日本語Webフォントを next/font で読み込んだ際、文字数の多さから482個ものpreloadタグが発生し、LCPが11秒を超えていました。preload: false の指定で解消し、あわせて画像の sizes 未指定による過大な画像配信も修正しました
• スクロール演出：トップの「Stylist」セクションに、clip-path の楕円で目が開くように表示されるアニメーションと、中身のぼかし・フェードの演出をオリジナルで実装。他のセクションでも使えるよう共通のアニメーションクラスにしています
• サーバー移行：既存サイト（Xserver）からNetlifyへ移行し、メールはXserverに残す構成にしました。切り替え時に発生したメールの不具合は、MXレコードがApexドメインのAレコードに依存していたことが原因と特定し、明示的なホスト名指定に修正して解決しました
• 集客のための計測設定：既存のGA4アカウントにGoogle タグ マネージャーで、電話タップ・予約クリック・地図クリック・フォーム送信のコンバージョン計測を追加しました
• 検索対策：構造化データ（JSON-LD／BeautySalon）を設定し、Googleのリッチリザルトテストで有効になることを確認しました
• AIとの進め方：AIの判断が画面の見た目だけに頼りがちな箇所（画像の取り違えなど）は、スクリーンショットで実データを確認しながら進め、品質を担保しました

担当範囲

要件整理、AIへの実装指示、外部サービス（Netlify・GA4・Google タグ マネージャー・reCAPTCHA・microCMS）のアカウント設定、ドメイン・サーバー移行、動作確認・最終チェックを担当しました。

使用技術

フレームワーク

• Next.js 16（App Router）
• SCSS（BEM設計）

外部サービス連携

• microCMS — お知らせ・スタイルギャラリー・お客様の声の管理
• Netlify — ホスティング・独自ドメイン設定（netlify.app から独自ドメインへのリダイレクト）
• Google タグ マネージャー / GA4 — アクセス解析・コンバージョン計測
• reCAPTCHA v3 — お問い合わせフォームのスパム対策（サーバー側でのスコア判定）
• Resend — 専用サブドメイン経由でのフォーム通知メール送信

制作環境・開発支援

• Claude（コーディング）
• Claude in Chrome（GTM・GA4の管理画面の設定作業）