美容室ホームページ制作
Challenge
■ 01 ローディングとMV遷移のタイミング制御
GSAPのTimelineは `window.addEventListener("load")` で発火させる必要があるが、動画（MP4）の読み込み完了タイミングとの兼ね合いで、ローディングが早期終了してしまう問題が発生した。動画の `canplaythrough` イベントとPageのloadイベントを `Promise.all` で統合し、両方が揃った時点でアニメーションを開始する実装で解決した。
■ 02 WordPressサブディレクトリへの組み込み
静的HTMLをWordPressのサブディレクトリに格納する際、相対パスの基準がずれてCSS・JS・画像が読み込めないケースが生じた。すべてのアセット参照をルート相対パスではなくHTMLファイルからの相対パスで統一し、htaccessの設定を調整することで解決した。
■ 03 SP対応とアニメーションのパフォーマンス
GSAP ScrollTriggerの `scrub` オプションはスマートフォンでフレームドロップが発生しやすい。`window.matchMedia` でSP/PC判定を行い、パララックス系アニメーションはPC限定で発火させる設計にした。また、動画のautoplayはiOSでは `muted` と `playsinline` の両属性が必須であることを対応に含めた。
Overview
千葉市中央区に構える美容室「HANA」のホームページ制作案件。クライアントはこれまでホットペッパービューティーのみで集客しており、独自のブランドイメージを発信できるWebサイトを持っていなかった。フリーランスのWebデザイナーとして初めて受注した美容室案件であり、デザインから実装・WordPressへの組み込みまでを一人で担当した。
Design Note
クライアントのキーワードは「静けさ」「丁寧さ」「素材を活かす」。派手な装飾や過剰な情報量を避け、余白と縦書きタイポグラフィで「上質な時間」を体感できるデザインを目指した。
■ カラー設計
ベースはオフホワイト（#faf8f5）でナチュラルな温かみを演出。アクセントカラーはくすんだゴールドベージュ（#b89c7a）とし、高級感を主張しすぎず品のある印象に整えた。ダークトーン（#1a1815）はローディング画面とフッターのみに限定し、コントラストの緩急でメリハリをつけた。
■ タイポグラフィ
英語見出しには Cormorant Garamond（セリフ体）を採用。細いウェイトと長体プロポーションが、余白の多いレイアウトに自然と溶け込む。日本語には Noto Serif JP を使い、明朝体の縦書きキャッチコピーでMVに和の静謐さを加えた。ナビゲーションやラベルには Josefin Sans（100〜300）を用いて、軽やかさと視認性を両立させた。
■ アニメーション設計
参考サイト millor.jp のローディング演出を研究し、GSAPのTimelineで「文字出現 → パネル分割退場 → MV出現」という3段階のシーケンスを構築。スクロールアニメーションはSP（スマートフォン）でのパフォーマンスを考慮し、パララックス系はPC限定で動作させるよう条件分岐を設けた。
Result
本案件を通じて、静的HTMLとWordPressの共存構成・GSAPによる高品質アニメーション実装・SP/PC分岐設計といったスキルを実務レベルで習得した。千
制作のご相談・お見積りはお気軽にどうぞ。
お問い合わせ