#03 イケてるWebサイト研究「STUDIO HAS」

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

「STUDIO HAS」
https://studio-has.jp

夕焼けや川など自然の写真から、静かに音が聞こえてきそうだなと感じました。美しいメインビジュアルの写真と、細めのフォントで余白たっぷりの、上品なイメージのサイトで、魅せられました・・・！

☆リンク要素のルール
・写真があるリンクタグはカーソルを合わせると動きがある


☆王道サイズ、形のセオリー
・ヘッダーは120px
・見出し文字は40px、説明文などは10~14px
・ジャンプ率たかい！


☆薄い色は何色あるかをつかむ
・使われている線が細くて上品な印象（黒じゃなくてグレー #eee ）
・グレーが2種類！


☆コンテンツの横幅、グリッドのルール
・コンテンツごとのつくり（？）がちがう、枠があるエリア、ないエリア、背景画像がついているエリア、など・・・
単調な印象にならなくて良い！間違えるとユーザー側は情報が混乱しそうなのに、情報はまとまって見やすい。なんでだろう・・・
→文字のジャンプ率が高いことで、グループだと理解しやすくなっている？

・横の比率２：３くらいで構成していて、動きがある印象


☆写真や図や比率のルール
・249x175と384x230の2種類、微妙に違うけどなぜ同じにしないのかな？？
→ちがう情報だとわかるように？
・メインビジュアルの写真を背景画像にしてパララックスみたいになってる！


☆レスポンシブの変化のセオリー
・モバイル時もフォントサイズは同じ


☆配色のルール
・写真が綺麗、メインは比較的彩度の高い夕焼けの綺麗な写真
・そのほかの写真は彩度の低い色、ベージュや茶系など
・文字や背景の色はモノトーン

☆読みやすい文字量
・コンテンツごとの見出しは10文字以内、文章は30文字以内くらい



リンク要素にボタンがないことが多いですが、動きをつけることでリンク要素だとわかりやすいことを知りました。

前回のサイトもですし、この方法は色々なサイトが使っているやり方だということを知りました～！