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

Transcript

• 1. 井村 圭介 KEISUKE IMURA ファンタラクティブ株式会社 CEO / デザイナー / エンジニア フリーランスを経てWeb制作会社を設立。CMS案件やWebサービス開発に多数関わる。
 Webに関することならデザイン・フロントエンド・バックエンドと幅広くこなすオール ラウンダー。2015年はDjangoを使った自社サービスを開発中。
• 2. 9000万PV以上のメディア運用、200万PVのファッ ションブランドサイト運用、200万PVのサービス運 用など、大規模サイトの運用も行なっています。 https://funteractive.co.jp/
• 3. 株式会社LiB チーフデザイナー WordBench東京モデレータ 書籍の執筆、登壇などもしています
• 4. ‒NewsPicks - スマホ時代の王座をかけた「勝負の1年」が始まる(https://newspicks.com/news/767057/) 圧縮型コンテンツの時代となるとともに、勝負の軸は「数」か ら「クオリティ」や「密度」に移る。 レストランにたとえると、ひたすら低価格で、健康に悪くとも、 そこそこうまいものが売れた「ファストフード」の時代から、少々 高くても、健康によくて、おいしいもの求める「クオリティフー ド」の時代がやってくる。
• 5. ユーザが見たいのはコンテンツ。
 価値を生むのもコンテンツ。
 コンテンツ作りに集中できる
 「箱」の作り方の話をします。
• 6. Webメディアに必要な基礎テクノロジー • PCでもタブレットでもスマートフォンでも快適に見られるテンプレート • 更新しやすい管理画面 • アクセス解析やコンバージョン、ユーザの動きを測定するためのスクリプトの挿入 • SEOを考慮したマークアップ 
 レスポンシブ / CMS / 解析 / SEO

• 7. コンテンツ以外のところはなるべく自動でいい感じに • 見出し、テキスト、画像を入れるだけで綺麗に見えるスタイ リング。画像はドラッグアンドドロップとか管理画面でフリー 素材を検索できたり • 関連記事や人気記事、ページングやSNSボタンはほどよいと ころに自動で出す • アクセスや記事数による負荷なんて気にならない。いつもサ クサク
• 8. メディア開発の手法を3パターンにわけました
• 9. イマドキWebメディアの制作手法 初期費用 運用コスト 月額費用 構築速度 カスタマイズ性 移行コスト 初期費用 運用コスト 月額費用 構築速度 カスタマイズ性 移行コスト 初期費用 運用コスト 月額費用 構築速度 カスタマイズ性 移行コスト Webサービス 0∼数百万円 既存の Webサービスを利用する。 更新しやすいシステムや集客基 板、安定したインフラ環境を最 初から備えている。 WordPress など自分のサーバに CMS をインストール。既存のテ ンプレートをそのまま使う、もし くは少し改造して使う。サーバは 自分で用意する必要がある。 Ruby on Rails, Laravel, Django, WordPress などアプリ ケーションフレームワークを使っ て開発。エンジニアが必要。 CMS テンプレート アプリケーションフレームワーク 0∼300 万円 200∼5000 万円
• 10. Webメディア企画・運営者に必要なスキル Webサービス 運用難易度：低 開発不要 開発工数大 運用難易度：中 運用難易度：高 ●サービスを選ぶ情報力 ●基礎的な HTML の知識 ●ドメインや DNS の知識 ●サーバの知識 ●人を集める力 ●お金を集める力 ●チームでの開発経験 CMS テンプレート アプリケーションフレームワーク
• 11. 開発しなくていいなら開発しないほうがいい
• 12. Webサービスを利用したメディア制作 初期費用 運用コスト 月額費用 構築速度 カスタマイズ性 移行コスト 0∼数百万円 • 無料のものも多いが、初期費用や月額費用は 0∼数百万まで様々。 • パッケージ化されているので、申し込みから 立ちあげまでのスピードが爆速。 • マークダウンの導入やCCの画像利用など書き やすい工夫がされているが、カスタマイズ性 は往々にして低い • サービスによってはデータを取り出せない場 合もあるので注意 • サービスの利用規約によるアカウント停止や サービスの急な終了のリスクあり
• 13. Webサービスを使ったメディアの例 クレジットカードのよみもの
 http://cards.hateblo.jp/ はてなブログ リクナビNEXTジャーナル
 http://next.rikunabi.com/journal/ はてなブログMedia め∼んずスタジオ
 http://www.asuka-xp.com/ ライブドアブログ
• 14. メディアを作れるWebサービス はてなブログ http://hatenablog.com/guide ⃝ はてな記法、マークダウンなど書きやすい記法 ⃝ 役立つ記事であればアフィリエイトもOK ⃝ AmazonアソシエイトIDやiTunesアフィリエイ トIDを管理画面から設定できる ⃝ はてブがつきやすい ⃝ デフォルトでアクセス解析がついている ⃝ テーマストアもそこそこ充実
• 15. メディアを作れるWebサービス はてなブログMedia（企業向けプラン） http://hatenablog.com/guide/media ⃝ はてなブログと共通のシステムでコンテンツが 書きやすい ⃝ proxyを設定して、企業ドメイン直下に設置可能 ⃝ SEOに強い ⃝ WEBトレンドに合わせた開発 ⃝ 安定した保守運用 ⃝ 寄稿オプションプランでコンテンツ制作も相談 可
• 16. メディアを作れるWebサービス WiX http://ja.wix.com/ ⃝ サイトジェネレート系サービスは今注目 ⃝ SquarespaceやJimdoなどの競合と比べてブロ グテンプレートが多くメディアサイトに使いやすい ⃝ WiXの用意したフリー素材が使える ⃝ オリジナルドメインや広告非表示、アナリティ クスなどは有料 × 英語圏メインのサービス × はてなに比べると書きづらい
• 17. サーバ保守、セキュリティ、SEO、
 技術のキャッチアップなど面倒な運用を
 サービス側に依存できる。 Webサービスを使うメリット
• 18. 今日紹介したもの以外にも
 便利なサービスが出ている＆出てくるはず。
 情報収集を欠かさずに。 まだ黎明期。これからアツい分野だと思ってます。
• 19. • メディアやるならWordPressがオススメ • WordPressはCRM機能は薄いので、物足り ない方はぜひ他のCMSの調査を。（CRMに 強いCMSを使ったこと無いので紹介できなく てすみません ＆ Cybozu WP to kintoneも要 チェック！） • ドメイン、DNSとサーバ、HTMLについての 知識は多少必要なので勉強してください • デザインのカスタマイズは割と簡単だが、CMS 仕様に無い機能のカスタマイズはとても大変 CMSテンプレートを使ったメディア制作 初期費用 運用コスト 月額費用 構築速度 カスタマイズ性 移行コスト 0∼300 万円
• 20. CMSテンプレート（カスタマイズ含む）を使ったメディアの例 TABI LABO
 http://tabi-labo.com/ WordPress Twenty Fourteen 子テーマ サイボウズ式
 http://cybozushiki.cybozu.co.jp/ Movable Type gori.me
 http://gori.me/   WordPress zeeSynergy カスタマイズ
• 21. インストール型CMSでメディアを作るならWordPressがオススメ WordPress https://ja.wordpress.org/ ⃝ インストール直後からブログ投稿がすぐできる ⃝ 日本語環境でのCMSシェア85.6%でダントツの 首位（W3Techs.com調べ 2015/1/12現在） ⃝ 有料/無料問わず圧倒的なテーマ数＆プラグイン 数 ⃝ ほとんどのレンタルサーバですぐ使える ⃝ 数万件の記事までは速度も問題なし ⃝ 別フレームワークへの移行も実績多数あり
• 22. まずは公式テーマを探してみて Free WordPress Themes https://wordpress.org/themes/ ⃝ 全部無料 ⃝ テーマレビューチームが安全性や汎用的に使え るかどうかをチェック済み ⃝ 野良テーマには悪質なコードやライセンス違反 が混入していることがしばしば（事業に使うには重 大なリスク）
• 23. 有料テーマサイトもたくさん ThemeForest http://themeforest.net/category/wordpress ⃝ デザイン面も機能面も充実 ⃝ 1つ購入する限りはGPLでライセンスも WordPressに則ったものでした ⃝ 安全性や品質の保障はされないのでご利用は自 己責任で
• 24. Jetpack by WordPress.com https://wordpress.org/plugins/jetpack/ ⃝ Automattic社作、多機能プラグイン ⃝ SNSボタン ⃝ マークダウン ⃝ Video Press：動画投稿（有料） ⃝ Photon：CDN メディアに便利なWordPressプラグイン
• 25. Google XML Sitemaps https://wordpress.org/plugins/google-sitemap-generator/ ⃝ コードを書かずにsitemap.xmlを生成 ⃝ しばらく更新が無かったが、2014年11月にメン テナンスされ、最新のWordPress4.1に対応 メディアに便利なWordPressプラグイン
• 26. Google Analytics by Yoast https://wordpress.org/plugins/google-analytics-for-wordpress/ ⃝ コードを書かずにGoogle Analytics導入 ⃝ 技術のキャッチアップが早い（2015年1月現在） ⃝ ダッシュボードで重要な指標を見られる機能も 開発中らしい… メディアに便利なWordPressプラグイン
• 27. VaultPress https://wordpress.org/plugins/vaultpress/ ⃝ Automattic社作、バックアップ&セキュリティ& サポートサービス ⃝ ソースコードの設定、一切不要 ⃝ 月$5∼の料金プラン。安い ⃝ 別サーバにファイルとDBをデイリーバックアッ プ。自社リソースを食わない × マルチサイトの場合は、サイトごとに契約が必 要 メディアに便利なWordPressプラグイン
• 28. Simple GA Ranking https://wordpress.org/plugins/simple-ga-ranking/ ⃝ アクセス数の多い記事をランキングで表示する プラグイン ⃝ Google Analyticsからデータを取得するので、 自分のサーバに負荷をかけず、データも正確 ⃝ 人気記事はユーザにとっても有用な情報 メディアに便利なWordPressプラグイン
• 29. メディアに便利なWordPressプラグイン Milliard関連ページプラグイン（Related Posts Line-up-Exactly by Milliard） http://corp.shisuh.com/milliard関連ページプラグインについて ⃝ 記事に対する関連記事を表示するプラグイン ⃝ アイキャッチ画像の比率に関係なく、綺麗に並 べてくれる ⃝ 入れるだけできれいなスタイリング。ラク ⃝ タグとカテゴリーから関連性の高い記事を自動 で表示
• 30. そこそこおしゃれで SEOに強く マークダウンで書けて アクセス解析完備 バックアップもばっちり 人気記事と 関連記事リスト付きの メディアができます。 ここまで入れると…
• 31. デザイナー工数だけでメディアが出来上がる！ オリジナルデザインにしたい時も
• 32. • 中規模以上の広告モデル、コンテンツ課金な どメディア内で決済や細かいデータの取得が 必要な場合は、迷わず開発 • たくさんお金がかかります • たくさん時間がかかります • 何でもできるが、うまくワークさせるには力 量のあるエンジニアとデザイナーが必要 • 同じデータベースを利用してアプリにも展開 できる アプリケーションフレームワークを使ったメディア開発 初期費用 運用コスト 月額費用 構築速度 カスタマイズ性 移行コスト 200∼5000 万円
• 33. バックエンド • Ruby on Rails • Laravel • Django • express • WordPress • AngularJS • Backbone.js • Knockout.js • React.js • Ampersand.js フロントエンド フレームワーク / ライブラリ
• 34. AWS最高！ ⃝ スケールアップ、スケールアウトどちらも自 由自在。メディアの成長に合わせてインフラも 育てられる。 ⃝ 進化のスピードがものすごい。価格、機能、 ユーザビリティ全ての面で日々進化中。 ⃝ 24時間/365日のサポートプランも$100∼ （ビジネスプランの場合）と激安。
• 35. アプリケーションフレームワークで開発されたメディアの例 NewsPicks
 https://newspicks.com/ AngularJS + ? nanapi [ナナピ]
 http://nanapi.jp/ PHP + CakePHP RAW-Fi
 http://raw-fi.com/ Ruby on Rails
• 36. アプリケーションフレームワークで開発されたメディアの例 THE BRIDGE
 http://thebridge.jp/ Handlebars.js + WordPress iemo
 http://iemo.jp/ Ruby on Rails? 株式会社LIG
 http://liginc.co.jp/ WordPress
• 37. IT開発は難しい。
• 38. 失敗あるある • 立派なデザインのメディアを作って半年、記事も毎日上げて いるのにPVはほとんど無い。作ってもらった制作会社は対応 が悪く公開と同時に関係を切った。改善策を打ちたいがどう していいかわからない。 • 複雑な要件のメディアをなんとか期日どおり公開したものの、 ソースはめちゃくちゃ。PDCAを回すにも手を入れるとどこ でバグが出るかわからない。 • 記事を増やすごとに重くなっていく管理画面。制作会社に頼 んでも数百万単位で追加の見積もりが上がってくる。
• 39. 制作会社の目標は納品して請求書を出すこと。 メディア運営者の目標はPDCAを回してメディアを育てること。 ゴールが違うので当然食い違う。 制作会社経営しておいてなんですが…
• 40. 失敗例として上げたものはシステム運用に責任を 持つステークホルダーがいない、ということが 共通の原因になっている。
• 41. 社内に1人はコントロールタワーになれるエンジニアを。 月額契約での外注でもリモートワークでも、働き方は何でもOK！ 解決策
• 42. • メディアに必要な技術と実装方法がわかる • 新しい技術やサービスのキャッチアップ力が高い • 簡単な修正は自分で手を動かして解決できる • 狙うターゲットに刺さるデザインディレクションができる • クラウドサーバの知識がある • IT開発の現場をよく知っていて、チームのムードを作ることができる 
 責任と技術を持った人
 自分がなるか、必死で探すか…
• 43. 責任の持ってもらい方 • 関わりたくなる面白い事業を作る • 自由と信頼を与える • 共同創業やストックオプションなどで株式を渡す • 月額＋成果オプションを乗せる
• 44. チーム・デザインパターン 編集長 コントロールタワー ・記事書く
 ・クオリティチェック ・プログラミング
 ・デザイン
 ・インフラ
• 45. チーム・デザインパターン ・方向性決める
 ・クオリティチェック ・プログラミング
 ・インフラ
 ・ワイヤー設計
 ・デザインディレクション 編集長 コントロールタワー ライター デザイン会社 ライター カメラマン
• 46. チーム・デザインパターン ・方向性決める ・技術選定
 ・タスク管理 編集長 コントロールタワー ライター ライター カメラマン 品質管理 品質管理 デザイン会社 デザイナー プログラマー プログラマー インフラエンジニア 開発会社 ・ワイヤー設計
 ・コードレビュー
• 47. コントロールタワーさえしっかりしていれば、 外注でも内製でも応用が効く
• 48. コントロールタワー業務、請け負っています（笑） https://funteractive.co.jp/
• 49. • イベントに顔を出したり、成功体験のある人に紹介してもらう。 • 実際に会って、一緒にビジネスができるかどうか見極める。 • 相手に責任をもってもらえるような利益の分配の仕方を考える。 
 責任と技術を持った人
 宣伝はさておき、うまく探してください
• 50. まとめ：こんなサイトに向いてます Webサービス ●集客してアフィリエイト ●集客してブランディング、  他サービスに流す（いわ  ゆるオウンドメディア） ●広告モデルやサービス拡大  での収益化を考えているけど  立ち上げ期 ●集客するだけして EXIT 狙い ●小∼中規模の広告＆アフィリ  エイト収益モデル ●大規模の広告モデル ●集客してコンテンツ課金 ●Consumer Generated Media CMS テンプレート アプリケーションフレームワーク
• 51. まとめ：運用体制 Webサービス ●運用はサービスにお任せ ●サーバの管理 ●デザイナーがいればある程度  メンテナンスや調整は可能 ●大量アクセスや記事が多く  なってきた時はエンジニアの  力が必要 ●核となれるコントロールタワー  人材が必要 ●人件費、インフラ費用を補うだ  けのビジネスモデルが必要 ●ディレクションができる人間が  いれば作業は外注でも OK CMS テンプレート アプリケーションフレームワーク
• 52. 今日言いたかったこと • コンテンツを作るのに集中できる箱を作ろう。 • 開発する前に、やりたいことはWebサービスやテンプレートで 実現できないか、開発に踏み切る場合はチームと予算を えら れるか考えよう。 • 開発する場合はコントロールタワーになれる人を全力で探そう。
• 53. 相談ブースや懇親会にもいますので
 制作にご興味ある方はお声掛け下さい！