WEBCAN.
Free Diagnosis無料診断
  1. TOP
  2. デザイン参考集
  3. Webメディア
  4. colocal（コロカル）

WEB MEDIA · 全国 · PICKED 2026.10.15

colocal（コロカル）Webメディアのサイトデザイン参考 — 地域メディア・雑誌風・グリーン

colocal（コロカル）のトップページ（PC）
PC（1440px）
colocal（コロカル）のトップページ（スマホ）
スマホ（375px）
出典：colocal.jp ↗確認日 2026.10.15

EDITOR'S NOTE編集部の視点

雑誌の誌面のような写真の見せ方と、47都道府県から探せる入口。

出版社マガジンハウスが運営する、日本各地のローカルを紹介するWebマガジン。トップは特集のスライドと「今月の特集」の県から始まり、緑の背景で大きく見せるSpotlight、新着、連載、動画と続く。終盤には47都道府県をイラストのカードで並べ、地域から記事を探せるようにしている。

  1. 01英字のセリフ体の見出しと大きな写真で、雑誌の誌面のような見せ方をしている
  2. 02「Spotlight」は緑の背景に写真を1枚だけ大きく置き、注目の記事を目立たせている
  3. 03終盤に47都道府県をイラストのカードで並べ、地域から記事を探せる

CONVERSION集客の工夫

✓サイト内検索検索窓を設置
✓カテゴリ・タグから探せるトップページ内
－人気記事・ランキングトップページ内
－購読・会員・LINE登録登録の案内
✓SNSへの導線Facebook / Instagram / YouTube / TikTok
✓問い合わせ・相談の窓口お問い合わせ

都道府県から探せる入口

47都道府県をイラストのカードで並べ、地域ごとの記事一覧へ案内している。地域メディアでは「自分の地域」「行きたい地域」から読みたい人が多く、地域名での検索の入口にもなる。

連載で再訪の理由をつくる

新着とは別に、連載をまとめて見せている。続きものの企画は、読者がまた来る理由になる。

動画の枠を独立させる

動画を濃い背景の独立したセクションで見せ、ショート動画も並べている。記事を読まない層にも届く入口を用意している。

チェック項目は 2026.10.15 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#FDFFE2背景 · クリーム
#FFFFFFカード背景
#529319ブランドカラー · グリーン
#DDFFCAセクション背景 · ペールグリーン
#EDFCFFセクション背景 · ペールブルー
#000000本文テキスト

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

TYPOGRAPHYフォント

用途
英字見出し（Spotlight・What's New など）
使用フォント
Averia Serif Libre
無料で近いもの
Averia Serif Libre
用途
和文
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h214px / 4001.6014px / 400
h324px / 4001.6016px / 700
本文（p）12px / 4001.4011px / 400
ボタン12px / 700—14px / 700

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

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

  1. 01

    ヘッダー

    日付とロゴ、メニュー。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    Featured Stories

    特集のスライドと、今月の特集の県。

    ファーストビュー／全面写真＋コピー型
  3. 03

    Spotlight

    緑の背景に写真を1枚大きく。

    記事・メディア／注目記事の大判＋リスト型
  4. 04
  5. 05
  6. 06
  7. 07

    Videos

    動画とショート動画を濃い背景で。

    イベント・キャンペーン／特集バナー並び型
  8. 08
  9. 09

    Area（都道府県別）

    47都道府県をイラストのカードで並べる。

    メニュー・サービス／アイコン／写真グリッド型
  10. 10
colocal（コロカル）の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01英字見出しにセリフ体を使い、写真を大きく見せて誌面の雰囲気を出す
  2. 02注目の記事は、背景色を変えたセクションに写真1枚で置く
  3. 03地域を扱うなら、地域（都道府県・市町村）から探せる入口を用意する
  4. 04連載や動画など、新着とは別の入口で再訪の理由をつくる

FAQよくある質問

colocalで使われているフォントは？

英字の見出しは Averia Serif Libre、和文は Noto Sans JP です。どちらも Google Fonts で無料で使えます。

地域の会社が記事を書くなら、どんなテーマがよいですか？

自社の商品やサービスに関わる地域の人・場所・素材の話は、地域外の読者にも読まれやすいテーマです。地域名を見出しに入れると、地域名での検索からも見つけてもらえます。

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

地域の観光協会や自治体のサイト、地域の特産品を扱う会社のオウンドメディア、地方の情報誌のWeb版などに応用できます。

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

MOREほかのWebメディアの参考サイト

FROM REFERENCE TO YOUR SITE

このテイストで、
御社のオウンドメディアを。

「colocal（コロカル）のような構成で」とお伝えいただくだけで構いません。無料診断で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料診断に申し込む