PORT! #2レポート / ナタリー vs CINRA.NET カルチャーメディアの裏側お見せします!

『ナタリー』を主宰するナターシャからチーフエンジニア・尾立淳さんと、『CINRA.NET』を主宰するCINRA, Inc.のチーフエンジニア・濱田智によるPORT! #2レポート/PORT! #2 ナタリー vs CINRA.NET カルチャーメディアの裏側お見せします!

  • engineering

CINRA, Inc.が主催する「PORT!」は、デザイン、エンジニアリング、編集など様々なジャンルの第一線でコンテンツ制作を手がけるクリエイターらを招き、“知識”や“知恵”をシェアする参加費無料のセミナーイベント。“この場所でIMPORTしたことを自らのフィールドでEXPORTし、日々をアップデート”をキーワードにクリエイティブの現場からの声を届けた。

 My alt text


2016年5月25日(水)に行われた『PORT! #2 /ナタリー vs CINRA.NET カルチャーメディアの裏側お見せします!』は、その3月に開催された『PORT! #1 / 3つのフィールドから考える「デザイン」』に続く第2弾。日本最大級のカルチャーサイト『ナタリー』と『CINRA.NET』を実際に構築・運用しているエンジニア――『ナタリー』を主宰するナターシャからチーフエンジニア・尾立淳(以下、尾立)さんと、『CINRA.NET』を主宰するCINRA, Inc.のチーフエンジニア・濱田智(以下、濱田)が、互いのメディアをそれぞれの現場経験を踏まえた視点から分析・解体。「なぜこのような仕様になっているのか?」「実際にどう運営されているのか?」など、エンジニア同士が本音をぶつけあうバトル形式のプレゼンテーションを繰り広げることに! Webデザインの実装・運用といった実際的な内容を話し合う機会だけに、セミナー聴講者募集の案内には「開発経験者向け」の一言がつけられていたが、ユーザービリティを考える視点からの運用例は、『ナタリー』や『CINRA.NET』を普段閲覧している一般ユーザーにも興味深い話が満載であった。

セミナーは2部構成で、第1部は『ナタリー』と『CINRA.NET』それぞれの解体プレゼンテーションからスタート。バトラーのふたりは、中央のスクリーンを挟み向かい合って着席。濱田は「こんなことになってしまいましたが……頑張ります!」、尾立さんは「今日は濱田さんに喧嘩を売られた形になっていますけど、いいバトルができればと思います」と挨拶し、手持ちのPCを操作してスクリーンに作成したプレゼン資料を映し出しながら、それぞれのサイトで気になったポイントを紹介、解説していった。ちなみに濱田、尾立さんふたりからの「今日はエンジニアの方はどのくらいいらっしゃいます?」との質問には、参加者の半分弱が挙手。「じゃあ、専門用語は少なめでやります?」と濱田が気を使うと、尾立さんが「JSONが分かる人?……けっこういますね。その必要はないんじゃないですか?」と反論。「さっそくバチバチじゃないですか!」とふたりは笑いながら、バトルの幕が切って落とされた。

 

『ナタリー』はURL構造を変えれば、オーガニックサーチをもっと増やせる

My alt text 

先行は『CINRA.NET』濱田。「これから僕が『ナタリー』さんをディスります」と宣言した濱田は、“『ナタリー』を解体する」”をテーマに、様々な面から『ナタリー』サイトの内部構造をチェックしていく。

「『ナタリー』さんはすごくいいサイト。僕ら(『CINRA.NET』)は常に後を追い掛けていますが、今からこのサイトのアラを探していこうと思います」と、最初に斬り込んだのはURL構造について。「ニュース。パワープッシュの特集、ギャラリーなど、サイトマップは分かりやすい。schema.orgにのっとり、JSON-LDというモダンな書式で書かれている。非常にセマンティックでSEO対策もバッチリ。しかし、個々の記事のURLに記事の内容やアーティスト名などが反映されず、単に記事IDしか使われていないのはもったいない。ひょっとして検索流入を重視していないんですか?」と指摘する。それに尾立は「『ナタリー』の記事はソーシャルからの流入がトップ。その次がオーガニックサーチ。重要ですね」と答えると、「オーガニックサーチはもっと増やせます」と断言した。

次に指摘したのは、パフォーマンスとドキュメント構造について。濱田がGoogle PageSpeed Insightsで両サイトのパフォーマンスを計測したところ、PCにおいてもモバイルにおいても『ナタリー』の方が好成績だったという。「しかし…」と濱田。idやclassの命名規則に拡張性が感じられないドキュメント構造、テキストで表現可能な要素をわざわざ画像化していたり、CSSを直書きしている箇所があることなどに言及し、「『ナタリー』はサイトの拡張やデザインリニューアルをする気がないのではないか?」と追求、改善案も挙げていく。それらの細かな指摘に尾立さんは「よく調べましたね(笑)。厳しいなー」「これは……。後で確認します!」とタジタジになる場面も。最適化、汎用化がされていない箇所の多くは過去から引き継がれてきたものだそうだが、現在『ナタリー』は大きなリニューアルを控えており、濱田の指摘は「じつにホットな話題(笑)」で、「今抱えている技術的な負債はしっかりと返済したい。次のリニューアルに向けてじっくり検討していく」と話していた。

My alt text

そのように、数々の厳しい指摘がありながらも、濱田が『ナタリー』から「これはぜひ真似したい!」と思うJavaScript関連の仕様についても話された。そのひとつが、「映画ナタリー」に実装されている「ぴあ」の映画データを活用した映画スケジュールウィジェット。

濱田いわく、『CINRA.NET』でも「ぴあAPI」を利用しているが、『ナタリー』では映画作品のスケジュールを記事にエンベッドできるようになっており、ユーザーの位置情報を取得して近くの上映館の検索ができたりと非常にハイカロリー。「これ以上のものは見当たらない素晴らしさなので、ぜひ真似したい」と褒めたたえたところ、「これ、僕が書いたんですよ」と尾立さんは自慢げ。

また、『CINRA.NET』でも真似したいもうひとつの機能は、SNS、とくにTwitterとの連携機能だ。昨年のTwitterの仕様変更に伴い、ツイートボタンからシェア数を表示する吹き出しが削除された。ほとんどのサイトではTwitterのシェア数が表示されなくなったわけだが、『ナタリー』では公式Twitterアカウントの記事ツイートのリツイート数といいね数を表示する実装になっており、「『CINRA.NET』の運用チームからは、『ナタリー』さんのようにやって欲しい」というプレッシャーがあると濱田。他のメディアでは実装されていない仕様なので、「パクります!」と宣言するが、どのメディアでも内部構造的にツイートをどう扱うかは、悩むところなのだとか。最後に濱田は、「『ナタリー』には長年蓄積されたよい実装が多々あるが、広告周りがパフォーマンスを低下させていて改善の余地がある。またエラーページなのに200を返すページもあったりするので、エラーコードやステータスの扱いには注意してほしい」とプレゼンをまとめ、「今後も頑張ってほしい」と何目線なのか分からないエールを送った。

 

Twitter運用を分析して『CINRA.NET』を丸裸に!CINRA.NETは99%が手動ツイート

 My alt text

続いては、尾立さんによる反撃、「『CINRA.NET』解体」へ。まずは『CINRA.NET』がどういう特徴のあるサイトなのかを、“渾身のGIF画像”を盛り込んだ資料によって紹介していく。「CINRAのオリジナルキャラクターのニッキー、クロベエ、アグオ。かわいくて僕好きなんですよ」という尾立さんによれば、『CINRA.NET』は「ニュース」「特集」「イベント」「動画」の4コンテンツが主軸。中でも特筆すべきなのは「イベント」情報で、「常時400本以上が登録されているのはすごい、全てを人手で登録しているとしたら相当大変だ」と言う。また、『CINRA.NET』の公式Twitterは本家の「CINRA.NET(@CINRANET)」、「CINRA.NETイベント情報(@CINRANET_EVENT)」、「CINRAの名言振り返りbot(@cinrabot)」の3アカウントが登録されているが、「僕、名言振り返りbotがわりと好きだったんですけど、この前見たら昨年の夏で更新が止まっていて。とても残念」と更新停止を惜しんだ。

次に尾立さんは、「『CINRA.NET』のココを盗みたい…」というところを紹介した。まずは「スマホ版サイトの無限記事読み込み」機能について。『CINRA.NET』のスマホ版サイトが、記事を読み終えるタイミングで自動的に次の記事がロードされる仕組みになっていることについて説明。「『ナタリー』もスマホユーザーが8割なので、モバイルに最適なUIを考えていかなければならない。こういう細かい作り込みでは『CINRA.NET』に先を行かれてしまっている」と尾立さん。開発者向けツールで解析した『CINRA.NET』サイトの非同期処理の内容をスクリーンで紹介しながら、自動記事読み込みの具体的な仕組みやデータの構造を解説してくれた。

さらに尾立さんが驚いたと言うのが、記事ページの下部に表示されているSNSのシェアボタン。ページのスクロール状態を監視し、記事の切り替わりに合わせてシェアするURLをダイナミックに変更する動作について、「素敵な実装だし、こういうキメの細かい仕事は好き。パクります」と発言。濱田は、「僕は実作業をしていませんが、こうしてくれとビシッと言いました!(笑)」と応える。この機能に関しては、尾立さんから濱田に「PVはどうカウントしているの?」「広告の実装はどうしている?」などの質問も。濱田によれば、「読み込みのたびにGoogle Analyticsにリクエスト送ってます。広告の実装はGoogle アドセンスのガイドラインとの兼ね合いもある難しい問題なので、新しい方法を考えていきたい」と答えていた。

My alt text

尾立さんが“ココを盗みたい”と思った2点目は「イベント機能」だ。「『ナタリー』はイベントデータを持っておらず、記事の本文にイベント情報を直接記述している。システムに活用しにくいので『CINRA.NET』のような構造化されたイベント情報はぜひともパクりたい。ただ、データのメンテナンスは間違いなく大変なので、そこは大きな課題ですね」と話す。ここでまた、尾立さんから濱田に「データ入力はどうしているか?」「ツアー情報なんかを網羅するのは大変じゃない?」との質問が跳び、『CINRA.NET』のニュース更新を担当する柏木から「日程や場所が細かく入力する必要があり運用コストが膨れ上がってしまうので、ツアー情報までは対応していない」との回答が。濱田からも「イベントは日付の情報だけではなく、地域情報をどこに紐付けるかが難しい。データ設計から見直しながらやっていきたい」と語られた。

さらに尾立さんは、『CINRA.NET』のTwitter運用を分析。専用のデータベースを立て『@CINRANET』のツイートを3500件ほど取り込んで調査した結果、『CINRA.NET』のTwitterはほとんどが人力で投稿されていることがわかったという。99%が自動投稿だという『ナタリー』とは対照的であり、「人手でやったところでツイートに温かみが出るわけではない。自動化して記者の負担を減らしてあげてください」と要請した。続いてツイートのエンゲージメントに関する集計結果を公開し、ユーザーのアクションがニュース・特集に関するものに集中しており、イベントや動画の拡散力がそれに比して高くないことを明らかに。イベント機能はすばらしいが集客が課題であることを指摘した。そして最後は、尾立さんが調べあげた『CINRA.NET』のインフラ・システム構成を濱田にクイズ形式で確認。濱田が「絶対出ちゃダメな情報が出てる!!早く消さなきゃ!」と慌てるひと幕もあり、差しつ差されつな第1部のバトルは終了した。

短い休憩を挟んで、第2部は『ナタリー』と『CINRA.NET』の歴史や、現在のWebクリエイティブ環境、スタッフィングにまつわるアンケートをもとに、両社のエンジニアや運営チームがどのように仕事を進めているのか?を探るトークを展開した。同じカルチャーを扱うサイトでも、両者には様々な違いがあることがここで明らかに。運用の人数が『ナタリー』が40~50人であるのに対し『CINRA.NET』は4人であったり、デザイナーとエンジニアの職務範囲が『ナタリー』はデザイナーがコーティングまで行うが、『CINRA.NET』はコーディングがエンジニアの仕事であるなど、会社の規模やスタッフ数によってもやり方は異なっている。しかし、どちらのサイトも大事にしているのはユーザーの使い勝手と手触りの良さだという。

様々なデータと解析により、『ナタリー』と『CINRA.NET』それぞれのメディアとしての個性と、これから改善すべきポイントが明らかになった本セミナー。最後に尾立さんが「『ナタリー』と『CINRA.NET』は一見ライバルメディアとして見られるかもしれないけど、コンテンツプロバイダーが巨大なプラットフォーマーに振り回されるこのご時世、僕らはとても似た境遇にある。こうやって刺激しあいながらも、お互いに生き残っていければと思います」と語り、イベントを締めくくった。

(文:阿部美香) 

NEXT EVENTPORT! VOL.5

PORT!#5/2017年はこれが来る!デジタル・クリエイティブ業界で活躍する9人が予測する未来とは

2016/12/07(水) 19:20 〜

FICC inc.福岡陽、EPOCH Inc.佐々木渉、Goodpatch, Inc.村越悟、CINRA, Inc.伊藤亜莉、DeNA Co., Ltd.渡辺義久、dot by dot inc. 富永勇亮、NAKED Inc.大屋友紀雄、Rhizomatiks co., ltd田中陽、1→10design, Inc.小川丈人、

Get Ticket!!

RELATED