WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 葬儀・寺社
  4. セレモニーホールしおん

webcan analyze ceremonyhall-shion.com

FUNERAL & TEMPLE · 三重県 · PICKED 2026.10.17

セレモニーホールしおん葬儀・寺社のホームページデザイン参考 — 葬儀会館・明朝体・縦書き

セレモニーホールしおんのトップページ（PC）
PC（1440px）
セレモニーホールしおんのトップページ（スマホ）
スマホ（375px）
出典：ceremonyhall-shion.com ↗確認日 2026.10.17
セレモニーホールしおん葬儀・寺社 · 三重県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

縦書きの明朝体と花の写真で落ち着きを出しつつ、プラン・費用の手前まで迷わせない。

三重県大台町・大紀町の葬儀会館のサイト。ファーストビューは左に縦書きの明朝体のコピーと英語の一文、右に花を手渡す写真を置き、白とやわらかい紫でまとめている。私たちのこと、葬儀プラン、利用者の声、採用情報、お知らせと続き、最後に紫の帯でメール・電話・LINEの3つの問い合わせ方法を並べている。

  1. 01ファーストビューは縦書きの明朝体のコピーと、花を手渡す写真の組み合わせ
  2. 02白と淡い紫を基調に、ボタンやフッターだけを濃い紫にしている
  3. 03ヘッダーに「御供物のご注文」と「お問い合わせ」の2つのボタンを並べている

CONVERSION集客の工夫

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

葬儀プランを種類ごとに一覧にする

一般葬・家族葬・小規模葬・火葬式を、それぞれ短い説明つきの一覧で並べている。急いで調べている人でも、自分に合う形式をすぐに見つけられる。

参列する人の入口もヘッダーに置く

ヘッダーに、喪主側の「お問い合わせ」とは別に「御供物のご注文」のボタンを置いている。葬儀社のサイトを見るのは喪主だけではないので、参列する人の用事にも最短で応えられる。

問い合わせの方法を3つ並べる

ページの最後の紫の帯に、メール・電話・LINEの3つの問い合わせ方法を並べている。電話がつらい時や、時間を選ばずに連絡したい人にも対応できる。

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

COLOR配色

#FFFFFF背景
#AC88B9ボタン・問い合わせの帯 · パープル
#BEAAC5セクション背景 · ライトパープル
#B78CC5英字の差し色
#151515本文テキスト
#A3A3A3サブテキスト

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

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Noto Serif JP
無料で近いもの
Noto Serif JP
用途
英字（ロゴ・サブコピー）
使用フォント
Cormorant Garamond
無料で近いもの
Cormorant Garamond
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h232px / 4001.0027px / 400
h330px / 4001.0024px / 400
本文（p）15px / 5001.0016px / 500

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

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

  1. 01

    ヘッダー

    ロゴ、ナビ、「御供物のご注文」と「お問い合わせ」の2つのボタン。

    ヘッダー／電話番号＋予約ボタン常設型
  2. 02

    ファーストビュー

    左に縦書きの明朝体のコピーと英語の一文、右に花を手渡す写真。

    ファーストビュー／左コピー・右写真の分割型
  3. 03

    私たちのこと

    スタッフの写真と、想いを伝える見出し・文章。

    人・代表／代表・院長あいさつ型
  4. 04

    しおんの葬儀プラン

    一般葬・家族葬・小規模葬・火葬式を説明つきの一覧で。

    料金／表組み型
  5. 05

    利用者の声

    カルーセルで声を並べる。

    お客様の声／カード型
  6. 06

    会館の写真

    会館の外観写真に英字を重ねた帯。

    イベント・キャンペーン／特集バナー並び型
  7. 07
  8. 08
  9. 09

    お問い合わせ

    紫の帯に、メール・電話・LINEの3つのボタン。

    行動喚起／電話＋Web予約の2ボタン帯型
  10. 10
セレモニーホールしおんの構成をWEBCANの部品で組んだワイヤーフレーム（PC）

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01葬儀プランは種類ごとに分け、それぞれ1〜2行の説明を付けて一覧にする
  2. 02喪主向けの問い合わせとは別に、参列者向けの入口（供花・供物の注文など）を用意する
  3. 03問い合わせの方法は電話だけでなく、メール・LINEも並べる
  4. 04色数を絞り、白と淡い色で落ち着いた印象にする

FAQよくある質問

セレモニーホールしおんのサイトで使われているフォントは？

和文の見出しと本文は Noto Serif JP、英字のロゴやサブコピーは Cormorant Garamond です。どちらも Google Fonts で無料で使えます。

葬儀社のサイトで、費用はどこまで出すべきですか？

プランごとの目安を出すのが理想です。このサイトのように、まずプランの種類と違いを一覧で示し、詳しいページで費用と含まれるものを説明すると、比較している人が安心して問い合わせできます。

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

葬儀社・霊園・仏壇店のほか、寺院や、落ち着いた印象が求められる法律事務所・介護施設などに応用できます。

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

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら