WordPressでminneのオウンドメディアをリスタート

Transcript

2. アジェンダ • 登壇者・サービス紹介 • なぜリニューアルしたか？ • リニューアルでやったこと ◦ リニューアルの全体像 ◦ やったこと紹介 • まとめ
3. この話を通して • オウンドメディアの開発はじめられそう • WordPressのオリジナルテーマをつくってみよう メディアやテーマ開発に役立てもらいたい
4. 登壇者・サービス紹介 木寺智紀 ( きでりん / @kii0719 ) minne デザイナー WEB / アプリ UI デザイン WEBフロントエンドコーディング
5. 登壇者・サービス紹介 • アプリ: 1,000万DL • 作品数: 900万点 • 作家数: 50万人 ハンドメイドマーケット minne
6. 登壇者・サービス紹介 GMOペパボのサービス • ホスティング事業 ◦ ロリポップ！ / ヘテムル / ムームードメイン • EC支援事業 ◦ カラーミーショップ / SUZURI / グーペ など
7. 登壇者・サービス紹介 • ものづくりメディア • 2016.6 運用開始 • 2018.11 リニューアル minneとものづくりと
8. なぜリニューアルしたのか？
9. なぜリニューアルしたのか？ ものづくりの価値向上し、市場全体を牽引するminneになる • ものづくりの良さを丁寧に伝える • 新たな「作り手」「作品」が生まれるきっかけに繋げる • クリエイターやブランド、企業とコラボし、作り手のさらなる活躍 に繋げる オウンドメディアとしての拡大を目指した
10. なぜリニューアルしたのか？ 記事はメディアの価値そのもの • 記事の本数を今よりも増やしたい • 記事１つ１つの質をあげたい ◦ 取材の時間、コンテンツを考える時間を増やしたい 記事作成・編集の生産性を上げたい
11. なぜリニューアルしたのか？ 静的ファイルジェネレータによる編集者への負担が大きい • 記事を編集して公開するまでに時間がかかる ◦ マークダウンと独自な記法による執筆 • 編集者の学習コストが高い ◦ 編集者にそれぞれ開発環境を準備していた ◦ データをすべてGit管理していた 運用面での課題があった
12. なぜリニューアルしたのか？ • 挙げられた課題は解決できそうだった ◦ WEB上での作業、WYSIWYGでの執筆 • リニューアルまでが早そう ◦ エンジニアのリソースを多くかけなくて良さそう WordPressが解決に早いと判断した
13. リニューアルの全体像
14. リニューアルの全体像 これまでもこれからも取り組んでいくこと • 価値を届けたい人の元に届くように • 届けたい価値が伝わるように 読む人が読みやすく
15. リニューアルの全体像 • 考えることに集中できるようにする ◦ 記事はメディアの価値そのもの • 素早い変化に対応できるメディアにする ◦ 多くの人がすぐに開発できる状態になる ◦ デザインや機能を変更しやすい状態にする ∴ オリジナルのテーマをつくることにした 書く人が書きやすく、作る人が作りやすく
16. リニューアルの全体像 • デザインを作る • 開発環境をつくる • サーバーを準備する • オリジナルのテーマをつくる • 管理画面を使いやすくする • 記事データを移行する
17. デザインを作る
18. デザインを作る • トップページ • 記事一覧ページ • 記事詳細ページ ◦ 記事内で使うパーツは洗い出しておく 主にデザインするのは３画面だけ
19. デザインを作る 記事を読む人のほとんどはモバイル端末。 モバイル先行で考えると情報の整理がしやすい。 モバイルファーストで作る
20. デザインを作る • つくった時の話 ◦ https://note.mu/kii0719 ロゴも変更しました
21. 開発環境を作る
22. 開発環境を作る • WEB上での開発作業は避ける ◦ ミスができない • コードをGit管理する ◦ 複数人での開発ができるようになる ◦ 何か起こった時にすぐに戻せる ∴ ローカルの開発環境を準備した
23. 開発環境を作る • 準備がラク ◦ インストールが簡単 ◦ 必要なソフトウェアは自動インストール • 運用がラク ◦ コマンド１つで構築できる ◦ 開発者が増えてもコストが少ない Docker を利用して開発環境を構築した
24. サーバーを準備する
25. サーバーを準備する • 各社レンタルサーバーで簡単にインストールできる ◦ ロリポップ！マネージドクラウドを利用した • 検証環境も準備できると便利 ◦ 安心なリリース作業ができる • デプロイの仕組みも整えておくと吉 ◦ Capistrano を使いました • アクセス数によっては負荷対策を検討 ◦ CDNを導入するなど
26. オリジナルテーマを作る
27. オリジナルテーマを作る もちろん、配布されているテーマでも良い。 • テーマに依存している ◦ 変更を加えたい時に自由に変更しにくい • 変更しやすいように準備できる ∴ スターターテーマを使って、テーマを作った デザインや機能を変更しやすい状態にしたい
28. オリジナルテーマを作る • カスタマイズを前提として作られたテーマ • 最低限の機能が備わっている ◦ テンプレートファイル ◦ 関数テンプレート ◦ CSS ∴ スタイルだけ調整すれば形になります _s（underscores）を使ってテーマ開発
29. オリジナルテーマを作る • チームで慣れていてるやり方を導入 ◦ Sass (SCSS) で書いた ◦ FLOCSSの考え方でのCSS設計 ◦ 特にルールがなければ、おすすめ 作る人みんなが管理しやすいように作る
30. 管理画面を使いやすく
31. 管理画面を使いやすく • 困っていることなどを直接聞ける状態になる ◦ 少し面倒なこと、困っていることをそのままにしない 編集者と一緒に管理画面を育てる
32. 管理画面を使いやすく オリジナルパーツのHTMLを簡単に挿入できるようにした クイックタグの活用
33. 管理画面を使いやすく クイック編集でカスタムフィールドを編集可能にした クイック編集をカスタマイズ
34. 記事の移行
35. 記事の移行 • 記事はできる限り移行した方が良い • WordPress → WordPress は割と簡単 • 別のブログ → WordPress 大変だけどあきらめないで ◦ できればWordPressのDBにデータを移す 記事はメディアの価値
36. 記事の移行 • 静的ファイルジェネレータ（Middleman）からの移行 • WordPressインポータープラグインを利用した ◦ エクスポートされるファイルを観察 ◦ フィード発行処理をカスタマイズした ∴ 1,000記事以上のデータを移行することができた フィード発行の仕組みでなんとかなる（かも）
37. まとめ
38. まとめ • 読む人が読みやすく • 書く人が書きやすく • 作る人が作りやすい 良いメディアを作っていきましょう
39. まとめ オリジナルテーマでブログはじめてみましょう Start!
40. おまけ
41. おまけ https://github.com/kii0719/start-media 開発環境を簡単に作れるパッケージ作りました
42. おまけ 【 ペパボ 採用 】で検索！ minneでは一緒に働く仲間を募集しています