#18 日本らしい＆高級感のあるホテルのサイト

お久しぶりの研究ブログです！

異業種・未経験からwebデザインの勉強を始めて約5か月たちました。
webデザイナーとしての内定をいただき、不動産ベンチャーの会社様の制作部門で、4月から働くことになりました！

勉強方法や就活についてなどは、備忘録として早めにまとめて記事にしたいと思っています!(^^)!



では研究ブログへ！
今日も「Muuuuu.org」さん http://muuuuu.org/ から選びました。

「Hotel Okura Tokyo」
https://theokuratokyo.jp/

不動産やホテルの案件が多いので、今日はホテルのwebサイトを選びました！
高級感のある、日本の美しさが伝わるwebサイトだと思いました👏

去年ランチしに伺ってレストランとロビーには入りましたが、webサイトの雰囲気と変わらないなーと！
webサイトって実物よりも良く見せることもできるし、逆に実物の良さが伝わってなくてもったいないとなることもあるし。
でもこちらのサイトは、実物のすばらしさをきちんとそのまま伝えていて、勉強になる！と思いました✨


☆リンク要素のルール
・グローバルナビやフッターのリンクはマウスオーバーで色が変わる
・メインにあるリンクには矢印マークがついてる＆マウスオーバーで文字色が変わる／線が出てくる／写真が拡大する


☆王道サイズ、形のセオリー
・見出し36px
・文章やリンクは12～14px
・矢印マークは3種類


☆薄い色は何色あるかをつかむ
・2種類？ボーダーの色と、小見出しの色


☆コンテンツの横幅、グリッドのルール
・ニュースは3カラム
・メイン部分は3：7くらいの2カラム
・予約サイトは1カラム


☆写真や図や比率のルール
・写真サイズは2種類！
・ニュースの写真と、メイン部分の横幅7割くらいを占める大きな写真


☆レスポンシブの変化のセオリー
・ニュース部分は3カラムから1.5カラム（わかりますか・・・汗）
　→記事半分途切れていて、続きがあるとわかるようになっている構成
　→ニュース部分は左寄りで左側の余白は58px
・メイン部分の2カラムは1カラムへ。写真が先、文字が後。写真に見出し文字が重なるようになっている


☆配色のルール
・トップページの写真は彩度の低いオレンジ？黄金色？黄土色？がよく使われてる
・目的ごとに違う色が使われてて、彩度低めで和柄な背景。文字色は白
・ヘッダーフッターは背景が黒、文字色が白
・予約部分は背景がベージュで、文字色が黒


☆読みやすい文字量
・情報量が多いので、わかりやすく目的別にグルーピングされてる
・目的の「宿泊」「結婚式」など短く2～3文字で書かれている
・かつ左上に書かれている
・説明文とのサイズのジャンプ率が大きい



ホテルのサイトってコーポレートサイトのように情報量が多くて、予約フォームもあって、難しいですね・・・！
ホテルのサイトって、検索でたどり着くよりは目的をもって訪れることが多いと思うので、「宿泊」「結婚式」など目的別にわかりやすく誘導する必要がありますね。

トップページはブロークングリッドは全く使わず整列・グルーピングがきちんとされていますが、下層ページに行くとブロークングリッドでストーリー性のあるページになっていますね！

UI/UXの勉強をする必要があると感じました！
明後日から勤務開始なので急がなければ！UI/UXの勉強、おすすめの本や記事などあればぜひ教えてください☆

最後までお読みいただきありがとうございました！

#webデザイン #webサイト研究 #webデザイナー #駆け出しwebデザイナー