WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 工務店
  4. 四條畷大工衆 木又工務店

webcan analyze kimata1975.com

HOME BUILDER · 大阪府 · PICKED 2026.10.21

四條畷大工衆 木又工務店工務店のホームページデザイン参考 — 明朝体・縦書き・ベージュ

四條畷大工衆 木又工務店のトップページ（PC）
PC（1440px）
四條畷大工衆 木又工務店のトップページ（スマホ）
スマホ（375px）
出典：kimata1975.com ↗確認日 2026.10.21
四條畷大工衆 木又工務店工務店 · 大阪府
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

大工の顔と縦書きの明朝体で、「木又流」の家づくりを一本の筋で語る。

大阪府四條畷市で木の家を建てる工務店のサイト。ファーストビューは木材に手を当てる大工の写真に、縦書きの明朝体で「理屈では語れない心地よさ。大工の本気が細部に宿る、ずっといい家。」と重ねている。親子2代で棟梁を務める「思いの継承」の文章、番号つきの「木又流の家づくり」5項目、所在地・種別・坪数のタグつきの施工事例、大工のインタビュー、会社情報、お知らせ、お問合せ・資料請求へと続く。

  1. 01ファーストビューは大工の人物写真と縦書きの明朝体のコピーだけで構成し、職人の工務店であることを一目で伝えている
  2. 02「木又流の家づくり」を01〜05の大きな番号と縦書きの見出し、写真で、左右交互に並べている
  3. 03施工事例のカードに、所在地・種別（店舗・施設／フルリノベーション／新築住宅）・設計（自社設計）・坪数をタグで添えている

CONVERSION集客の工夫

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

事例を条件で読めるようにする

施工事例ごとに所在地・種別・設計・坪数のタグを付けている。家を検討している人が、自分の条件に近い事例を見つけやすい。

家づくりの考え方を番号で整理する

「木にかける情熱」「木又流を受け継ぐ大工衆」「思いの継承」「木又の家の性能」「家づくりの流れ」を01〜05の番号つきで並べ、それぞれ「詳しく知る」から詳細ページへ進める。性能や流れまで、順に読み進められる。

問い合わせと資料請求を1つのボタンにまとめる

PCでは画面右端の縦長のエリアに「お問合せ・資料請求」のボタンを置き、ページの最後にも同じボタンを置いている。スマホではヘッダーにメールのアイコンを置いている。

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

COLOR配色

#F0ECE5背景 · オフホワイト
#E0DACCセクション背景 · ベージュ
#CFC8B8番号・区切り · グレージュ
#000000ヘッダー・フッター・本文テキスト
#FFFFFFファーストビューのコピー

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

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Shippori Mincho B1
無料で近いもの
Shippori Mincho B1
用途
英数字
使用フォント
Oswald
無料で近いもの
Oswald
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h238px / 7001.5024px / 700
本文（p）16px / 6002.0014px / 500

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

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

  1. 01

    ヘッダー

    PCでは画面右端の黒い縦長のエリアに、ロゴ・縦書きのナビ・「お問合せ・資料請求」。スマホではロゴ・メールのアイコン・MENU。

    ヘッダー／左固定サイドナビ型
  2. 02

    ファーストビュー

    大工の写真に、縦書きの明朝体のコピー。

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

    思いの継承

    親子2代で棟梁を務めることを伝える文章。

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

    木又流の家づくり

    01〜05の大きな番号と縦書きの見出し、写真、「詳しく知る」を左右交互に。

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

    施工事例

    写真・所在地・名前・種別／設計／坪数のタグ・説明文・「詳しく知る」。「施工事例一覧」へ。

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

    大工たちの思い

    大工の写真と「木又誠次インタビュー」へのボタン。

    人・代表／代表・院長あいさつ型
  7. 07

    会社情報

    町並みの写真と店舗の写真、「会社情報」へのボタン。

    コンセプト／写真＋メッセージ型
  8. 08
  9. 09
  10. 10

    フッター

    ロゴ・会社名・所在地・電話・FAX・営業時間・定休日とナビ。

    フッター／店舗情報＋ナビ型
四條畷大工衆 木又工務店の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

02ファーストビューファーストビュー／全面写真＋コピー型
四條畷大工衆 木又工務店のファーストビュー（スマホ）SP
04木又流の家づくり強み・選ばれる理由／写真とテキストの交互型
四條畷大工衆 木又工務店の木又流の家づくり（スマホ）SP
05施工事例事例・実績／写真グリッド型
四條畷大工衆 木又工務店の施工事例（スマホ）SP
06大工たちの思い人・代表／代表・院長あいさつ型
四條畷大工衆 木又工務店の大工たちの思い（スマホ）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施工事例に、所在地・種別・坪数のタグを付ける
  4. 04問い合わせと資料請求を1つのボタンにまとめ、常に見える位置に置く

FAQよくある質問

木又工務店のサイトで使われているフォントは？

見出しと本文は Shippori Mincho B1、数字や英字は Oswald です。どちらも Google Fonts で無料で使えます。

ファーストビューに人物の写真を使ってもよいですか？

このサイトのように、実際に家を建てる大工の写真を使うと、誰が建てるのかがひと目で伝わります。代表や職人が顔を出せる工務店なら、建物の写真よりも強い印象を残せます。

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

工務店・大工のほか、家具工房・造園・左官など、職人の技術と人柄で選ばれる業種に応用できます。

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

MOREほかの工務店の参考サイト

工務店のすべてを見る6件

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の工務店サイトを。

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

無料相談はこちら