人気ウェブメディアの作り方

人気の秘密を探る

この記事では人気のウェブメディアがどのような戦略・デザインでユーザーを集めているのかを分析します。対象は月間PV数が300万PV以上のメディア。それほどに読まれる仕掛けはどこにあるのでしょうか。

対象メディア

以下の7つのメディアを対象とします。

WIREDのロゴ
WIRED900万PV

オシャレなウェブメディアの代表例がWIREDでしょう。デザインも、取り上げるテーマも、記事構成も洗練されています。PV数:2017年1-3月媒体資料より

BuzzFeedのロゴ
BuzzFeed1600万UV

アメリカ生まれのバイラルメディア。日本版は2016年1月〜開始されたにも関わらず、月間ユニークビジター(UV)数で既に1600万を突破したとのことです。PV数はこの数倍になることが予想されます。UV数:BuzzFeed 2017年1月の記事より

GIZMODOのロゴ
GIZMODO5670万PV

こちらもアメリカ発のメディア。取り扱うテーマは主にテクノロジーやガジェットです。PV数:2017年1-3月媒体資料より

GIGAZINEのロゴ
Gigazine8150万PV

15年以上にわたって運営されている老舗ニュースメディア。幅広いテーマを扱っている印象です。PV数:2017年1月アクセス解析より

allabutのロゴ
All About1.5億PV

仕事、旅行、健康などありとあらゆるテーマをその道の専門家が解説するウェブメディア。誰もが一度は見たことがあるでしょう。PV数:2017年4-7月媒体資料より

LIGのロゴ
LIG800万PV(?)

有名なWeb制作会社のオウンドメディア。扱うジャンルはWeb制作系が多いものの、何でもありという印象です。PV数は少し古い資料から拾っています。PV数:2015年12-16年2月媒体資料より

NAVERまとめのロゴ
NAVERまとめ26.1億PV

運営ポリシーに大きな問題がありますが、Googleには多くの記事が高く評価されています。今回はそのSEO上の高評価の理由を探るために対象メディアに加えました。PV数:2016年7-9月媒体資料より

TOPIC.1

流入元

以下で掲載する流入経路、直帰率、回遊率、ソーシャルシェア割合などはSimilarWebを用いて調べています。そのため、実際の数値とは少なからず差があることにご注意ください。まず、各メディアはどのように人を集めているのでしょうか。並べて見てみましょう。

■ 検索流入 ■ ソーシャルシェア ■ 直接(ブックマーク等) ■ 参照リンク参照(feedly等) ■ その他

流入経路別の割合(%)
WIREDのロゴ 25.2%34.9%11.7%
BuzzFeedのロゴ 21.3%20.1%7.9%
GIZMODOのロゴ 24.1%42.2%12.5%
GIGAZINEのロゴ 21.2%56.9%12.7%
allabutのロゴ 76.7%13.9%6.1%
LIGのロゴ63.3%17.9%9.6%
NAVERまとめのロゴ 81.9%10.7%5.3%

こう見てみると、メディアごとに戦略がずいぶんと異なることが分かります。大きく分けると上の4つはソーシャルシェアとブックマークからの流入が中心、下3つは検索流入が中心となっています。

シェア/ブックマーク中心型

WIRED、GIZMODO、Gigazine、BuzzFeedがこちらに分類されます。GIGAZINE以外は世界中で展開されているメディアですね。ブックマークやソーシャルシェアからの流入を維持するためには、高品質の記事を更新し続ける必要があります(でなければ、読者が離れていってしまいます)。そのためには(1)安定的に更新を続ける体制、(2)的確に記事ネタを選定する仕組み、(3)バズらせるスキルを持った優秀なライター、この3つが欠かせません。

運営体制の整ったバイラルメディア

BuzzFeedはバイラルメディアと言われるだけあり、やはりソーシャルシェアからの流入が他よりもダントツ高くなっています。BuzzFeed Japanが創刊したのが2016年の1月。それからまだ1年強しか経っていません。ソーシャル流入を中心とするメディアは、Twitterやfacebookでのフォロワーが増えれば増えるほどバズりやすくなり、それによりまた読者が増える…というような加速度的に成長していく傾向があります。重要なのは、多くのバイラルメディアにとってネックとなっている著作権的な問題をBuzzFeedはクリアしているという点です。運営ポリシーがしっかりとしたバイラルメディア今後もは大きな成長を遂げるでしょう。

検索流入型

All About、LIG、NAVERまとめは検索流入が大半を占めています。All Aboutは記事のほとんどが文章で構成されます。一方で各分野の専門家が執筆しており、信頼性が担保されています。NAVERまとめはその正反対で、大半の記事がライトな引用文と画像で構成されます。その分読みやすいのですが、誰もがライターになれるため信頼性が担保されていません。「信頼性」と「読みやすさ」、Googleが今後どちらに舵を切るか(あるいは両方か)がこれらのメディアの行方を大きく左右するでしょう。

TOPIC.2

2カラム&レスポンシブデザインが基本

2カラムレイアウト

デスクトップ表示では7メディアともサイドバーのある「2カラムデザイン」でした。Gigazineだけは左側にサイドバー、それ以外のメディアは右側にサイドバーがありました。もちろん全てレスポンシブ対応です。レスポンシブデザイン:画面サイズに応じてレイアウトや表示項目を切り替えるデザインのこと。

TOPIC.3

サイドバーのコンテンツ

メディアごとにサイドバーに何が表示されているのかを整理してみます。デスクトップ表示での閲覧割合は多くないかもしれませんが、参考になるはずです。 新着記事などの()内の数字は表示記事数を表しています。表は右側にスクロールできるかもしれません。→

新着
記事
関連
記事
人気
記事
推薦
記事
広告
ボックス ボックス サイドバー
固定
WIREDのロゴ
(4)
-
(8)
-
(2)
- -
(広告)
BuzzFeedのロゴ - -
(12)
- -
(フォロー)
GIZMODOのロゴ
(5)
-
(5)
- - - -
(新着記事)
GIGAZINEのロゴ
(40)
- - - - - - -
allabutのロゴ - -
(3)
- -
(広告)
LIGのロゴ - - -
(5)

(4)
-
(広告)
NAVERまとめのロゴ -
(5)
- -
(3)
- -
(広告)

サイドバーに関連記事

buzzfeedのサイドバー↑WIRED

どのメディアもサイドバーに他の記事へのリンクが貼られています。これは言うまでもなく直帰率を下げ、回遊率を上げるのに有効です。関連記事については後ほど詳しく取り上げます。

SNSボックスの設置

buzzfeedのサイドバー↑BuzzFeed

BuzzFeedとLIGはどちらもバズにより多くのユーザーを集めています。とくにBuzzFeedでは記事の拡散だけでなく、個別にシェアされやすいコンテンツをTwitterやfacebookで発信しています。これがフォロワーの急増につながっていることは間違いないでしょう。ぜひサルワカのフォローも!

サイドバーの固定によりムダを無くす

2カラムのデザインであれば、ムダな空白を無くすためにサイドバーの固定(追尾)を活用するべきでしょう。回遊率を上げるためなら関連記事を固定、よりユーザービリティを高めるなら目次を固定。広告を固定する(追尾広告)のはユーザーにとって少なからずストレスになるはずですが、収益率を高めるためには効果的であるとは言えるでしょう。Google AdSenseの固定はポリシー違反に該当するのでご注意ください。

TOPIC.5

ソーシャルシェア

ここからはシェアボタンをどのように表示させており、実際にどのソーシャルメディアにシェアされているのかを見てみます 。

シェアボタンの位置

記事上 記事下 固定
(追尾)
全体に占める
シェア流入
WIREDのロゴ 28.1%
BuzzFeedのロゴ - - 48.2%
GIZMODOのロゴ - - 20.1%
GIGAZINEのロゴ - - 8.9%
allabutのロゴ - - - 2.2%
LIGのロゴ - 8.0%
NAVERまとめのロゴ - - - 7.3%

※ モバイル表示したときの位置になります。

WIRED

:facebookからの流入 :twitterからの流入 B!:はてブからの流入 :Pocketからの流入 :その他

32.6%B! 10.5%

WIREDのシェアボタン

6種類のシェアボタンが追尾で表示されます。この中で実際によく使われるのはTwitter、facebook、はてブのようです。Pocketは保存されても、再訪問に繋がることが少ないのかもしれません。

BuzzFeed

BuzzFeedの場合、ソーシャルシェアからの流入が全体の5割近くを占めています。

78.7%12.6%

↑海外版の閲覧を含む割合です

日本だけで見るとfacebookの割合がもう少し小さくなるのではないでしょうか(BuzzFeedのメインターゲット層である日本の20代以下の若者にとってはfacebookよりtwitterが主流だからです)。

Buzzfeedのシェア

シェアボタンは追尾でfacebookとLINEが表示されています。twitterなどは右端のボタンから表示できる仕様です。

GIZMODO

56.6%B! 6.7%6.6%

GIZMODOでは全体のシェアの半分以上がfacebookとなっています。Tech CrunchBRIDGEなどのテック系スタートアップ界隈の人が好みそうなメディアはfacebookの割合が高い傾向がありそうです。

gizmodoのシェア

GIZMODOも追尾のシェアボタンです。

GIGAZINE

30.3%B! 19.7%9.4%

Gigazineははてブでホットエントリ入りすることも多いですね。はてブからの流入率は今回紹介するメディアの中でダントツ高くなっています。これはGigazineとはてブはどちらも同じ時代に人気を博すようになり、読者の中にはてブユーザーが多いからでしょう。

gigazine

シェアボタンもシンプルなデフォルトのものです。この飾らない感じが個人的に好きです。

All About

ソーシャルシェア流入は全体の2%程度にしか満たないため、ここでは割合の掲載はやめておきます。All Aboutがソーシャルシェアが苦手な理由は明白です。あまりに取り扱っているテーマが広すぎるためにフォロワーの求めるコンテンツをピンポイントで届けることが難しいからです。ビジネス系の記事に興味があってフォローしたのに、グルメやら恋愛やらの記事を拡散されても興味が持てるはずがありませんね。また、ライターというよりいわゆる専門家が書く記事であるためか、バズるような記事は少ない、という印象です。割り切っているのか記事内にシェアボタンは設置されていません。

LIG

79.6%

LIGは検索流入をメインに、時々記事がバズる「バランス型」という印象です。

Buzzfeedのシェア

シェアボタンは画面の上部に固定されます。日本で最も拡散率の高い4サービスのボタンとなっています。

NAVERまとめ

19.6%B! 5.9%9.1%

NAVERまとめでは、PV数がダイレクトに収入に繋がるため、ライターは自らのSNSアカウントで積極的に記事を拡散する傾向があります。その一方でfacebookでの割合が少ないのは、NAVERまとめの記事を実名でシェアすることに気がひける人が多いからではないでしょうか。NAVERまとめの問題について知る人は、今後シェアを避けることが予想されるので、シェア率は今後少しずつ下がっていくでしょう。

TOPIC.6

フォント指定

2カラムレイアウト

文字の大きさや行間は見やすさと読みやすさに大きな影響を与えます。人気のウェブメディアの文字設定=多くの人が読み慣れている文字設定とも言えます。ここでは、サイズ・行間・字間の3つのポイントを見ていきたいと思います。

フォントサイズ

タイトル 本文 大見出し
h2
中見出し
h3
WIREDのロゴ 18px 18px 14px 14px 14px 14px - -
BuzzFeedのロゴ 22px 36px 16px 17px 22px 22px 18px 18px
GIZMODOのロゴ 21px 32px 16px 16px 18px 26px - -
GIGAZINEのロゴ 19px 26px 16px 17px - - - -
allabutのロゴ 24px 33px 16px 16px 20px 20px - -
LIGのロゴ 17px 30px 15px 17px 23px 28px 21px 24px
NAVERまとめのロゴ 22px 32px 16px 20px 20px
(pタグ)
20px
(pタグ)
- -

タイトルのサイズ

タイトルはモバイルでは20px前後が多いようです。これはタイトルの文字数も加味して決めるべきかと思います。フォントサイズが20px以上でタイトルが30文字を超えるとやや窮屈な印象になってしまいます。デスクトップの場合は、30px前後が見やすい大きさと言えるでしょう。

記事本文のサイズ

本文(pタグの段落)のフォントサイズは、モバイルではどのメディアも14〜16pxの範囲に収まりました。しかし本文ではこの1pxの違いが読みやすさに大きな影響を与えます。注意しなければならないのは、フォントサイズが大きくなるほど改行が多くなるという点です。WIREDのようなしっかりとした文章で構成されるウェブメディアの場合、フォントサイズは14〜15px程度が理想と言えるかもしれません。一方で、BuzzFeedのように写真を多用するライトな記事の場合、16px程度が良いのでしょう。

見出し

今回それぞれの記事構成を調べて驚いたのは、8つのメディアのうちほとんどが「見出しタグをほとんど使っていない」あるいは「正しく使っていない」ということです。どのメディアもタイトルはh1タグとなっていました。しかし、WIREDとBuzzFeedの場合、本文ではh2見出しが使われずいきなりh3見出しが用いられています。GIZMODOでは、h2見出しはたまに使われているものの、h3タグの使用は確認できませんでした。Gigazineに至っては見出しが使われておらず、全て同サイズの文字となっています。見出しらしきものも、ただの太字により作られています。最も驚いたのは、SEOに強いNAVERまとめが見出しをpタグで再現しているという点です。つまり、本文には一切見出しタグは使われない設計になっています。見出しタグの使用方法とSEOの関係はよく取り上げられる話題ですが、見出しタグの使い方で検索エンジンの評価が大きく左右されることはないのでしょう。

行間・字間

次に行の高さ(line-height)と文字どうしの間隔(letter-spacing)を見てみます。

line-heightとは

参考までに、line-heightは行の高さを表します。

line-heightとは

letter-spacingは文字同士の間隔を表します。

本文
行高
line-height
字間
letter-spacing
WIREDのロゴ 1.7 0
BuzzFeedのロゴ 1.5 0
GIZMODOのロゴ 1.6 0
GIGAZINEのロゴ 1.3 0
allabutのロゴ 1.6 0
LIGのロゴ 2.0 0
NAVERまとめのロゴ 1.5 -0.05em

行高(line-height)

だいたい1.5〜2.0の範囲に収まりました

gigazineの行高

Gigazineはline-height:1.3ですが、少し窮屈に見えます。とはいえ、写真を多用していることもあり、意識しなければ見づらさは感じません。

WIREDの行高

WIREDは1.7です。違和感なく読み進められる理想的な値と言えるでしょう。

字間(letter-spacing)

字間はNAVERまとめをのぞき0(初期値)となっていました。

NAVERまとめの字間

NAVERまとめは-0.05emと少しだけツメられています。

NAVERまとめの字間

違いが分かるように、ゼロにした場合も載せておきます。基本的にはletter-spacingを設定する必要はないのでしょうが、フォントサイズを大きめに設定している場合はなるべく改行を減らすために-0.05emくらいにするのはありでしょう。

行間と字間の使い方については以下の記事が参考になるかと思います。

TOPIC.7

成長の理由

最後に、それぞれのメディアがこれだけ多くの人を集められるようになった理由を考えてみたいと思います。ここからは個人の意見が多分に含まれていることにご注意ください。

WIRED

WIREDはアメリカ生まれのウェブメディアです。複数の国でコンテンツを共有するのであれば、その分だけ1記事に対してコストをかけることができます。WIREDがオバマ元大統領との対談記事を公開したのは記憶に新しいですね。日本生まれのウェブメディアには決して作ることのできない記事です。1つ1つの記事がしっかり作り込まれているだけでなく、デザインも洗練されています。読者が増えないはずがありません。

BuzzFeed

急成長を遂げるバイラルメディアは日本でも珍しくありません。月間100万PVを超える規模のバイラルメディアはざらにあります。間違いなくニーズはあるのです。しかし日本のバイラルメディアは十中八九、運営ポリシー上の問題を抱えています(MERY、Spotlight、Retrip、いくらでも挙げられますね)。そのような運営は持続的ではありません。成長すれば成長するほど、風当たりは強くなります。BuzzFeedは運営ポリシー上の問題をクリアしている数少ないバイラルメディアです。信頼を損なわないままに知名度が上がれば、より豊富なコンテンツを正当に扱えるようになります。運営上のミスしない限り、BuzzFeedは成長してくでしょう。

GIZMODO

テック系の記事は常に需要があります。それだけに競合が多いのも事実ですが、GIZMODOにはいち早くテック関係の情報が集まるだけの体制と、他メディアの記事を、正当な許可の元で翻訳・掲載できるだけのコネクションがあります。これは海外発メディアのあきらかな強みです。検索流入の依存度も低いため、今後も安定的に成長していくことでしょう。

Gigazine

元々は個人のブログから始まったということもあるのか、自由な運営が行われている印象があります。取り扱うトピックは幅広く、バズりそうな場所にはとことん突っ込んでいくのがGigazineの特徴です。その姿勢で多くの読者を集めてきたのでしょう。ただし、Gigazineと同系統のメディアは年々増えています。とくに海外発のメディアは今後、大きな脅威になるのではないかと思います。

All About

15年以上前から運営されており、その分の積み重ねがあってかSEOがかなり強くなっています。検索上位記事の信頼性が問われる中、「専門家が執筆」というのは非常に大きな利点になります。その一方で、検索エンジンにおいては、文字よりも短時間で全容の分かる図・画像・動画の多い記事がSEO上有利になっていくことが予想されます(Googleが重視するというより、その方が多くのユーザーが満足して良い動きを見せるからです)。もちろんテーマにもよります。専門家の執筆記事に対して公開前に、優秀なライターやイラストレーターがうまくテコ入れするようになれば、ウェブメディアとしての地位は盤石になるのではないかと思います。

NAVERまとめ

ここまでPV数が伸びた理由は言うまでもなく「誰でもライターとして参加でき、PV数分だけの報酬がもらえる仕組み」と「引用ベースで記事を作ることを推奨した」という2点にあったはずです。これだけ大量の記事が日々更新されれば、そのうちの一部の記事がバズったり、検索上位に来るのは無理もありません。また「他の記事の内容をかき集めれば良い」という理解で記事を作れば、誰でもそれなりに読み応えのある記事を作ることはできます。しかし、「匿名」・「PV数に応じた報酬」「引用推奨」となれば、パクらない人が出てこないはずがありません。これはサービスのコンセプト自体に問題があるため、ここから軌道修正することは不可能でしょう。頑なにサービスを廃止しようとしないのは親会社の意向もあるのかもしれませんが、LINEを成長させていくためにはこのまま放置するわけにはいかないでしょう。

TOPIC.8

最後に

ここまで人気のウェブメディアをいくつかの角度から横並びで見てきました。ウェブメディアやブログ運営者の方の参考になれば幸いです。より深い分析は、今後また機会を見計らってしていきたいと思います。

サルワカについて

Buzzfeedのシェア

サルワカはデザインに関する知識などを初心者の方でも分かるように解説するメディアです。たとえば以下のような記事を更新しています。

有益な情報を更新していきますので、ぜひフォローをお願いします。