#22 高級感あふれる、有名ホテルのWebサイト

こんにちは(^ ^)
今日もWebサイト研究していきます！
今日は「SANKOU!」さん https://sankoudesign.com/ から選びました。


「フォーシーズンズホテル　レジデンス京都」
https://www.nomu.com/pro/fourseasons-kyoto/

昨年より5ヶ月間ほど必死で勉強し、今年の4月からwebデザイナーとして働き始めています！
仕事ではホテルや高級物件などのクライアントさんが多くいるため、「高級感」「上質な」という雰囲気を作れるようにしなければならないのですが…それがなかなか難しいです😱

なので、しばらくは高級感のあるWebサイトを中心に研究していこうと思っています🌟

こちらは有名なフォーシーズンズのレジデンスホテル！しかも京都！
にしてもすごいですね超高級物件…ゼロがたくさんあっていくらなのか分からないくらい…😅

今コロナ騒動で大混乱な世の中ですが、これ乗り超えて平和になって、また京都に行きたいなあと願ってます☺️

では研究していきます！


☆王道サイズ、形のセオリー
・見出しは32px
・テキストは17〜18px
・ボタンは700x54で大きめ、目立つ！


☆リンク要素のルール
・「お問い合わせはこちら」のボタンは四角でとがってる、フラット
・その他ナビ系は下線


☆薄い色は何色あるかをつかむ
・コンテンツごとの区切りははっきりした黒
・テーブルの部分には区切り線は薄いグレー


☆コンテンツの横幅、グリッドのルール
・1カラムで室内の写真はスライド
・京都周辺の写真は2カラム
・メインコンテンツ1000pxにしてサイドの余白広め

☆写真や図や比率のルール
・1カラムの時は横長の写真
・2カラムの時は正方形に近い横長の写真


☆レスポンシブの変化のセオリー
・全部1カラムになる
・pcで1カラムだった所の写真は、全面
・2カラムだった所の写真は、サイドに余白あり
・左が上になって、右が下になる基本ルール


☆配色のルール
・少し色を落とした黒背景に白文字
・明朝体
・ボタンやスライドショーの丸などはゴールドにも見える黄土色


☆読みやすい文字量
・見出しは20文字程度までなら読みやすい


ワイヤーフレームが想像しやすいというか、かなりシンプルな構成担っているようですね。

・明朝体
・黒背景に白文字、アクセントに黄土色というかゴールドっぽい色
・サイドの余白広め
などが高級感を出しているかな？と思いました！

こちらのサイトの場合、やはり写真が高級感占めていますね笑

あと思ったのは、ホテルも併設？兼ね備えてる？ようで、ホテルやスパ、ジムなどのページにも飛べるみたいで、何も知らずに見ているとシステムがよく分からず一瞬混乱するので、その辺の説明もあるとユーザーが迷いづらくなるかな？と思いました。

最後までお読みいただきありがとうございました！
#webデザイナー #webサイト #webサイト研究