webcan analyze www.tokozenji.or.jp

FUNERAL & TEMPLE · 神奈川県 · PICKED 2026.11.11

白山東光禅寺葬儀・寺社のホームページデザイン参考 — 黒と白・明朝体・写真が主役

出典：www.tokozenji.or.jp ↗確認日 2026.11.11

白山東光禅寺葬儀・寺社 · 神奈川県

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

EDITOR'S NOTE編集部の視点

暗いファーストビューから白い本文へ切り替え、行事の新着と住職のあいさつを先に読ませる。

横浜市金沢区の臨済宗の禅寺のサイト。ファーストビューは黒地に木像の写真を大きく置き、中央にロゴ、下にナビ（はじめに・坐禅・写経体験・文化財写真集・各種ご供養・行事のご案内・支援活動）。右上に電話番号と住所を出している。その下に最新情報と寺報、SNSへの案内、境内の写真、住職と前住職の写真とあいさつ、寺の縁起と開基の由来、文化財写真集のバナー、坐禅・写経体験と続く。

01ファーストビューを黒地にして、木像の写真と白いロゴ・ナビだけで構成している
02本文は明るいグレー（#FAFAFA）の背景に明朝体で、段落ごとに中央揃えにしている
03「東光禅寺縁起」などの章の頭に、黒い帯と白黒の古い写真を挟んで区切っている

3 VIEWPOINTS3つの視点で見る

デザインの視点

ファーストビューを黒地に木像の写真と白いロゴ・ナビだけにし、本文は明るいグレー（#FAFAFA）の背景に明朝体を中央揃えで置いている。章の頭に黒い帯と白黒の古い写真を挟んで区切っており、写真と余白で落ち着いた印象を作る参考になる。

集客の視点

ファーストビューの右上に電話番号と住所を出し、すぐ下に坐禅会・写経の会などの行事の新着を写真・日付・カテゴリつきで並べている。住職と前住職の写真・あいさつ・経歴も載せており、初めて訪ねる人に場所・日程・人が分かる順序を真似するとよい。

Webディレクターの視点

ファーストビューのすぐ下に行事の新着を5件置き、続けて住職と前住職の顔写真と経歴を載せ、「何があり、誰がいるか」を先に知れる順にしている。新着一覧は寺の中で更新しやすく、予算の中で再現できる。

CONVERSION集客の工夫

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

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

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

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

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

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

電話番号と住所をファーストビューに出す

右上の「最新情報・アクセス・お問合せ・ENGLISH」の下に、電話番号と住所を並べている。トップを開いた時点で、連絡先と場所が分かる。

行事の新着をトップの最初に置く

ファーストビューのすぐ下で、坐禅会・写経の会・オンラインの坐禅会・お寺ヨガなどの最新情報を、写真・日付・カテゴリつきで5件並べている。参加できる行事が続いていることが最初に伝わる。

住職を顔と経歴で紹介する

住職と前住職の写真を並べ、あいさつ文の下に二人の経歴をまとめている。お寺を初めて訪ねる人にとって、どんな人がいるかが分かる。

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

COLOR配色

#FAFAFA背景

#000000ファーストビュー・章の帯

#FFFFFFカード背景・帯の文字

#1E1E1E本文テキスト

#889788カテゴリのラベル · グレーグリーン

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

TYPOGRAPHYフォント

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

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

要素	PC サイズ / 太さ	PC 行間	SP サイズ / 太さ
h3	25.3px / 400	1.23	21px / 400
本文（p）	16.8px / 400	2.00	14.3px / 400
ボタン	—	—	15.7px / 400

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

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

01
ヘッダー
右上に最新情報・アクセス・お問合せ・ENGLISH、その下に電話番号と住所。
ヘッダー／ロゴ＋ナビ＋1ボタン型
02
ファーストビュー
黒地に木像の写真、中央にロゴ、下にナビ。
ファーストビュー／全面写真＋コピー型
03
最新情報
写真・日付・カテゴリつきで5件と「すべてみる」。右に掲示板のことばと寺報の案内。
お知らせ／お知らせ一覧型
04
SNSへの案内
Facebook・Instagram・YouTube のアイコン。
イベント・キャンペーン／特集バナー並び型
05
はじめに（ごあいさつ）
境内の写真、住職と前住職の写真、あいさつ文、二人の経歴。
人・代表／代表・院長あいさつ型
06
東光禅寺縁起
黒い帯の見出しと古い写真、2段組みの文章。
コンセプト／写真＋メッセージ型
07
畠山重忠公について
白黒の写真と2段組みの文章。
コンセプト／写真＋メッセージ型
08
文化財写真集のバナー
黒地の写真に「Beyond the Ancient」。
イベント・キャンペーン／見学会・イベント告知型
09
坐禅・写経体験
本堂での坐禅の写真から始まる。
メニュー・サービス／アイコン／写真グリッド型

PARTSパーツ別に見る

白山東光禅寺のはじめに（ごあいさつ）（PC） — 05はじめに（ごあいさつ）人・代表／代表・院長あいさつ型

白山東光禅寺のはじめに（ごあいさつ）（スマホ） — 05はじめに（ごあいさつ）人・代表／代表・院長あいさつ型

白山東光禅寺の文化財写真集のバナー（PC） — 08文化財写真集のバナーイベント・キャンペーン／見学会・イベント告知型

白山東光禅寺の文化財写真集のバナー（スマホ） — 08文化財写真集のバナーイベント・キャンペーン／見学会・イベント告知型

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

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

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

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

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

Figmaでの使い方

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

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

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

01ファーストビューに電話番号と住所を出しておく
02行事や法要の新着を、写真・日付・カテゴリつきでトップの最初に並べる
03住職・代表者を写真と経歴で紹介し、あいさつ文を添える
04縁起や歴史は黒い帯と古い写真で章を区切り、読み物として見せる

FAQよくある質問

東光禅寺のサイトで使われているフォントは？

和文は端末にあるヒラギノ明朝、英字は Google Fonts の Crimson Text です。Windows などでも同じ雰囲気にするなら、和文に Noto Serif JP を指定するとよいでしょう。

行事の多いお寺では、何をトップに置くとよいですか？

このサイトのように、坐禅会や写経の会などの日程を新着として最初に並べ、「すべてみる」から一覧に進めるようにすると、参加を考えている人が日程を探しやすくなります。

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

寺院・神社のほか、体験教室や地域の文化施設など、行事の告知と由緒の紹介を両方行うサイトに応用できます。

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

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

ワイヤーDL

FUNERAL & TEMPLE · 和歌山県 · 2026.11.07

善称寺

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

#寺院#永代供養#淡い色#動画

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

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら

白山東光禅寺葬儀・寺社のホームページデザイン参考 — 黒と白・明朝体・写真が主役

EDITOR'S NOTE編集部の視点