#1日1サイトレビュー【059】関西化成品輸送株式会社さん

関西化成品輸送株式会社

【概要】
化学品の運送業・車両業・不動産業など幅広く行う会社のwebサイト

【ターゲット】
企業向け。行っている事業の幅が広いので、さまざまな業種の企業さんからのコンタクトがありそう。

【目的】
会社、事業内容の認知度アップ
→取引を増やすため問い合わせ件数を増やす

【印象】
シンプル、かっこいい

【ファーストビュー】

・右から左へと画像、キャッチコピーが表示される。
フレックスボックスでテキスト、画像は配置されている。

・キャッチコピーにmargin:-60px;とネガティブマージンを指定することで上の画像とかぶせている。

・ロゴの赤色をメインカラーとしている。目的につながるお問い合わせボタンも赤色で目を引く。

【コンテンツ】

・セクション内のボタンはすべて赤色で統一。マウスホバーで背景色と文字色が反転する。

・「Advantage」横並びに配置された画像が右から左へと流れるアニメーションがある。画像にテキスト部分が被っているのも、ネガティブマージンが使用されている。

・「Service」行っている事業を三つ横並びで紹介している。視覚的にも分かりやすくイラスト付き。

・「Recruit」画像を右端に、背景の文字を左端に寄せることでどちらか片方に重心が傾くことなくバランスが取れている。

・「Recruit」の背景の文字はセクションの親要素を起点にposition:absolute;で場所を指定。leftはマイナスの値を取ることで左に寄せている。

【カラー】
有彩色は赤色のみ。赤色を取り入れることで仕事への情熱、活気のある印象になる。

ベースカラー：白、グレー
メインカラー：赤
文字：黒

【フォント】

■キャッチコピー
"Cormorant Garamond", serif;

とてもエレガントなフォント。太い部分細い部分がはっきりしておりメリハリがある。

■数字や英字（サンセリフ体）
Lato, sans-serif;

すっきりとした印象、主張が少ないので使いやすそう。

■テキスト
YakuHanJP_Noto, "Noto Sans JP", sans-serif;

YakuHanJPにNoto用があるみたいですね。ウェイト構成を最適化されているとか。ありがたや～。