#13 今日はCSS Awardから(^^)/

おはようございます！今日もWebサイト研究していきます(^ ^)

今日もこちらの記事を参考にさせていただいて、Webサイト研究します。
https://note.com/arasunatomoyuki/n/nbe9189dfb926

前回Awwwardsからだったので、今日はCSS Design Award  https://www.cssdesignawards.com/ から選んでみました！



「Hotel Capolagala 」
https://www.hotelcapolagala.com/

このwebサイト研究は、書いたらTwitterの方でも発信しています。発信することで、続けられる効果もあるので！
それで私は英語もずっと勉強していて、今日からTwitterで、その日読んだ英字新聞の記事もシェアすることにしました。今日はイタリアのコロナ対策についてのBBC Newsの記事をシェアしたので、関連してイタリアのホテルのwebサイトを選びました★（なんと長い前置き！）

こちらのサイトは絶景の写真がもちろん美しくて、それを引き立てるような、写真や文字たちの滑らかな動きが素敵だと思いました。最近制作しているwebサイトで、動きをつけようとした際にレパートリーが少なかったので、こちら参考になりました！

では装飾の研究いきます！


☆リンク要素のルール
・下線が引いてあるリンクにカーソルを乗せると、下線が動いてボックスになる。
・ドロワーメニューのリンクにカーソルを乗せると色が変わる


☆王道サイズ、形のセオリー
・見出しは40px、文章の文字は16px
・見出しはセリフ、文章はサンセリフ
・セクションごとに、余白は左右交互に作っている
　　→単調にならない！
・見出しの書き方色々。太い下線が重ねてある、画像内に配置、下線などはなし、とか・・・
・メインビジュアル以下は、ドロワーメニューのボタンとロゴがfixed


☆コンテンツの横幅、グリッドのルール
・だいたい2カラム、半分写真、半分見出しと文字が基本
・そこに、more系リンクをずらす、写真に重ねる、写真を二枚ずらして重ねる、写真を塗り四角で囲うなど

☆写真や図や比率のルール
・写真は左右交互に配置
・正方形に近い写真と、横長の写真が多く使われてる


☆レスポンシブの変化のセオリー
・基本上が左、下が右
・見出しは28px、文章の文字サイズはそのまま
・ヘッダーの高さ50px


☆配色のルール
・文字は黒に近いこげ茶
・アクセントの文字と、more系のリンクの下線に朱色
・下線や写真を加工背景色に薄いベージュ
・写真には海の青がたくさん使われてる


☆読みやすい文字量
・英語なので割愛します


☆動きについて
・スクロールすると見出しや写真がゆっくり上に動く
・文章は動かない
・メインビジュアル以下に来ると、ドロワーメニューがボックスになる
・見出しが横から出てくるものもある


使われている朱色とベージュのセレクトがさすがと思いました。この朱色、海のきれいな青とよく合いますね！リゾートだと、青と白の組み合わせをよく見かけますが、朱色とベージュで、暖かみある印象になる気がします。

そして、メインビジュアルのプール？海？の波が横に動いていて、スクロールするとコンテンツが縦に動きがゆっくり動いて、リゾートの穏やかなゆったりしたイメージが伝わるかな？と思いました。

今日も最後までお読みいただきありがとうございました!(^^)!

#webサイト #webデザイナー #webデザイン #イタリア
#CssDesignAward