WEBCAN.
Free Diagnosis無料診断
  1. TOP
  2. デザイン参考集
  3. Webメディア
  4. サイボウズ式

WEB MEDIA · 全国 · PICKED 2026.10.15

サイボウズ式Webメディアのサイトデザイン参考 — BtoBオウンドメディア・水色・丸ゴシック

サイボウズ式のトップページ（PC）
PC（1440px）
サイボウズ式のトップページ（スマホ）
スマホ（375px）
出典：cybozushiki.cybozu.co.jp ↗確認日 2026.10.15

EDITOR'S NOTE編集部の視点

会社の考え方を、記事のテーマ分けそのもので伝える。

グループウェアを提供するサイボウズのオウンドメディア。製品の説明ではなく「チーム」「働き方」をテーマに記事を出し、トップページは最新記事のあと「カイシャ・組織」「働き方・生き方」などのテーマごとに記事を並べている。水色の帯と丸ゴシックの見出しで、硬くなりがちなBtoBの話題をやわらかく見せている。

  1. 01ヘッダー直下に、テーマ別のアイコンメニューを水色の帯で並べている
  2. 02トップは「最新記事」のあと、テーマごとに記事を横スクロールで並べ、関心のあるテーマから読める
  3. 03編集部メンバーを顔写真つきで紹介し、「誰が書いているメディアか」を見せている

CONVERSION集客の工夫

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

テーマ分けで「何のメディアか」を伝える

記事を「カイシャ・組織」「働き方・生き方」などのテーマで分けてトップに並べている。製品名を前に出さなくても、どんな課題に向き合う会社かが伝わり、ブランドの認知につながる。

動画・書籍・イベントへ広げる

記事だけでなく、YouTubeのチャンネル、書籍、イベントの案内をトップに並べている。記事で興味を持った人を、より深い接点へ移せる。

編集部の顔を見せる

トップの終盤に編集部メンバーを顔写真つきで並べている。企業のオウンドメディアでも「人が書いている」ことが伝わると、記事が読まれやすくなる。

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

COLOR配色

#FFFFFF背景
#3DADD6ブランドカラー・ボタン · スカイブルー
#D5E2E7セクション背景 · ペールブルー
#EFF0E8セクション背景 · オフホワイト
#19292D本文テキスト
#BF3D0F新着バッジ

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

TYPOGRAPHYフォント

用途
見出し（セクション名）
使用フォント
M PLUS Rounded 1c
無料で近いもの
M PLUS Rounded 1c
用途
本文・記事タイトル
使用フォント
ヒラギノ角ゴ ProN
無料で近いもの
Noto Sans JP
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h116px / 7001.0016px / 700
h225px / 4001.0020px / 400
h316px / 7001.5015px / 700
本文（p）16px / 4001.0016px / 400
ボタン16px / 4001.0016px / 400

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

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

  1. 01

    ヘッダー

    ロゴを中央に、左にSNSアイコン、右に検索とメニュー。

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

    テーマ別メニュー

    水色の帯に、テーマをアイコンつきで横に並べる。

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

    最新の記事

    新しい記事を大きめのカードで見せ、その下に続く記事を並べる。

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

    テーマ別の記事（カイシャ・組織／働き方・生き方）

    テーマごとに記事をカルーセルで並べる。

    記事・メディア／記事カードグリッド型
  7. 07
  8. 08
  9. 09
  10. 10

    編集部メンバー

    メンバーを丸い顔写真で並べる。

    人・代表／代表・院長あいさつ型
  11. 11
  12. 12
  13. 13
サイボウズ式の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01記事のカテゴリを、自社の製品名ではなく読者の関心ごと（働き方・組織づくりなど）で分ける
  2. 02トップでは、テーマごとに記事を少しずつ並べ、関心のあるテーマから入れるようにする
  3. 03書いている人・編集部の顔を見せる
  4. 04記事から動画・書籍・イベントなど、より深い接点への入口を用意する

FAQよくある質問

サイボウズ式で使われているフォントは？

セクション見出しは丸みのある M PLUS Rounded 1c、本文と記事タイトルはヒラギノ角ゴです。無料で近づけるなら、見出しは M PLUS Rounded 1c、本文は Noto Sans JP が使えます。

中小企業でもオウンドメディアは作れますか？

記事の量より、テーマの絞り方が大切です。自社のお客様が抱えている悩みを2〜3のテーマに絞り、月に数本でも続けると、検索や紹介から読まれる資産になります。

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

BtoBの製造業・IT・士業など、製品やサービスを説明するより「考え方」で選ばれたい会社のオウンドメディアに応用できます。

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

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

FROM REFERENCE TO YOUR SITE

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

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

無料診断に申し込む