1. TOP
  2. デザイン参考集
  3. 葬儀・寺社
  4. おぶつだんの佐倉

webcan analyze sakura-butudan.co.jp

FUNERAL & TEMPLE · 和歌山県 · PICKED 2026.10.23

おぶつだんの佐倉葬儀・寺社のホームページデザイン参考 — 明朝体・クリーム色・縦書き

おぶつだんの佐倉のトップページ(PC)
PC(1440px)
おぶつだんの佐倉のトップページ(スマホ)
スマホ(375px)
出典:sakura-butudan.co.jp ↗確認日 2026.10.22
おぶつだんの佐倉葬儀・寺社 · 和歌山県

EDITOR'S NOTE編集部の視点

「何にお困りですか?」の3つのボタンで、来た人を目的別に振り分ける。

和歌山市のお仏壇・お仏具の専門店のサイト。PCのファーストビューは左にロゴ・縦並びのナビ・電話番号・営業時間をまとめ、右に和室に置いた金仏壇などの写真をスライドで大きく見せている。直後に「お仏壇のことで何かお困りですか?」として3つのボタンを置き、お仏壇・お仏具の種類の紹介、職人へのインタビューをまとめた「読みもの」、トピックスへと続く。

  1. 01PCのファーストビューは、左の列にロゴ・ナビ・アクセス・電話番号・営業時間と定休日を縦に並べている
  2. 02「お仏壇選びで悩んでいる」「お仏壇・仏具を探している」「店舗を確認したい」の3つのボタンで、目的別の入口を作っている
  3. 03紺色の背景のブロックで、仏壇の製作所の社長へのインタビューと代表インタビューを「読みもの」としてまとめている

CONVERSION集客の工夫

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

目的別の3つの入口を最初に置く

ファーストビューのすぐ下で「お仏壇のことで何かお困りですか?」と問いかけ、選び方・商品・店舗の3つのボタンを並べている。初めて仏壇を買う人が、自分の状況に合うページから読み始められる。

電話番号と営業時間を常に見える位置に

PCではファーストビューの左の列に電話番号・営業時間・定休日を置き、スクロール後は横長のヘッダーの右に電話番号とアクセスのボタンを出している。スマホのヘッダーにも「電話番号」「アクセス」のアイコンを並べている。

作り手の話で品質を伝える

「職人の技術とこころ」として、取り扱う仏壇の製作所の社長へのインタビュー記事を写真つきで並べている。値段や見た目だけでは比べにくい商品の背景を、作り手の言葉で伝えている。

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

COLOR配色

#FFFEF5背景 · クリーム
#3B3529フッター · ダークブラウン
#E6E4D0区切り・枠線
#726D60ボタン・補助テキスト
#F5A0A0お問合せの帯 · ピンク
#000000本文テキスト

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

TYPOGRAPHYフォント

用途
和文見出し・ナビ
使用フォント
Shippori Mincho
無料で近いもの
Shippori Mincho
用途
和文本文・ボタン
使用フォント
Zen Kaku Gothic New
無料で近いもの
Zen Kaku Gothic New
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h233px / 4001.1515px / 600
h320px / 5001.6020px / 500
本文(p)16px / 4001.6316px / 400
ボタン15px / 4001.1515px / 400

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

STRUCTUREページ構成(上から順に)

  1. 01

    ヘッダー(左の列)

    PCはロゴ・縦並びのナビ・アクセス・電話番号・営業時間と定休日を左にまとめる。スクロール後は横長のヘッダーに切り替わる。

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

    ファーストビュー

    和室に置いた金仏壇や、手を合わせる人の写真のスライド。右下に「読みもの」への丸いリンク。

    ファーストビュー/全面写真+コピー型
  3. 03
  4. 04

    お仏壇のことで何かお困りですか?

    お仏壇選びで悩んでいる・お仏壇・仏具を探している・店舗を確認したい の3つのボタン。

    記事・メディア/カテゴリナビ+検索型
  5. 05

    お仏壇という家族の絆

    家族の写真と、お仏壇への考え方の文章。

    コンセプト/写真+メッセージ型
  6. 06

    おぶつだん佐倉の3つのこだわり

    強み・選ばれる理由/番号つき3〜4項目型
  7. 07

    お仏壇紹介

    金仏壇・唐木仏壇・家具調仏壇・上置仏壇。縦書きの見出し。

    メニュー・サービス/アイコン/写真グリッド型
  8. 08

    お仏具紹介

    おりん・ご本尊・お位牌・お念珠・お手元供養・小物。

    メニュー・サービス/アイコン/写真グリッド型
  9. 09

    読みもの「職人の技術とこころ」

    仏壇の製作所の社長へのインタビューの一覧と、代表インタビュー。

    人・代表/代表・院長あいさつ型
  10. 10

    トピックス

    お仏壇/お仏具紹介 と お役立ち情報 の2列。日付とタグつき。

    記事・メディア/記事カードグリッド型
  11. 11

    オンラインストア・コラボ仏壇のバナー

    イベント・キャンペーン/特集バナー並び型
  12. 12

    お問合せフォームはこちら

    ピンクの帯。

    行動喚起/電話+Web予約の2ボタン帯型
  13. 13

    フッター

    サイトマップ・住所・営業時間・定休日・TEL・FAX。

    フッター/店舗情報+ナビ型
おぶつだんの佐倉の構成をWEBCANの部品で組んだワイヤーフレーム(PC)

PARTSパーツ別に見る

02ファーストビューファーストビュー/全面写真+コピー型
おぶつだんの佐倉のファーストビュー(PC)PC
おぶつだんの佐倉のファーストビュー(スマホ)SP
04お仏壇のことで何かお困りですか?記事・メディア/カテゴリナビ+検索型
おぶつだんの佐倉のお仏壇のことで何かお困りですか?(PC)PC
おぶつだんの佐倉のお仏壇のことで何かお困りですか?(スマホ)SP
09読みもの「職人の技術とこころ」人・代表/代表・院長あいさつ型
おぶつだんの佐倉の読みもの「職人の技術とこころ」(スマホ)SP
10トピックス記事・メディア/記事カードグリッド型
おぶつだんの佐倉のトピックス(PC)PC
おぶつだんの佐倉のトピックス(スマホ)SP
12お問合せフォームはこちら行動喚起/電話+Web予約の2ボタン帯型
おぶつだんの佐倉のお問合せフォームはこちら(PC)PC
おぶつだんの佐倉のお問合せフォームはこちら(スマホ)SP

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01ファーストビューの直下に「何にお困りですか?」と問いかけ、目的別のボタンを3つ置く
  2. 02電話番号と営業時間・定休日を、ナビと同じ列にまとめて常に見せる
  3. 03商品の種類ごとに、短い説明と「詳しく見る」をつけた一覧を作る
  4. 04作り手へのインタビューを「読みもの」としてまとめ、品質の背景を伝える

FAQよくある質問

おぶつだんの佐倉のサイトで使われているフォントは?

見出しとナビは Shippori Mincho、本文とボタンは Zen Kaku Gothic New です。どちらも Google Fonts で無料で使えます。

左に縦のナビを置くレイアウトは、ふつうのヘッダーと何が違いますか?

ロゴ・ナビ・電話番号・営業時間を1つの列にまとめられるので、写真を広く見せながら連絡先も同時に見せられます。このサイトでは、スクロールすると横長のヘッダーに切り替わります。

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

仏壇・仏具店のほか、墓石店・呉服店・家具店など、高価で選び方に迷いやすい商品を扱う地域の専門店に応用できます。

MOREほかの葬儀・寺社の参考サイト

webcan design --sitemap sakura-butudan.co.jp

おぶつだんの佐倉のサイトマップ

  • 169ページ
  • トップページ/
  • おぶつだんの佐倉について/about/
  • お仏壇選びについて/select/
  • お仏壇/お仏具/products/
    • 金仏壇/products/butsudan01/
    • 唐木仏壇/products/butsudan02/
    • 家具調仏壇/products/butsudan03/
    • 上置仏壇/products/butsudan04/
    • おりん/products/butsugu01/
    • ご本尊/products/butsugu02/
    • お位牌/products/butsugu03/
    • お念珠/products/butsugu04/
    • お手元供養/products/butsugu05/
  • 店舗と会社のご案内/company/
  • お問い合わせ/contact/
  • お仏壇のある風景/story/
  • 暮らしになじむ、 シンプルなお仏壇/lp/
  • 記事一覧へ/interview/
    • 個別ページ/interview/<各ページ>/7件
  • さくらトピックス/topics/
    • 小物/topics/butsugu06/
    • 記事ページ/topics/<各ページ>/140件
  • 個人情報の取り扱いについて/privacy/
  • お問い合わせ/thanks/

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

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の葬儀・寺社サイトを。

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

無料相談はこちら