出典：levehytter.no ↗ 確認日 2026.10.26
Editor's note
編集部の視点
ファーストビューの唯一のボタンを「カタログのダウンロード」にし、4か所の見学用の山小屋と問い合わせへつなぐノルウェーの山小屋（ヒュッテ）の建築会社。
ノルウェーのエイエルにある、山小屋（ヒュッテ）を建てる会社 Leve Hytter のサイト。ファーストビューは草屋根の黒い木造の小屋が並ぶ写真に「Bygget på tradisjon, for vår tid.（伝統の上に、いまの時代のために建てる）」の一文と、「Last ned hyttekatalog（カタログをダウンロード）」のリンクだけ。主力の小屋「Vy」はノルウェーの建築家と共同で作ったもので、建築家の動画インタビュー、夏向けの型、山のアパートメント、新しい分譲地の告知、モデルの一覧と分譲地、20本ほどの記事（芝の屋根の手入れ、冬の閉め方、節電など）が続く。最後に「Ta kontakt（お問い合わせ）」と、住所・電話・メール。
- 01 ファーストビューのボタンを「カタログのダウンロード」1つに絞り、検討の最初の一歩をはっきりさせる
- 02 カタログの申し込みフォームで「土地を持っているか」「どこに」を聞き、営業の連絡に役立てる
- 03 芝の屋根の手入れや冬の閉め方など、建てた後の暮らしの記事を並べ、買う前の不安と買った後の楽しみの両方に答える
Conversion
集客の工夫
- カタログ請求 （あり） FV に「カタログをダウンロード」
- 見学の案内 （あり） 4か所の見学用の小屋（メニューから）
- 設計者の紹介 （あり） 建築家の動画インタビュー
- 分譲地の告知 （あり） 新しい分譲地「Kragerø View」の販売開始
- 読みもの （あり） 手入れ・冬の閉め方・節電などの記事
- お問い合わせ （あり） 「Ta kontakt」と住所・電話・メール
- Cookie の拒否 （あり） バナーに「拒否」のボタンがある
- 価格の掲載 （なし） トップにはなし
最初のボタンは「カタログのダウンロード」1つ
ファーストビューは草屋根の小屋の写真と一文だけで、ボタンは 「Last ned hyttekatalog（カタログをダウンロード）」1つです。カタログのページでは、名前・電話・メールに加えて「土地を持っているか」「どこに」を聞き、ダウンロードと郵送の両方に対応しています。山小屋のように検討に時間がかかる商品で、最初の一歩をはっきりさせています。
見学できる小屋と、設計者の顔を見せる
メニューの「Besøk våre visningshytter」には、ノルウェー国内4か所の見学用の小屋が並び、メールか電話で見学を予約するよう書かれています。トップには主力の小屋「Vy」を設計した建築家の動画インタビューへの入口もあり、誰がどんな考えで作った小屋かを伝えています。
建てた後の暮らしまで、記事で見せる
中ほどの「Informasjon og inspirasjon」には、芝の屋根の手入れ、冬の小屋の閉め方、節電、顧客の小屋の紹介など、20本ほどの記事が並びます。買う前の不安と、建てた後の楽しみの両方に答える読みもので、すぐには決めない人ともつながり続ける作りです。
チェック項目は 2026.10.26 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #F7F4EC 背景（生成り色）
- #342519 見出し・本文
- #EFEBDF カードの背景
- #26190F 暗い面
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文（すべて） | Moderat | DM Sans |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 16px / 400 | 1.38 | 16px / 400 |
| h2 | 40px / 400 | 1.20 | 16px / 400 |
| h3 | 30px / 400 | 1.27 | 23px / 400 |
| 本文（p） | 18px / 400 | 1.44 | 16px / 400 |
| ボタン | — | — | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.26 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左に小屋のモデル・分譲地・インテリア、中央にロゴ、右に会社案内・よくある質問・お問い合わせ・検索。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 草屋根の小屋が並ぶ写真に、中央の一文と、下の「カタログをダウンロード」。 ファーストビュー／全面写真＋コピー型
- 03 入口のカード カタログ、建築家の動画インタビュー、夏向けの型、山のアパートメント、計画の進め方、新しい分譲地の告知。 一覧／カード並び型
- 04 会社の考え方 何世代も使う小屋なので、古びない形にするという説明と、主力の小屋「Vy」の紹介。 コンセプト／写真＋メッセージ型
- 05 モデルと分譲地 「Vy を自分のものに」と「美しい場所に建てる」の2つの入口。 一覧／カード並び型
- 06 情報とインスピレーション 展示会・手入れ・冬の閉め方・節電・建築家・顧客の小屋などの記事を横に並べる。 入口／カテゴリ別スライド型
- 07 インテリア 小屋の中のインテリアの提案への入口。 コンセプト／写真＋メッセージ型
- 08 お問い合わせ 動画と、「あなたの Leve Hytte づくりをお手伝いします」と「Ta kontakt」。 行動喚起／ボタン帯型
- 09 フッター 住所・電話・メール、カタログと見学の小屋へのリンク、SNS。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 高額な住宅や商品は、最初の行動を「カタログを受け取る」にして、FV のボタンを1つに絞る
- 02 カタログの申し込みで、営業に必要なこと（土地の有無や場所）を1〜2問だけ聞く
- 03 見学できる場所を一覧にし、メールか電話で予約する方法を書く
- 04 買った後の手入れや暮らし方の記事を並べ、検討中の人にも役立つ情報を出す
FAQ
よくある質問
Leve Hytter のサイトで使われているフォントは？
見出しから本文まで Moderat 1書体で組んでいます。有料書体なので、無料で近づけるなら DM Sans が候補です。
住宅会社のサイトで、ファーストビューのボタンを何にすればよいですか？
検討の最初の一歩になるものです。Leve Hytter はファーストビューに「カタログをダウンロード」だけを置いています。カタログのページでは名前・電話・メールに加えて「土地を持っているか」「どこに」を聞き、営業の連絡につなげています。
どんな業種の参考になりますか？
注文住宅・別荘・リフォーム・家具など、検討に時間がかかる高額な商品を扱う会社に向きます。モデルハウスや見学の場所を一覧にする方法は、ショールームを持つ会社全般に使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はLeve Hytterおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
