西野建設工業株式会社

●建設業
●白、少し青っぽい黄緑、黒、グレー。明るくて、少しかわいい印象。
●どちらかというと女性向けな感じがするけど、、、
●メインビジュアル→NEWS→事業内容→採用情報→施工事例→お問い合わせ

感じたこと

・ヘッダーが縦書き。キャッチコピーも縦書き。
→一般的ではないから目立つ。縦に大きく幅をとってるぶん見やすいかも、、、？
・ターコイズっぽい色とか、ボタンの角が丸くなってたりとかから、女性向けなのかなと感じた。
・採用情報って最後に来ることが多いけど、施工事例より前にきてる&
バナーとかでもなく、写真を三枚も使って目立っている。
→採用情報に力をいれている
・背景に大きな英字！
・TOPへ戻るボタンとか、カーソルあわせるとくるくるまわる！
・ボタンのデザインとロゴのデザインがリンクしてる！！

レイアウトトレースして気づいたこと

・アクセントカラーのターコイズ？色は、
ボタン、横線とかのちょっとした装飾、「文字のhover時の色」、とかに使われてる。
・ボタンはhoverすると、明るくなる
【header】
・縦書きのnav
→余白が必要！メインビジュアルを下げて、左上に重ねる形でキャッチフレーズ
→右上に余白がうまれる
・ナビゲーションの左の余白：margin-left:8.5%
navの右の余白：margin-right:10%
【News】
・newsの部分のコーディング
[width: calc(100% - 200px - 50px);]
→#contentのwidthを常に幅いっぱい100%から#sidebarのwidth（200px）と間の余白（50px）の固定分を除いた値にするってこと。
【Business】
・Businessの部分、写真が画面の半分まであって縦も右の文章よりも大きくて、迫力がある
・「採用情報」の文字縦書き。なんでかな？
→写真が結構幅とってるから、横書きだと目立たないのかな？窮屈にみえるのかな？
・写真の左上、白い三角→写真がそのまま３枚並ぶと圧迫感があるからかな？
【施工実績】
inessの部分、写真
・カテゴリーが写真の右上にくっついてる！初めて見た。
・文章は白い四角を重ねた中。枠線がないから、馴染んでる、、、？
枠線ないから境界線わかりにくい。上には緑のborderついて写真との境界ははっきりさせてる。
【お問い合わせ】
・ここだけ唯一背景がベタ塗り。なんとなくページの終わり感がでる気がする。
display:flexで、2px間隔あけてる。

トレースして気づいたこと