イマドキ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 の知識
●サーバの知識
●人を集める力
●お金を集める力
●チームでの開発経験

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

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を管理画面から設定できる
⃝ はてブがつきやすい
⃝ デフォルトでアクセス解析がついている
⃝ テーマストアもそこそこ充実

はてなブログMedia（企業向けプラン）
http://hatenablog.com/guide/media
⃝ はてなブログと共通のシステムでコンテンツが
書きやすい
⃝ proxyを設定して、企業ドメイン直下に設置可能
⃝ SEOに強い
⃝ WEBトレンドに合わせた開発
⃝ 安定した保守運用
⃝ 寄稿オプションプランでコンテンツ制作も相談
可

WiX
http://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 LABO 
http://tabi-labo.com/
WordPress Twenty Fourteen 子テーマ
サイボウズ式 
http://cybozushiki.cybozu.co.jp/
Movable Type
gori.me 
http://gori.me/
WordPress zeeSynergy カスタマイズ

インストール型CMSでメディアを作るならWordPressがオススメ
WordPress
https://ja.wordpress.org/
⃝ インストール直後からブログ投稿がすぐできる
⃝ 日本語環境でのCMSシェア85.6%でダントツの
首位（W3Techs.com調べ 2015/1/12現在）
⃝ 有料/無料問わず圧倒的なテーマ数＆プラグイン
数
⃝ ほとんどのレンタルサーバですぐ使える
⃝ 数万件の記事までは速度も問題なし
⃝ 別フレームワークへの移行も実績多数あり

まずは公式テーマを探してみて
Free WordPress Themes
https://wordpress.org/themes/
⃝ 全部無料
⃝ テーマレビューチームが安全性や汎用的に使え
るかどうかをチェック済み
⃝ 野良テーマには悪質なコードやライセンス違反
が混入していることがしばしば（事業に使うには重
大なリスク）

有料テーマサイトもたくさん
ThemeForest
http://themeforest.net/category/wordpress
⃝ デザイン面も機能面も充実
⃝ 1つ購入する限りはGPLでライセンスも
WordPressに則ったものでした
⃝ 安全性や品質の保障はされないのでご利用は自
己責任で

Jetpack by WordPress.com
https://wordpress.org/plugins/jetpack/
⃝ Automattic社作、多機能プラグイン
⃝ SNSボタン
⃝ マークダウン
⃝ Video Press：動画投稿（有料）
⃝ Photon：CDN
メディアに便利なWordPressプラグイン

Google XML Sitemaps
https://wordpress.org/plugins/google-sitemap-generator/
⃝ コードを書かずにsitemap.xmlを生成
⃝ しばらく更新が無かったが、2014年11月にメン
テナンスされ、最新のWordPress4.1に対応

Google Analytics by Yoast
https://wordpress.org/plugins/google-analytics-for-wordpress/
⃝ コードを書かずにGoogle Analytics導入
⃝ 技術のキャッチアップが早い（2015年1月現在）
⃝ ダッシュボードで重要な指標を見られる機能も
開発中らしい…

VaultPress
https://wordpress.org/plugins/vaultpress/
⃝ Automattic社作、バックアップ&セキュリティ&
サポートサービス
⃝ ソースコードの設定、一切不要
⃝ 月$5∼の料金プラン。安い
⃝ 別サーバにファイルとDBをデイリーバックアッ
プ。自社リソースを食わない
× マルチサイトの場合は、サイトごとに契約が必
要

Simple GA Ranking
https://wordpress.org/plugins/simple-ga-ranking/
⃝ アクセス数の多い記事をランキングで表示する
プラグイン
⃝ Google Analyticsからデータを取得するので、
自分のサーバに負荷をかけず、データも正確
⃝ 人気記事はユーザにとっても有用な情報

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∼
（ビジネスプランの場合）と激安。

アプリケーションフレームワークで開発されたメディアの例
NewsPicks 
https://newspicks.com/
AngularJS + ?
nanapi [ナナピ] 
http://nanapi.jp/
PHP + CakePHP
RAW-Fi 
http://raw-ﬁ.com/
Ruby on Rails

アプリケーションフレームワークで開発されたメディアの例
THE BRIDGE 
http://thebridge.jp/
Handlebars.js + WordPress
iemo 
http://iemo.jp/
Ruby on Rails?
株式会社LIG 
http://liginc.co.jp/
WordPress

失敗あるある
• 立派なデザインのメディアを作って半年、記事も毎日上げて
いるのにPVはほとんど無い。作ってもらった制作会社は対応
が悪く公開と同時に関係を切った。改善策を打ちたいがどう
していいかわからない。
• 複雑な要件のメディアをなんとか期日どおり公開したものの、
ソースはめちゃくちゃ。PDCAを回すにも手を入れるとどこ
でバグが出るかわからない。
• 記事を増やすごとに重くなっていく管理画面。制作会社に頼
んでも数百万単位で追加の見積もりが上がってくる。

制作会社の目標は納品して請求書を出すこと。
メディア運営者の目標はPDCAを回してメディアを育てること。
ゴールが違うので当然食い違う。
制作会社経営しておいてなんですが…

失敗例として上げたものはシステム運用に責任を
持つステークホルダーがいない、ということが
共通の原因になっている。

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

• メディアに必要な技術と実装方法がわかる
• 新しい技術やサービスのキャッチアップ力が高い
• 簡単な修正は自分で手を動かして解決できる
• 狙うターゲットに刺さるデザインディレクションができる
• クラウドサーバの知識がある
• IT開発の現場をよく知っていて、チームのムードを作ることができる
 
責任と技術を持った人 
自分がなるか、必死で探すか…

責任の持ってもらい方
• 関わりたくなる面白い事業を作る
• 自由と信頼を与える
• 共同創業やストックオプションなどで株式を渡す
• 月額＋成果オプションを乗せる

チーム・デザインパターン
編集長
コントロールタワー
・記事書く 
・クオリティチェック
・プログラミング 
・デザイン 
・インフラ

・方向性決める 
・クオリティチェック
・プログラミング 
・インフラ 
・ワイヤー設計 
・デザインディレクション
編集長
ライター
デザイン会社
ライター
カメラマン

・方向性決める
・技術選定 
・タスク管理
編集長
ライター
ライター
カメラマン
品質管理
品質管理
デザイン会社
デザイナープログラマー
プログラマー
インフラエンジニア
開発会社
・ワイヤー設計 
・コードレビュー

コントロールタワーさえしっかりしていれば、
外注でも内製でも応用が効く

コントロールタワー業務、請け負っています（笑）
https://funteractive.co.jp/

• イベントに顔を出したり、成功体験のある人に紹介してもらう。
• 実際に会って、一緒にビジネスができるかどうか見極める。
• 相手に責任をもってもらえるような利益の分配の仕方を考える。
 
責任と技術を持った人 
宣伝はさておき、うまく探してください

まとめ：こんなサイトに向いてます
Webサービス
●集客してアフィリエイト
●集客してブランディング、
他サービスに流す（いわ
ゆるオウンドメディア）
●広告モデルやサービス拡大
での収益化を考えているけど
立ち上げ期
●集客するだけして EXIT 狙い
●小∼中規模の広告＆アフィリ
エイト収益モデル
●大規模の広告モデル
●集客してコンテンツ課金
●Consumer Generated Media

まとめ：運用体制
Webサービス
●運用はサービスにお任せ ●サーバの管理
●デザイナーがいればある程度
メンテナンスや調整は可能
●大量アクセスや記事が多く
なってきた時はエンジニアの
力が必要
●核となれるコントロールタワー
人材が必要
●人件費、インフラ費用を補うだ
けのビジネスモデルが必要
●ディレクションができる人間が
いれば作業は外注でも OK

今日言いたかったこと
• コンテンツを作るのに集中できる箱を作ろう。
• 開発する前に、やりたいことはWebサービスやテンプレートで
実現できないか、開発に踏み切る場合はチームと予算をえら
れるか考えよう。
• 開発する場合はコントロールタワーになれる人を全力で探そう。

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

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

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

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

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

Similar a イマドキWebメディアの制作手法(20)

Mais de Keisuke Imura

Mais de Keisuke Imura(13)

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