UtopiaのMediaサイトタイプは、Webメディア・オンライン雑誌・業界ニュースサイト向けに設計されたレイアウトです。大きな特集ヒーローで注目記事を前面に出し、その下に密度の高い記事グリッドを配置。読者が「今読むべき記事」をすぐ見つけ、カテゴリを横断して回遊できる雑誌風の体験を提供します。
本記事ではライブデモハブのMediaデモで試せる機能、CorporateやBlogとの違い、Utopia管理画面での再現手順を詳しく説明します。
こんなサイトに最適
- 特集・インタビュー・ランキングを定期更新するWebメディア
- 業界ニュース、テックブログ、ライフスタイル雑誌のような記事中心サイト
- トップページで複数カテゴリの記事を一覧性よく見せたい編集チーム
- 広告枠（Ads設定）やサイドバーウィジェットを活用する収益化メディア
1記事だけを深く読ませるBlogより、トップで「選ぶ楽しさ」を出したい場合にMediaが向きます。
ライブデモで試せること
Mediaライブデモでは次を操作できます。
- 大判特集ヒーロー（サムネ・タイトル・リード文・CTA）
- カテゴリタブまたはセクション見出し付き記事グリッド
- サムネイル・日付・カテゴリラベル付き記事カード
- サイドバーの人気記事・カテゴリ・広告枠
- 記事詳細ページへの遷移（本文・目次・関連記事）
- レスポンシブ：モバイルでは1カラムに最適化されたグリッド
レイアウトの特徴
Mediaはビジュアルファーストのトップ構成です。ヒーローで編集部の「いま一番推したい記事」を大きく見せ、グリッドで回遊を促します。記事カードは統一された比率とタイポグラフィで、雑誌の棚のように整然と並びます。
サイドバーは記事リスト系サイトの定番要素（ランキング、カテゴリ、広告）を置きやすく設計。Utopiaの関連記事・目次・著者ボックス（コンテンツ設定）も記事ページで活用できます。
他タイプとの違い
- Blog：個人・少人数の発信向け。Mediaは特集＋多カテゴリの雑誌感が強い
- Portal：検索・タグ・物件カードが主役。Mediaは編集記事の見せ方が主役
- Corporate：固定ページとサービス訴求。Mediaは更新頻度の高い記事が中心
設定のヒント
- デザイン設定 → サイトタイプ「Media」を選択
- 見出し・カードスタイルを雑誌トーンに合わせて調整（角丸・余白・フォント）
- コンテンツ設定 → 目次・関連記事・著者ボックスをON
- Ads設定 → サイドバー・記事上下の広告コードを配置
- カテゴリを整理し、トップに出す「特集」用の固定ページまたは最新記事を設定
まとめ
Mediaタイプで、特集と記事グリッドを組み合わせた本格的なWebメディアを素早く立ち上げられます。Mediaライブデモで雑誌風の回遊感を確認し、全9デモと比較してみてください。
