Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WordPressでminneのオウンドメディアをリスタート
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Tomoki Kidera
April 20, 2019
Design
2
330
WordPressでminneのオウンドメディアをリスタート
Tomoki Kidera
April 20, 2019
Tweet
Share
Other Decks in Design
See All in Design
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
510
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
securecat
0
200
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.4k
decksh object reference
ajstarks
2
1.5k
UI/UX & Web Design Portfolio 2025|Madoka Kumagai
madoka_portfolio
2
130
爆速開発でAIプロダクトが40万インプレッションになった話
tsubura
0
160
Franks Myth
gfht1
1
410
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
380
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
290
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
7.1k
Connpass-Xperia_Camera_App_by_HCD.pdf
sony
0
490
TUNAG BOOK 2024
stmn
PRO
0
1.4k
Featured
See All Featured
First, design no harm
axbom
PRO
2
1.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
Claude Code のすすめ
schroneko
67
210k
The untapped power of vector embeddings
frankvandijk
1
1.6k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
200
SEO for Brand Visibility & Recognition
aleyda
0
4.2k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.3k
Tell your own story through comics
letsgokoyo
1
810
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
56
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
7.9k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
0
2.3k
Transcript
None
アジェンダ • 登壇者・サービス紹介 • なぜリニューアルしたか? • リニューアルでやったこと ◦ リニューアルの全体像 ◦
やったこと紹介 • まとめ
この話を通して • オウンドメディアの開発はじめられそう • WordPressのオリジナルテーマをつくってみよう メディアやテーマ開発に役立てもらいたい
登壇者・サービス紹介 木寺智紀 ( きでりん / @kii0719 ) minne デザイナー WEB
/ アプリ UI デザイン WEBフロントエンドコーディング
登壇者・サービス紹介 • アプリ: 1,000万DL • 作品数: 900万点 • 作家数: 50万人
ハンドメイドマーケット minne
登壇者・サービス紹介 GMOペパボのサービス • ホスティング事業 ◦ ロリポップ! / ヘテムル / ムームードメイン
• EC支援事業 ◦ カラーミーショップ / SUZURI / グーペ など
登壇者・サービス紹介 • ものづくりメディア • 2016.6 運用開始 • 2018.11 リニューアル minneとものづくりと
なぜリニューアルしたのか?
なぜリニューアルしたのか? ものづくりの価値向上し、市場全体を牽引するminneになる • ものづくりの良さを丁寧に伝える • 新たな「作り手」「作品」が生まれるきっかけに繋げる • クリエイターやブランド、企業とコラボし、作り手のさらなる活躍 に繋げる オウンドメディアとしての拡大を目指した
なぜリニューアルしたのか? 記事はメディアの価値そのもの • 記事の本数を今よりも増やしたい • 記事1つ1つの質をあげたい ◦ 取材の時間、コンテンツを考える時間を増やしたい 記事作成・編集の生産性を上げたい
なぜリニューアルしたのか? 静的ファイルジェネレータによる編集者への負担が大きい • 記事を編集して公開するまでに時間がかかる ◦ マークダウンと独自な記法による執筆 • 編集者の学習コストが高い ◦ 編集者にそれぞれ開発環境を準備していた
◦ データをすべてGit管理していた 運用面での課題があった
なぜリニューアルしたのか? • 挙げられた課題は解決できそうだった ◦ WEB上での作業、WYSIWYGでの執筆 • リニューアルまでが早そう ◦ エンジニアのリソースを多くかけなくて良さそう WordPressが解決に早いと判断した
リニューアルの全体像
リニューアルの全体像 これまでもこれからも取り組んでいくこと • 価値を届けたい人の元に届くように • 届けたい価値が伝わるように 読む人が読みやすく
リニューアルの全体像 • 考えることに集中できるようにする ◦ 記事はメディアの価値そのもの • 素早い変化に対応できるメディアにする ◦ 多くの人がすぐに開発できる状態になる ◦
デザインや機能を変更しやすい状態にする ∴ オリジナルのテーマをつくることにした 書く人が書きやすく、作る人が作りやすく
リニューアルの全体像 • デザインを作る • 開発環境をつくる • サーバーを準備する • オリジナルのテーマをつくる •
管理画面を使いやすくする • 記事データを移行する
デザインを作る
デザインを作る • トップページ • 記事一覧ページ • 記事詳細ページ ◦ 記事内で使うパーツは洗い出しておく 主にデザインするのは3画面だけ
デザインを作る 記事を読む人のほとんどはモバイル端末。 モバイル先行で考えると情報の整理がしやすい。 モバイルファーストで作る
デザインを作る • つくった時の話 ◦ https://note.mu/kii0719 ロゴも変更しました
開発環境を作る
開発環境を作る • WEB上での開発作業は避ける ◦ ミスができない • コードをGit管理する ◦ 複数人での開発ができるようになる ◦
何か起こった時にすぐに戻せる ∴ ローカルの開発環境を準備した
開発環境を作る • 準備がラク ◦ インストールが簡単 ◦ 必要なソフトウェアは自動インストール • 運用がラク ◦
コマンド1つで構築できる ◦ 開発者が増えてもコストが少ない Docker を利用して開発環境を構築した
サーバーを準備する
サーバーを準備する • 各社レンタルサーバーで簡単にインストールできる ◦ ロリポップ!マネージドクラウドを利用した • 検証環境も準備できると便利 ◦ 安心なリリース作業ができる •
デプロイの仕組みも整えておくと吉 ◦ Capistrano を使いました • アクセス数によっては負荷対策を検討 ◦ CDNを導入するなど
オリジナルテーマを作る
オリジナルテーマを作る もちろん、配布されているテーマでも良い。 • テーマに依存している ◦ 変更を加えたい時に自由に変更しにくい • 変更しやすいように準備できる ∴ スターターテーマを使って、テーマを作った
デザインや機能を変更しやすい状態にしたい
オリジナルテーマを作る • カスタマイズを前提として作られたテーマ • 最低限の機能が備わっている ◦ テンプレートファイル ◦ 関数テンプレート ◦
CSS ∴ スタイルだけ調整すれば形になります _s(underscores)を使ってテーマ開発
オリジナルテーマを作る • チームで慣れていてるやり方を導入 ◦ Sass (SCSS) で書いた ◦ FLOCSSの考え方でのCSS設計 ◦
特にルールがなければ、おすすめ 作る人みんなが管理しやすいように作る
管理画面を使いやすく
管理画面を使いやすく • 困っていることなどを直接聞ける状態になる ◦ 少し面倒なこと、困っていることをそのままにしない 編集者と一緒に管理画面を育てる
管理画面を使いやすく オリジナルパーツのHTMLを簡単に挿入できるようにした クイックタグの活用
管理画面を使いやすく クイック編集でカスタムフィールドを編集可能にした クイック編集をカスタマイズ
記事の移行
記事の移行 • 記事はできる限り移行した方が良い • WordPress → WordPress は割と簡単 • 別のブログ
→ WordPress 大変だけどあきらめないで ◦ できればWordPressのDBにデータを移す 記事はメディアの価値
記事の移行 • 静的ファイルジェネレータ(Middleman)からの移行 • WordPressインポータープラグインを利用した ◦ エクスポートされるファイルを観察 ◦ フィード発行処理をカスタマイズした ∴
1,000記事以上のデータを移行することができた フィード発行の仕組みでなんとかなる(かも)
まとめ
まとめ • 読む人が読みやすく • 書く人が書きやすく • 作る人が作りやすい 良いメディアを作っていきましょう
まとめ オリジナルテーマでブログはじめてみましょう Start!
おまけ
おまけ https://github.com/kii0719/start-media 開発環境を簡単に作れるパッケージ作りました
おまけ 【 ペパボ 採用 】で検索! minneでは一緒に働く仲間を募集しています