WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. ブライダル
  4. ハピアスウェディング

webcan analyze happiaswedding.jp

WEDDING · 富山県 · PICKED 2026.10.22

ハピアスウェディングブライダルのホームページデザイン参考 — プロデュース婚・明朝体・生成り色

ハピアスウェディングのトップページ（PC）
PC（1440px）
ハピアスウェディングのトップページ（スマホ）
スマホ（375px）
出典：happiaswedding.jp ↗確認日 2026.10.21
ハピアスウェディングブライダル · 富山県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

富山県の形をうっすら敷いた「富山の自然で結婚式」のコピーで、土地のロケーションを主役にした結婚式を伝える。

富山県高岡市の結婚式プロデュース会社のサイト。ファーストビューは中央のロゴの下に、富山県の形のグレーのシルエットを敷き、明朝体の大きな「富山の自然で結婚式」と、1日1組限定のプロデュースであることを書いた紹介文を置き、その下に結婚式の写真を横長に見せている。生成り色の背景に紺の文字でまとめ、写真と縦長の詩のような文章を散らしたメッセージ、大切にしている4つのこと、結婚式の作り方の6つの手順、インスタグラム、アクセス、お問い合わせと続く。

  1. 01ファーストビューで富山県の形をうっすら背景に敷き、地域に根ざした式であることを一目で伝えている
  2. 02生成り色の背景・紺の文字・明朝体とセリフ体の英字で、落ち着いた雰囲気にまとめている
  3. 03見出しの横に「future」「planning」「instagram」などの水色の斜体の英字を小さく添えている

CONVERSION集客の工夫

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

準備の流れを6つの手順で見せる

「結婚式の作り方」として、親御さまへのご挨拶から時期・予算・相談・打ち合わせ・当日までを、番号つきの6つの手順で説明している。準備期間の目安（およそ4ヶ月）も書いてあり、初めての人が全体の流れを把握してから相談できる。

大切にしていることを写真で具体的に見せる

立山連峰や富山湾を背景にしたウェディング、1日1組のみのプロデュース、クリエーターの共演、さまざまな会場の提案の4項目を、それぞれ実際の式の写真を横に並べて紹介している。言葉だけでなく写真で、ほかの式場との違いを伝えている。

インスタグラムで実際の式の様子を見せる

インスタグラムの投稿をタイル状に12枚並べ、アカウントへのボタンを置いている。最新の式の雰囲気を見てもらい、フォローを通じて検討を続けてもらう入口になる。

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

COLOR配色

#EFF0E6背景 · 生成り
#133645見出し・本文テキスト・お問い合わせボタン · 紺
#DADCCBセクション背景・富山県のシルエット
#68A7C2見出し横の英字 · 水色

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

TYPOGRAPHYフォント

用途
英字（ロゴ周り・見出し横の英字・ボタン）
使用フォント
EB Garamond
無料で近いもの
EB Garamond
用途
和文（見出し・本文）
使用フォント
Zen Old Mincho
無料で近いもの
Zen Old Mincho
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h132px / 5001.4032px / 500
h224px / 5001.4024px / 500
h326px / 5001.4021px / 500
本文（p）16px / 5002.1016px / 500
ボタン14px / 4001.4012px / 400

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

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

  1. 01

    ヘッダー

    中央に「HAPPIAS WEDDING」のロゴ。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    ファーストビュー

    富山県の形のシルエットに明朝体の「富山の自然で結婚式」と紹介文。その下に結婚式の写真を横長に表示し、右側に紺の丸い「Contact お問い合わせへ」ボタン。

    ファーストビュー／全面写真＋コピー型
  3. 03

    メッセージ

    大小の写真を散らし、詩のような短い文章を並べる。「Another Story」のボタンを2つ置く。

    コンセプト／写真＋メッセージ型
  4. 04

    私たちが大切にしていること

    4つの項目それぞれに、実際の式の写真を横に並べて紹介文を添える。

    強み・選ばれる理由／番号つき3〜4項目型
  5. 05

    結婚式の作り方

    番号と縦の線で、ご挨拶から結婚式当日までの6つの手順を説明する。

    流れ／ステップ型
  6. 06

    インスタグラム

    投稿を6列2段のタイルで並べ、アカウントへのボタン。

    事例・実績／写真グリッド型
  7. 07

    アクセス

    住所・電話番号・駐車場の台数・受付時間・打ち合わせ枠・定休日。

    アクセス／地図＋時間表型
  8. 08

    お問い合わせ

    お問い合わせの段階から当日までサポートする旨の文章と「お問い合わせへ」のボタン。

    行動喚起／資料請求・来場予約型
  9. 09

    フッター

    コピーライト。

    フッター／店舗情報＋ナビ型
ハピアスウェディングの構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

02ファーストビューファーストビュー／全面写真＋コピー型
ハピアスウェディングのファーストビュー（PC）PC
ハピアスウェディングのファーストビュー（スマホ）SP
04私たちが大切にしていること強み・選ばれる理由／番号つき3〜4項目型
ハピアスウェディングの私たちが大切にしていること（PC）PC
ハピアスウェディングの私たちが大切にしていること（スマホ）SP
05結婚式の作り方流れ／ステップ型
ハピアスウェディングの結婚式の作り方（PC）PC
ハピアスウェディングの結婚式の作り方（スマホ）SP
06インスタグラム事例・実績／写真グリッド型
ハピアスウェディングのインスタグラム（PC）PC
ハピアスウェディングのインスタグラム（スマホ）SP
07アクセスアクセス／地図＋時間表型
ハピアスウェディングのアクセス（PC）PC
ハピアスウェディングのアクセス（スマホ）SP

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

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01地域の形や地名を大きく見せ、土地ならではの式であることをファーストビューで伝える
  2. 02背景色・文字色・書体を絞り、写真の色を引き立てる
  3. 03準備の流れと目安の期間を手順で示し、初めての人の不安を減らす
  4. 04インスタグラムの投稿を並べ、実際の式の雰囲気を見てもらう

FAQよくある質問

ハピアスウェディングのサイトで使われているフォントは？

英字は EB Garamond、和文の見出しと本文は Zen Old Mincho です。どちらも Google Fonts で無料で使えます。

結婚式場を持たないプロデュース会社のサイトでは、何を見せるとよいですか？

このサイトのように、地域のロケーションの写真、大切にしていること、準備の流れを具体的に見せると、会場の設備ではなくプロデュースの内容で選んでもらいやすくなります。

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

結婚式のプロデュース会社やフォトウェディングのほか、地域の自然を舞台にしたイベント、アウトドアの体験サービスなど、ロケーションの魅力で選ばれたい業種に応用できます。

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

MOREほかのブライダルの参考サイト

webcan design --sitemap happiaswedding.jp

ハピアスウェディングのサイトマップ

  • 4ページ
  • 4ページ内セクション
  • トップページ/
    • メッセージ/#messageページ内
    • 私たちが大切にしていること/#futureページ内
    • 結婚式の作り方/#planningページ内
    • アクセス/#accessページ内
  • お問い合わせはこちら/contact/
  • プライバシーポリシー/privacy-policy/
  • お問い合わせ完了/contact-thanks/

外部リンクInstagram

2026.10.26 に公開中の sitemap.xmlと、トップページのヘッダー・メニュー・フッターのリンクから整理したものです。記事や事例などの個別ページは1件ずつではなく、件数つきの1項目にまとめています。サイトの更新で現在の構成とは異なる場合があります。

FROM REFERENCE TO YOUR SITE

このテイストで、
御社のブライダルサイトを。

「ハピアスウェディングのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら