この記事の対象: 自社メディアやポータルサイトの立ち上げ・リニューアルを検討している担当者
読了時間: 約9分
「メディアサイトを作りたいけど、どういう構成にすればいいか分からない」——制作会社に相談する前に、この状態で見積もりを取ると、要件が固まらないまま話が進み、あとで「思っていたのと違う」が起きがちです。
ポータルサイトやWebマガジンは、コーポレートサイトと違って「記事を継続的に増やしていく」「カテゴリやタグで情報を整理する」という運用前提の設計が必要です。この記事では、Soreiine!!ギャラリーに掲載されている実例5件を使って、レイアウトごとの向き不向きと、発注時に押さえておきたい判断材料を整理します。
メディアサイトのレイアウトは大きく4パターンに分かれる
まず全体像から。ポータルサイト・メディアサイトのトップページ・アーカイブページの作り方は、次の4パターンに大別できます。
| レイアウト | 特徴 | 向いているメディア |
|---|---|---|
| 1カラム | 記事本文への集中度が高い。読み物として完成度が出やすい | 専門メディア・特集記事主体 |
| グリッド（カード型） | 複数記事を並列に見せられる。更新頻度の高さが伝わる | カルチャー系・シティガイド系 |
| 3カラム | 情報量を最大化できる。ナビ・ランキング・カテゴリを同時表示 | 雑誌系・ライフスタイル系 |
| スプリット（左右分割） | ビジュアル訴求と情報を両立。世界観の一発表現に強い | 施設・ブランド寄りのメディア |
どれが正解ということはなく、「記事の本数」「更新頻度」「読者が何を求めて来るか」で決まります。まずは実例を見ながら、自分たちのメディアがどのタイプに近いかを確認してください。
記事の見せ方
- 1本を深く読ませたい→1カラム
- 複数を並べて選ばせたい→グリッド
- 情報量を優先したい→3カラム
- 世界観を一発で伝えたい→スプリット
実例1｜1カラムで記事に没入させる：WWDジャパンの特集記事
ファッション業界専門メディア「WWD JAPAN」が公開した、レゴブロック40周年を扱う特集記事です。
この記事の作りで注目したいのは、あえて情報を詰め込まない1カラム構成にしている点です。サイドバーやレコメンド枠を極力減らし、白基調のクリーンな背景の上に本文だけを流し込むことで、読者の視線が記事の内容から逸れません。ファッションというジャンルとカルチャーの話題を掛け合わせる編集方針もあり、プロフェッショナルなエディトリアル誌のような品質を保っています。
このタイプが向いているケース
- 専門メディアで、1本あたりの記事の情報量・取材量が多い
- 「読ませる」ことが目的で、回遊率よりも読了率を重視したい
- ブランドや取材対象の世界観を、余計な要素で邪魔したくない
逆に、更新本数が多くカテゴリも幅広いメディアだと、1カラムはトップページの情報量が不足しがちです。特集記事の詳細ページには向きますが、一覧ページには別の設計が必要になります。
実例2｜カード型グリッドで雑誌をめくる体験を作る：Beyond
カルチャー系Webマガジン「Beyond」は、白基調の背景にカード型の特集記事を横並びで展開するグリッドレイアウトです。
「ウィッシュリスト」「演劇入門」「多摩と動詞」といった、テーマ性の強い特集がサムネイルとともにずらりと並び、雑誌のページをめくるような感覚で記事を選べる構成になっています。写真とイラストを組み合わせたエディトリアルデザインが、単なる記事一覧ではなく「文化的な深み」を感じさせる仕上がりにつながっているのがポイントです。
グリッドレイアウトを選ぶ際、発注者側が事前に決めておくべきことは次の3つです。
- 1記事あたりのサムネイル画像を用意できるか(カード型は画像のクオリティが並びの見え方を左右します)
- カテゴリ・タグの粒度(細かすぎるとカードが分散し、粗すぎると一覧性が失われます)
- 更新頻度(月数本のペースなら、カードが埋まらずスカスカに見えるリスクがあります)
実例3｜3カラムで情報量と世界観を両立する：リンネル公式サイト
ナチュラル系ライフスタイル誌「リンネル」の公式サイトは、ベージュを基調とした温かみのある配色で、左に日付・花ごよみ、中央にコンテンツ、右にカテゴリナビゲーション・ランキングを配した3カラム構成です。
手書き風のロゴや丸いカテゴリアイコンなど、雑誌の紙面で培われた世界観をそのままWebに落とし込んでいる点が特徴です。FASHION、LIFESTYLE、BEAUTYといった複数カテゴリを持つメディアで、かつ「花ごよみ」のような季節感の演出まで盛り込んでいるため、情報設計としてはこの4パターンの中で最も複雑な部類に入ります。
3カラムは「見せたい情報が多い」メディアに向く一方、発注時に見落としがちな注意点があります。
- スマートフォン表示では3カラムをそのまま維持できないため、モバイルでどう畳むかを最初に決めておく必要がある
- カラムが増えるほど実装工数・保守工数が上がるため、本当に3カラム必要かは記事本数と運用体制から逆算する
- サイドの「ランキング」枠は、アクセス解析と連動させる設計にしないと更新が止まって形骸化する
実例4｜エリア×カテゴリの二軸でシティガイドを組む：名古屋のカルチャーメディア
名古屋のグルメ・カルチャー・ライフスタイルを扱うシティガイドメディアは、グリッドレイアウトに緑のアクセントカラーを合わせた構成です。
FOOD & DRINK、ART、LIFESTYLE、MUSICというカテゴリ分けに加えて、エリア別のフィルタリング機能を持たせているのが実例2のBeyondとの大きな違いです。「カテゴリ」と「エリア」の二軸ナビゲーションによって、読者は「名古屋の今」を目的別・場所別のどちらからでも辿り着けます。写真のセレクトがおしゃれで、グリーンのアクセントカラーが都会的な空気感を後押ししている点も、シティメディアらしい仕上がりです。
地域メディアやシティガイド系のポータルを企画する場合、フィルタリングの軸を何本持たせるかは要件定義の初期段階で必ず決めておきたいところです。軸が増えるほど便利になる一方、記事のタグ付け作業が運用の負担になるため、「編集体制がそれに耐えられるか」も合わせて検討してください。
タブやフィルターのUIを実装する際の技術的なポイントは、以下の記事で解説しています。
実例5｜スプリットレイアウトで施設の世界観を一発で伝える：関ヶ原の文化施設
生活とアートが溶け合う関ヶ原の文化施設のサイトは、緑豊かな芝生の上に点在する石のアート作品を大きく見せるメインビジュアルと、右サイドに生活美術館やカフェの写真を配置したスプリットレイアウトです。
「生活と、アートと、風景。」というキャッチコピーが、このサイトのコンセプトを端的に体現しています。特筆すべきは天気や気温の表示で、これが「実際にその場所を訪れる」臨場感を演出する仕掛けになっている点です。記事一覧型のメディアというより、施設・スポットの多面的な魅力を1画面で伝えることに主眼を置いた構成だと言えます。
向いている
- 施設・スポット単体の訴求
- 写真のクオリティに自信がある
- 記事本数より世界観を優先したい
向いていない
- 記事数が多く一覧性が必要
- カテゴリ・タグでの回遊を重視したい
- 更新頻度が高く運用型のメディア
発注前に決めておきたい3つのこと
5つの実例を踏まえると、発注者側が制作会社に相談する前に決めておくべきことは次の3点に集約されます。
1. 記事本数と更新頻度
月に何本更新するか、開設時点で何本の記事を用意できるかによって、向いているレイアウトが変わります。グリッドや3カラムは記事本数が少ないと余白ばかりが目立つ仕上がりになるため、開設時に最低限のストック記事を用意しておくことをおすすめします。
2. カテゴリ・タグの設計
カテゴリ数が多いメディアほど、ナビゲーションの複雑さが増します。あらかじめ「大カテゴリ」「中カテゴリ」「タグ(自由入力)」のように階層を決めておくと、制作会社との打ち合わせがスムーズに進みます。この階層設計は、後述するテンプレート実装にも直結する部分です。
3. 更新は誰が行うか
CMS(WordPressなど)で運用チームが自分たちで記事を追加していくのか、制作会社に都度依頼するのかで、必要な機能が変わります。自社運用が前提であれば、管理画面の使いやすさや、カスタム投稿タイプでのカテゴリ別一覧の作り込みが重要になります。
コスト感の目安
具体的な金額は依頼する会社や要件によって大きく変わるため、ここでは「構成の複雑さ」と「費用がどこで上がるか」の関係を整理します。特定の企業名や実例と金額を結びつけるものではなく、あくまで構成パターンごとの一般的な傾向です。
| 構成の複雑さ | 想定される追加要素 | 費用が上がりやすいポイント |
|---|---|---|
| テンプレート利用の1カラム | 記事詳細ページのみのシンプル構成 | ほぼ発生しない |
| グリッド＋カテゴリ分類 | カード型一覧、カテゴリ別アーカイブ | サムネイル画像の運用設計、カテゴリ管理画面のカスタマイズ |
| 3カラム＋ランキング・関連コンテンツ | サイドバーの動的表示、レコメンド機能 | 表示ロジックの実装、モバイル表示の再設計 |
| エリア×カテゴリの二軸フィルタ | 複数条件での絞り込み検索 | フィルタリング機能の実装、タグ設計の見直し |
「テンプレート利用の5ページ構成なら比較的抑えられる」一方、フィルタリング機能やランキング表示のような動的な要素が増えるほど、実装工数が積み上がっていきます。見積もりを比較するときは、金額だけでなく「その金額にどの機能が含まれているか」を必ず確認してください。
まとめ
ポータルサイト・メディアサイトの構成は、記事本数・更新頻度・カテゴリ設計の3つから逆算するのが基本です。今回紹介した5つの実例は、それぞれ違うレイアウトを選んでいますが、いずれも「自分たちのメディアが何を一番伝えたいか」に沿って選ばれています。発注時には、まず自社の運用体制を整理し、それに見合ったレイアウトを制作会社に提示できる状態にしておくと、見積もり比較もスムーズです。
よくある質問
ポータルサイトとメディアサイトの違いは何ですか
ポータルサイトは複数の情報源やコンテンツへの入口をまとめたサイトを指し、メディアサイトは自社で記事を制作・発信するサイトを指すことが多いです。ただし実務上は明確に区別されず、記事一覧型のサイト全般を指して両方の呼び方が使われています。
メディアサイトのレイアウトは途中で変更できますか
CMSの設計次第では可能ですが、カラム数やカテゴリ構造を大きく変える場合はテンプレートの作り直しが必要になり、追加の実装工数がかかります。開設前にある程度の記事本数と更新ペースを見込んでおくことで、後からの大幅な変更を避けやすくなります。
記事数が少ない状態でメディアサイトを開設しても大丈夫ですか
グリッドや3カラムのレイアウトは、記事数が少ないと余白が目立ってしまいます。開設前に最低限のストック記事(目安として各カテゴリに数本ずつ)を用意しておくか、記事数が少ない段階では1カラムに近いシンプルな構成から始めるという選択肢もあります。
自社でメディアサイトを更新する場合、何を制作会社に依頼すればいいですか
WordPressなどのCMSであれば、カスタム投稿タイプの設計、カテゴリ別アーカイブページのテンプレート、管理画面での入力しやすさの3点を依頼内容に含めておくと、開設後の運用がスムーズになります。
参考にしたいメディアサイトが複数あるとき、どう制作会社に伝えればいいですか
URLをそのまま共有するだけでなく、「どのレイアウトの、どの要素が良いと思ったか」を言語化して伝えると、意図が正確に伝わります。本記事のように「1カラムの没入感」「グリッドの一覧性」など、要素単位で切り分けて伝えるのがおすすめです。
