ワイヤーDLfil（フィル）
学生シェアハウス・食堂・ランドリー・庭園を1ページにまとめ、施設ごとに営業時間と連絡先まで答える。
webcan analyze showa-kogyo.com
CONSTRUCTION & REAL ESTATE · 福岡県 · PICKED 2026.10.31
株式会社昭和工業建設・不動産のホームページデザイン参考 — アイソメトリック・イラスト・波模様
出典：showa-kogyo.com ↗確認日 2026.10.31
EDITOR'S NOTE編集部の視点
見えにくい仕事を、街のアイソメ図1枚で「どこで何をしているか」に変える。
福岡市南区の、ビルピット・浄化槽・石油タンクなどの清掃・保守を行う会社のサイト。ファーストビューは川と街・浄水場・タンクを描いたアイソメトリックのイラストに「暮らしの「当たり前」を、支える」のコピー。トップはAbout・事業（4つ）・会社紹介・ニュース・採用・Contactの順で、事業は番号つきのイラストカードで並べ、オレンジと青の波模様で区切っている。
- 01ファーストビューのイラストに、収集車・タンクローリー・浄水場・燃料タンクなど事業の現場を1枚にまとめて描いている
- 02事業を「01 廃棄物収集運搬事業」〜「04 その他環境整備事業」の4枚のイラストカードで並べ、カードのイラストもファーストビューと同じアイソメトリックの描き方にそろえている
- 03ロゴのオレンジと青の波を、セクションの区切りと採用の背景の模様に使っている
3 VIEWPOINTS3つの視点で見る
デザインの視点
写真では伝わりにくい清掃・保守の仕事を、街のアイソメトリックのイラスト1枚で見せ、事業の4枚のカードも同じ描き方にそろえている点を真似るとよいです。ロゴのオレンジと青の波を、セクションの区切りに繰り返しています。
集客の視点
清掃・保守のように写真では伝わりにくい仕事を、現場を描いたイラストと番号つきの4事業カードで見せている。ヘッダー、ページ下の大きな「Contact」ブロック、フッターに問い合わせの入口を置いており、採用ブロックもトップに用意している。
Webディレクターの視点
事業を番号つきのイラストカード4枚に絞り、ファーストビューと同じ描き方にそろえています。最初の1枚だけを描き起こし、カードをそこから展開すれば、少ない点数で統一感を出せます。トップの終わりには大きな見出しの問い合わせ帯を置いています。
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ / お問い合わせはこちら
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
仕事の中身を絵で伝える
清掃・保守のように写真では伝わりにくい仕事を、街のイラストで「どの施設で何をしているか」として見せている。BtoBの設備・メンテナンス業でも、初めて見る人に事業の範囲を一目で伝えられる。
採用への入口をトップに置く
「暮らしの「当たり前」を支える仕事」の見出しで採用のブロックをトップに置き、作業着とヘルメットの社員の写真を添えている。取引先向けのサイトと採用の入口を1つにまとめている。
問い合わせの入口を複数置く
ヘッダーのナビとページ下の大きな「Contact」のブロック、フッターのナビに「お問い合わせ」を置いている。フッターには住所・電話番号・FAX番号を載せている（電話番号はリンクにしていない）。
チェック項目は 2026.10.31 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F5F5F5背景 · ライトグレー
#FFFFFFカード・セクション背景
#F75E18お問い合わせボタン・波模様 · オレンジ
#028AD0波模様・差し色 · ブルー
#212121本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字見出し（Contact・News & Topics など）
- 使用フォント
- Poppins
- 無料で近いもの
- Poppins
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 1.1px / 400 | — | 1px / 400 |
| h2 | 1.1px / 400 | — | 28px / 700 |
| h3 | 17px / 700 | 1.90 | 14px / 700 |
| ボタン | 1.1px / 400 | — | 1px / 400 |
実測値（PC 1440px・SP 375px、2026.10.31 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
About
コンセプト／写真＋メッセージ型 - 04
- 05
- 06
News & Topics
お知らせ／お知らせ一覧型 - 07
- 08
- 09
PARTSパーツ別に見る
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.31 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01事業の現場をまとめた1枚のイラストをファーストビューにし、事業紹介のカードも同じ描き方にそろえる
- 02事業は番号つきのカードで4つ前後に絞って並べる
- 03ロゴの形と色を、セクションの区切りの模様として繰り返す
- 04トップの終わりに、大きな見出しの問い合わせブロックを置く
FAQよくある質問
株式会社昭和工業のサイトで使われているフォントは？
和文は Noto Sans JP、英字見出しは Poppins です。どちらも Google Fonts で無料で使えます。
アイソメトリックのイラストを作る予算がない場合は？
ファーストビューの1枚だけを描いてもらい、事業カードはそこから切り出して使うと、少ない点数で統一感を出せます。写真で代えるなら、事業ごとの現場写真を同じ角度・同じ明るさにそろえるとまとまります。
どんな業種の参考になりますか？
清掃・設備保守・廃棄物処理のほか、電気工事・配管・運送など、現場の様子が写真では伝わりにくいBtoBの会社に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は株式会社昭和工業および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの建設・不動産の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の建設・不動産会社のサイトを。
「株式会社昭和工業のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。