見出し画像

#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


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


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


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


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


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


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

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


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