イマドキWebメディアの制作手法

井村 圭介KEISUKE IMURA

ファンタラクティブ株式会社 CEO / デザイナー / エンジニア

フリーランスを経てWeb制作会社を設立。CMS案件やWebサービス開発に多数関わる。Webに関することならデザイン・フロントエンド・バックエンドと幅広くこなすオールラウンダー。2015年はDjangoを使った自社サービスを開発中。

9000万PV以上のメディア運用、200万PVのファッションブランドサイト運用、200万PVのサービス運用など、大規模サイトの運用も行なっています。

https://funteractive.co.jp/

株式会社LiB チーフデザイナー

WordBench東京モデレータ

書籍の執筆、登壇などもしています

‒NewsPicks - スマホ時代の王座をかけた「勝負の1年」が始まる(https://newspicks.com/news/767057/)

“圧縮型コンテンツの時代となるとともに、勝負の軸は「数」から「クオリティ」や「密度」に移る。”

“レストランにたとえると、ひたすら低価格で、健康に悪くとも、そこそこうまいものが売れた「ファストフード」の時代から、少々高くても、健康によくて、おいしいもの求める「クオリティフード」の時代がやってくる。”

ユーザが見たいのはコンテンツ。

価値を生むのもコンテンツ。

コンテンツ作りに集中できる

「箱」の作り方の話をします。

Webメディアに必要な基礎テクノロジー

• PCでもタブレットでもスマートフォンでも快適に見られるテンプレート

• 更新しやすい管理画面

• アクセス解析やコンバージョン、ユーザの動きを測定するためのスクリプトの挿入

• SEOを考慮したマークアップ

レスポンシブ / CMS / 解析 / SEO

コンテンツ以外のところはなるべく自動でいい感じに

• 見出し、テキスト、画像を入れるだけで綺麗に見えるスタイリング。画像はドラッグアンドドロップとか管理画面でフリー素材を検索できたり

• 関連記事や人気記事、ページングやSNSボタンはほどよいところに自動で出す

• アクセスや記事数による負荷なんて気にならない。いつもサクサク

メディア開発の手法を3パターンにわけました

イマドキWebメディアの制作手法

初期費用

運用コスト

月額費用

構築速度

カスタマイズ性

移行コスト

初期費用

運用コスト

月額費用

構築速度

カスタマイズ性

移行コスト

初期費用

運用コスト

月額費用

構築速度

カスタマイズ性

移行コスト

Webサービス

0～数百万円

既存のWebサービスを利用する。更新しやすいシステムや集客基板、安定したインフラ環境を最初から備えている。

WordPress など自分のサーバにCMSをインストール。既存のテンプレートをそのまま使う、もしくは少し改造して使う。サーバは自分で用意する必要がある。

Ruby on Rails, Laravel, Django, WordPress などアプリケーションフレームワークを使って開発。エンジニアが必要。

CMSテンプレート アプリケーションフレームワーク

0～300 万円 200～5000 万円

Webメディア企画・運営者に必要なスキル

Webサービス

運用難易度：低

開発不要 開発工数大

運用難易度：中 運用難易度：高

●サービスを選ぶ情報力 ●基礎的なHTMLの知識●ドメインやDNSの知識●サーバの知識

●人を集める力●お金を集める力●チームでの開発経験

CMSテンプレート アプリケーションフレームワーク

開発しなくていいなら開発しないほうがいい

Webサービスを利用したメディア制作

初期費用

運用コスト

月額費用

構築速度

カスタマイズ性

移行コスト

0～数百万円

• 無料のものも多いが、初期費用や月額費用は0～数百万まで様々。

• パッケージ化されているので、申し込みから立ちあげまでのスピードが爆速。

• マークダウンの導入やCCの画像利用など書きやすい工夫がされているが、カスタマイズ性は往々にして低い

• サービスによってはデータを取り出せない場合もあるので注意

• サービスの利用規約によるアカウント停止やサービスの急な終了のリスクあり

Webサービスを使ったメディアの例

クレジットカードのよみものhttp://cards.hateblo.jp/

はてなブログ

リクナビNEXTジャーナルhttp://next.rikunabi.com/journal/

はてなブログMedia

め～んずスタジオhttp://www.asuka-xp.com/

ライブドアブログ

メディアを作れるWebサービス

はてなブログhttp://hatenablog.com/guide

◯ はてな記法、マークダウンなど書きやすい記法

◯ 役立つ記事であればアフィリエイトもOK

◯ AmazonアソシエイトIDやiTunesアフィリエイトIDを管理画面から設定できる

◯ はてブがつきやすい

◯ デフォルトでアクセス解析がついている

◯ テーマストアもそこそこ充実

メディアを作れるWebサービス

はてなブログMedia（企業向けプラン）http://hatenablog.com/guide/media

◯ はてなブログと共通のシステムでコンテンツが書きやすい

◯ proxyを設定して、企業ドメイン直下に設置可能

◯ SEOに強い

◯ WEBトレンドに合わせた開発

◯ 安定した保守運用

◯ 寄稿オプションプランでコンテンツ制作も相談可

メディアを作れるWebサービス

WiXhttp://ja.wix.com/

◯ サイトジェネレート系サービスは今注目

◯ SquarespaceやJimdoなどの競合と比べてブログテンプレートが多くメディアサイトに使いやすい

◯ WiXの用意したフリー素材が使える

◯ オリジナルドメインや広告非表示、アナリティクスなどは有料

× 英語圏メインのサービス

× はてなに比べると書きづらい

サーバ保守、セキュリティ、SEO、

技術のキャッチアップなど面倒な運用を

サービス側に依存できる。

Webサービスを使うメリット

今日紹介したもの以外にも

便利なサービスが出ている＆出てくるはず。

情報収集を欠かさずに。

まだ黎明期。これからアツい分野だと思ってます。

• メディアやるならWordPressがオススメ

• WordPressはCRM機能は薄いので、物足りない方はぜひ他のCMSの調査を。（CRMに強いCMSを使ったこと無いので紹介できなくてすみません ＆ Cybozu WP to kintoneも要チェック！）

• ドメイン、DNSとサーバ、HTMLについての知識は多少必要なので勉強してください

• デザインのカスタマイズは割と簡単だが、CMS仕様に無い機能のカスタマイズはとても大変

CMSテンプレートを使ったメディア制作

初期費用

運用コスト

月額費用

構築速度

カスタマイズ性

移行コスト

0～300 万円

CMSテンプレート（カスタマイズ含む）を使ったメディアの例

TABI LABOhttp://tabi-labo.com/

WordPress Twenty Fourteen 子テーマ

サイボウズ式http://cybozushiki.cybozu.co.jp/

Movable Type

gori.mehttp://gori.me/

　　WordPress zeeSynergy カスタマイズ

インストール型CMSでメディアを作るならWordPressがオススメ

WordPresshttps://ja.wordpress.org/

◯ インストール直後からブログ投稿がすぐできる

◯ 日本語環境でのCMSシェア85.6%でダントツの首位（W3Techs.com調べ 2015/1/12現在）

◯ 有料/無料問わず圧倒的なテーマ数＆プラグイン数

◯ ほとんどのレンタルサーバですぐ使える

◯ 数万件の記事までは速度も問題なし

◯ 別フレームワークへの移行も実績多数あり

まずは公式テーマを探してみて

Free WordPress Themeshttps://wordpress.org/themes/

◯ 全部無料

◯ テーマレビューチームが安全性や汎用的に使えるかどうかをチェック済み

◯ 野良テーマには悪質なコードやライセンス違反が混入していることがしばしば（事業に使うには重大なリスク）

有料テーマサイトもたくさん

ThemeForesthttp://themeforest.net/category/wordpress

◯ デザイン面も機能面も充実

◯ 1つ購入する限りはGPLでライセンスもWordPressに則ったものでした

◯ 安全性や品質の保障はされないのでご利用は自己責任で

Jetpack by WordPress.comhttps://wordpress.org/plugins/jetpack/

◯ Automattic社作、多機能プラグイン

◯ SNSボタン

◯ マークダウン

◯ Video Press：動画投稿（有料）

◯ Photon：CDN

メディアに便利なWordPressプラグイン

Google XML Sitemapshttps://wordpress.org/plugins/google-sitemap-generator/

◯ コードを書かずにsitemap.xmlを生成

◯ しばらく更新が無かったが、2014年11月にメンテナンスされ、最新のWordPress4.1に対応

メディアに便利なWordPressプラグイン

Google Analytics by Yoasthttps://wordpress.org/plugins/google-analytics-for-wordpress/

◯ コードを書かずにGoogle Analytics導入

◯ 技術のキャッチアップが早い（2015年1月現在）

◯ ダッシュボードで重要な指標を見られる機能も開発中らしい…

メディアに便利なWordPressプラグイン

VaultPresshttps://wordpress.org/plugins/vaultpress/

◯ Automattic社作、バックアップ&セキュリティ&サポートサービス

◯ ソースコードの設定、一切不要

◯ 月$5～の料金プラン。安い

◯ 別サーバにファイルとDBをデイリーバックアップ。自社リソースを食わない

× マルチサイトの場合は、サイトごとに契約が必要

メディアに便利なWordPressプラグイン

Simple GA Rankinghttps://wordpress.org/plugins/simple-ga-ranking/

◯ アクセス数の多い記事をランキングで表示するプラグイン

◯ Google Analyticsからデータを取得するので、自分のサーバに負荷をかけず、データも正確

◯ 人気記事はユーザにとっても有用な情報

メディアに便利なWordPressプラグイン

メディアに便利なWordPressプラグイン

Milliard関連ページプラグイン（Related Posts Line-up-Exactly by Milliard）http://corp.shisuh.com/milliard関連ページプラグインについて

◯ 記事に対する関連記事を表示するプラグイン

◯ アイキャッチ画像の比率に関係なく、綺麗に並べてくれる

◯ 入れるだけできれいなスタイリング。ラク

◯ タグとカテゴリーから関連性の高い記事を自動で表示

そこそこおしゃれで SEOに強く

マークダウンで書けて アクセス解析完備

バックアップもばっちり 人気記事と

関連記事リスト付きの メディアができます。

ここまで入れると…

デザイナー工数だけでメディアが出来上がる！

オリジナルデザインにしたい時も

• 中規模以上の広告モデル、コンテンツ課金などメディア内で決済や細かいデータの取得が必要な場合は、迷わず開発

• たくさんお金がかかります

• たくさん時間がかかります

• 何でもできるが、うまくワークさせるには力量のあるエンジニアとデザイナーが必要

• 同じデータベースを利用してアプリにも展開できる

アプリケーションフレームワークを使ったメディア開発

初期費用

運用コスト

月額費用

構築速度

カスタマイズ性

移行コスト

200～5000 万円

バックエンド

• Ruby on Rails

• Laravel

• Django

• express

• WordPress

• AngularJS

• Backbone.js

• Knockout.js

• React.js

• Ampersand.js

フロントエンド

フレームワーク / ライブラリ

AWS最高！

◯ スケールアップ、スケールアウトどちらも自由自在。メディアの成長に合わせてインフラも育てられる。

◯ 進化のスピードがものすごい。価格、機能、ユーザビリティ全ての面で日々進化中。

◯ 24時間/365日のサポートプランも$100～（ビジネスプランの場合）と激安。

アプリケーションフレームワークで開発されたメディアの例

NewsPickshttps://newspicks.com/

AngularJS + ?

nanapi [ナナピ]http://nanapi.jp/

PHP + CakePHP

RAW-Fihttp://raw-fi.com/

Ruby on Rails

アプリケーションフレームワークで開発されたメディアの例

THE BRIDGEhttp://thebridge.jp/

Handlebars.js + WordPress

iemohttp://iemo.jp/

Ruby on Rails?

株式会社LIGhttp://liginc.co.jp/

WordPress

IT開発は難しい。

失敗あるある

• 立派なデザインのメディアを作って半年、記事も毎日上げているのにPVはほとんど無い。作ってもらった制作会社は対応が悪く公開と同時に関係を切った。改善策を打ちたいがどうしていいかわからない。

• 複雑な要件のメディアをなんとか期日どおり公開したものの、ソースはめちゃくちゃ。PDCAを回すにも手を入れるとどこでバグが出るかわからない。

• 記事を増やすごとに重くなっていく管理画面。制作会社に頼んでも数百万単位で追加の見積もりが上がってくる。

制作会社の目標は納品して請求書を出すこと。

メディア運営者の目標はPDCAを回してメディアを育てること。

ゴールが違うので当然食い違う。

制作会社経営しておいてなんですが…

失敗例として上げたものはシステム運用に責任を

持つステークホルダーがいない、ということが

共通の原因になっている。

社内に1人はコントロールタワーになれるエンジニアを。月額契約での外注でもリモートワークでも、働き方は何でもOK！

解決策

• メディアに必要な技術と実装方法がわかる

• 新しい技術やサービスのキャッチアップ力が高い

• 簡単な修正は自分で手を動かして解決できる

• 狙うターゲットに刺さるデザインディレクションができる

• クラウドサーバの知識がある

• IT開発の現場をよく知っていて、チームのムードを作ることができる

責任と技術を持った人

自分がなるか、必死で探すか…

責任の持ってもらい方

• 関わりたくなる面白い事業を作る

• 自由と信頼を与える

• 共同創業やストックオプションなどで株式を渡す

• 月額＋成果オプションを乗せる

チーム・デザインパターン

編集長

コントロールタワー

・記事書く・クオリティチェック

・プログラミング ・デザイン・インフラ

チーム・デザインパターン

・方向性決める・クオリティチェック

・プログラミング ・インフラ・ワイヤー設計・デザインディレクション

編集長

コントロールタワー

ライター

デザイン会社

ライター

カメラマン

チーム・デザインパターン

・方向性決める

・技術選定・タスク管理

編集長

コントロールタワー

ライター

ライター

カメラマン

品質管理

品質管理

デザイン会社

デザイナー プログラマー

プログラマー

インフラエンジニア

開発会社

・ワイヤー設計・コードレビュー

コントロールタワーさえしっかりしていれば、

外注でも内製でも応用が効く

コントロールタワー業務、請け負っています（笑）

https://funteractive.co.jp/

• イベントに顔を出したり、成功体験のある人に紹介してもらう。

• 実際に会って、一緒にビジネスができるかどうか見極める。

• 相手に責任をもってもらえるような利益の分配の仕方を考える。

責任と技術を持った人

宣伝はさておき、うまく探してください

まとめ：こんなサイトに向いてます

Webサービス

●集客してアフィリエイト●集客してブランディング、　他サービスに流す（いわ　ゆるオウンドメディア）

●広告モデルやサービス拡大　での収益化を考えているけど　立ち上げ期●集客するだけしてEXIT 狙い●小～中規模の広告＆アフィリ　エイト収益モデル

●大規模の広告モデル●集客してコンテンツ課金●Consumer Generated Media

CMSテンプレート アプリケーションフレームワーク

まとめ：運用体制

Webサービス

●運用はサービスにお任せ ●サーバの管理●デザイナーがいればある程度　メンテナンスや調整は可能●大量アクセスや記事が多く　なってきた時はエンジニアの　力が必要

●核となれるコントロールタワー　人材が必要●人件費、インフラ費用を補うだ　けのビジネスモデルが必要●ディレクションができる人間が　いれば作業は外注でもOK

CMSテンプレート アプリケーションフレームワーク

今日言いたかったこと

• コンテンツを作るのに集中できる箱を作ろう。

• 開発する前に、やりたいことはWebサービスやテンプレートで実現できないか、開発に踏み切る場合はチームと予算を揃えられるか考えよう。

• 開発する場合はコントロールタワーになれる人を全力で探そう。

相談ブースや懇親会にもいますので制作にご興味ある方はお声掛け下さい！