出典：dianasseafood.com ↗ 確認日 2026.10.24
Editor's note
編集部の視点
1979年からの家族経営を前に出し、商品カルーセルのあとに「直売店・小売店・卸」の3つの買い方と営業時間をまとめた、カナダの水産加工会社。
トロントの家族経営の水産会社 Diana's Seafood のサイト。ファーストビューは青い大きな社名と、オレンジのセリフ体で「手軽に調理できる上質な魚介の料理」、その横に「See products」のボタン。下では「MOTHER OF SEAFOOD SINCE 1979」の帯が流れ、家族経営であること、責任ある調達・余計なものを入れない・品質・おいしさの4つの約束、サーモンの串焼きやロブスタービスクなど8つの商品が続く。最後の「Where to find us」で、スカボローの直売店とイータリー・トロントの売り場、カナダと米国の小売店、飲食店向けの卸の3つの買い方と営業時間・住所をまとめている。
- 01 直売店・小売店・卸と、お客さんの種類ごとに買い方を分けて1か所にまとめる
- 02 ヘッダーに「卸の問い合わせ」のボタンを常に置き、業務用の取引先を取りこぼさない
- 03 創業年を流れる帯で何度も見せ、家族経営の老舗であることを印象に残す
Conversion
集客の工夫
- ファーストビューに商品への導線 （あり） 「See products」のボタン
- 卸の問い合わせ （あり） PC はヘッダーに常に表示（件名入りのメール）
- 直売店の情報 （あり） スカボローとイータリー・トロントの営業時間・住所・地図
- 小売店での取り扱い （あり） カナダと米国の食料品店・専門店
- 創業年 （あり） 「SINCE 1979」の帯
- メール登録 （あり） ポップアップとフッター
- 採用 （あり） フッターに採用のメールアドレス
- 電話番号の掲載 （なし） トップにはなし（メールと地図）
買い方を、お客さんの種類ごとに分ける
トップの最後の「Where to find us」では、スカボローの直売店とイータリー・トロントの売り場、カナダと米国の小売店、飲食店や小売店向けの卸 の3つの買い方を並べています。直売店とイータリーの営業時間、住所と地図へのリンクもここにまとまっています。誰がどこで買えるのかが1か所で分かるので、問い合わせの前に自分で答えを見つけられます。
卸の入口を、いつも見える場所に
ヘッダーには商品・会社紹介・店舗のリンクと並んで、オレンジの「Contact Wholesale（卸の問い合わせ）」ボタン が、PC ではスクロールしても上部に表示されています。押すと件名が入った状態のメールが開きます。一般のお客さんに向けたにぎやかなサイトでも、業務用の取引先が探さずに連絡できる作りです。
創業年を、流れる帯で何度も見せる
青い帯に「MOTHER OF SEAFOOD SINCE 1979」が横に流れ、ページの中で2回出てきます。そのあとに「カナダの家族経営の会社」であること、責任ある調達・余計なものを入れない・品質・おいしさの4つの約束 が続きます。イラストと鮮やかな配色で親しみやすさを出しながら、老舗の信用も同時に伝えています。
チェック項目は 2026.10.24 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FEF6E0 背景（クリーム）・ボタンの文字
- #3256D2 社名・帯（青）
- #FF5317 キャッチコピー・ボタン（オレンジ）
- #004F49 会社紹介の背景（深緑）
- #74245B セクションの背景（赤紫）
- #131313 本文
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン（セリフ体） | Milano／Milano Extended | Fraunces |
| 帯・ポップアップの大文字（細長い太字） | Martin | Anton |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| 本文（p） | 18px / 400 | 1.15 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.24 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 商品・会社紹介・店舗の3つと、オレンジの「卸の問い合わせ」ボタン。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 青い大きな社名、オレンジの大きなキャッチコピー、「See products」のボタン。下に食べている人の写真。 ファーストビュー／大きな文字型
- 03 創業年の帯 「MOTHER OF SEAFOOD SINCE 1979」が横に流れる。 信頼／ロゴ帯型
- 04 会社紹介 カナダの家族経営の会社であることと、魚介への考え方。 コンセプト／写真＋メッセージ型
- 05 4つの約束 責任ある調達、余計なものを入れない、品質、おいしさ。 機能・強み／左右交互型
- 06 商品 サーモンの串焼き・ブランジーノ・クラムチャウダーなど8つをカルーセルで。 商品／グリッド型
- 07 調達の話 取引先との関係で産地を追えるようにしていること。 メッセージ／大きな一文型
- 08 買える場所 直売店とイータリーの売り場、小売店、飲食店向けの卸。 一覧／カード並び型
- 09 フッター メール登録、2つの売り場の営業時間、住所、採用のメール。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 直売・小売・卸など、お客さんの種類ごとに買い方を分けて1か所で案内する
- 02 業務用の取引がある会社は、ヘッダーに卸・法人向けの問い合わせボタンを置く
- 03 直売店の営業時間と住所はトップに書き、地図へのリンクをつける
- 04 創業年や家族経営など、短く言える信用は何度でも見せる
FAQ
よくある質問
Diana's Seafood のサイトで使われているフォントは？
見出しや本文に Milano 系のセリフ体、帯などの大きな大文字に細長い太字の Martin を使っています。どちらも有料書体なので、無料で近づけるならセリフ体は Fraunces、大文字は Anton が候補です。
一般のお客さんと業務用の取引先、両方がいる会社のサイトはどう作ればいいですか？
Diana's Seafood は、トップの最後で「直売店に来る」「近くの店で買う」「卸の口座を開く」の3つを並べ、ヘッダーには卸の問い合わせボタンを常に置いています。一般のお客さん向けの見せ方を保ったまま、業務用の入口も見失わない作りです。
どんな業種の参考になりますか？
水産・精肉・豆腐・菓子などの食品メーカー、直売所を持つ農家、飲食店に卸しながら小売もする事業者に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はDiana's Seafoodおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
