WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 製造業
  4. マルニ工業株式会社

webcan analyze maruni-ind.co.jp

MANUFACTURING · 大阪府 · PICKED 2026.10.17

マルニ工業株式会社製造業のホームページデザイン参考 — BtoBメーカー・グリーン・製品写真

マルニ工業株式会社のトップページ（PC）
PC（1440px）
マルニ工業株式会社のトップページ（スマホ）
スマホ（375px）
出典：maruni-ind.co.jp ↗確認日 2026.10.17
マルニ工業株式会社製造業 · 大阪府
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

製品の接写写真と短いコピーで、「小さな部品のメーカー」の誇りを伝える。

パンク修理材をつくる大阪のメーカーのサイト。ファーストビューは、修理用パッチを貼ったタイヤの写真に「小さなもので 安心と未来を支える。」という短いコピーを重ね、右上に緑の「お問い合わせ」ボタンと縦に並んだナビを置いている。会社の紹介、製品、技術、記事、会社情報、問い合わせと続き、製品は用途のアイコンから探せるようにしている。

  1. 01ファーストビューは製品（修理用パッチ）を貼ったタイヤの写真と、短い日本語のコピーと英語のサブコピー
  2. 02「MADE IN JAPAN」「EMERGENCY TIRE SEALANT」などの大きな英字を帯のように流し、セクションの区切りにしている
  3. 03白・グレーの面と、濃い緑の面を交互に使い、緑の色だけで会社の印象をそろえている

CONVERSION集客の工夫

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

用途から製品を探せる

製品のセクションに「カテゴリから探す」として、自転車・バイク・乗用車/トラック/バス・コンベヤベルトのアイコンを並べている。品番を知らない人でも、自分の用途から目的の製品にたどり着ける。

問い合わせボタンを右上の目立つ位置に

ナビの一番上に、ブランドの緑で塗った「お問い合わせ」ボタンを置き、ページの最後にも緑の大きなCONTACTの面を設けている。BtoBのメーカーでは、相談や見積もりの入口を迷わせないことが大切になる。

技術と記事で専門性を見せる

「ABOUT MARUNI and TECHNOLOGIES」で会社と技術（ゴム配合・接着剤設計）を紹介し、「MARUNI JOURNAL」で製品の使い方などの記事を並べている。製品の一覧だけでなく、技術の裏付けを見せることで信頼につながる。

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

COLOR配色

#FFFFFF背景
#009144ブランドカラー・ボタン · グリーン
#1D3026本文テキスト・濃色セクション · ダークグリーン
#E8EAE9セクション背景 · ライトグレー
#DBE0E0ファーストビューの背景
#A9B5AEサブテキスト

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

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
用途
英字見出し（PRODUCTS・CONTACT など）
使用フォント
Akshar
無料で近いもの
Akshar
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h116px / 400—16px / 400
h213.5px / 7001.6013.1px / 700
h317.4px / 6001.6014.1px / 600
本文（p）13.5px / 5001.3013.1px / 500
ボタン14.5px / 7001.6016px / 400

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

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

  1. 01

    ヘッダー

    左上にロゴ。右上に緑の「お問い合わせ」ボタンと、その下に縦に並んだナビ、言語切り替え。

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

    ファーストビュー

    修理用パッチを貼ったタイヤの写真と、短いコピー。

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

    会社の紹介

    大きな英字の帯と、作業風景の写真・紹介文。

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

    PRODUCTS

    主力製品を大きく、ほかの製品を小さく並べる。

    事例・実績／大判1件＋サムネ型
  5. 05

    カテゴリから探す

    自転車・バイク・乗用車/トラック/バス・コンベヤベルトのアイコン。

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

    ABOUT MARUNI and TECHNOLOGIES

    会社と技術を写真つきのカードで2つ。

    強み・選ばれる理由／写真とテキストの交互型
  7. 07
  8. 08

    COMPANY

    企業情報・採用情報・CSRへのリンク。

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

    CONTACT

    緑の大きな面で、製品や技術の相談を案内。

    行動喚起／電話＋Web予約の2ボタン帯型
  10. 10
マルニ工業株式会社の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01ファーストビューは自社製品の接写写真と、会社の役割を短く言い切るコピーにする
  2. 02製品は品番ではなく、用途（何に使うか）のアイコンから探せるようにする
  3. 03ブランドカラーを1色決め、ボタンと濃色のセクションを同じ系統の色でそろえる
  4. 04製品一覧に加えて、技術の説明や記事で専門性を見せる

FAQよくある質問

マルニ工業のサイトで使われているフォントは？

和文は Noto Sans JP、英字の見出しは Akshar です。どちらも Google Fonts で無料で使えます。

部品メーカーのような地味な製品でも、写真で魅力は伝わりますか？

伝わります。製品単体ではなく、実際に使われている場面（タイヤに貼った状態など）を接写すると、何のための製品かが一目で分かり、印象にも残ります。

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

部品・素材・工具などのBtoBメーカーや、町工場の会社サイトに応用できます。製品の用途が多い会社ほど、用途から探せる作りが役に立ちます。

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

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら