![見出し画像](https://assets.st-note.com/production/uploads/images/22051465/rectangle_large_type_2_9a433dab530f7714c5cc48c9ec601268.jpg?width=1200)
#19 シンプルで抜け感のあるWebサイト、そしてFUTURA最高!
今日は「SANKOU!」さん https://sankoudesign.com/ から選んだWebサイトです。
関西エリアの工務店さんのWebサイト。
「ミニマル」という言葉が浮かんでくるようなWebサイトですね。
最近サイトをリニューアルされたそうなので、ブランディングが入ったのでしょうか。
おしゃれな家を建ててくれそうー!と思いますね!!
では今日も勉強!
☆リンク要素のルール
・マウスオーバーで写真は拡大、ナビには下線、more系ボタンは塗り色が変わる。
→マウスオーバーの実装がどれもイマドキっぽい!
☆王道サイズ、形のセオリー
・見出しは24px
・文章は11〜12px
・ナビは16px
・セクション間は160px
☆薄い色は何色あるかをつかむ
・下線や小見出しに使われるグレー1種類
☆コンテンツの横幅、グリッドのルール
・最大3カラム
・Works部分は2カラムで左右に上下のズレを作ってる
→その他の部分は綺麗に揃っているので、ブロークングリッドが目立ちやすく、抜け感が出る
☆写真や図や比率のルール
・コンセプトの部分は全面写真だはその他は左右に余白あり。
・サービス内容ごとの写真は横長で、コンテンツによって幅がちがう
☆レスポンシブの変化のセオリー
・基本の左が下、右が上
・ヘッダーは上下に15px
・セクション間は80px
☆配色のルール
・写真には木の素材が使われていて、温かみのあるイメージ。
・茶色系の色が多く使われている。
☆読みやすい文字量
・文字間、行間広め
・100字くらいある
→文字間、行間広いと読みやすい
・FUTURA!
全体的に今時な雰囲気、という印象でした。
ブロークングリッドを使う際は、他をきちんと揃えないと目立たないですね。勉強になりました!
最後までお読みいただきありがとうございました!
#webサイト #webサイト研究 #webデザイナー