歴史と信頼、確かな技術力
取引先企業や株主、就職希望者に対して企業の認知度向上や信頼感を与え、問い合わせの増加や人材確保を目的に、堅実さを「青」、技術力と発展を「オレンジ」でコーポレートカラーを設定。
URL
https://kinagumi.kinaasami.com/
担当
デザイン・コーディング
コンバージョン
採用ページアクセス件数150%アップ、お問い合わせ件数150%アップ
ターゲット
取引先企業や株主、就職希望者
事前調査・要件定義
大手ゼネコンから中堅ゼネコンのサイト20社ほどを参考にデザインと要件を固めた。また他業界のコーポレートサイトを10社ほど選定し、信頼感や会社のカラーを出すためのデザインヒントの参考にした。
デザインについて
建設会社であることと信頼度を感じるさせるデザインにする
①「何をしている企業なのか」を知ってもらう
グローバルナビゲーションで「喜納組とは」「施工実績」「技術・ソリューション」
「SDGsの取組み」「会社案内」「IR情報」「ニュース」「お問合わせ」「採用情報」掲載
②コンバージョンアップのための工夫
「問合せ」と「採用情報」をコーポレートカラーでボタン様式にして目立たせる。
③信頼度を増すための工夫
メインビジュアルのキャッチコピーのみ明朝体にし、優雅さと喜納組の伝統を感じさせる
④フッターをサイトマップ機能にする
フッターにすべてのページをまとめて掲載しサイトマップ機能を持たせる。ここから各ページへ飛べるようにする。
コーディングで考慮したこと
articleとsectionで括ることを意識し、複数ページを制作するにあたりクラス名に規則性がないと判別しにくいと途中から感じ、「recruit.html」や「contact.html」ページではクラス名に＜rec_○○○＞や＜contact_○○○＞など頭に付けることで整理をした。またホバーすると画像が拡大・縮小する処理に挑戦し、aタグで括ったものに擬似要素で対応した。
制作時間
要件定義・画面設計：10時間
ワイヤーフレーム：5時間
コーディング：40時間
使用アプリ・言語
画像加工：Adobe Photoshop
コーディング：HTML／CSS