ワイヤーDLおぶつだんの佐倉
「何にお困りですか？」の3つのボタンで、来た人を目的別に振り分ける。
webcan analyze www.bodaijuen.jp
FUNERAL & TEMPLE · 熊本県 · PICKED 2026.10.26
公園墓地 菩提樹苑葬儀・寺社のホームページデザイン参考 — 霊園・縦書き・余白多め
出典：www.bodaijuen.jp ↗確認日 2026.10.26
EDITOR'S NOTE編集部の視点
筆文字の「菩提樹苑」と縦書きのメニューで、寺院が営む霊園の落ち着いた雰囲気を伝える。
熊本市西区の金峰山自然公園内にある、寺院が管理する公園墓地のサイト。ファーストビューは、山門・桜・墓地の写真が重なりながら切り替わる中に、白い筆文字の「菩提樹苑」を縦に大きく置いている。その下の白いパネルに縦書きのメニューを並べ、お知らせ、菩提樹苑について、お墓の種類、安心サポート、法事のご案内、終活のおはなし、熊本地震の際の対応と復興の取り組み、お問い合わせ・資料請求と続く。
- 01サイト名を白い筆文字で縦に大きく置き、写真の上に重ねている
- 02メニューや見出しを縦書きにし、見出しの横に白い霞のような線をあしらっている
- 03お墓の種類や安心サポートを、細い線のアイコンと短い説明のカードで並べている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ / お問い合わせ・資料請求
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
迷いやすい選択肢をカードで整理する
「お墓の種類」で規格墓・自由墓、永代供養墓、納骨堂の3つをカードで並べ、それぞれに短い説明と「詳しく見る」を付けている。お墓を初めて探す人が、違いを比べてから詳しいページに進める。
お墓を持つ人向けのサービスも並べる
「安心サポート」で、お墓参り代行・お墓のメンテナンス・墓じまい・仏壇の処分などをアイコン付きで並べている。新しくお墓を探す人だけでなく、すでにお墓を持つ人の相談の入口にもなっている。
問い合わせは資料請求とセットにする
ページの終わりに「お問い合わせ・資料請求」を置き、メールの入口と電話番号、窓口の受付時間・定休日を並べている。すぐ電話するのをためらう人も、まず資料を取り寄せることから始められる。
チェック項目は 2026.10.26 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F9F8F7背景 · ごく薄いグレー
#FFFFFFパネル・カード
#666666本文テキスト
#D9AF54差し色（お知らせの画像・ロゴの山の形） · ゴールド
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文（見出し・本文・ナビ）
- 使用フォント
- TsukuBRdGothicStd-M（読み込まれない環境では游ゴシック）
- 無料で近いもの
- Zen Maru Gothic
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 18px / 400 | 1.00 | 17.5px / 400 |
| h3 | 14px / 400 | 1.00 | 10.6px / 400 |
| 本文（p） | 14px / 400 | 2.00 | 12.5px / 400 |
| ボタン | 14px / 500 | 2.00 | 12.5px / 400 |
実測値（PC 1440px・SP 375px、2026.10.26 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
PARTSパーツ別に見る
PC
SP
PC
PC
SP
PC
SP
PC
PC番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.26 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01サイト名や見出しを縦書きにして、和の落ち着きを出す
- 02種類やサービスが多いときは、アイコンと短い説明のカードに分けて並べる
- 03電話の前の段階として、資料請求の入口を用意する
- 04受付時間と定休日を問い合わせの入口のすぐそばに書く
FAQよくある質問
菩提樹苑のサイトで使われているフォントは？
CSSでは和文に TsukuBRdGothicStd-M（筑紫B丸ゴシック）を指定し、読み込まれない環境では游ゴシックで表示されます。似た雰囲気を無料で出すなら、丸みのある Zen Maru Gothic（Google Fonts）が使えます。ロゴの「菩提樹苑」は筆文字の画像です。
霊園のサイトでは、どんな情報を最初に用意するとよいですか？
このサイトは、お墓の種類の違い、お墓を持った後のサポート、法事の案内を、それぞれカードで分けて並べています。お墓を探す人が比べたいことと、相談したいことの入口がそろっています。
どんな業種の参考になりますか？
霊園・寺院のほか、葬儀社・仏壇店など、落ち着いた雰囲気を大切にしながら資料請求や相談につなげたい業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は公園墓地 菩提樹苑および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの葬儀・寺社の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の葬儀・寺社サイトを。
「公園墓地 菩提樹苑のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。