ワイヤーDL株式会社昭和工業
見えにくい仕事を、街のアイソメ図1枚で「どこで何をしているか」に変える。
webcan analyze watanabe-construction.co.jp
CONSTRUCTION & REAL ESTATE · 兵庫県 · PICKED 2026.10.24
有限会社渡辺建設建設・不動産のホームページデザイン参考 — 建設会社・運送・重機
出典：watanabe-construction.co.jp ↗確認日 2026.10.23
EDITOR'S NOTE編集部の視点
社名入りの重機を斜めに切り分けた2枚の写真で、建設と運送の会社の現場を最初に見せる。
神戸市垂水区で建設事業と運送事業を営む会社のサイト。ファーストビューは、社名の入った紺の油圧ショベルの写真2枚を斜めに切り分けて並べ、「信頼するひとに、信頼される仕事を。」のコピーを重ねている。concept の文章のあと、service（6つの事業）、fleet（保有車両）、company（会社案内）を写真の帯で続け、最後に電話とメールフォームの問い合わせを置いた1ページに収まる構成。
- 01ファーストビューは、社名入りの紺の重機の写真2枚を斜めの線で切り分けて1画面に並べている
- 02service・fleet・company を、ヘルメットの社員・並んだトラック・社名ロゴの看板の写真を背景にした帯で続けている
- 03見出しの英字は小文字の筆記体風の書体（Basilia）、和文は明朝体（源ノ明朝）で、建設会社としては柔らかい印象にしている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
事業を6つの一覧にまとめる
service の帯の右側に、建設事業・運送事業・建設機械組立解体・重機預かり・軽貨物運送・倉庫事業を、1行の説明と矢印つきで縦に並べている。複数の事業を持つ会社でも、相談したい内容の入口がすぐ見つかる。
保有車両を独立した入口にする
並んだトラックの写真を背景に「保有車両」への入口を置いている。運送や重機の仕事では、どんな車両を持っているかが依頼の判断材料になる。
電話とメールフォームを最後に並べる
contact では、電話番号とメールフォームへのリンクを右側に2段で並べている。電話番号はスマホからそのまま発信できるリンクになっている。
チェック項目は 2026.10.23 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#1D2D66見出し・本文 · ネイビー
#1B1B1Bフッター · ブラック
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- 源ノ明朝（source-han-serif-japanese）
- 無料で近いもの
- Noto Serif JP
- 用途
- 英字見出し（concept・service など）
- 使用フォント
- Basilia
- 無料で近いもの
- Libre Bodoni
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 15px / 700 | 1.00 | 13px / 700 |
| h2 | 26.3px / 400 | 1.20 | 22.8px / 400 |
| h3 | 19.5px / 700 | 1.20 | 15px / 700 |
| 本文（p） | 15px / 400 | 1.90 | 12.4px / 400 |
実測値（PC 1440px・SP 375px、2026.10.23 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.23 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01自社の名前が入った重機や車両の写真をファーストビューに使い、実在する現場を見せる
- 02事業が多い会社は、事業名と1行の説明を一覧にまとめる
- 03保有車両・設備は独立した入口にして、依頼の判断材料として見せる
- 041ページに収まる構成にして、最後に電話とフォームを並べる
FAQよくある質問
渡辺建設のサイトで使われているフォントは？
和文は Adobe Fonts の源ノ明朝、英字の見出しは Basilia です。Google Fonts で近づけるなら、和文は Noto Serif JP、英字は Libre Bodoni などが候補になります。
建設と運送のように事業が複数ある会社は、トップページをどう分ければよいですか？
このサイトでは、事業名と1行の説明を一覧にして、それぞれの詳細ページへつないでいます。トップページでは「何を頼めるか」を一覧で見せ、詳しい説明は下層ページに任せる分け方です。
どんな業種の参考になりますか？
土木・基礎工事などの建設会社のほか、運送・重機リース・倉庫など、保有する車両や機材が強みになる業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は有限会社渡辺建設および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの建設・不動産の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の建設・不動産会社のサイトを。
「有限会社渡辺建設のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。