28.西野建設工業株式会社 サイトレビュー
このサイトは私が好きなデザイナーの徳田 優一さんが手がけたサイトです。
企業のHPらしい信頼感が感じられるサイトです。シンプルでスッキリとしたイメージ。
目的
・顧客に信頼感のある企業と感じてもらい、契約を促す
・西野建設工業株式会社の新卒・中途採用応募者の入社意欲を増やす
ターゲット
・建設業者を探している企業・民間の人
・建設会社に入社意欲がある人
印象
シンプル、信頼感、明るい
キャッチコピー
地域の未来を作りたい。
-長年培った建設技術で建物だけではない、次世代に繋がる未来を作るお手伝い。
特徴
余白
縦170px。余白は広くゆったりした印象。
配色
#0cb59b メインカラー 緑
#e38619 アクセントカラー オレンジ
#f7f7f7 一部背景 薄い灰色
#2a2a2a 文字色 黒
メインカラーはnoteの色に近い明るいミントグリーン。ロゴに使用されている色で、爽やかな印象。
フォント
"Noto Sans JP" 日本語 GoogleFontsから利用可
'Overpass' 英語 GoogleFontsから利用可
'Oswald' 数字 GoogleFontsから利用可
letter-spancing:0.1em
'Overpass'
前にレビューしたSUKUSUKU BALLでも使われていたサイト。
スタンダードで使いやすそうな印象があり、半角文字ではbやhなどの先端が途切れているところが特徴的。数字が柔らかい雰囲気。
'Oswald'
数字に使われていたフォント。Condencsedなので、文字をたくさん入れたいときに使えそう。DINに似ていると言われているフォントです。
字間はあまり広くない。
メインビジュアル
メインビジュアルは会社や働く方の写真を採用。時間で切り替わるタイプです。
キャッチコピーが縦に書かれているところが特徴的で、目を引きます。
ヘッダーもそれに合わせて縦書きです。閲覧しているページを線で表現するのは分かりやいですね。他に徳田さんが制作したtartarugaのサイトでは、閲覧ページを半円で表現していました。いろんな表現方法を知っていると選択の幅が広がります。
右下に採用募集中のボタンがあるところも面白いです。建設業などは、特に新しい人材を求めている企業も多く、このサイトでも積極的にアピールされています。ボタンホバーすると周りの線がぐるっと回転する動きがユニーク。
全体的に自由度が高く、バランス感覚が難しい配置だと思いますが、中央の写真にちゃんと目がいくので、すごいなあと尊敬してしまいます。
真似したいポイント
・信頼感が必要なサイトなので、ホバーエフェクトは目立ちつつも奇抜すぎるものは使用しない。ホバーするとメインカラーに変わる、opacityを変えるなど。切り替えの時間も早めに。
・縁取りを少しずらした文字を入れて装飾として使っている。淡い色なので目立ち過ぎない。
・写真を狭い感覚で並べる時は一部を切り取ることで、個別の写真だと分かるし目を引く。
・公共と民間、どちらの建築も行っているが、トップページでは公共のもののみを書いている。そのため●で公共とアイコン化し、民間の方も受け入れていることを表している。
・写真を切り取り、その下に文字を置く。単調な感じがなくなる。切り取った部分にメインカラーの緑の線を入れている。
・電話番号のところは縦に長いフォントを使っているので、他の部分との違いがでてわかりやすい。
感想
今回は西野建設工業株式会社のレビューを行いました。一見シンプルですが、工夫がたくさん込められたWEBサイトでした。徳田優一さんの制作実績は信頼感が溢れ出るようなものが多く、見ていてとても勉強になります。他のサイトもまたレビューしてみたいなと思います^^
この記事が気に入ったらサポートをしてみませんか？