#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特有のスクロールで色が変わるなどの工夫もあり、ぜひポートフォリオなどで真似したいデザインでした！！！笑
今日も最後までお読みいただきありがとうございました。