24.南阿蘇温泉郷別邸蘇庵 サイトレビュー
熊本県にある旅館のWEBサイト。上品さと使いやすさのバランスが調度良いサイトと感じました。メインビジュアルで使用されている写真はとても美しく、うっとりしてしまいました。いつか行ってみたい旅館です。
目的
・旅館を予約してもらう
・行ってみたいと好感を持ってもらう
ターゲット
・南阿蘇温泉郷の旅館を探している人
・美味しい料理が出てくる旅館に泊まりたい人
印象
上品、綺麗、落ち着いた、安らぎ
キャッチコピー
五感で感じる南阿蘇
特徴
余白
縦11.45833% 。余白は狭い印象。少ないスクロールで、コンテンツがすいすい見られるところが便利。
配色
#161616 ベースカラー 淡い黒
#757737 メインカラー 鶯色
#f2f2f2 文字色 白
背景は淡い黒を使用しており、柔らかですが高級な雰囲気があります。メインカラーは鶯色で、重要度が高いボタンやあしらいに、ポイントで使われています。文字色の白も#FFFFFFではなく、少し灰色がかった色を使用しています。上品な配色だと感じました。
フォント
"Noto Serif JP" 日本語
"Cormorant Garamond" 英語 GoogleFontsから使用可
letter-spancing:0.15em(本文)
"Cormorant Garamond"
非常にエレガントな印象の書体。Rの形が特徴的で素敵です。優美な印象が旅館の雰囲気を表すのにぴったりだと感じました。
メインビジュアル
メインビジュアルの写真は、画面いっぱいに表示されるタイプ。世界観に入り込み安いです。
ヘッダーが右上にあり、縦書きなところが特徴的。お品書きみたいです。一度に選択肢が全てわかり、ハンバーガーメニューのように開かなくても表示できるところが嬉しいです。宿泊予約もわかりやすいです。
予約とバナー
予約やバナーが最初に表示されるところが宿泊サイトの特徴の一つです。(初めに表示しないサイトもあります)
旅館のサイトは旅館の魅力を伝えるだけではなく、予約の役割も大切だと思うので、ビジュアルの美しさと便利さの両立ができているこのサイトはすごく勉強になります。
バナーも一つ一つ丁寧に作られていることが伝わります。バナーの大きさは小さいのに、文字が潰れないのがすごいですよね。横に移動するタイプのバナーですが、移動するスピードが早くすいすい見られるところも嬉しいです。
気づいたポイント
・メインビジュアルのヘッダーが縦書きで情緒がある。他にもタイトルの日本語やお料理の説明文などで縦書きが使われている。
→日本を表すようなサイトでポイント使いすると魅力的。
・ボタンに青海波文様が使われている。また和紙のようなテクスチャが使われていて、シンプルだが雰囲気が出ている。ボタンをホバーすると棒が移動する動作も優雅で素敵。
・写真に抑揚があり、コンテンツが一つの箱に収まるように配置されていて、バランスがとても良い。コンテンツごとに配置が違うのに、バランス感覚が絶妙ですごく魅力的だと感じた。
・CUISINE-お料理 のコンテンツでは、コンテンツ幅に囚われず写真を大きく配置していて、インパクトがある。他のコンテンツは全て左右に余白があるが、このコンテンツでは写真がはみ出している。
→インパクトを与えたい時にはコンテンツ幅をはみ出して表示してもよい。
・背景に青海波文様や旅館のロゴが使用されている。決して目立つわけではないが、あるとクオリティがとても高く見える。
・スクロール後のヘッダーでは、左上に大きめに電話番号が記載してあり、わかりやすい。またヘッダーに和紙のテクスチャが使われているため、より旅館の雰囲気が感じられる。
感想
今回このサイトをレビューしてみて、レビュー前より多くの工夫が感じられて、より好きなサイトになりました^^特にすごいと感じたのは、コンテンツの不規則な配置で、制作した方のセンスがすごい!と驚きました。私もこんな魅力的なサイトが作れるようになるよう、日々精進していきたいと思います！
この記事が気に入ったらサポートをしてみませんか？