WEB MEDIA · 全国 · PICKED 2026.10.15

ferretメディアWebメディアのサイトデザイン参考 — リード獲得・ティール・ランキング

出典：ferret-plus.com ↗確認日 2026.10.15

EDITOR'S NOTE編集部の視点

記事・資料・セミナー・会員登録まで、読者を見込み客に変える導線がすべてトップにある。

Webマーケティングの情報を発信するメディア。トップはキャンペーンのバナーから始まり、ピックアップ記事、カテゴリ別の記事、開催予定のイベント、アクセスランキングと続き、終盤で会員登録を大きく案内している。ティールと濃紺の配色で、情報量の多いページを整理して見せている。

01ヘッダーに「記事」「お役立ち資料」「セミナー」などの入口と、会員登録のボタンを並べている
02アクセスランキングを期間のタブで切り替えて見せ、初めての人が読む記事を選びやすくしている
03終盤の会員登録の案内で、会員数を数字で示し、メールアドレスの入力から始められるようにしている

CONVERSION集客の工夫

✓サイト内検索検索窓を設置

✓カテゴリ・タグから探せるトップページ内

✓人気記事・ランキングトップページ内

✓購読・会員・LINE登録登録の案内

✓SNSへの導線X / Facebook

✓問い合わせ・相談の窓口各種お問い合わせ

記事の先に「資料」と「セミナー」を置く

記事のほかに、お役立ち資料やセミナーの入口をヘッダーとトップに並べている。資料のダウンロードやセミナーの申し込みは連絡先を伴うので、読者を見込み客に変える役割を持つ。

会員登録を特典で後押しする

会員登録の案内に特典と会員数を添え、メールアドレスの入力から始められるようにしている。「何がもらえるか」と「どれだけの人が使っているか」の両方を見せることで、登録のハードルを下げている。

COLOR配色

#FFFFFF背景

#37BEB0ブランドカラー · ティール

#EE6354会員登録ボタン · コーラル

#101E33濃色セクション・フッター · ネイビー

#111111本文テキスト

#EEEEEE区切り・背景

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

TYPOGRAPHYフォント

用途: 見出し・本文
使用フォント: Noto Sans JP
無料で近いもの: Noto Sans JP

用途: 英字・数字
使用フォント: Oswald
無料で近いもの: Oswald

要素	PC サイズ / 太さ	PC 行間	SP サイズ / 太さ
h2	24px / 700	—	18px / 700
h3	14px / 700	—	13px / 700
ボタン	14px / 700	—	14px / 700

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

STRUCTUREページ構成（上から順に）

01
ヘッダー
記事・特集・お役立ち資料・ツール・セミナーなどの入口と、検索・ログイン・会員登録ボタン。
ヘッダー／ロゴ＋ナビ＋1ボタン型
02
キャンペーンバナー
調査レポートや特集をスライドで。
イベント・キャンペーン／特集バナー並び型
03
ピックアップ記事
記事・メディア／記事カードグリッド型
04
カテゴリ別の記事
記事・メディア／記事カードグリッド型
05
直近開催予定のイベント
日付つきのセミナー一覧。
イベント・キャンペーン／見学会・イベント告知型
06
アクセスランキング
週間・月間をタブで切り替える。
記事・メディア／人気記事ランキング型
07
カテゴリから探す
記事・メディア／カテゴリナビ＋検索型
08
会員登録の案内
特典と会員数を示し、メールアドレスの入力から登録。
行動喚起／メルマガ・LINE登録型
09
講座・最新情報
イベント・キャンペーン／特集バナー並び型
10
おすすめのツール
メニュー・サービス／アイコン／写真グリッド型
11
フッター
フッター／店舗情報＋ナビ型

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

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

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

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

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

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

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

01記事のほかに、資料ダウンロードやセミナーなど連絡先を伴う入口を用意する
02会員登録やメルマガの案内には、特典と利用者数を添える
03人気記事のランキングをトップに置き、最初の1本を選びやすくする
04登録ボタンだけをブランド色と違う目立つ色にする

FAQよくある質問

ferretメディアで使われているフォントは？

見出しと本文は Noto Sans JP、英字や数字には Oswald を使っています。どちらも Google Fonts で無料で使えます。

中小企業のオウンドメディアでも会員登録は必要ですか？

必須ではありませんが、記事を読んだ人と再び接点を持つ仕組みは必要です。メルマガやLINE登録、資料ダウンロードなど、自社が続けられる形を1つ選んで用意すると効果的です。

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

BtoBのサービスやSaaS、コンサルティング、士業など、資料請求やセミナーから商談につなげたい会社のメディアに応用できます。

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