出典：marasrl.it ↗ 確認日 2026.10.20
Editor's note
編集部の視点
画面上部の帯で展示会のブース番号を告知し続け、製品を「種類」と「使う場所」の両方から探せるようにしたイタリアの業務用家具メーカー。
イタリア北部ブレシア県パッシラーノの家具メーカー Mara の英語版サイト。画面の最上部に「ORGATEC — Cologne, 27-30 October 2026 — Hall 6.1, Stand C051.」という展示会の告知が流れる帯があり、その下にロゴと、カンマでつないだ7つのナビ（About, Products, Systems, Projects, Professionals, Stories, Contact）が並ぶ。ファーストビューはテーブルと椅子を真上から撮った商品写真で、続いて「Crafted in Italy for life and work.」と、オフィス・コントラクト・住まい向けの家具と仕組みをつくる歴史あるイタリアの会社だという紹介。注目の製品3点、種類と使う場所からの製品の入口、都市名つきの納入事例6件、読みもの4件と続く。
- 01 画面最上部の帯に、出展する展示会の会期・ホール・ブース番号を流し続ける
- 02 製品を「種類（椅子・テーブル・スツール・小物）」と「使う場所（オフィス・会議室・ホテルと飲食店・住まい・屋外）」の2つの切り口で探せる
- 03 納入事例を「施設名 / 都市_国」の形で並べ、設計者向けのページに2D/3Dデータ・カタログ・認証書をまとめる
Conversion
集客の工夫
- 展示会の告知 （あり） 上部の帯に会期・ホール・ブース番号
- 製品の探し方 （あり） 種類4つ・使う場所5つ
- 納入事例 （あり） 6件を施設名と都市名つきで
- 設計者向けページ （あり） Professionals（2D/3Dデータ・カタログ・認証書）
- 電話のリンク （あり） フッターに tel: リンク
- 言語の切り替え （あり） イタリア語・英語・ドイツ語・フランス語
- メール登録 （あり） フッターにニュースレター
- 問い合わせボタンの常設 （なし） なし（ナビの Contact から）
展示会のブース番号を、一番上で流し続ける
画面の最上部には、赤茶の帯で 「ORGATEC — Cologne, 27-30 October 2026 — Hall 6.1, Stand C051.」 という告知が流れ続けています。ケルンで開かれるオフィス家具の展示会に出ることを、会期・ホール・ブース番号まで含めて、どのページを開いても目に入る場所に置いています。来場を考えている取引先や設計者が、お知らせ欄を探さずに済む作りです。
「種類」と「使う場所」の2つから探せる
製品の入口は、椅子・テーブルとデスク・スツール・小物という 種類 と、オフィスとコワーキング・会議室・ホテルと飲食店・住まい・屋外という 使う場所 の2つの切り口で用意されています。家具を選ぶ人は「椅子が欲しい」より「会議室を整えたい」から考えることも多いため、現場の言葉で入口をつくっているのが要点です。
納入先と、設計者向けの資料を見せる
納入事例は「FALKENSTEINER RESORT GARDA LAKE / SALÒ_ITALY」のように 施設名と都市・国を1行で並べ、ハンブルクのオフィスやパリ、ミラノのショールームなど6件を載せています。ナビの「Professionals」には 2D/3D の製品データ・カタログ・認証書 がまとめられ、設計者や販売店が提案に使う資料をすぐ手に取れるようにしています。
チェック項目は 2026.10.20 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #E9E7E2 背景（明るい灰）
- #1E1D20 ロゴ・ナビ・本文
- #8C4E39 展示会の告知帯（赤茶）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| ナビ・見出し・本文（すべて） | Neue Haas Grotesk Display Pro | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | — | — | 48px / 400 |
| 本文（p） | 14px / 400 | 1.00 | 12px / 400 |
| ボタン | 23px / 400 | 1.00 | 19px / 400 |
実測値（PC 1440px・SP 375px、2026.10.20 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 最上部に展示会の告知が流れる帯。その下にロゴと、カンマでつないだ7つのナビ、検索、言語。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー テーブルと椅子を真上から撮った商品写真を大きく。文字は置かない。 ファーストビュー／全面写真＋コピー型
- 03 会社紹介 「Crafted in Italy for life and work.」と、オフィス・コントラクト・住まい向けの家具と仕組みをつくる会社だという説明。 メッセージ／大きな一文型
- 04 注目の製品 椅子 Typo（デザインは Michele De Lucchi が設立した AMDL CIRCLE）、テーブルの折りたたみ機構 Libro、高さを変えられるテーブル Follow。 一覧／カード並び型
- 05 製品の入口 椅子・テーブルとデスク・スツール・小物の4種類と、オフィス・会議室・ホテルと飲食店・住まい・屋外の5つの使う場所。 一覧／種類で絞るタブ型
- 06 納入事例 リゾート・オフィス・ショールームなど6件を「施設名 / 都市_国」の形で。「All projects」。 事例・実績／リスト＋ラベル型
- 07 読みもの 展示会、製品の10年、色の話など4件を、分類と日付つきで。 お知らせ／ニュース一覧型
- 08 フッター 住所と電話、SNS 5つ、法務のリンク、ニュースレター。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 展示会に出るときは、会期・ホール・ブース番号をサイトの一番上に出し続ける
- 02 製品は「種類」だけでなく「どこで使うか」からも探せるようにする
- 03 納入事例は施設名と都市名を並べ、どんな現場に入っているかを一行で伝える
- 04 設計者や販売店が使う図面データ・カタログ・認証書は、専用のページにまとめる
FAQ
よくある質問
Mara のサイトで使われているフォントは？
ナビから見出し、本文まで Neue Haas Grotesk Display Pro 1書体で組んでいます。有料書体なので、無料で近づけるなら Inter が候補です。
メーカーのサイトで、展示会の告知はどこに置くと良いですか？
Mara は会期・会場のホール・ブース番号を、すべてのページの最上部に流れる帯で出しています。お知らせ欄に1件載せるだけだと、トップページを下まで読んだ人にしか届きません。取引先や設計者が来場前に確かめたい情報なので、どのページを開いても目に入る場所に置くのが要点です。
どんな業種の参考になりますか？
家具・建材・設備・照明などのメーカー、展示会に出展する BtoB の製造業、設計事務所や販売店に向けて製品を売る会社に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はMaraおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
