#19 シンプルで抜け感のあるWebサイト、そしてFUTURA最高!

今日は「SANKOU!」さん　https://sankoudesign.com/　から選んだWebサイトです。

関西エリアの工務店さんのWebサイト。
「ミニマル」という言葉が浮かんでくるようなWebサイトですね。
最近サイトをリニューアルされたそうなので、ブランディングが入ったのでしょうか。
おしゃれな家を建ててくれそうー！と思いますね！！


では今日も勉強！

☆リンク要素のルール
・マウスオーバーで写真は拡大、ナビには下線、more系ボタンは塗り色が変わる。
　→マウスオーバーの実装がどれもイマドキっぽい！


☆王道サイズ、形のセオリー
・見出しは24px
・文章は11〜12px
・ナビは16px
・セクション間は160px


☆薄い色は何色あるかをつかむ
・下線や小見出しに使われるグレー１種類


☆コンテンツの横幅、グリッドのルール
・最大3カラム
・Works部分は2カラムで左右に上下のズレを作ってる
→その他の部分は綺麗に揃っているので、ブロークングリッドが目立ちやすく、抜け感が出る


☆写真や図や比率のルール
・コンセプトの部分は全面写真だはその他は左右に余白あり。
・サービス内容ごとの写真は横長で、コンテンツによって幅がちがう


☆レスポンシブの変化のセオリー
・基本の左が下、右が上
・ヘッダーは上下に15px
・セクション間は80px


☆配色のルール
・写真には木の素材が使われていて、温かみのあるイメージ。
・茶色系の色が多く使われている。


☆読みやすい文字量
・文字間、行間広め
・100字くらいある
　→文字間、行間広いと読みやすい
・FUTURA！


全体的に今時な雰囲気、という印象でした。
ブロークングリッドを使う際は、他をきちんと揃えないと目立たないですね。勉強になりました！

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

#webサイト #webサイト研究 #webデザイナー