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

webcan analyze www.otoden.co.jp

CONSTRUCTION & REAL ESTATE · 北海道 · PICKED 2026.10.21

音更電設株式会社建設・不動産のホームページデザイン参考 — イエロー・電気工事・社員紹介

音更電設株式会社のトップページ（PC）
PC（1440px）
音更電設株式会社のトップページ（スマホ）
スマホ（375px）
出典：www.otoden.co.jp ↗確認日 2026.10.21
音更電設株式会社建設・不動産 · 北海道
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

「十勝を照らす、人になれ。」——電気工事の会社を、黄色と社員の顔で見せる。

北海道音更町で配電線工事や高圧受電設備などの電気工事を手がける会社のサイト。ファーストビューは「TOKACHI LIGHT.」の大きな英字と、ヘルメット姿の作業員の写真、黄色の楕円で構成し、右に縦書きで「十勝を照らす、人になれ。」と置いている。ABOUT、会社・仕事の2枚のカード、40人の社員を紹介するPEOPLEのカルーセル、InstagramとLINEのカード、50周年企画「THE SPOT LIGHT!」へと続く。

  1. 01ファーストビューで、ロゴの「50TH」マークと右下の丸い「THE SPOT LIGHT!」バッジにより、創業50年を示している
  2. 02社員を「WE ARE TEAM OTOFUKE.」「40 PEOPLE」として、名前・入社年・好きなこと・最近のチャレンジを書いたカードのカルーセルで紹介している
  3. 03背景の大部分を黄色（#FFE100）と薄いグレーで塗り分け、写真のカードを白い角丸の枠で浮かせている

CONVERSION集客の工夫

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

仕事を「人」で見せる

PEOPLEのカードに、社員の顔写真・入社年・好きなこと・最近のチャレンジを並べている。電気工事の内容を知らない人にも、一緒に働く人の雰囲気から会社を知ってもらえる。

会社と仕事の入口を2枚のカードに絞る

ABOUTの下に「会社のこと」「仕事のこと」の2枚だけを写真つきのカードで置いている。どこから読めばよいか迷わせない。

採用情報はSNSへつなぐ

「お知らせ・採用情報はSNSをチェック！」としてInstagramとLINEのカードを並べ、LINEのカードには「採用情報は公式LINEで！」と書いている。サイトを見たあとも、継続して情報を受け取れる。

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

COLOR配色

#F4F4F3背景 · ライトグレー
#FFFFFFカード背景
#FFE100メインカラー · イエロー
#3575D6社員カードの番号・人数バッジ · ブルー
#00000050周年企画・英字ロゴ
#111111本文テキスト

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

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Noto Sans JP（YakuHanJP で約物を詰める）
無料で近いもの
Noto Sans JP
用途
英字（読み込まれている書体）
使用フォント
Albert Sans / DM Serif Display / Arvo
無料で近いもの
Albert Sans / DM Serif Display
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h215px / 5001.0014.1px / 500
h311.7px / 5001.0011px / 500
本文（p）10px / 5001.009.4px / 500
ボタン10px / 5001.009.4px / 500

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

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

  1. 01

    ファーストビュー

    「TOKACHI LIGHT.」の英字と作業員の写真、黄色の楕円。左にロゴ（50TH）と縦書きのナビ、右下に「THE SPOT LIGHT!」の丸いバッジ。

    ファーストビュー／写真＋実績バッジ型
  2. 02

    ABOUT

    縦書きの「灯りが、誇りだ。」と、1976年の創立からの歩みを書いた文章。

    コンセプト／写真＋メッセージ型
  3. 03

    COMPANY・WORK

    「会社のこと」「仕事のこと」を写真つきの角丸カードで。

    メニュー・サービス／アイコン／写真グリッド型
  4. 04

    PEOPLE（WE ARE TEAM OTOFUKE.）

    社員の写真・名前・入社年・好きなこと・最近のチャレンジのカードを横に送るカルーセル。「もっと見る 40 PEOPLE」へ。

    お客様の声／カード型
  5. 05

    Instagram・LINE

    「お知らせ・採用情報はSNSをチェック！」。

    イベント・キャンペーン／特集バナー並び型
  6. 06

    THE SPOT LIGHT!（50周年企画）

    「2026 | 50th Anniversary」と紹介文を、暗い写真の上に重ねる。

    イベント・キャンペーン／見学会・イベント告知型
  7. 07

    フッター

    「TOKACHI LIGHT.」と縦書きのコピー、ナビ、住所・電話番号。

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

PARTSパーツ別に見る

01ファーストビューファーストビュー／写真＋実績バッジ型
音更電設株式会社のファーストビュー（PC）PC
音更電設株式会社のファーストビュー（スマホ）SP
02ABOUTコンセプト／写真＋メッセージ型
音更電設株式会社のABOUT（PC）PC
音更電設株式会社のABOUT（スマホ）SP
03COMPANY・WORKメニュー・サービス／アイコン／写真グリッド型
音更電設株式会社のCOMPANY・WORK（PC）PC
音更電設株式会社のCOMPANY・WORK（スマホ）SP
04PEOPLE（WE ARE TEAM OTOFUKE.）お客様の声／カード型
音更電設株式会社のPEOPLE（WE ARE TEAM OTOFUKE.）（PC）PC
音更電設株式会社のPEOPLE（WE ARE TEAM OTOFUKE.）（スマホ）SP
05Instagram・LINEイベント・キャンペーン／特集バナー並び型
音更電設株式会社のInstagram・LINE（PC）PC
音更電設株式会社のInstagram・LINE（スマホ）SP
06THE SPOT LIGHT!（50周年企画）イベント・キャンペーン／見学会・イベント告知型
音更電設株式会社のTHE SPOT LIGHT!（50周年企画）（PC）PC
音更電設株式会社のTHE SPOT LIGHT!（50周年企画）（スマホ）SP

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.21 以降に撮影したもので、現在の表示とは異なる場合があります。

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01地域名を入れた英字のスローガンを、ファーストビューいっぱいに大きく置く
  2. 02社員を、写真と入社年・好きなことを書いたカードで紹介する
  3. 03会社と仕事の入口を2枚のカードに絞る
  4. 04採用情報の受け取り先として、InstagramとLINEを並べて案内する

FAQよくある質問

音更電設のサイトで使われているフォントは？

和文は Noto Sans JP が指定され、約物の詰めに YakuHanJP を使っています。英字の書体として Albert Sans・DM Serif Display・Arvo が読み込まれています。いずれも Google Fonts などで無料で使えます。

黄色を大きく使うと、うるさく見えませんか？

このサイトでは、黄色の面と薄いグレーの面を交互に置き、その上の写真やカードを白い角丸の枠でまとめています。色を塗る面とカードの面を分けることで、黄色が多くても情報が読み取りやすくなっています。

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

電気工事・設備工事・土木などの地域の工事会社のほか、社員の顔を見せて採用につなげたい中小企業全般に応用できます。

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

MOREほかの建設・不動産の参考サイト

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら