DevNJ Make your business ease

Awwwards ·イタリア(トレンティーノ州チヴェッツァーノ) ·Picked 2026.10.28

Moncalisse

ワイナリー(伝統的製法のスパークリングワイン「トレントDOC」。試飲・ワインショップ・ビストロも)のサイトデザイン参考 — ワイナリー・農業・第三者の評価・営業時間
Moncalisseのトップページ(PC)
PC(1440px)
Moncalisseのトップページ(スマホ)
スマホ(375px)

Editor's note

編集部の視点

ファーストビューに畑の気温・風・湿度をそのまま出し、第三者の評価と訪問の入口、営業時間までを短くまとめるイタリア・トレンティーノのワイナリー。

モンテ・カリシオのふもと標高600メートルにある、2016年創業のワイナリーのサイト。最初に年齢の確認があり、ヘッダーは言語切替(IT / EN / DE)、ロゴ、メニュー。ファーストビューは建物と畑の写真のスライドに、右下の「Moncalisse Vineyard」の気温・風速・湿度。続いて創業の経緯と12ヘクタールの畑、土地の歴史、自然への取り組み、ワイン評論家 James Suckling の「イタリアのトップ100ワイン 2026」で97点・93位のお知らせ、ワイン・訪問・建築・畑の4つの入口のスライド。フッターに住所、ビストロとショップの営業時間(11:30〜18:30、水曜定休)、電話・メール。

  1. 01 ファーストビューに畑の気温・風速・湿度を出し、「いまの畑」を感じさせる
  2. 02 評論家の点数と順位という第三者の評価を、お知らせとして本文の途中に置く
  3. 03 ビストロとショップの営業時間と定休日をフッターに書き、訪問の前に確かめられるようにする

Conversion

集客の工夫

  • 年齢の確認 (あり) 最初に法定飲酒年齢かを確認
  • 畑のいまを見せる (あり) ファーストビューに気温・風速・湿度
  • 第三者の評価 (あり) James Suckling の97点・トップ100の93位
  • 訪問の入口 (あり) 試飲・ワインショップ・ビストロをまとめた Hospitality
  • 営業時間の明記 (あり) フッターに11:30〜18:30、水曜定休
  • 言語の切り替え (あり) イタリア語・英語・ドイツ語
  • 電話・メール (あり) tel:リンク 1か所・mailto:リンク 1か所
  • 予約ボタン (なし) トップページには試飲の予約ボタンが無い

畑の「いま」を、最初の画面で見せる

ファーストビューの右下には「Moncalisse Vineyard」として、畑の気温・風速・湿度が表示されています。建物と畑の写真に数字が添えられるだけで、ここに実際の畑があり、いまも天候と向き合っていることが伝わります。

第三者の評価は、点数と順位まで書く

本文の途中には、ワイン評論家 James Suckling の「イタリアのトップ100ワイン 2026」で、リゼルヴァ2017が97点・93位になったお知らせが入ります。「高い評価を受けています」ではなく点数と順位まで書くことで、ワインに詳しくない人にも評価の重みが伝わります。

訪問の入口と、営業時間をはっきりと

ワイン・建築・畑と並んで、試飲・ワインショップ・ビストロをまとめた「Hospitality」の入口があります。フッターには住所とともに、ビストロとショップの営業時間(11:30〜18:30)と水曜定休が書かれていて、訪ねる前に必要なことがトップページで分かります。

チェック項目は 2026.10.28 に実ブラウザで描画したトップページ(PC 1440px・SP 375px)を確認したものです。

Colour

配色

  • #FAF8F1 背景(生成り)
  • #271002 見出し・本文・ボタン(こげ茶)
  • #DED8CF 区切りの面(ベージュ)

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

Typography

フォント

用途 使用フォント 無料で近いもの
見出し Canto Cormorant Garamond
本文・メニュー Termina Lexend Exa
要素 PC サイズ / 太さ PC 行間 SP サイズ / 太さ
h2 60px / 400 1.00 36px / 400
本文(p) 14px / 400 1.60 14px / 400

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

Structure

ページ構成(上から順に)

  1. 01 ヘッダー 言語切替(IT / EN / DE)、ロゴ、メニューのボタン。上部に固定。 ヘッダー/ロゴ+メニューボタン型
  2. 02 ファーストビュー 建物と畑の写真のスライドに、ロゴと「TRENTO DOC」。右下に畑の気温・風速・湿度。 ファーストビュー/全面写真+コピー型
  3. 03 ワイナリーについて 2016年の創業、12ヘクタールの畑、リゼルヴァだけを造ること。 コンセプト/写真+メッセージ型
  4. 04 土地 標高600メートル、ひとつの斜面に広がる畑と、山に残る岩絵。 コンセプト/写真+メッセージ型
  5. 05 自然 持続可能な栽培と生物多様性への取り組み。 コンセプト/写真+メッセージ型
  6. 06 お知らせ James Suckling の「イタリアのトップ100ワイン 2026」で97点・93位。記事へのリンク。 お知らせ/ニュース一覧型
  7. 07 4つの入口 ワイン・訪問(試飲・ショップ・ビストロ)・建築・畑を全幅の写真で切り替える。 入口/カテゴリ別スライド型
  8. 08 フッター 住所、ビストロとショップの営業時間と定休日、電話・メール、プレスキット、採用、SNS。 フッター/大きなフッター型

Download

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

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

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

Moncalisseの構成を DevNJ の部品で組んだワイヤーフレーム(PC)
PC(1440px)
Moncalisseのワイヤーフレーム(スマホ)
スマホ(375px)

Figmaでの使い方

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

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

Reproduce

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

  1. 01 畑や工房の「いま」(天気・季節・作業)を最初の画面で見せる
  2. 02 コンクールや評論家の評価は、点数や順位まで書いて本文に置く
  3. 03 見学・試飲・直売所がある生産者は、訪問の入口を商品と並べて用意する
  4. 04 直売所や併設の店の営業時間と定休日を、どのページでも見られる場所に書く

FAQ

よくある質問

Moncalisse のサイトで使われているフォントは?

見出しは細いセリフ体の Canto、本文とメニューは横に広いサンセリフの Termina です。どちらも有料なので、無料なら Cormorant Garamond と Lexend Exa の組み合わせが近い雰囲気になります。

ファーストビューに天気を出すのは、どんな意味がありますか?

畑の気温や風をその場で表示すると、写真だけでは伝わらない「いま畑がある」感覚が生まれます。農園、ワイナリー、茶園、牧場など、土地と天候が商品の質に関わる生産者に向いた見せ方です。

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

ワイナリーや酒蔵、果樹園、茶園など、商品の販売と見学・試飲・併設の店を一緒に案内する生産者に向きます。

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

More

ほかの Awwwards の参考サイト

Tandjung Sariのトップページ ワイヤーDL

Awwwards ·インドネシア(バリ島サヌール) ·2026.11.01

Tandjung Sari

「客室の予約」と「席の予約」の2つのボタンを常に見せ、食事の予約は WhatsApp で受けるバリ島サヌールの家族経営のホテル。

Health+のトップページ ワイヤーDL

Awwwards ·チェコ(プラハ) ·2026.10.31

Health+

申し込みボタンと会員ページの入口をヘッダーに置き、拠点数・対象別の入口・利用者の声で迷わず選べるようにしたプラハの総合クリニック。

デザイン参考をすべて見る →

From reference to your site

Moncalisseのような構成を、御社のサイトに。

「このサイトのような構成で」とお伝えいただくだけで構いません。現状のサイトを拝見し、業種と読み手に合わせた構成案をお持ちします。

無料で相談する →