1日1サイトレビュー＃５　小松ウオール工業

【サイト名】

小松ウォール工業株式会社

間仕切の総合メーカー | 小松ウオール工業

【予想ターゲット層】

間仕切りで国内シェアトップ。販路は全国各地。営業からサービスまで自社で一貫するのが特徴。受注生産なので在庫リスクがない。オフィス～病院、商業施設などあらゆる施設で活用。

BtoBなのでゼネコンや設計事務所、商社、建材店

【カラー】

同系色の青と白をベースとした落ち着いた配色

【サイトの全体構成】

【ヘッダー構成】

ヘッダーは２層構造で各サイトの目的別に分かれていて見やすい。スクロールするとホームからカタログ・CADが固定されている。ホバーするとリストごとに色が変わる。

【３カラム構成】

アイコンと文字が等間隔で離れているため視認性がよい。ホバーすると塗と線でカラーが逆転する。 transition: .3s;と切り替わりがはやい。右下の▶は疑似要素で作られている。アイコンとその下の文字はvertical-align: middleで垂直方向中央揃えに配置されている

【ファーストビュー】

max-width: 100%;が設定されていて画面いっぱいに広がるようになっている。height426とゆったりとした印象。10枚ほどの画像に切り替わる。

【ニュース】

dl,dt,spanで構成。セクションごとに色分けされているので探しやすい。

【文字・余白】

マージンが70px、line-height:1.5;

游ゴシック16px

見出しはVerdana36px

【スマホ版ハンバーガーメニュー】

上トップ、下リクルートページ。視認性がとにかくよい。検索できるフォームがあってユーザビリティに優れている。

【リクルート　TOP】

transition-timing-function: cubic-bezierやアニメーションで効果をつけている。 WORKの各ボタンはホバーするとtransform: translateY(30px);で右に長くなる。

【リクルート 下層ページ】

2カラムの英文フォント：A P-OTF 凸版文久見出ゴのイタリック

英文フォントを透過させることで抜け感が出ている。

letter-spacing: -0.5rem;と狭い。
CSSではcontent: attr(data-en)となっており、疑似要素のcontentを attr()でhtmlから取得している。