出典：bannach.eu ↗ 確認日 2026.10.29
Editor's note
編集部の視点
画面いっぱいのブランド名と家具の写真だけで見せ、商品ページに「€4,580から」の価格・寸法・資料のPDF・問い合わせのボタンをまとめるベルリンの家具ブランド。
2018年に Moritz Bannach が立ち上げたベルリンの家具ブランドのサイト。トップは画面の幅いっぱいの「BANNACH」の文字と、青いテーブルの写真だけ。続いてブランドの紹介文、家具の写真のスライド、6つのコレクションの一覧。商品ページには「From € 4,580.00」の価格、寸法、色を自由に選べること、資料（Product Sheet）の PDF、「Send a request」のボタンがまとまっている。Press のページには、AD・Elle Decoration・British Vogue などに載った誌面が年ごとに並ぶ。
- 01 トップは文字と写真だけにして、家具の色と形をそのまま見せる
- 02 商品ページに「いくらから」の価格・寸法・選べる色・資料の PDF・問い合わせを1か所にまとめる
- 03 雑誌に載った誌面を Press のページに並べ、第三者の評価として見せる
Conversion
集客の工夫
- 価格の表示 （あり） 商品ページに「From € 4,580.00」（Elio）
- 寸法・仕様 （あり） サイズ2種、仕上げ3種、配線の内蔵は相談で
- 資料のダウンロード （あり） 商品ごとに Product Sheet の PDF
- 問い合わせ （あり） 「Send a request」で営業宛のメールが開く
- 窓口の分け方 （あり） 販売・取材・その他でメールを分ける
- 掲載実績 （あり） Press に雑誌の誌面を年ごとに
- メール登録 （あり） フッターにニュースレター
- 問い合わせフォーム （なし） なし（メールと電話のみ）
トップは、社名と写真だけ
トップページを開くと、画面の幅いっぱいの「BANNACH」の文字と、青いテーブルの写真だけが見えます。メニューは写真の上に「MENU」と小さく置き、言語切替（EN / DE）も右上の文字だけ。製品の色と形そのものがブランドの説明になっているため、言葉を足さない作りです。
価格・寸法・資料・問い合わせを1か所に
商品ページには、テーブル「Elio」なら 「From € 4,580.00」の価格、2種類のサイズ、色を自由に選べること、仕上げの種類が並びます。その下に 資料（Product Sheet）の PDF と、営業宛のメールが開く「Send a request」のボタン。受注生産でも「いくらから」を出しておくことで、問い合わせる前に予算が合うかを確かめられます。
雑誌に載った誌面を、そのまま見せる
Press のページには、Sight Unseen・FAZ・Stylepark の記事の抜粋と、AD・Elle Decoration・British Vogue などに載った誌面の画像が年ごとに並びます。自分で良さを語るかわりに、第三者に取り上げられた事実を並べることで、創業から年数の浅いブランドでも信頼を伝えています。
チェック項目は 2026.10.29 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #000000 本文・メニュー
- #666666 補足テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| メニュー・本文・見出し | Times（OS 標準の書体） | Tinos |
| そのほかの細かい文字 | Arial（OS 標準の書体） | Arimo |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 32px / 400 | normal | 32px / 400 |
| 本文（p） | 32px / 400 | normal | 24px / 400 |
実測値（PC 1440px・SP 375px、2026.10.29 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ロゴ 画面の幅いっぱいに「BANNACH」の文字。 ファーストビュー／大きな文字型
- 02 ファーストビュー 青いテーブルと椅子の写真。左上に「MENU」、右上に言語切替（EN / DE）。 ファーストビュー／全面写真＋コピー型
- 03 ブランドの紹介 2018年にベルリンで生まれ、ドイツの工房と組んで家具をつくっていることを短い文章で。 メッセージ／大きな一文型
- 04 家具の写真 テーブルや椅子の写真を全幅のスライドで。 入口／カテゴリ別スライド型
- 05 コレクション ABBONDIO・ELIO・AGATHA・ARCO・ETTA・CIRO の6つを写真つきで2列に。 商品／グリッド型
- 06 ひと言と入口 「Bold design, straightforwardness and a demanding quality concept.」と「READ MORE」。 行動喚起／ボタン帯型
- 07 フッター 法的表記・個人情報、ニュースレターの登録、販売と取材のメールアドレス、Instagram と Facebook。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 ものづくりの会社は、トップを写真と社名だけにして、製品の形と色を主役にする
- 02 製品ページに「いくらから」の価格を出し、寸法・選べる仕様・資料の PDF・問い合わせのボタンを並べる
- 03 問い合わせ先は、販売・取材・その他のように用件で分けて書く
- 04 雑誌や新聞に載った記事は、誌面の画像と年をつけて1ページにまとめる
FAQ
よくある質問
Bannach のサイトで使われているフォントは？
メニューや本文は Times、細かい文字は Arial で、どちらも OS に入っている標準の書体です。Web フォントを読み込まずに組んでいます。無料の Web フォントで近づけるなら Tinos と Arimo が候補です。
受注生産の家具でも、価格を出したほうがいいですか？
Bannach は色やサイズを選べる家具でも「From € 4,580.00」と下限の価格を出しています。いくらくらいかが分かると、問い合わせる前の迷いが減ります。寸法や仕様は資料の PDF にまとめ、細かい相談はメールで受ける形です。
どんな業種の参考になりますか？
家具・照明・建具などのメーカーや工房、オーダーメイドの製品を扱う会社に向きます。製品の数が少なく、1点ずつ問い合わせを受ける事業に使える作りです。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はBannachおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
