#10 写真の見せ方が勉強になったダンディなサイト

こんにちは。前回から少し間が空いてしまいました…汗
張り切って研究します！

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

今日はこちらのギャラリーサイトさん「S5-Style」 https://bm.s5-style.com/ からです。

「アールドットサーファー」
https://rsurfer.com/

サーファーのための、スーツやネクタイなどのブランドのようです。つい昨年末に、ブランドコンセプトやWebサイトのリニューアルをされたとのことで、ブランディング会社等が入ったのでしょうか！
モノトーンで写真を見せる感じのサイトですね。かっこいいです！同じモノトーンでも、色の割合やフォントで印象が全然変わりますね！
男性ターゲットのWebサイトを制作したことがないので、今日はこちらを研究したいと思います。


☆リンク要素のルール
・カーソルを載せると文字に下線or写真が動いて少しアップになる
・Read MoreやShop Nowは、ボタンではなく写真にカーソルを載せると出る！
　→この方法は、今日のサイトのように極力シンプルに、色もあまり使わないようなサイトにはちょうどいいかも！
・リンク要素でドロップシャドウが使われているところはなさそう…全部フラット


☆王道サイズ、形のセオリー
・ヘッダーの高さは90px
・ヘッダーの文字は14px
・題名？ブランドコンセプト？（おそらくh1）は130px
・小見出し（おそらくh2）は70px


☆コンテンツの横幅、グリッドのルール
・１カラムと、６：４くらいの２カラム、４.５：５.５くらいの２カラムがある
　→上から下まで同じグリッドルールにしないことで、単調にならないサイトになってる気がする
・スクロールするとコンテンツが横からふわっと現れるやつになってる


☆写真や図や比率のルール
・色のついた写真の中で白黒の写真があれば目立つし、逆もあり。
・新着商品の欄、なんで少しずらして、商品写真を見えなくさせてるんだろう…
　→矢印のボタンは隅っこにあって小さいけど、スクロールする場所だということが一目でわかる！→「ユーザビリティ」というもの？


☆レスポンシブの変化のセオリー
・１カラムになる
・マージンなく、写真は基本全面。新着商品やニュースなどの写真は２カラムでマージンあり。
・題名？ブランドコンセプト？（おそらくh1）は130pxから93pxへ
・小見出し（おそらくh2）は70pxから43pxへ


☆配色のルール
・写真の上に重なってる文字は白、そうでない場合は黒
・白黒以外には、青系の商品の写真あり。


☆読みやすい文字量
・キャッチコピー的な文字や15文字程度
・ヘッダーも、見出しも、英語。確かに英語にするだけでなぜかかっこいいけど、英語嫌いな人とか英語アレルギーの人とか、下層ページ飛んでくれないんじゃないかとかいうことは、あまり考えなくてもいいことなのかな…？ターゲット層は３０代くらいまでという感じ？


クールでダンディな写真の男性たちの雰囲気にあったWebサイトでした。
余白超大事だと思って制作してきましたが、たくさん写真を見せたい時は、余白なしで全面にするのもクールですね(^ ^)でもその時こそトンマナ命ですね！！！

最後までお読みいただきありがとうございました。


＃webデザイン #webデザイナー #Webサイト