ワイヤーDL音更電設株式会社
「十勝を照らす、人になれ。」——電気工事の会社を、黄色と社員の顔で見せる。
webcan analyze ieshima.co.jp
CONSTRUCTION & REAL ESTATE · 兵庫県 · PICKED 2026.10.18
家島建設株式会社建設・不動産のホームページデザイン参考 — 港湾工事・ネイビー・動画
出典：ieshima.co.jp ↗確認日 2026.10.18
EDITOR'S NOTE編集部の視点
作業船と重機を1台ずつカードで紹介し、「どんな道具を持っている会社か」で技術力を見せる。
兵庫県姫路市に本社を置く、港湾工事・陸上工事・地盤改良の総合建設会社のサイト。ファーストビューは、クレーンの前でライフジャケットを着た社員が確認している映像に、大きな英字の「Pioneering next generation.」と「海と陸へ、次代をひらく。」を重ね、右下にお知らせを1件出している。事業内容4つ、作業船・重機の紹介、施工実績、会社案内、採用情報、ブログと続く。
- 01濃いネイビーの背景と、Satoshi の細い英字見出しで、落ち着いた硬い印象にまとめている
- 02作業船や重機を写真と名前のカードで横に送って見せている
- 03採用情報の6つの入口を、写真を左右交互にずらして並べている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせお問い合わせ
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
持っている船と重機で実力を伝える
「作業船/重機紹介」で、浚渫船・フローティングドック・リクレーマー船・ガット船・杭打ち機を1台ずつ写真のカードにしている。発注者や求職者が、どんな工事ができる会社かを具体的に想像できる。
施工実績を工事名で並べる
施工実績を、日付・分類・正式な工事名をつけたカードで並べている。公共工事の発注者が、似た工事の経験があるかを確かめやすい。
採用の入口を目的別に分ける
採用情報を「3分でわかる家島建設」「働く環境」「スタッフインタビュー」「採用メッセージ」「よくあるご質問」「募集要項」の6つに分けている。知りたいことから読み始められ、最後に募集要項へ進める。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#101A22背景 · ネイビー
#08121A背景（濃い部分） · ダークネイビー
#172531カード背景
#FFFFFF背景・文字
#B2A295差し色・補足テキスト · グレージュ
#EAF0F5薄い背景 · ペールブルー
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 英字（見出し・本文）
- 使用フォント
- Satoshi
- 無料で近いもの
- Satoshi
- 用途
- 和文
- 使用フォント
- IBM Plex Sans JP
- 無料で近いもの
- IBM Plex Sans JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 28px / 500 | 1.60 | 20px / 500 |
| h2 | 26px / 600 | 1.60 | 24px / 600 |
| h3 | 18px / 400 | 1.70 | 12px / 400 |
| 本文（p） | 15px / 400 | 1.80 | 14px / 400 |
| ボタン | 16px / 400 | 1.60 | 12px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
Cases（施工実績）
事例・実績／写真グリッド型 - 06
- 07
- 08
- 09
Blog（ブログ）
お知らせ／お知らせ一覧型 - 10
フッター
フッター／店舗情報＋ナビ型
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.18 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01保有する設備や機械を、1台ずつ写真と名前で紹介する
- 02施工実績は正式な工事名と日付で並べ、似た工事の経験を探せるようにする
- 03採用情報は、知りたいこと別の入口に分ける
- 04濃い色の背景と細い英字で、硬く信頼できる印象にまとめる
FAQよくある質問
家島建設のサイトで使われているフォントは？
英字の見出しと本文は Satoshi、和文は IBM Plex Sans JP です。Satoshi は Fontshare、IBM Plex Sans JP は Google Fonts で無料で使えます。
建設会社のサイトで、設備の紹介は必要ですか？
特殊な船や重機を持っていることは、その会社にしかできない工事の証拠になります。写真と名前、何に使う機械かを1台ずつ載せると、発注者にも求職者にも仕事の中身が伝わります。
どんな業種の参考になりますか？
港湾・土木・解体などの建設会社のほか、設備や機械が強みになる運送会社・製造業にも応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は家島建設株式会社および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの建設・不動産の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の建設・不動産会社のサイトを。
「家島建設株式会社のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。