CONCEPT WORK — 建設業
建設業のホームページ制作
建設会社のホームページを想定して作ったデモサイトです。工事の相談で来た方と、働き先を探して来た方の両方が、スクロールだけで判断材料にたどり着ける構成にしています。
最終更新日:
公開日:
想定した企業: 株式会社青葉建設(架空)
本デモは架空企業のコンセプトワークです。実在する企業・団体とは関係ありません。掲載している社名・所在地・実績の数字はすべて架空のもので、写真は用意したイメージ素材です。
デモサイトを開く →デザインの意図
濃紺を地に、差し色は現場の橙だけ
建設業のサイトでいちばん先に伝わってほしいのは堅実さです。そのため地の色は濃紺一色にして、彩度の高い色は面では使わず、ボタンや見出しの罫線など点にだけ置いています。差し色に選んだ橙は、ヘルメットや重機で実際に目にする色です。飾りのために足した色ではないので、業種の記号としてそのまま働きます。
見出しにも装飾書体を使わない
図面や仕様書と同じで、読み違えが起きない字面であることを優先しました。見出しは太さで目立たせ、書体そのものは本文と同じものを使っています。細い明朝や手書き風の書体は、この業種では「軽く見える」方向に働くため使っていません。
写真は引きの構図を上に、人の写真は下に
施工事例は建物の全体が入る引きの写真を選び、何をつくった会社かが一目で分かるようにしています。人が写っている写真は採用のセクションにまとめました。同じ写真でも、置く場所によって「実績の証拠」にも「働く場所の紹介」にもなるため、役割で分けています。
ヒーローの演出
ミニチュアの建設現場を俯瞰から捉え、カメラがゆっくり進んでいくフライスルー型のモーション映像です。ページを開いた瞬間から自動で流れ続けるのではなく、スクロールの量に合わせて映像が進みます。
スクロール連動にしているのは、「見せられている」より「自分で見ている」感覚のほうが、初めて訪れた方の離脱が起きにくいためです。指を止めれば映像も止まるので、気になったところをそのまま眺めていられます。
実写ではなく3Dのミニチュアにしたのには理由があります。施工中の現場写真は、安全管理や施主との取り決めで使えないことが少なくありません。現場ごとに見栄えの差も出ます。ミニチュアであれば、何をつくる会社かを一目で伝えたうえで、手元にある写真の出来に左右されずに済みます。
ページ構成の考え方
ヒーロー
何をつくる会社かを、文章より先に映像で伝えます。
私たちについて
創業年・地域・これまでの件数。会社の輪郭を数字で最初に置きます。
強み(3つ)
自社施工・地域密着・有資格者数。他社と比べたときの判断材料になる順に並べます。
施工事例
用途・年・構造・規模まで書きます。似た条件の工事を探している方が自分の案件と重ねられるようにするためです。
採用情報
未経験入社の割合・平均勤続年数・資格支援を数字で出し、募集職種へつなげます。
会社概要
商号・設立・資本金・所在地・許可の範囲。
お問い合わせ
小さな修繕から相談できることを添えて、電話とフォームの両方を置きます。
建設会社のサイトを訪れる方は、工事を頼もうとしている方と、働き先を探している方に大きく分かれます。この2つは知りたいことがほとんど重なりません。
そこで施工事例までを発注側の導線、その後を採用の導線として、上から順に並べました。採用を下層ページへ追いやらず、後半にまとまった面積を割いているのは、求人媒体からサイトを見に来た方がスクロールだけで判断材料に行き着けるようにするためです。
ほかの業種のデモサイト
実際にご依頼いただいて制作したサイトは制作実績にまとめています。
本デモは架空企業のコンセプトワークです。実在する企業・団体とは関係ありません。掲載している社名・所在地・実績の数字はすべて架空のもので、写真は用意したイメージ素材です。