1. TOP
  2. デザイン参考集
  3. 葬儀・寺社
  4. 善称寺

webcan analyze zensho-ji.com

FUNERAL & TEMPLE · 和歌山県 · PICKED 2026.11.07

善称寺葬儀・寺社のホームページデザイン参考 — 寺院・永代供養・淡い色

善称寺のトップページ(PC)
PC(1440px)
善称寺のトップページ(スマホ)
スマホ(375px)
出典:zensho-ji.com ↗確認日 2026.11.07
善称寺葬儀・寺社 · 和歌山県

EDITOR'S NOTE編集部の視点

淡いベージュの面に水色とオレンジのボタンを置き、お寺に相談する入口をいくつも用意した。

和歌山市の浄土真宗本願寺派の寺院のサイト。オープニングでロゴを見せたあと、境内の写真に縦書きのコピーを重ね、お知らせ・SNS・寺の紹介・ごあいさつ・交通アクセス・「善称寺ができること」・動画・おてらおやつクラブ・日記と続く。PCでは左側にメニューと住所・電話番号の欄が固定され、資料請求・お問い合わせのボタンがページの中に何度も出てくる。

  1. 01雲のような丸い形の背景と、水色・オレンジのボタンで、淡いベージュのページに柔らかさを出している
  2. 02「善称寺ができること」で、お墓・お葬式・法要・お仏壇の4つを写真と番号つきで交互に並べている
  3. 03テレビCMと、申し込んだ人のインタビュー2本を、動画のサムネイルとして並べている

3 VIEWPOINTS3つの視点で見る

デザインの視点

淡いベージュの面に水色とオレンジのボタンを使い、「お墓・お葬式・法要・お仏壇」の4つを写真と番号つきで左右交互に並べている。色を2色に絞ったボタンと、交互に並べる見せ方が真似できる。

集客の視点

ごあいさつで住職と僧侶の写真に法名と名前を添え、資料請求とお問い合わせを色違いの2つのボタンにしてページの中で何度も出している。LINE登録の欄で、登録すると何ができるかを先に書いている点も真似したい。

Webディレクターの視点

お知らせ・ごあいさつ・「善称寺ができること」・動画・費用の案内を順に並べ、そのあいだに資料請求とお問い合わせのボタンを繰り返し置く構成が参考になる。更新はお知らせと日記の2つの欄で回している。

CONVERSION集客の工夫

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

資料請求とお問い合わせを2つのボタンで並べる

動画の下と「費用について」の欄に、「資料請求はこちら」と「お問い合わせはこちら」を色違いのボタンで並べている。実測では、お問い合わせ・資料請求につながるリンクが7か所ある。

LINEの友だち登録の理由を書く

SNSの欄で「ラインの友だち登録をすると法事・相談の予約や資料請求が簡単にできて便利です!」と、登録すると何ができるかを書いてからボタンを置いている。

住職と僧侶の顔と名前を出す

「ごあいさつ」で住職と僧侶の写真に法名と名前を添え、「家に仏壇がない」という方にも喜んでご縁をいただいている、と書いている。初めての人が相談する相手を先に見せている。

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

COLOR配色

#FFFFFF背景
#EEEBE7背景(帯)
#FFA353ボタン · オレンジ
#7DBDCBボタン・見出しの飾り · 水色
#000000本文テキスト

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

TYPOGRAPHYフォント

用途
見出し
使用フォント
はんなり明朝(Hannari)
無料で近いもの
Shippori Mincho
用途
本文・ボタン
使用フォント
游明朝
無料で近いもの
Noto Serif JP
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h230px / 4001.2728px / 400
h320px / 600—20px / 600
本文(p)15px / 5001.6015px / 600
ボタン15px / 600—15px / 600

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

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

  1. 01

    左の固定メニュー

    PCでは左側にメニューと住所・電話番号を固定。スマホは上部のバー。

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

    ファーストビュー

    オープニングでロゴを見せたあと、境内の写真のスライドに縦書きのコピー「結ぶ絆から、広がるご縁へ」。

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

    善称寺のSNS

    LINE・YouTube・Instagram・Facebookのボタンと、それぞれの説明。

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

    善称寺について

    縦書きの文章で創建と歴史を紹介。

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

    ごあいさつ

    住職と僧侶の写真と法名・名前、寺報の案内。

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

    交通アクセス

    寺の概要の表と、電車・バス・車での行き方。

    アクセス/地図+時間表型
  8. 08

    善称寺ができること

    お墓・お葬式・法要・お仏壇を写真と交互に並べる。

    強み・選ばれる理由/写真とテキストの交互型
  9. 09

    善称寺の動画

    テレビCMと、申し込んだ人のインタビュー動画。

    お客様の声/カード型
  10. 10

    資料請求・お問い合わせ

    色違いのボタン2つ。

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

    費用について

    資料請求・お問い合わせと、見学・説明の予約。

    行動喚起/資料請求・来場予約型
  14. 14

    フッター

    住所・電話番号・寺務所の対応時間・定休日。

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

PARTSパーツ別に見る

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01申し込みの前の段階として「資料請求」と「お問い合わせ」を並べて置き、ページの中で何度も出す
  2. 02相談する相手(住職など)の顔と名前を、トップページで見せる
  3. 03できることを4つ程度に分け、写真と番号つきで交互に並べる
  4. 04LINEなどの登録ボタンには、登録すると何ができるかを一言添える

FAQよくある質問

善称寺のサイトで使われているフォントは?

実測では、見出しにWebフォントのはんなり明朝、本文とボタンに游明朝を使っています。無料で近づけるなら、見出しに Shippori Mincho、本文に Noto Serif JP が使えます。

お寺のサイトで問い合わせの入口はどう置けばよいですか?

このサイトは、資料請求とお問い合わせを色違いのボタンで並べ、動画の下やページ下部など複数の場所に置いています。PCでは左側の固定欄に電話番号と住所も出しています。

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

寺院・霊園・葬儀社のほか、相談してから申し込む流れのサービス(士業・住宅・保険など)で、資料請求と問い合わせの入口を作るときに応用できます。

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

webcan design --sitemap zensho-ji.com

善称寺のサイトマップ

  • 413ページ
  • 3ページ内セクション
  • トップページ/
    • アクセス/#accessページ内
    • 善称寺の動画を見る/#movieページ内
    • 善称寺について/#aboutページ内
  • お墓/納骨堂/yuzuriha/
  • お葬式/osousiki/
  • 四つの法要/houyou/
  • お仏壇/butsudan/
  • お問い合わせ/contact/
    • 送信完了・確認ページ/contact-confirm/
  • 資料請求/request/
    • 送信完了・確認ページ/request-confirm/
  • おてらおやつクラブ/kouken/
  • お知らせ/news/
    • 記事ページ/news/<各ページ>/78件
  • 善称寺の日記/diary/
    • 申込者の声/diary/uservoice/
      • 記事ページ/diary/uservoice/<各ページ>/7件
    • 記事ページ/diary/<各ページ>/314件
  • プライバシーポリシー/privacy/

外部リンクYouTube・LINE・Instagram・Facebook

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

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら