No.1 【公式】浮月楼 徳川慶喜公屋敷跡 静岡の料亭・結婚式場
URL
制作会社
第一印象
黒ベースに金の配色で高級そうな感じ。
ゆったりとしたアニメーションで優雅さのようなものも演出している？
文字の大きさでなく、カラーのトーンで強弱をつけている。
急な「婚礼」の中央揃えが特別感を感じさせる。
ターゲット
会食や結納・顔合わせ・お食い初めなど格式のある行事を計画している幹事。
結婚式を計画している夫婦や家族
使用フォント
メイン…ryo-display-plusn
サブ…source-han-sans-japanese
英語…philosopher
配色
①ベースカラー：Black（#231f1f?）
②メインカラー：White（#eeebe8?）
③アクセントカラー：Gold（rgba(153,129,34,.7);）
サイト構成
トップページ
浮月楼とは
婚礼
お食事・施設
お知らせ
アクセス
予約・お問合せ
トップページ構成
ヘッダー・グローバルナビゲーション
About（ナビゲーション）
浮月楼について
歴史について
施設一覧
浮月楼とは
コロナ対策についての取り組み
News(ナビゲーション)
ピックアップニュース
お知らせ（すべて・ご案内・レストラン・婚礼・料亭）
お食事・施設（ナビゲーション）
料亭浮月
レストラン
浮月花寮
婚礼（ナビゲーション）
SNSリンク
ご予約・お問合せ
フッダー
グローバルナビゲーション
コンタクト
デザインポイント
配色
ダークトーンで統一されていて、格式の高さや高級感を演出している。
黄色の彩度を下げて金の代替にしているが、コッテリとせず、トーンが落ち着いており、和のテイストも同時に取り入れられている。
全体的に暗い色使いだが、白が散りばめられている（文字やアイコン、線）ことでネガティブな印象を感じさせない。
メインビジュアル
４枚構成で、日の丸、3分割、水平線、三角とそれぞれ異なる構図を用いていて、見た目で映えている。
スライド切り替え時の軽いフラッシュが高級感を感じさせる。
ハンバーガーメニュー
59✖︎59のサイズ。
ホバーで一本になるアニメーション。
全ての画面サイズに配置。SPでは画面右下に配置することで、親指での操作性を高めている。
開くと文字が下から浮かび上がるアニメーション。
装飾
ゆったりとしたアニメーションで落ち着きとエレガントさを表現。
線が極めて細い。チープな印象が全くない。
端に行くにつれて細くなる線も使われている。
全UIにアニメーションが実装されており、クリックできるところとそうでないところがわかりやすい。操作性がたかい。
カーソルを合わせると写真を表示させるアニメーション
→全ての写真のクオリティが高く、高級感を感じさせる写真を使っているため、高級感や 格式の高さを演出している。
実装ポイント
片側に操作ボタンを配置するスライド。両サイドにボタンがあるちゃちさが消え、サイトの印象を保ったまま、操作性も維持している。
背景で文字が流れるエフェクト→Jqueryを使用？
ホバーエフェクト
全体的に左から右に伸びるラインエフェクトを使用。
→Affter要素にhoverでWidthを0→100？
ボタンは色が反転＆サイズが小さくなる。
transform : translate(-50%, -50%) scale(.95,.95);
transition: all .5s cubic-bezier(.26, .06,0,1)
この記事が気に入ったらサポートをしてみませんか？