ワイヤーDL大松工業株式会社
人と自然を描いたイラストで「塗装で社会を彩る」を見せ、塗装事例は塗料の種類のタグで探せるようにする。
webcan analyze akasho-sangyo.com
MANUFACTURING · 奈良県 · PICKED 2026.10.24
赤庄産業株式会社製造業のホームページデザイン参考 — 製造業・木材・ネイビー
出典：akasho-sangyo.com ↗確認日 2026.10.23
EDITOR'S NOTE編集部の視点
工場と木材の写真を3列に並べたファーストビューで、集成材メーカーの現場をそのまま見せる。
奈良県吉野郡大淀町の集成材メーカーのサイト。ファーストビューは、フォークリフトの作業・積まれた木材・加工中の木材の3枚の写真を縦長に並べている。灰色がかったベージュの背景に紺の文字で、ABOUT、VISION・MISSIONなどの考え方、選ばれる理由（QUALITY・FACTORY）、製品の寸法と樹種、お知らせ、メールと電話の問い合わせ、アクセスと続く。
- 01ファーストビューは、工場の作業・木材の山・加工中の木材の3枚の写真を縦長に並べている
- 02灰色がかったベージュ（#DEDEDA）の背景と紺（#005289）の文字の2色で、全体を落ち着いた印象にまとめている
- 03英字の見出しは Poppins、和文の見出しは Zen Old Mincho で、英字と明朝体を組み合わせている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
－予約・問い合わせ導線—
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
製品を寸法と樹種で紹介する
PRODUCT では、Wブロック・積層間柱・構造用JAS小断面などの製品ごとに、長さ・カットサイズ・樹種を並べている。取引を検討する人が、自社の用途に合うかをトップページで確かめられる。
問い合わせをメールと電話に分けて案内する
工場の写真を背景にした帯で、「メールでのお問い合わせ（CONTACT FORM）」と「お電話でのお問い合わせ」を左右に並べている。電話の側には平日9:00-17:00の受付時間を添えている。
車と電車それぞれの行き方を書く
ACCESS では住所・電話・FAXに加えて、京奈和自動車道御所南ICからの道順と駐車場の有無、近鉄「下市口」駅からのタクシーと徒歩の時間を書いている。工場を訪ねる取引先や応募者の下調べに答えている。
チェック項目は 2026.10.23 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#DEDEDA背景 · グレージュ
#FFFFFFセクション背景
#005289ブランドカラー・見出し・本文 · ネイビー
#919191補足テキスト · グレー
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 英字見出し・ナビ
- 使用フォント
- Poppins
- 無料で近いもの
- Poppins
- 用途
- 和文見出し
- 使用フォント
- Zen Old Mincho
- 無料で近いもの
- Zen Old Mincho
- 用途
- 和文本文
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字の小見出し（Adding value to wood. など）
- 使用フォント
- EB Garamond
- 無料で近いもの
- EB Garamond
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 22px / 500 | 1.00 | 23px / 500 |
| h3 | 30px / 600 | 1.00 | 23px / 600 |
| 本文（p） | 16px / 400 | 1.38 | 14px / 400 |
| ボタン | 14px / 400 | 1.00 | 12px / 400 |
実測値（PC 1440px・SP 375px、2026.10.23 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
NEWS
お知らせ／お知らせ一覧型 - 08
- 09
- 10
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.23 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01工場・材料・加工の写真を並べて、ファーストビューで何をつくる会社かを見せる
- 02背景色と文字色の2色に絞り、写真を主役にする
- 03製品は寸法や仕様を数字で並べ、取引先が用途に合うかを判断できるようにする
- 04問い合わせはメールと電話に分け、電話には受付時間を添える
FAQよくある質問
赤庄産業のサイトで使われているフォントは？
英字の見出しとナビは Poppins、和文の見出しは Zen Old Mincho、本文は Noto Sans JP、英字の小見出しは EB Garamond です。すべて Google Fonts で無料で使えます。
BtoBの製造業のサイトで、トップページに製品の仕様まで載せるべきですか？
このサイトでは、代表的な製品の長さ・カットサイズ・樹種をトップページのスライダーで見せています。取引先が最初に知りたい「扱えるサイズ」を早い位置で示すと、問い合わせの前の判断がしやすくなります。
どんな業種の参考になりますか？
製材・木工・金属加工などの製造業のほか、工場や現場の写真で技術を伝えたい建材・資材の会社に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は赤庄産業株式会社および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの製造業の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のメーカーのサイトを。
「赤庄産業株式会社のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。