#031 久々にAwwwardsから〜！
こんにちは。Webサイト研究です！
Webデザインの勉強の一つとして、Webサイトのレビューではなく、細かく要素ごとに研究・考察しています。
今日もこちらの記事を参考にさせていただいて研究します！
今日は久々に、Awwwardsからチョイスしました！
最近タイポグラフィを勉強しているので、メインビジュアルにタイポが使われたこちらが目についたのかも笑
「Wide Eye」
https://wideeye.co/
クリエイティブエージェンシー（日本でいうとweb制作会社やデザイン会社に当たるかな？）ということですが、結構ソーシャルな活動してる団体のクライアントが多いのでしょうか〜
では研究していきます！
☆リンク要素のルール
・ナビはマウスオーバーで文字色が変わる＆下線が出てくる
・写真はマウスオーバーで塗りに変わる＆説明するテキストが出てくる
☆王道サイズ、形のセオリー
・グローバルナビは11px
・作品のタイトルは25px
・左右の余白40px
・セクションごとに背景色を分けてる（よくあるやつ）
白→薄いグレー→白→紫→白→黒
・画像はセクションの中に納めず、少しはみ出させてる（説明むずかし…）
→これもよくあるやつ、少しだけブロークングリッドのような感じ
☆薄い色は何色あるかをつかむ
・背景色で使われてる薄いグレーが1色
☆コンテンツの横幅、グリッドのルール
・作品のエリアは2カラム、2つの画像を上下にずらしてる
☆写真や図や比率のルール
・写真は縦長が多い
・2カラムの部分は横長の写真
☆レスポンシブの変化のセオリー
・全部1カラム
・左が上、右が下
☆配色のルール
・白、黒、ビビッドな紫色がメイン
・マウスオーバーや目立たせたい文字などポイントでビビッドなピンクが使われてる
・ピンクがあることで、クールになりすぎずにポップ感というか遊び心感が出る印象
☆読みやすい文字量
・読ませたい文字のフォントは「archia」
・英語なので文字量については割愛
このサイトの色使いというか全体の雰囲気とっても好きです(^ ^)マウスオーバーの感じとか、好み！
結構スタイリッシュな感じが好きなので、自分のポートフォリオサイトをこういう感じにリニューアルしようかと思ったくらい。笑
今日も最後までお読みいただきありがとうございました！