WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. ブライダル
  4. 八戸パークホテル ウェディング

webcan analyze hachinohepark-wedding.com

WEDDING · 青森県 · PICKED 2026.10.17

八戸パークホテル ウェディングブライダルのホームページデザイン参考 — ホテルウェディング・深緑・セリフ体

八戸パークホテル ウェディングのトップページ（PC）
PC（1440px）
八戸パークホテル ウェディングのトップページ（スマホ）
スマホ（375px）
出典：hachinohepark-wedding.com ↗確認日 2026.10.17
八戸パークホテル ウェディングブライダル · 青森県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

深緑と白、セリフ体の英字で上品にまとめ、プラン・会場・衣装・料理を1枚ずつ大きな写真で見せる。

青森県八戸市のホテルの結婚式場サイト。ファーストビューは新郎新婦の写真に、筆記体の「It Starts Here.」と「ここから始まる、2人の世界」のコピーを重ねている。ヘッダーの左上に「フェア予約」、右上に「資料請求」とメニューを置き、深緑と白でまとめている。お知らせのあと、プラン・会場・衣装・料理を、大きな写真と白いカードの見出しで1つずつ紹介し、サポートとアクセス、結婚式のレポート、電話とメールの問い合わせと続く。

  1. 01深緑と白の2色と、セリフ体の英字・明朝体の見出しで、ホテルらしい落ち着いた雰囲気にまとめている
  2. 02プラン・会場・衣装・料理を、横幅いっぱいの写真と、写真に重ねた白いカードの見出しで同じ型にそろえている
  3. 03写真に重ねた白いカードに、英字の見出しと短いキャッチコピーを左右に分けて置いている

CONVERSION集客の工夫

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

フェア予約と資料請求をヘッダーの両端に置く

画面の上に固定したヘッダーの左端に深緑の「フェア予約」、右側に「資料請求」を置いている。会場を見に行きたい人と、まず資料で比べたい人の両方に、すぐの入口を用意している。

会場ならではの演出を最初に見せる

プランの紹介で、県内唯一のプロジェクションマッピングを使った演出を大きな写真で見せている。ほかの式場と比べられたときに、ここで挙げる理由になる。

実際の結婚式のレポートを並べる

「WEDDING REPORTS」として、実際に式を挙げた2人の写真と感想の見出しを並べている。準備中のカップルが自分たちの式を想像する材料になり、スタッフへの信頼にもつながる。

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

COLOR配色

#05392Fメインカラー（ボタン・ヘッダー） · ディープグリーン
#FFFFFF背景・カード
#1A1A1A本文テキスト
#666666補足テキスト

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

TYPOGRAPHYフォント

用途
英字（見出し・ナビ）
使用フォント
Archive Garamond Pro（Adobe Fonts）
無料で近いもの
EB Garamond
用途
和文見出し
使用フォント
明朝体（筑紫Aオールド明朝を指定）
無料で近いもの
Shippori Mincho
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h326px / 4001.0026px / 400
本文（p）14px / 4001.5014px / 400

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

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

  1. 01

    ヘッダー

    左に深緑の「フェア予約」、中央にロゴ、右に「資料請求」とメニュー。その下にセリフ体の英字のナビ。

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

    ファーストビュー

    新郎新婦の写真に、筆記体の「It Starts Here.」と日本語のコピー。

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

    PLAN（プラン）

    プロジェクションマッピングの会場写真と、白いカードの見出し。

    事例・実績／大判1件＋サムネ型
  5. 05

    CEREMONY HALL（会場）

    披露宴会場の写真と、白いカードの見出し。

    事例・実績／大判1件＋サムネ型
  6. 06

    DRESS（衣装）

    ドレス姿の写真を3枚並べ、白いカードの見出し。

    事例・実績／大判1件＋サムネ型
  7. 07

    WEDDING CUISINE（料理）

    婚礼料理の写真と、白いカードの見出し。

    事例・実績／大判1件＋サムネ型
  8. 08

    SUPPORT・ACCESS

    プロのサポート体制とアクセスを写真のバナーで並べる。

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

    WEDDING REPORTS（ウェディングレポート）

    実際の結婚式の写真と、感想の見出し。

    お客様の声／カード型
  10. 10

    CONTACT（お問い合わせ）

    写真の背景に、電話番号とメールのボタンを左右に並べる。

    行動喚起／電話＋Web予約の2ボタン帯型
  11. 11

    フッター

    ロゴとホテルの公式サイトへのボタン。

    フッター／店舗情報＋ナビ型
八戸パークホテル ウェディングの構成をWEBCANの部品で組んだワイヤーフレーム（PC）

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

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

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

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

Figmaでの使い方

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

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

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

  1. 012色と書体を絞り、写真の雰囲気をじゃましない上品なトーンにする
  2. 02プラン・会場・衣装・料理など、比べられる項目は同じ型の大きな写真でそろえる
  3. 03フェア予約と資料請求を、ヘッダーで別々のボタンにして常に見せる
  4. 04実際の式のレポートを載せ、自分たちの式を想像してもらう

FAQよくある質問

八戸パークホテルのウェディングサイトで使われているフォントは？

英字は Adobe Fonts の Archive Garamond Pro、和文の見出しは明朝体（筑紫Aオールド明朝を指定）です。無料で近づけるなら、英字は EB Garamond、和文は Shippori Mincho が使えます。

結婚式場のサイトで、フェア予約と資料請求は両方必要ですか？

会場を見に行く気持ちが固まった人と、まだ比べている人とでは、次の一歩が違います。このサイトのように両方のボタンを常に見える場所に置くと、どちらの人も取りこぼしにくくなります。

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

ホテルや専門式場の結婚式サイトのほか、レストランウェディング、フォトスタジオ、宴会場など、写真で世界観を伝えて来場予約につなげたい業種に応用できます。

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

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら