#1日1サイトレビュー【055】熊本のおしゃれなアパートメントホテル【YOUR ROOM】さん

YOUR ROOM

今日は色合いが素敵なサイトを観察してみました🥰
こんなところに泊まってみたーい！！
賃貸の物件もおしゃれでした。

【概要】
アパートメントホテルのwebサイト

【ターゲット】
20～30代。
インスタ映えするものや、おしゃれなもの・空間が好きな方。

【目的】
認知度アップ→予約につなげる

【印象】
ポップ、ラフ、楽しそう

【ファーストビュー】

・背景の黄色のオブジェクトが印象的。明るく楽しい雰囲気にしている。ちょっと動く。

・キャッチコピーの文字の位置を一文字ずつ上下にずらしている。ウキウキしてるような楽し気な雰囲気。

・ロゴに青色と黄色が入っている。これらの色をメインカラーにしている。

・画像の周りに白枠がついていてチェキ風。また、画像の右側に「＃テキスト」がくっついている。インスタ等SNS投稿を意識されていると思う。

・右下の丸いオブジェクトをクリックすると部屋詳細、予約などできるページにつながる。マウスホバーすると周りの丸い線がクルッと回るので目立つ。

【コンテンツ】

・画像の配置が最初ランダムに見えて、正直言語化を諦めたくなった。
でもよくよく見てみると、ジグザグしたような流れを感じる？
視線誘導（Z型）を意識しているのかなと思いました。

・「例えばこんな使い方」のセクションでは、左右の画像をクリックすることで画像を横スクロールできる。
黄色のフチは、カメラのピントマークのように見える。

・部屋タイプのボックスごとに左右交互に配置。

・ボタンの角はborder-radius: 5px;が効いていて、控えめな角丸になっている。写真は角丸になっていないので、親和性を高めるためかなと思った。

・「賃貸物件」のセクションは背景画像がぼやけている。ぼやけているので、どんな物件があるんだろう？と興味がわく。

・ボタン、ブログ記事にマウスホバーすると右上が青、左上が黄色の枠がつく。統一させていた。

【カラー】
青色と黄色は反対色の関係。お互いの色を引き立てている。
なんとなく北欧の雰囲気もある。（家具の雰囲気も北欧っぽさがある）

ベースカラー：白、グレー
メインカラー：青、黄色
文字：黒

【フォント】

■英字
museo-sans, sans-serif;

丸っこいかわいいサンセリフ体。

■日本語
游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Open Sans", osaka, Arial, Verdana, sans-serif;

font-weightは700でwindows、クローム環境での視認性も問題なし。

【レスポンシブ】
・ナビゲーションメニューはハンバーガーメニューでまとめられている。

・予約ボタンはハンバーガーメニューに入っていた。なぜかお問い合わせに飛ぶ箇所が二つある。
ハンバーガーメニュー内の幅は、インナーに左右のマージンをつけ、中央揃えにすることで余白をつけていた。ボタンは幅100％で指定することでメニュータイトルとボタンを整列させている。

・PCのほうでは画像を多めに使っていた。レスポンシブでは使う画像を厳選し枚数は少なくなっていた。