ワイヤーDL法親寺
本堂の写真と赤い帯のナビで、お寺の品格と「何ができるか」を最初に見せる。
webcan analyze shinko-ji.jp
FUNERAL & TEMPLE · 千葉県 · PICKED 2026.11.02
曹洞宗瓦谷山真光寺葬儀・寺社のホームページデザイン参考 — 明朝体・5色のメニュー・お知らせ中心
出典：shinko-ji.jp ↗確認日 2026.11.02
EDITOR'S NOTE編集部の視点
見学会の日程をトップに出し、寺の日々の知らせを写真で並べる。
千葉県袖ケ浦市の曹洞宗の寺で、樹木葬を案内するサイト。PCのファーストビューは山門の屋根の写真に毛筆のロゴを重ね、上に5色のメニュー、左に「真光寺の樹木葬が選ばれる4つの理由」、右に最新のお知らせを置いている。その下は左にバス見学会の日程や行事予定、右に写真つきのお知らせを並べる2列の構成にしている。
- 01紫・白・赤・黄・緑の5色のメニューに、それぞれの下の項目名まで見せている
- 02バス見学会の日程を、見学の申し込みと資料請求の案内とあわせてトップに載せている
- 03お知らせを写真つきのカードで並べ、行事や境内の様子、道路の案内を載せている
3 VIEWPOINTS3つの視点で見る
デザインの視点
上端の5色のメニューで項目を色分けし、それぞれに中の項目名を添えて整理している。全体を明朝体（Noto Serif JP）にそろえ、山門の写真を大きく使っている点も参考になる。
集客の視点
バス見学会の日程をトップに置き、個別見学と資料請求の案内を続けている。スマホでは画面下に電話問合せ・バス見学会日程・メール問合せを固定し、連絡の入口を複数用意している点を真似したい。
Webディレクターの視点
メニューを寺の紹介・樹木葬・見学会・お知らせ・里山再生の5つに絞り、見学の申し込みと資料請求の入口を画面の端に固定している。トップにお知らせの一覧を置き、更新がそのまま見える形にしている。
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線見学会バス見学会お問い合わせ資料請求 / 樹木葬バス見学会
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
見学の入口を複数用意する
PCでは画面の右に「バス見学会ご予約」「お問い合わせ 資料請求」、左に「交通アクセス」の丸いタブを出している。左の列には東京駅発のバス見学会の日程と、個別見学の申し込みボタンを置いている。
スマホでは電話と見学の案内を下に固定
スマホでは画面下に「樹木葬墓苑」「電話問合せ」「バス見学会日程」「メール問合せ」を並べた帯を固定している。電話とメールのどちらからでも連絡先へ進める。
日々の知らせを写真で見せる
道路の復旧の案内や法要の中止の知らせ、境内の花の様子などを、日付と写真つきでトップに並べている。Instagram や行事予定、年3回の新聞「瓦谷山だより」の案内も同じ画面に載せている。
チェック項目は 2026.11.02 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#442867メニュー（寺の紹介） · 紫
#C52B2Dメニュー（見学会） · 赤
#DCBD3Aメニュー（お知らせ） · 黄
#578D4Aメニュー（里山再生） · 緑
#305CCCバス見学会の日程ボタン · 青
#F0AD4E個別見学のボタン · オレンジ
#333333本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- Noto Serif JP
- 無料で近いもの
- Noto Serif JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | — | — | 13.5px / 700 |
| h2 | 16px / 700 | 1.50 | 14.3px / 700 |
| h3 | 16px / 700 | 1.30 | 16px / 700 |
| 本文（p） | 16px / 400 | 1.60 | 15.8px / 400 |
| ボタン | 16px / 700 | 1.50 | 12px / 700 |
実測値（PC 1440px・SP 375px、2026.11.02 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
真光寺の樹木葬が選ばれる4つの理由
強み・選ばれる理由／番号つき3〜4項目型 - 04
重要なお知らせ
お知らせ／お知らせ一覧型 - 05
- 06
- 07
Instagram・Facebook・YouTube
イベント・キャンペーン／特集バナー並び型 - 08
- 09
瓦谷山だより
イベント・キャンペーン／特集バナー並び型 - 10
フッター
フッター／店舗情報＋ナビ型 - 11
PARTSパーツ別に見る
PC
SP
PC
SP
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.02 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01見学会や説明会の日程を、トップの目につく場所に載せる
- 02団体の見学会とは別に、個別の見学の入口も用意する
- 03スマホの画面下に、電話とメールの連絡先を並べて固定する
- 04日々の知らせを写真つきで更新し、活動の様子を見せる
FAQよくある質問
真光寺のサイトで使われているフォントは？
本文と見出しは Noto Serif JP です。Google Fonts で無料で使えます。
お寺のサイトでトップにお知らせを多く載せるのはなぜ？
このサイトは道路の状況や法要の中止など、参拝する人に必要な知らせを日付つきでトップに載せています。来る前に確かめたい情報をすぐ見られる形です。
どんな業種の参考になりますか？
寺社や霊園のほか、見学会や説明会を定期的に開く施設、地域の活動を発信している団体に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は曹洞宗瓦谷山真光寺および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの葬儀・寺社の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の葬儀・寺社サイトを。
「曹洞宗瓦谷山真光寺のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。