WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. Webメディア
  4. 月刊中崎町

webcan analyze gekkan-nakazakicho.com

WEB MEDIA · 大阪府 · PICKED 2026.10.21

月刊中崎町Webメディアのサイトデザイン参考 — 地域メディア・明朝体・モノトーン

月刊中崎町のトップページ（PC）
PC（1440px）
月刊中崎町のトップページ（スマホ）
スマホ（375px）
出典：gekkan-nakazakicho.com ↗確認日 2026.10.21
月刊中崎町Webメディア · 大阪府
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

「この街には『なぜ』がある。」——ひとつの町を、明朝体と人の物語で読ませる。

大阪・梅田のすぐ隣にある中崎町を取材する地域のウェブマガジン。ファーストビューは街の写真に大きな明朝体の「この街には『なぜ』がある。」を重ね、続くグレーの帯でサイトの考え方を短い文章で伝えている。Instagramの投稿を横に並べた「みんな、どうして中崎町？」、黒い背景に縦書きの見出しを置いた「歴史と文化を知る」、店主へのインタビューを並べた「中崎町の人に、会いに行こう。」、「私たちについて」と続く。

  1. 01見出しに A1明朝、本文にリュウミンを使い、白・グレー・黒のモノトーンで雑誌のような紙面にしている
  2. 02「みんな、どうして中崎町？」で、来訪者のInstagramの投稿を写真と短いコメントのカードで横に並べている
  3. 03インタビュー記事を、日付・名前・見出し・店名入りのリードと人物の写真で、左右に振り分けて並べている

CONVERSION集客の工夫

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

町を「人」で紹介する

「中崎町の人に、会いに行こう。」で、コーヒー焙煎所やハンバーガー店の店主へのインタビューを並べている。店名と人の物語をセットで見せることで、記事を読んだ人が実際にその店を訪ねるきっかけになる。

来訪者の投稿を入口にする

「他の人はなぜこの街に行ったの？」として、来訪者の投稿を写真つきで並べ、「中崎町に何しに行く？インスタグラムでチェック」のボタンでInstagramへつないでいる。読者と同じ目線の声が、町に行く理由になる。

読む入口を3つに分ける

ヘッダーのナビを「中崎町取材記事」「歴史・文化」「人に会う」に分け、トップでも同じ順に各コーナーと「一覧を見る」を置いている。関心に合わせて記事を探し始められる。

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

COLOR配色

#EDEEF2背景 · ペールグレー
#EEEEEEセクション背景
#FFFFFFカード背景
#000000見出し・本文テキスト／歴史と文化・フッターの背景

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

TYPOGRAPHYフォント

用途
和文見出し
使用フォント
A1明朝
無料で近いもの
Shippori Mincho
用途
和文本文・小見出し
使用フォント
リュウミン（B-KL / M-KL / R-KL）
無料で近いもの
Zen Old Mincho
用途
英字
使用フォント
Cormorant Garamond
無料で近いもの
Cormorant Garamond
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h1——37.5px / 400
h2112.3px / 4001.4048.8px / 400
h324px / 5001.0020px / 500
本文（p）20px / 7002.2014px / 500
ボタン16px / 4001.0016px / 400

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

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

  1. 01

    ヘッダー

    ロゴ・ナビ（中崎町取材記事・歴史・文化・人に会う・私たちについて・お問い合わせ）・Instagram・メニューのボタン。

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

    ファーストビュー

    街の写真に、大きな明朝体の「この街には『なぜ』がある。」。

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

    イントロダクション

    グレーの帯に、サイトの考え方を短い文章で。

    コンセプト／写真＋メッセージ型
  4. 04

    みんな、どうして中崎町？

    来訪者のInstagramの投稿を、写真と短いコメントのカードで横に並べる。「インスタグラムでチェック」のボタン。

    記事・メディア／記事カードグリッド型
  5. 05

    歴史と文化を知る

    黒い背景に縦書きの見出しと「一覧を見る」。

    記事・メディア／カテゴリナビ＋検索型
  6. 06

    中崎町の人に、会いに行こう。

    日付・名前・見出し・店名入りのリードと人物の写真を、左右に振り分けて並べる。

    記事・メディア／注目記事の大判＋リスト型
  7. 07

    私たちについて

    「もっと読む」と、横に流れる英字の帯。

    コンセプト／写真＋メッセージ型
  8. 08

    フッター

    ロゴ・「Produced by 中崎町PR部」・Instagram・ナビ。

    フッター／店舗情報＋ナビ型
月刊中崎町の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

04みんな、どうして中崎町？記事・メディア／記事カードグリッド型
月刊中崎町のみんな、どうして中崎町？（PC）PC
月刊中崎町のみんな、どうして中崎町？（スマホ）SP
05歴史と文化を知る記事・メディア／カテゴリナビ＋検索型
月刊中崎町の歴史と文化を知る（PC）PC
月刊中崎町の歴史と文化を知る（スマホ）SP
06中崎町の人に、会いに行こう。記事・メディア／注目記事の大判＋リスト型
月刊中崎町の中崎町の人に、会いに行こう。（スマホ）SP
07私たちについてコンセプト／写真＋メッセージ型
月刊中崎町の私たちについて（PC）PC
月刊中崎町の私たちについて（スマホ）SP

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.21 以降に撮影したもので、現在の表示とは異なる場合があります。

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01町（地域）への問いをキャッチコピーにして、大きな明朝体で見せる
  2. 02店や人のインタビューを、日付・名前・店名入りのリードで並べる
  3. 03来訪者のSNS投稿を、写真とコメントのカードで紹介する
  4. 04モノトーンと明朝体で、ウェブマガジンらしい紙面をつくる

FAQよくある質問

月刊中崎町のサイトで使われているフォントは？

大きな見出しは A1明朝、小見出しと本文はリュウミンで、英字に Cormorant Garamond を使っています。A1明朝とリュウミンは有料のフォントなので、無料で近づけるなら Shippori Mincho や Zen Old Mincho が候補です。

小さな町の地域メディアでも、記事を続けられますか？

このサイトは「今月の中崎町取材」で毎月3件の取材をうたい、記事を「歴史・文化」と「人に会う」に分けています。取材の数と記事の種類を最初に決めておくと、更新の計画を立てやすくなります。

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

商店街・観光協会・まちづくり団体の地域メディアのほか、地元の店や人を紹介するオウンドメディアを始めたい事業者に応用できます。

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

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

Webメディアのすべてを見る6件

FROM REFERENCE TO YOUR SITE

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

「月刊中崎町のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら