WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 建設・不動産
  4. 株式会社東組

webcan analyze www.azumagumi.co.jp

CONSTRUCTION & REAL ESTATE · 和歌山県 · PICKED 2026.10.17

株式会社東組建設・不動産のホームページデザイン参考 — 建設会社・蛍光グリーン・大きな英字

株式会社東組のトップページ（PC）
PC（1440px）
株式会社東組のトップページ（スマホ）
スマホ（375px）
出典：www.azumagumi.co.jp ↗確認日 2026.10.17
株式会社東組建設・不動産 · 和歌山県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

現場の映像と「この海を守れ。この地を守れ。」のコピーで、建設会社の仕事の誇りを伝える。

和歌山市の海洋土木（マリコン）の会社のサイト。ファーストビューは現場で働く人とクレーンの映像に、大きな英字と日本語のコピーを重ねている。濃いグレーの背景に蛍光グリーンを差し色として使い、受賞歴のバッジ、工事実績、保有する作業船などの機材、お知らせと続く。右下には採用への入口を常に表示している。

  1. 01ファーストビューは現場の映像に、大きな英字のコピーと蛍光グリーンの日本語のコピーを重ねている
  2. 02濃いグレーの背景と蛍光グリーンの組み合わせで、建設会社らしい力強さを出している
  3. 03工事成績の評定ランキングや認定などを、緑のバッジで並べている

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内

採用の入口を右下に固定する

PC・スマホとも、画面の右下に「RECRUIT 事業拡大に向けて各職種募集中」のバッジを固定している。会社を知りに来た人や、取引先として見に来た人の中から、働きたい人を採用ページへ誘導できる。

受賞歴や認定をバッジで見せる

工事成績の評定ランキングや、DX推進計画・若者の採用育成に関する認定などを、緑のバッジで並べている。数字や第三者の評価は、発注者にも求職者にも信頼の材料になる。

問い合わせと採用を最後に並べる

ページの終わりで、緑の「CONTACT」と写真の「RECRUIT」を左右に並べている。取引の相談と採用の応募という2つの目的を、最後に分けて案内している。

チェック項目は 2026.10.17 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#FFFFFF背景
#343434濃色セクション · ダークグレー
#00FF40差し色（左端の帯・ボタン） · 蛍光グリーン
#05AB1Eブランドカラー・バッジ · グリーン
#191919本文テキスト
#F1EDEDセクション背景

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
英字（大きなコピー・見出し）
使用フォント
Montserrat
無料で近いもの
Montserrat
用途
和文
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h216px / 7001.8014px / 700
h336px / 7001.5026px / 700
本文（p）100px / 9001.0080px / 900
ボタン16px / 5001.8015px / 500

実測値（PC 1440px・SP 375px、2026.10.17 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01

    ヘッダー

    ロゴ、ナビ、蛍光グリーンの「お問い合わせ」ボタン。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    ファーストビュー

    現場の映像に、大きな英字と日本語のコピー。

    ファーストビュー／全面写真＋コピー型
  3. 03

    会社の紹介

    会社概要へのボタン。

    コンセプト／写真＋メッセージ型
  4. 04

    BUSINESS

    大きな縁取りの英字と、受賞歴・認定のバッジ。

    強み・選ばれる理由／番号つき3〜4項目型
  5. 05

    PERFORMANCE（工事実績）

    現場写真の帯と、工事実績へのボタン。

    事例・実績／大判1件＋サムネ型
  6. 06

    ADVANCED EQUIPMENT（機材紹介）

    作業船などの機材をカルーセルで紹介。

    事例・実績／大判1件＋サムネ型
  7. 07

    INFORMATION（お知らせ）

    お知らせ／お知らせ一覧型
  8. 08

    CONTACT・RECRUIT

    問い合わせと採用を左右に並べる。

    行動喚起／電話＋Web予約の2ボタン帯型
  9. 09

    フッター

    住所・電話・FAX・最寄り駅からの時間、Googleマップ、Instagram。

    フッター／店舗情報＋ナビ型
株式会社東組の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01現場の映像と、仕事の使命を短く言い切るコピーでファーストビューをつくる
  2. 02濃い背景に1色だけ強い差し色を使い、力強さを出す
  3. 03受賞歴・認定・ランキングなど第三者の評価は、バッジにして並べる
  4. 04採用を強化したい会社は、採用の入口を画面の端に固定する

FAQよくある質問

東組のサイトで使われているフォントは？

大きな英字のコピーと見出しは Montserrat、和文は Noto Sans JP です。どちらも Google Fonts で無料で使えます。

建設会社のサイトは、取引先向けと採用向けのどちらを重視すべきですか？

両方を一つのサイトで扱う会社が多く、このサイトのように、採用の入口を常に見える場所に置きつつ、最後に問い合わせと採用を分けて案内する作りが有効です。

どんな業種の参考になりますか？

土木・建築・設備工事などの建設会社のほか、運送・製造など、現場の仕事の魅力を伝えて採用につなげたい業種に応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は株式会社東組および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の建設・不動産会社のサイトを。

「株式会社東組のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら