ワイヤーDLcolocal（コロカル）
雑誌の誌面のような写真の見せ方と、47都道府県から探せる入口。
WEB MEDIA · 全国 · PICKED 2026.10.15
TURNS（ターンズ）Webメディアのサイトデザイン参考 — 地域メディア・地方移住・情報量多め
出典：turns.jp ↗確認日 2026.10.15
EDITOR'S NOTE編集部の視点
記事・イベント・求人・物件を並べ、「読む」から「動く」までを一つのサイトでつなぐ。
地方移住や地域とのつながりをテーマにしたメディア。トップは自治体のPRやイベントの大きなバナーのスライドから始まり、イベント・求人・地域の記事をサムネイルつきの一覧で並べたあと、イベント情報・求人・物件をそれぞれまとめて見せている。終盤の「テーマで選ぶ」検索で、読者が自分の関心から記事を探せるようにしている。
- 01記事・イベント・求人を、サムネイル・日付・タグつきの縦の一覧で並べている
- 02イベント情報・求人・物件（住まい・空き家）を、種類ごとにまとめて見せている
- 03「テーマで選ぶ検索」として、関心ごとのタグをボタンで並べている
CONVERSION集客の工夫
✓サイト内検索検索窓を設置
✓カテゴリ・タグから探せるトップページ内
－人気記事・ランキングトップページ内
✓購読・会員・LINE登録登録の案内
✓SNSへの導線Instagram / Facebook / X
✓問い合わせ・相談の窓口プロモーションのご相談 / 移住相談
記事の先に「参加できるもの」を置く
移住相談会やツアーなどのイベント、地域おこし協力隊などの求人を、記事と同じ一覧に並べている。読んで興味を持った人が、そのまま参加や応募に進める。
ヘッダーで「地域から探す」と「掲載の相談」を分ける
ヘッダーの右上に、読者向けの「都道府県検索」と、自治体・企業向けの「プロモーションのご相談」を並べている。読者と広告主という2種類の相手を、最初から別の入口で案内している。
関心から探せるテーマ検索
「地方移住」「農業」「古民家暮らし」のような関心ごとのタグをボタンで並べている。地域名が決まっていない人でも、自分の関心から記事を探し始められる。
チェック項目は 2026.10.15 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#000000本文テキスト
#333333ボタン
#408BD1リンク
#AAAAAA区切り・枠線
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文本文
- 使用フォント
- 平成角ゴシック（Adobe Fonts）
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字
- 使用フォント
- DIN 2014（Adobe Fonts）
- 無料で近いもの
- Barlow
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h3 | 14px / 400 | 1.80 | 14px / 400 |
| 本文（p） | 14px / 400 | 1.80 | 14px / 400 |
| ボタン | 13px / 400 | 1.50 | 13px / 400 |
実測値（PC 1440px・SP 375px、2026.10.15 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
関連サービスのバナー
イベント・キャンペーン／特集バナー並び型 - 04
- 05
イベント情報
記事・メディア／記事カードグリッド型 - 06
求人・協力隊募集情報
記事・メディア／記事カードグリッド型 - 07
物件・住まい・空き家情報
記事・メディア／記事カードグリッド型 - 08
- 09
雑誌のバックナンバー
イベント・キャンペーン／特集バナー並び型 - 10
SNS・関連サービス
イベント・キャンペーン／特集バナー並び型 - 11
フッター
フッター／店舗情報＋ナビ型
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01記事のほかに、イベント・求人など読者が「参加できるもの」を同じ一覧に並べる
- 02読者向けの入口（地域から探す）と、広告主・取引先向けの相談窓口を分けて置く
- 03地域名ではなく関心ごとのタグで記事を探せるようにする
- 04一覧のカードには、日付と種類（イベント・求人など）のタグを必ず付ける
FAQよくある質問
TURNSで使われているフォントは？
和文は Adobe Fonts の平成角ゴシック、英字は DIN 2014 です。無料で近づけるなら、和文に Noto Sans JP、英字に Barlow が使えます。
地域の会社や自治体のサイトでも参考になりますか？
なります。記事だけでなく、相談会・見学会・求人などの「参加できるもの」を同じ一覧に並べる作りは、移住促進のサイトや地域の企業の採用サイトにも応用できます。
どんな業種の参考になりますか？
自治体の移住・観光サイト、地域の情報誌のWeb版、採用イベントを多く行う企業のサイトなどに応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はTURNS（ターンズ）および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかのWebメディアの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のオウンドメディアを。
「TURNS（ターンズ）のような構成で」とお伝えいただくだけで構いません。無料診断で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料診断に申し込む