建設・土木・電気設備工事のホームページデザイン事例｜用途別の選び方と制作のポイント

公式案内から比較できる点

1915年創業の横浜市の総合建設会社です。事業紹介、会社の歴史、建築・土木の施工実績、採用、協力会社募集、問い合わせ、指定請求書のダウンロードを分けています。

自社で取り入れる場合：発注相談、採用応募、協力会社の取引を別々に案内します。実績には用途・工事範囲・竣工年をそろえ、写真掲載の許諾と更新担当を決めます。

公式案内から比較できる点

本社は福岡市南区です。通信インフラ、電気工事、ソリューション、レンタル、警備の事業紹介と、部門別のクロストーク、採用、口コミへの対応を掲載しています。

自社で取り入れる場合：本社と各営業所、会社単体とグループの事業を区別します。名古屋にも拠点がありますが、本社所在地とは分けて表示します。事業の説明と現在の募集条件をそれぞれ用意します。

公式案内から比較できる点

京都府福知山市を拠点に、電設資材販売・設備工事と、AI・IoT・ソフトウェアなどを扱う会社です。事例や商品をカテゴリ・業界・キーワードから探せ、独自のソリューションや取扱メーカーも案内しています。

自社で取り入れる場合：商材の販売、自社の施工、システム開発・保守の範囲を区別します。製品カテゴリと利用者の業種を対応させ、希望する用途や既存設備を相談できる入口を設けます。

公式案内から比較できる点

静岡県富士市に本社を置く会社です。レーザーでサビや塗膜等を除去するCoolLaserの製造・販売と、樹脂コーティングによる屋根改修のSOSEIを案内し、会社情報、採用、IRを分けています。

自社で取り入れる場合：装置の購入と施工・改修の相談を分け、適用範囲や必要な条件を示します。環境負荷・安全性・性能については、企業の目標や製品説明を独立した実証結果と混同しないようにします。

公式案内から比較できる点

北海道音更町の電気工事会社です。配電線の新設・修繕、高圧受電設備、街路灯、地中埋設設備などを案内しています。会社・仕事・人の紹介と採用、問い合わせ、周年企画を設けています。

自社で取り入れる場合：社員の人柄だけでなく、担当する仕事と募集職種を対応させます。SNSやLINEへ案内する場合も、会社情報と応募条件の確認先を分かりやすくします。

公式案内から比較できる点

東京都墨田区に本社を置く設備工事会社です。電気、空調、衛生、内装の施工管理と、用途・設備・新規または更新による施工実績、安全技術研修センター、協力会社向け情報、採用を案内しています。

自社で取り入れる場合：工事の分類と実績をそろえ、契約先・担当範囲・竣工年を区別します。採用だけでなく、サービスの見積もりや協力会社からの連絡も受けられる入口を用意します。

公式案内から比較できる点

島根県松江市のダクト・保温工事会社です。住宅から商業施設・工場などの施工、工事別の実績、スタッフ紹介・募集要項・エントリー、問い合わせを案内しています。

自社で取り入れる場合：工事名だけでなく、どの設備のどの部分を担当するかを説明します。保温技術や製品の案内は用途・適用条件を確認し、施工写真の場所を見た目だけで断定しません。

公式案内から比較できる点

JR西日本グループの電気設備保全会社です。検査、修繕・工事、技術提供・コンサルティングを案内しています。公式のお知らせでは2025年4月の現社名への変更、2026年4月の支店名称変更を掲載しています。

自社で取り入れる場合：検査だけの会社としてまとめず、修繕や技術提供も区別します。社名・支店名・連絡先をそろえ、鉄道設備の写真には公開できる情報の範囲を確認します。

公式案内から比較できる点

長野市の総合建設会社で、公式会社情報の創業年月日は1913年6月5日です。住宅・集合住宅・医療福祉・社寺・公共施設等の建築と、河川・道路・砂防などの土木、建築家との家づくりも案内しています。

自社で取り入れる場合：住宅を扱う会社を一律に対象外とするのではなく、複数の事業を区別します。住宅相談、一般の工事相談、採用の入口と、各実績の工事範囲をそろえます。

公式案内から比較できる点

兵庫県姫路市に本社を置き、船舶・土木・地盤改良・海外の事業を案内しています。作業船・重機の紹介と、港湾・陸上土木の施工実績、採用、問い合わせがあります。

自社で取り入れる場合：保有する船・機材と、対応する工程・工法を関連付けます。能力の数値や施工条件は個別に確認し、写真だけから発注可能な範囲を判断しないようにします。

公式案内から比較できる点

高知県馬路村魚梁瀬の建設会社です。河川、森林土木、公共道路などの仕事、地域貢献、魚梁瀬の紹介、採用、電話・メールの相談先を掲載しています。

自社で取り入れる場合：地域の紹介と事業・募集の説明をつなげます。確認時のお知らせには「2024.00.00」という日付があるため、更新日だけで現在の活動や募集状況を判断しないようにします。

公式サイトの画面で確かめられる点

紺の背景に、白い太い英字「THINK GLOBALLY, ACT LOCALLY」を大きく置いています。

ヘルメット姿の作業員の写真を、縦長の楕円に切り抜いて右に置いています。

楕円の下に、水が流れる石橋の写真が丸く見えています。

左に縦書きの白いメニュー（事業紹介・会社案内・採用情報・施工実績）があります。

自社で取り入れる場合：現場の人の後ろ姿を撮り、形を切り抜いて大きな見出し文字と重ねる。メニューを縦書きにして左端に置くと、写真を邪魔しない。

公式サイトの画面で確かめられる点

青い設備の前を歩く作業員の写真を、画面の幅いっぱいに使っています。

「東京湾屈指の保有船数と技術力を誇る、海上・河川土木工事のプロフェッショナル」と書いています。

ナビに「重機・船舶紹介」と「施工事例」があります。

右上に電話番号、赤い「無料相談する」のボタンがあります。

自社で取り入れる場合：保有する船や重機のように、他社と違う設備をナビの独立した項目にする。最初の画面の文は、自社の強みを数や設備で書く。

公式サイトの画面で確かめられる点

測量機器をのぞく作業員の写真を全面に使っています。

大きな英字「Shape the Future you Envision」が横に流れて写真に重なっています。

ヘッダーに「埼玉県川口市の総合建設コンサルタント／ISO9001認証取得」と書いています。

右上に緑の大きな「JOIN US!」ボタンがあります。

自社で取り入れる場合：測量や設計のように成果物が見えにくい仕事は、機器を使う場面の写真で見せる。所在地と取得した認証は、ロゴの横に1行で書く。

公式サイトの画面で確かめられる点

作業員2人が腕を組んで笑う写真を全面に使い、白い大きな文字のコピーを重ねています。

ナビは会社概要・事業内容・採用情報・施工実績・新着情報の並びです。

右上に「お問い合わせ」と緑の「採用エントリー」の縦長ボタンが固定されています。

電話番号をヘッダーの下に大きく出しています。

自社で取り入れる場合：社員が現場で笑う写真を自社で撮る。問い合わせと採用の入口を右上に分けて固定する。

公式サイトの画面で確かめられる点

黒い背景に、赤い大きな「D」を中心に置いています。

背景にトンネルの掘進機を描いた図面が薄く重なっています。

下に「信頼に応える、確かな技術」と英語の文を重ねています。

右下に「協力会社の皆様へ」の丸いボタンと、能登復興プロジェクトのバナーがあります。

自社で取り入れる場合：写真でなく技術の図面を背景にする方法もある。取引先向けの入口は、一般の問い合わせと別のボタンにして色を変える。

公式サイトの画面で確かめられる点

青みのある色に調整したヘルメット姿の作業員の顔写真を、画面の左半分に大きく置いています。

右下に白い文字で「愛をもっと。村本。」と書いています。

ヘッダー右上に「パートナーの皆様へ」「採用情報」の入口があります。

ナビに「愛をもっと 村本」という特集の項目があります。

自社で取り入れる場合：社員の顔を大きく撮り、写真全体を1色の色調にそろえる。社員を紹介する特集ページをナビの項目に出し、取引先向けの入口を別に置く。

公式サイトの画面で確かめられる点

鮮やかな緑の背景に、黒の太い文字「キリがないほど、桐山組。」を大きく置いています。

ロゴの形のサボテンを、背景に大きく重ねています。

ナビは「3分でわかる桐山組」「私たちの仕事」「施工実績」「採用情報TOP」「会社情報」です。

右上に黒の「募集要項」と赤の「ENTRY」のボタンが並びます。

自社で取り入れる場合：会社の紹介を「3分でわかる」のように短い入口にして、ナビの先頭に置く。色を緑1色に絞り、文字を大きくすれば、写真が少なくても最初の画面が成立する。

公式サイトの画面で確かめられる点

薄い背景に、緑の大きな三角形と、作業員の写真を重ねています。

「MONOづくりで街の未来を創造する。」と書いています。

縦書きの英字が写真を横切っています。

ヘッダーに黒の「募集要項」と赤の「ENTRY」のボタンがあります。

自社で取り入れる場合：コピーと写真を重ねる場合は、文字と写真が重なる部分を読めるか確認する。会社のロゴの形（三角形）をそのまま模様にして使う。