![見出し画像](https://assets.st-note.com/production/uploads/images/36603681/rectangle_large_type_2_e764f709ed45c7eec8ebf287e6e8b64f.jpg?width=1200)
#038 久々にAwwwardsから!
こんにちは、webデザイナーのKIRIKOです。
今日も張り切ってwebサイト研究していきます!
今日もこちらの記事を参考に研究していきます。
今日は久しぶりにAwwwardsから!
「Boynton Yards」
シンプルなデザインで、文字の見せ方がカッコイイ!という印象です。
大人しめの色づかいだけども地味じゃないのも素敵です。
このフォント、遊び心もありつつシッカリ感が出てていいですね✨
☆リンク要素のルール
・ヘッダーリンクはホバーでOpacity
・コンテンツ内の下層リンクは、ホバーでbgと文字の色が入れ替わる
・画面右下に常時あるマスターボタン(?)はホバーでサイズが大きくなる
☆王道サイズ、形のセオリー
・ヘッダー75px
・フォントサイズは見出しは30px、文章は16px
・飾りとしての大きな文字は125p
☆コンテンツの横幅、グリッドのルール
・読ませたい文章は横幅600px前後
・最大2カラム
・レイアウトが一定ではなく動きがある!
kv(2カラム)→文章(左右の余白多め)→2カラム(写真と文章)→横幅いっぱいに写真→文章(左右の余白多め)
☆写真や図や比率のルール
・2カラム(写真と文章)で使われている写真は、画面縦幅いっぱい
・区切りとして使われている横幅いっぱいの写真は1800px X 1000pxの比率
☆レスポンシブの変化のセオリー
・基本は左が上、右が下
・中盤2カラムのエリア、写真が上で説明テキストが下
・ハンバーガーメニュー
☆配色のルール
・文字色は#333
☆読みやすい文字量
・Studio Fiexen Sansというフォント。
・英語なので割愛します…ただ、文章量が多いけれど、テキストエリアの横幅がpcで600px前後になっているので、視線の動きが少なくて読みやすい印象。
見やすくてスタイリッシュで、web特有のスクロールで色が変わるなどの工夫もあり、ぜひポートフォリオなどで真似したいデザインでした!!!笑
今日も最後までお読みいただきありがとうございました。