出典：monarque-evenements.com ↗ 確認日 2026.10.28
Editor's note
編集部の視点
「忘れられない時間を演出する」の一文と相談ボタンだけのファーストビューから、種類・人数・日付を入れる相談フォームへまっすぐつなぐ、ケベックのイベント企画会社。
ケベック・シティーで企業・慈善・個人の催しを企画・制作する会社のサイト。ヘッダーは中央のロゴと、会社について・サービス・実績・メニュー。ファーストビューは深いえんじ色の面に「忘れられない時間を演出する」の大きな文字と「イベントを計画する」のリンク、周りに料理・音楽・花の写真が浮かぶ。続いて会社の考え、創業者の名前と10年以上の経験、4つのサービス、個人の催しの実例、旧市街の「メゾン・シュヴァリエの地下室」（100人まで）の会場案内、協力会社。「イベントを計画する」を押すと、名前・連絡先・会社名・催しの種類・人数・日付・詳細と、この会場を使いたいかを選ぶフォームが開く。
- 01 ファーストビューを一文と相談の入口だけにし、何をする会社かと次の行動をはっきりさせる
- 02 相談フォームで催しの種類・人数・日付を最初に聞き、初回の打ち合わせを短くする
- 03 運営を任されている会場を、収容人数と場所つきで1つの区切りとして紹介する
Conversion
集客の工夫
- 相談の入口 （あり） ファーストビューに「Planifier votre événement」
- 相談フォーム （あり） 種類・人数・日付・詳細・会場の希望を入力
- サービスの種類 （あり） 企業・慈善・個人・企画制作の4つ
- 代表者の紹介 （あり） 創業者の名前と10年以上の経験
- 会場の案内 （あり） メゾン・シュヴァリエの地下室（100人まで）
- 実例 （あり） 個人の催し（2026年）の写真
- 電話・メール （なし） tel:・mailto:リンクは無い
- 言語の切り替え （なし） フランス語のみ
一文と、相談の入口だけを見せる
ファーストビューにあるのは、えんじ色の面に「忘れられない時間を演出する（Orchestrer l’inoubliable）」の大きな文字と、「イベントを計画する」のリンクだけ。周りの料理・音楽・花の写真が仕事の幅を伝え、何をする会社かと、次にすることが一目で分かります。
見積もりに要ることを、フォームで先に聞く
「イベントを計画する」を押すと、名前と連絡先、会社名、催しの種類（企業・個人・慈善・その他）、人数、日付、詳細を入れるフォームが開きます。見積もりに必要なことを最初の問い合わせでそろえるので、やり取りの回数が減ります。最後の問いは「メゾン・シュヴァリエの地下室を使いたいか」です。
任されている会場を、ひとつの売りにする
旧市街の歴史的建物「メゾン・シュヴァリエ」の地下室について、運営を任されていること、100人まで入れること、プチ・シャンプラン地区にあることを1つの区切りで紹介しています。会場という具体的な場所があると、催しの姿を思い描きやすくなります。創業者の名前と10年以上の経験も載っています。
チェック項目は 2026.10.28 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #DED9D7 背景（グレージュ）
- #4C181A ファーストビューの面・見出し・本文（えんじ）
- #B99184 一部の文字（ローズベージュ）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し | Columbia | Marcellus |
| 本文・ボタン | Overused Grotesk | Overused Grotesk（オープンソース） |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 120px / 400 | 1.50 | 49px / 400 |
| h2 | 52px / 400 | 1.50 | 23px / 400 |
| h3 | 24px / 400 | 1.10 | 24px / 400 |
| 本文（p） | 16px / 400 | 1.50 | 16px / 400 |
| ボタン | 16px / 400 | 1.50 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.28 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 中央のロゴと、会社について・サービス・実績・メニュー。上部に固定。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー えんじ色の面に「忘れられない時間を演出する」と「イベントを計画する」のリンク。料理・音楽・花の写真が周りに浮かぶ。 ファーストビュー／大きな文字型
- 03 考え方 「よいイベントは段取りを超えた演出になる」という大きな一文。 メッセージ／大きな一文型
- 04 創業者 創業者の名前と経歴、10年以上の経験。 コンセプト／写真＋メッセージ型
- 05 4つのサービス 企業の催し、ガラ・慈善の催し、個人の催し、企画と制作。 機能・強み／左右交互型
- 06 実例 個人の催し（2026年）を写真の切り替えで。 事例・実績／大きな写真の切り替え型
- 07 会場 旧市街のメゾン・シュヴァリエの地下室。運営を任されていること、100人まで、場所。 コンセプト／写真＋メッセージ型
- 08 協力会社 一緒に仕事をする会社のロゴ。 信頼／ロゴ帯型
- 09 相談の呼びかけ 「忘れられない時間を一緒に」の一文と「イベントを計画する」。 行動喚起／ボタン帯型
- 10 フッター Instagram・Facebook・LinkedIn、プライバシーポリシー。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 ファーストビューは一文と相談の入口だけにして、迷わせない
- 02 相談フォームで種類・人数・日付など、見積もりに要ることを最初に聞く
- 03 提携している会場や設備は、収容人数と場所つきで紹介する
- 04 電話やメールで相談したい人のために、tel:・mailto:リンクも用意する
FAQ
よくある質問
Monarque Événements のサイトで使われているフォントは？
見出しは装飾のあるセリフ体の Columbia、本文は Overused Grotesk です。Overused Grotesk はオープンソースで無料、Columbia の代わりには Google Fonts の Marcellus などが候補です。
相談フォームでは、何を聞けばいいですか？
Monarque は名前と連絡先に加えて、会社名、催しの種類（企業・個人・慈善・その他）、人数、日付、詳細、提携会場を使いたいかを聞いています。見積もりに必要なことを最初にそろえると、1回目のやり取りで話が進みます。
どんな業種の参考になりますか？
イベント会社、ウェディングのプランナー、ケータリング、貸し会場など、日付と人数が決まって依頼される仕事に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はMonarque Événementsおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
