実際のサイト: https://lumiere-lp.yusandesignworks.workers.dev 30〜50代のハイエンド層をターゲットとした美容サロンの架空ブランドサイトをデザイン・実装しました。 パリのメゾンのような洗練さと、心身が解き放たれるようなクリーンな世界観を構築しました。 1. デザインコンセプト 「タイムレス・エレガンスと光の表現」 単なる美容施術の紹介に留まらず、サロンに足を踏み入れた瞬間の空気感や、施術後に肌が輝きを取り戻す「光」の体験をデザインに落とし込みました。 カラーパレット: 温かみのあるオフホワイトをベースに、肌の血色感や幸福感を象徴するローズゴールドと、品格を添えるシャンパンベージュを採用。コントラストを抑えることで、視覚的なリラックス効果を狙っています。 タイポグラフィ: 伝統と格式を感じさせる「Playfair Display」と、繊細で誠実な印象を与える「Noto Serif JP」を組み合わせました。明朝体特有の「はらい」の美しさを活かし、高級感を演出しています。 2. レイアウトのこだわり 高級感を定義するのは「情報の密度」ではなく「余白の贅沢さ」であると考え、以下の設計を徹底しました。 120px以上のセクション余白: 各コンテンツ間に広大な余白を設けることで、ユーザーの視線に「間」を作り、一つひとつのメッセージを深く届ける設計にしました。 エディトリアル・スタイル: 写真とテキストをあえて重ねたり、グリッドからわずかに外して配置することで、カタログのような上質なリズムを生み出しています。 ミニマリズムの追求: 過度な装飾を排し、境界線ではなく「光（グラデーションや余白）」でセクションを区切ることで、ブランド名である「LUMIERE（光）」を体現しました。 3. インタラクションとユーザー体験 呼吸するようなアニメーション: スクロールに応じて静かに浮かび上がるフェードインや、背景画像がわずかに動くパララックスを実装。サロンのゆったりとした時間軸をWeb上でも再現しました。 マイクロインタラクション: ホバー時の色変化やボタンの挙動をあえて「ゆっくり」と設定し、動作のひとつひとつに優雅さを持たせています。 使用技術・ツール Photoshop・Claude Code 実際のページはこちら https://lumiere-lp.yusandesignworks.workers.dev