出典：leichtfried-loden.com ↗ 確認日 2026.10.23
Editor's note
編集部の視点
1884年創業の毛織物工場が、生地をメートル単価で売り、法人向けの窓口と工場併設の店まで1ページで案内するオーストリアのメーカー。
1884年創業、オーストリアのツェルトヴェークにある毛織物工場のサイト。ファーストビューは「インテリア用」「アパレル用」「クッションとブランケット」を切り替えるスライドで、それぞれに「SHOP COLLECTION」などのボタン。続いて3枚のカード（ミュールシングをしないメリノウール／1884年から・オーストリア製／クッションとブランケット）、ジャケット・コート・インテリアの用途タブ、メートル単価つきのおすすめ生地、製造へのこだわり、読みもの、そして法人向けの「B2B」と工場併設の「Millshop」の2つの入口で締める。
- 01 生地をジャケット・コート・カーテンなどの用途から選べるようにし、価格はメートル単価で見せる
- 02 染色から仕上げまでの6工程をメニューに並べ、自社で一貫して作っていることを伝える
- 03 ページの最後で、法人（B2B）と個人（工場併設の店）の入口を左右に分ける
Conversion
集客の工夫
- 創業年の表示 （あり） ロゴの下に「EST. 1884」
- 価格の明示 （あり） 生地ごとに重さ（g）とメートル単価
- 用途から探す （あり） ズボン・ジャケット・コート・クッション・カーテン・壁面パネルなど
- 製造工程の説明 （あり） 染色・紡績・整経・製織・縮絨・仕上げの6工程
- 法人向けの窓口 （あり） 「B2B」の案内と代理店（Our Agents）一覧
- 直営店への案内 （あり） 工場の隣の「Millshop」
- 電話・メール （あり） tel:リンク 4か所・mailto:リンク 4か所（法人用と通販用を分ける）
- 言語の切り替え （あり） 英語・ドイツ語
用途の名前で、商品への入口をつくる
ファーストビューは「Interior」「Apparel」「Pillows & Blankets」と、何に使う生地かを大きな一語で見せるスライドです。メニューにも柄や仕上げと並んで「USAGE」の項目があり、ズボン・ジャケット・コート・クッション・カーテン・壁面パネルといった用途から選べるようになっています。専門用語を知らない人でも、作りたいものから生地にたどり着けます。
価格と作り方を、隠さずに見せる
おすすめの生地には色見本・重さ・メートル単価（例：€61,30 per Meter）が並びます。メニューの「The Mill」には染色・紡績・整経・製織・縮絨・仕上げの6工程が並び、トップでも「繊維から生地まで」自社で手がけていることを伝えています。ロゴの下の「EST. 1884」と合わせて、価格の根拠と信用を同じ画面で示しています。
法人と個人で、入口を分ける
ページの最後は左右2つの入口です。左は大口で買いたい法人向けの「B2B」（メールか代理店へ）、右は工場の隣にある店「Millshop」の案内。フッターの連絡先も、法人用（office@）と通販用（shop@）で電話番号とメールを分けています。誰がどこに連絡すればよいかが迷わずわかる作りです。
チェック項目は 2026.10.23 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #333333 見出し・本文・枠線のボタン
- #CAD1C9 B2B・Millshop の背景（くすんだ緑）
- #9C9C9C 選ばれていないタブ・補足の文字
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| ファーストビューの大見出し | Kings Caslon Display | Libre Caslon Display |
| カード・セクションの見出し | Noe Text Headline | Source Serif 4 |
| 本文 | Suisse Int'l | Inter |
| メニュー・ボタン | Suisse Int'l Condensed | Barlow Condensed |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| 本文（p） | 32px / 600 | 1.19 | 14px / 300 |
| ボタン | 16px / 500 | 1.25 | 16px / 500 |
実測値（PC 1440px・SP 375px、2026.10.23 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 生地・リビング・メリノウールと、工場・読みもの・問い合わせ、言語切替・検索・ログイン・カート。上部に固定。 ヘッダー／カテゴリ＋カート型
- 02 ファーストビュー 「インテリア用」「アパレル用」「クッションとブランケット」の3枚を切り替えるスライド。各スライドに1つのボタン。 ファーストビュー／全面写真＋コピー型
- 03 3つの約束 ミュールシングをしないメリノウール、1884年からのオーストリア製、クッションとブランケット。 一覧／カード並び型
- 04 用途から選ぶ ジャケット・コート・インテリアのタブで、写真と説明が切り替わる。 一覧／種類で絞るタブ型
- 05 おすすめの生地 すべて・インテリア・コート・ジャケットで絞り込み。色見本、重さ、メートル単価つき。 商品／グリッド型
- 06 製造へのこだわり メリノウール100%、オーストリア製、繊維から生地まで、の3点と短い説明。 機能・強み／左右交互型
- 07 読みもの（Loden Journal） 公共施設のカーテンと吸音パネルの納入事例など3本を切り替えて見せる。 事例・実績／大きな写真の切り替え型
- 08 法人と個人の入口 左に法人向けの「B2B」、右に工場併設の店「Millshop」。 行動喚起／ボタン帯型
- 09 フッター 返品・配送などの案内、メール登録、法人用と通販用の電話・メール。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 生地や部材のように用途で選ぶ商品は、用途の名前でメニューを組む
- 02 単価（メートル・個・kg など）を一覧の段階で見せ、見積もりの手間を減らす
- 03 製造工程を言葉で並べるだけでも、自社で作っていることが伝わる
- 04 法人と個人の両方に売るなら、入口と連絡先を分けて書く
FAQ
よくある質問
Leichtfried Loden のサイトで使われているフォントは？
大見出しに Kings Caslon Display、セクションの見出しに Noe Text Headline、本文とメニューに Suisse Int'l（通常と Condensed）を使っています。どれも有料書体なので、無料で近づけるなら Libre Caslon Display・Source Serif 4・Inter・Barlow Condensed の組み合わせが候補です。
メーカーのサイトで価格を出したほうがよいですか？
量や仕様で価格が変わる商品でも、基準になる単価があれば載せる価値があります。Leichtfried Loden は生地ごとにメートル単価を出したうえで、大口の法人には別の窓口を案内しています。
どんな業種の参考になりますか？
生地・木材・金物などの素材メーカー、工場直売所を持つ製造業、法人と個人の両方に売る老舗に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はLeichtfried Lodenおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
