300万PV超えの人気WEBメディアはどうやって作られているのか

TOPIC.1

流入元

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

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

	流入経路別の割合(%)
	25.2%28.1%34.9%11.7%
	21.3%48.2%20.1%7.9%
	24.1%20.1%42.2%12.5%
	21.2%8.9%56.9%12.7%
	76.7%13.9%6.1%
	63.3%8.0%17.9%9.6%
	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カラム＆レスポンシブデザインが基本

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

TOPIC.3

サイドバーのコンテンツ

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

	新着 記事	関連 記事	人気 記事	推薦 記事	広告 数	ボックス	ボックス	サイドバー 固定
	(4)	-	(8)	-	(2)	-	-	（広告）
	-	-	(12)	-	-			(フォロー)
	(5)	-	(5)	-	-	-	-	(新着記事)
	(40)	-	-	-	-	-	-	-
	-			-	(3)	-	-	(広告)
	-	-	-	(5)	(4)		-	(広告)
	-	(5)	-	-	(3)	-	-	(広告)

サイドバーに関連記事

SNSボックスの設置

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

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

TOPIC.5

ソーシャルシェア

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

シェアボタンの位置

	記事上	記事下	固定 （追尾）	全体に占める シェア流入
				28.1%
	-	-		48.2%
	-	-		20.1%
	-		-	8.9%
	-	-	-	2.2%
	-			8.0%
	-	-	-	7.3%

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

WIRED

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

32.6% 53.1%B! 10.5%

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

BuzzFeed

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

78.7% 8.7%12.6%

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

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

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

GIZMODO

56.6% 30.1%B! 6.7%6.6%

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

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

GIGAZINE

30.3% 40.6%B! 19.7%9.4%

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

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

All About

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

LIG

79.6% 12.9%

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

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

NAVERまとめ

19.6% 64%B! 5.9%9.1%

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

TOPIC.6

フォント指定

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

フォントサイズ

	タイトル		本文		大見出し h2		中見出し h3
		18px	18px	14px	14px	14px	14px	-	-
		22px	36px	16px	17px	22px	22px	18px	18px
		21px	32px	16px	16px	18px	26px	-	-
		19px	26px	16px	17px	-	-	-	-
	24px	33px	16px	16px	20px	20px	-	-
	17px	30px	15px	17px	23px	28px	21px	24px
	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	字間 letter-spacing
		1.7	0
		1.5	0
		1.6	0
		1.3	0
	1.6	0
	2.0	0
	1.5	-0.05em

行高（line-height）

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

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

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

字間（letter-spacing）

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

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

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

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

TOPIC.7

成長の理由

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

WIRED

WIREDはアメリカ生まれのウェブメディアです。複数の国でコンテンツを共有するのであれば、その分だけ１記事に対してコストをかけることができます。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数分だけの報酬がもらえる仕組み」と「引用ベースで記事を作ることを推奨した」という２点にあったはずです。これだけ大量の記事が日々更新されれば、そのうちの一部の記事がバズったり、検索上位に来るのは無理もありません。また「他の記事の内容をかき集めれば良い」という理解で記事を作れば、誰でもそれなりに読み応えのある記事を作ることはできます。しかし、「匿名」・「PV数に応じた報酬」「引用推奨」となれば、パクらない人が出てこないはずがありません。これはサービスのコンセプト自体に問題があるため、ここから軌道修正することは不可能でしょう。頑なにサービスを廃止しようとしないのは親会社の意向もあるのかもしれませんが、LINEを成長させていくためにはこのまま放置するわけにはいかないでしょう。

TOPIC.8

最後に

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

サルワカについて

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

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