webcan analyze houshinji.or.jp

FUNERAL & TEMPLE · 岡山県 · PICKED 2026.10.29

法親寺葬儀・寺社のホームページデザイン参考 — 寺院・明朝体・縦書き

出典：houshinji.or.jp ↗確認日 2026.10.29

法親寺葬儀・寺社 · 岡山県

サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

本堂の写真と赤い帯のナビで、お寺の品格と「何ができるか」を最初に見せる。

岡山県玉野市の浄土真宗本願寺派の寺院のサイト。ファーストビューは本堂の写真を全面に敷き、左上に縦書きのロゴ、右に縦書きのコピーを重ね、写真の真下に赤い帯のナビ（法親寺について・墓地・墓苑・永代供養・年間行事・仏事・檀家のご入会）を置いている。種類ごとのタブで切り替える最新情報、檀家のご入会・納骨堂・墓地・永代供養墓の4枚のカード、交通アクセス、用件別の電話番号を載せたフッターの順に続く。

01本堂の写真に縦書きのロゴとコピーを重ねた、和の品格が出るファーストビュー
02写真の真下に赤い帯のナビを置き、お寺でできることを6つの入口として見せている
03最新情報を「お寺からのお知らせ」「今日の法話」などの種類ごとのタブで切り替えられる

3 VIEWPOINTS3つの視点で見る

デザインの視点

ファーストビューは本堂の写真に縦書きのコピーを重ね、その真下に赤い帯のナビを置いている。次の最新情報では、お知らせ・行事・法話などをタブで切り替える。檀家のご入会・納骨堂・墓地・永代供養墓の4枚の写真カードと、黒地の連絡先の帯で全体を構成している。

集客の視点

「檀家のご入会」「納骨堂」「墓地・墓苑」「永代供養墓」の4枚のカードを最新情報の下に並べ、利用目的から選べるようにしている。フッターには法要と墓地の電話番号を分けて載せ、交通アクセスをカードの次の大きなブロックで見せている。

Webディレクターの視点

上部にお知らせ一覧、その下に檀家の入会・納骨堂・墓地・永代供養墓の4分類のカードを置いている。さらに交通アクセスと、種別ごとに分けた電話窓口をまとめて載せている。お知らせを種別タブで整理する作りは、更新担当者が増えても運用しやすい。

CONVERSION集客の工夫

✓電話番号をヘッダーに常設PC・ファーストビュー

－タップで電話できるSP・tel:リンク 0か所

－SPの追従ボタンSP・画面下に固定

✓予約・問い合わせ導線お問い合わせ

✓LINEで相談・予約LINE公式アカウント

－営業・診療時間の明記トップページ内

相談したい内容から選ばせる

檀家のご入会・納骨堂・墓地・墓苑・永代供養墓を、写真と縦書きの名前を載せた4枚のカードで並べている。お墓や納骨のことで調べている人が、自分の用件の入口をすぐ見つけられる。

用件ごとに電話番号を分ける

フッターに「法要・仏事に関するお問い合わせ」と「墓地・永代供養墓に関するお問い合わせ」で別の電話番号を載せ、メールでの問い合わせへの入口も置いている。電話をかける前に、どちらにかければよいかが分かる。

道順を交通手段ごとに書く

交通アクセスのブロックで、住所・電話番号に加えて、電車・お車・路線バスそれぞれの行き方と所要時間を書いている。初めてお寺を訪ねる人の不安を減らせる。

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

COLOR配色

#000000フッター・カードの背景 · ブラック

#433832「最新情報」のタブ · ダークブラウン

#E73414ナビの帯 · レッド

#CBCBCB「最新情報」の背景（文様） · ライトグレー

#961301差し色（タブの印・リンク） · えんじ

#FFFFFFカード・暗い背景の上の文字 · ホワイト

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

TYPOGRAPHYフォント

用途: 和文見出し・本文
使用フォント: ヒラギノ明朝 Pro
無料で近いもの: Noto Serif JP

用途: 英字
使用フォント: Libre Baskerville
無料で近いもの: Libre Baskerville

要素	PC サイズ / 太さ	PC 行間	SP サイズ / 太さ
本文（p）	14px / 400	1.23	14px / 400

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

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

01
ファーストビュー
本堂の写真に、左上の縦書きのロゴと右の縦書きのコピーを重ねる。写真は切り替わる。
ファーストビュー／全面写真＋コピー型
02
ナビ
写真の真下に赤い帯で、法親寺について・墓地・墓苑・永代供養・年間行事・仏事・檀家のご入会の6つ。
記事・メディア／カテゴリナビ＋検索型
03
最新情報
「すべて」「お寺からのお知らせ」「お寺の行事」「今日の法話」などのタブで切り替える一覧。
お知らせ／お知らせ一覧型
04
檀家・納骨・墓地・永代供養
写真と縦書きの名前を載せたカードを4枚並べる。
メニュー・サービス／アイコン／写真グリッド型
05
交通アクセス
お寺の写真を背景に、住所・電話、電車・お車・路線バスの行き方とGoogleマップ。
アクセス／地図＋時間表型
06
フッター
サイトマップ、用件別の電話番号2つとメールの入口、SNSへのリンク。
フッター／店舗情報＋ナビ型

PARTSパーツ別に見る

法親寺のファーストビュー（PC） — 01ファーストビューファーストビュー／全面写真＋コピー型

法親寺の檀家・納骨・墓地・永代供養（PC） — 04檀家・納骨・墓地・永代供養メニュー・サービス／アイコン／写真グリッド型

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

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

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

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

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

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

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

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

01建物や境内の写真を大きく見せ、ロゴとコピーを縦書きにすると和の品格が出る
02お墓・納骨・入会など、問い合わせの多い用件はカードで入口を分ける
03お知らせが多いときは、種類ごとのタブで切り替えられるようにする
04電話番号を用件別に分けて載せ、交通手段ごとの道順を書いておく

FAQよくある質問

法親寺のサイトで使われているフォントは？

和文はヒラギノ明朝、英字には Libre Baskerville が読み込まれています。無料で近づけるなら、和文は Noto Serif JP、英字は Libre Baskerville が使えます。

お寺のサイトには何を載せればいいですか？

このサイトでは、行事や法話などのお知らせ、檀家・納骨・墓地・永代供養の案内、交通アクセス、用件別の連絡先を載せています。檀家の方と、お墓や納骨のことで初めて調べる方の両方が、必要な情報にたどり着ける作りです。

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

寺院・神社のほか、霊園や葬儀社など、伝統や格式を大切にしながら相談の入口を分かりやすくしたい業種に応用できます。

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

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

ワイヤーDL

FUNERAL & TEMPLE · 千葉県 · 2026.11.02

曹洞宗瓦谷山真光寺

見学会の日程をトップに出し、寺の日々の知らせを写真で並べる。

#明朝体#5色のメニュー#お知らせ中心#見学会

葬儀・寺社のすべてを見る6件

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら

法親寺葬儀・寺社のホームページデザイン参考 — 寺院・明朝体・縦書き

EDITOR'S NOTE編集部の視点