WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 製造業
  4. 大松工業株式会社

webcan analyze daimatsu.cc

MANUFACTURING · 大阪府 · PICKED 2026.10.27

大松工業株式会社製造業のホームページデザイン参考 — イラスト・塗装・ブルーグレー

大松工業株式会社のトップページ（PC）
PC（1440px）
大松工業株式会社のトップページ（スマホ）
スマホ（375px）
出典：daimatsu.cc ↗確認日 2026.10.27
大松工業株式会社製造業 · 大阪府
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

人と自然を描いたイラストで「塗装で社会を彩る」を見せ、塗装事例は塗料の種類のタグで探せるようにする。

大阪府八尾市の塗装会社のサイト。ファーストビューは、働く人・自転車・犬・木々などを描いた島のようなイラストに、英字の「We Color Society」と「塗装で社会を彩る」を重ねている。ABOUT US・SERVICE（3つの強み）・WORKS（塗装事例）・BLOG・RECRUIT と続き、紺色のフッターに住所・電話・FAXとお問い合わせへの導線をまとめている。

  1. 01ファーストビューに、人と自然が一緒に描かれたイラストを置き、BtoBの製造業らしくない親しみやすさを出している
  2. 02塗装事例のカードに「PEEK塗装」「酸化防止被膜」「焼付」などの塗料・方式のタグを付けている
  3. 03ブルーグレーの背景に、オレンジのCONTACTボタンとタグを差し色として使っている

CONVERSION集客の工夫

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

掲載していない事例があることを書く

WORKSの見出しの横に「Webサイトには掲載できない非公開事例もたくさんあります。詳しくはお問い合わせください。」と書いている。載っている事例だけで判断せず、相談してもらうきっかけになる。

強みを「技術・設備・内製化」の3つに分ける

SERVICEで、職人技と独自開発の技術力、5つの塗装ライン、研磨やプレスなどの内製化を、写真つきで3項目に分けている。発注先を比べている担当者が、対応範囲を短時間でつかめる。

ファーストビューで最新のブログを見せる

ファーストビューの右下に、BLOGの新着記事のカードを表示している。展示会や休業のお知らせなど、会社が動いていることが最初に伝わる。

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

COLOR配色

#E0E8ED背景 · ブルーグレー
#13294Bロゴ・フッター · ネイビー
#FE5000CONTACTボタン・タグ · オレンジ
#415472ブログカード
#232323本文テキスト

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

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
用途
英字見出し（ABOUT US・SERVICE など）
使用フォント
Jost
無料で近いもの
Jost
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h220px / 7001.4018px / 700
h324px / 7001.3016px / 700
本文（p）12px / 7001.5012px / 700
ボタン——16px / 400

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

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

  1. 01

    ヘッダー

    私たちについて・事業紹介・塗装事例・できごと・採用情報と、右端にオレンジの「CONTACT」ボタン。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    ファーストビュー

    人と自然のイラストに英字の「We Color Society」と「塗装で社会を彩る」。左下にメッセージ、右下にBLOGの新着カード。

    ファーストビュー／全面写真＋コピー型
  3. 03

    ABOUT US

    「産業が環境を支え、環境が人を育む社会へ。」の見出しと文章、「私たちについて」へのリンク。

    コンセプト／写真＋メッセージ型
  4. 04

    SERVICE

    左に見出しと説明、右に写真つきの3つの強みを縦に並べる。

    強み・選ばれる理由／写真とテキストの交互型
  5. 05

    WORKS（塗装事例）

    写真と事例名、塗料・方式のタグのカードを横にスライド。左に非公開事例の案内と「塗装事例一覧」。

    事例・実績／写真グリッド型
  6. 06

    BLOG

    左に大きな1件、右にサムネイルつきの2件。

    記事・メディア／注目記事の大判＋リスト型
  7. 07

    RECRUIT

    角丸の濃い色の帯に採用のメッセージと「採用情報はこちら」。

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

    フッター

    紺色の背景に英字が流れる帯、「お気軽にお問い合わせください。」とボタン、住所・電話・FAX・Instagram。

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

PARTSパーツ別に見る

02ファーストビューファーストビュー／全面写真＋コピー型
大松工業株式会社のファーストビュー（PC）PC
大松工業株式会社のファーストビュー（スマホ）SP
04SERVICE強み・選ばれる理由／写真とテキストの交互型
大松工業株式会社のSERVICE（PC）PC
大松工業株式会社のSERVICE（スマホ）SP
05WORKS（塗装事例）事例・実績／写真グリッド型
大松工業株式会社のWORKS（塗装事例）（PC）PC
大松工業株式会社のWORKS（塗装事例）（スマホ）SP
06BLOG記事・メディア／注目記事の大判＋リスト型
大松工業株式会社のBLOG（PC）PC
大松工業株式会社のBLOG（スマホ）SP
08フッターフッター／店舗情報＋ナビ型
大松工業株式会社のフッター（PC）PC
大松工業株式会社のフッター（スマホ）SP

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

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01製造業でも、人や暮らしを描いたイラストをファーストビューに使うと、会社の考え方を柔らかく伝えられる
  2. 02事例カードに素材・方式のタグを付け、発注担当者が自社の案件に近い事例を探せるようにする
  3. 03サイトに出していない実績があるなら、その旨と問い合わせへの案内を事例の近くに書く
  4. 04落ち着いた背景色に、問い合わせボタンだけ目立つ差し色を使う

FAQよくある質問

大松工業のサイトで使われているフォントは？

和文は Noto Sans JP、ABOUT US や SERVICE などの英字見出しは Jost です。どちらも Google Fonts で無料で使えます。

BtoBの製造業でイラストを使うと、軽く見えませんか？

このサイトでは、イラストはファーストビューで考え方を伝える役にとどめ、SERVICE や WORKS では実際の工場や製品の写真を使っています。イラストと写真の役割を分けると、親しみやすさと信頼感を両立しやすくなります。

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

塗装・めっき・板金などの加工業や、部品メーカーなど、事例の種類が多く、発注担当者に対応範囲を伝えたいBtoBの製造業に応用できます。

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

MOREほかの製造業の参考サイト

製造業のすべてを見る5件
webcan design --sitemap daimatsu.cc

大松工業株式会社のサイトマップ

  • 110ページ
  • トップページ/
  • 事業紹介/service/
  • できごと/blog/
    • 個別ページ/blog/<各ページ>/86件
  • 私たちについて/about/
  • 塗装事例/works/
    • 個別ページ/works/<各ページ>/15件
  • 採用情報/recruit/
  • プライバシーポリシー/privacy/
  • お問い合わせ/contact/
    • お問い合わせ/thanks/

2026.10.27 に公開中の sitemap.xmlと、トップページのヘッダー・メニュー・フッターのリンクから整理したものです。記事や事例などの個別ページは1件ずつではなく、件数つきの1項目にまとめています。サイトの更新で現在の構成とは異なる場合があります。

FROM REFERENCE TO YOUR SITE

このテイストで、
御社のメーカーのサイトを。

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

無料相談はこちら