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