【Vue/Firebase】ユーチューバー関連のサイトを立ち上げた話【個人開発】

この記事はQiitaトレンドランキングで2位を獲得しました。

【作ったもの】 カテゴリやランキングからYoutuberを探せるサイト：YOUTUBERランキング

【アクセスレポート】 アクセスリアルタイムレポート

概要

今回はリモートで通勤がなくなり自由時間が多くなったということで、個人開発をしてみたので、備忘がてらやったことを振り返ってみました。

WEB系に興味がある方などには、参考になる部分があるかもしれないので共有しますので、興味がありましたらLGTM、ストックお願いします。

対象読者

• Webサイトの立ち上げ方を知りたい人

書いてあること

• Webサイト（ https://youtuber-ranking.com ）を立ち上げるまでにやったこと
• WEBサイトやWEBサービスの立ち上げ方

作ったもの

• おすすめのYoutuberをカテゴリから探せるサイトYoutuberランキング

やったこと

1. 企画

まずは、なにを作るかを考えます。

今回は、初めから情報価値のあるサイトを作りたかったのと、流行りものが良かったので、「Youtuber」に目をつけました。Youtuber関連サイトは多いですが、カテゴリごとに体系的にまとめているサイトは少なかったのでバリューがあるかなと考えました。

キーワードの検索ボリュームを、Google Trendsで調査し、十分なボリュームがあることを確認しました。

「何をするか」を決めることは、「何をしないか」を決めることと同じことですので、本当にしたいことを「提供価値」として定義しました。

（今回は企画段階が雑だったので、競合分析や競争戦略、提供価値の深掘りをしたほうがよかったなと後で思いました）

また、使いたいサービス名がある場合は、念のため商標検索や、欲しいドメイン名が取れそうかを確認しておきます。

アウトプット 👉

ここでのアウトプットは「ビジネスキャンバス」と「ビジネスモデル図」です。
これは、サービスを形にしながら徐々に育てていくことにします。

キャンバスや図を起こす過程を書いた「1枚のドキュメント」もできました
この段階でざっくりとした「TODOリスト」をドキュメントに書いて指針としました。

ビジネスキャンバスやモデル図の簡易版を書きながらサービスのイメージを固めていく

【参考図書】 スタートアップマニュアル

2. TODOリスト

次に、「やるべきこと」を書き出し、管理するTODOリストを用意します。
今回は、個人的に愛用しているカンバン方式のタスク管理ツール、Trelloを利用しました。

アウトプット 👉

継続的に管理していくTrello板

3. 技術スキーム選定

企画ができてきたので、システム設計を考えてきます。
個人開発だと利用できるリソースが少ないので、ミニマムな設計から始めることにします。

今回はサーバー管理も不要なミニマム設計「サーバーレスSPA」という組み方でいきます。
「【JS】Vue.js【CSS】Bulma.css【DB・ホスティング・認証】Firebase」という構成です。

後にYoutuberデータの収集・管理用のスクリプトとしてpythonやSeleniumも採用しました。

画面デザインには「スマホファースト」「レスポンシブデザイン」を採用します。

アウトプット 👉

企画段階で作成した「1枚のドキュメント」に、「検討した技術スキーム」などをなぐり書きしていきます。
このドキュメントは備忘とアウトプットの目的で最後まで書き足しし続けていきます。

個人開発だと独り作業であり、一気に作りきるのは難しいので、セルフレビューと備忘の目的で「ペライチドキュメント」は有用でした。

備忘や設計のためのペライチドキュメント

4. 情報設計・ページデザイン

ページ構成や、ページデザインを考えながら、サービス設計を一気に形に落とし込んでいきます。

この段階で「あーでもないこーでもない」とサービスのデザイン（企画）が徐々に煮詰まってきます。

トンマナ

WEB制作会社などでは「トンマナ」と呼ばれるものが作られます。
ざっくり言うと「配色・フォント・伝え方」のようなサイトの雰囲気を構成するものをルール化していきます。

今回は自分がデザインよくわからないのでざっくり以下のように決めました。

• 配色：メインカラー（レッド）と白。画像がたくさん入るのでシンプルな配色。
• フォント：可読性を重視。Noto Sans JPを採用
• 伝え方：シンプルに。収集した情報をみやすく一覧表示するのに徹する。

情報設計とページデザイン

トンマナを意識しながら、Adobe XDを利用してページデザインを組んでいきます。

このタイミングで「このページにこの要素を配置して...」「ここからこのページに遷移して...」みたいなサイトの骨格を考えながら作りました。

アウトプット 👉

「ペライチドキュメント」に「ページ一覧」を考えて書き足しました。

Adobe XDを用いて情報設計・デザインを作成しました。

5. 要件調整

ページデザインを通してサービスデザインが形になってきたので、第一弾リリース段階で「やること」「やらないこと」を少しずつ明確化・順位付けしていきます。

機能追加は後からでもできるので、まずは「本質・ミニマム」を意識して、膨らんできた要件やビジョンを整理します。

アウトプット 👉

企画・サービスデザイン・TODOの調整
情報設計・ページデザインの調整

6. システム設計

ページデザインを通してサービスデザインが形になり、要件も固まってきたので、システム設計に移ります。

設計はdraw.ioで図に落としながら考えました。

今回は「Youtuberデータの取得・管理・更新」をどうやるかがポイントだったのでそこに絞って紹介します。

Youtuberデータの収集と管理

今回は「1000人以上のYoutuberのデータをどのように収集・管理するか」という問題がありました。

今回は、Python/Seleniumを用いたスクレイピング＆Youtube Data APIを利用してYoutuberデータを収集し、Google Spreadsheetでそのデータをマスター管理することにしました。

データは管理画面からFirestore(DB)にデータを投入したり、Youtube Data APIを利用して各種データを更新したりします。

アウトプット 👉

「ペライチドキュメント」に「設計」のセクションを加筆しました

設計の要所や全体を俯瞰できる「概要図」や「構成図」が出来上がりました。

7. コーディング

設計の方針が完成しましたので、実装に移ります。

gitやvue-cliを利用して実装環境のセットアップを行ったのち、ゴリゴリ実装していきます。（一般的なWEB開発の技術スキームだと、dockerなどでローカル環境をセットアップしたりします）

動くプロダクト(MVP)が出来てくる段階で、サービスの改善案を思いついたり、技術的な課題を見つけたりということがよくありました。一歩一歩方向を修正していきます。

アウトプット 👉

サービスデザイン／UIデザイン／画面構成の修正
システム設計の修正
開発が可能なローカル環境
動くアプリケーション

サイトディレクトリ構成（押すと開きます）

.
├── README.md
├── babel.config.js
├── deploy.sh
├── dist
├── firebase.json
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo.png
│   ├── ogp.png
│   ├── robots.txt
│   └── sitemap.xml
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── icon
│   │   │   ├── blog-icon.png
│   │   │   ├── ...
│   │   ├── img
│   │   │   └── logo.png
│   │   └── scss
│   │       └── global.scss
│   ├── components
│   │   ├── AmazonAdBanner.vue
│   │   ├── ...
│   ├── firebase
│   │   ├── index.js
│   │   └── store.js
│   ├── main.js
│   ├── pages
│   │   ├── Category.vue
│   │   ├── ...
│   │   └── partials
│   │       ├── CategoryButtons.vue
│   │       ├── ...
│   ├── plugins
│   │   ├── ad-random-routes.js
│   │   ├── algolia.js
│   │   ├── ...
│   └── router.js
└── vue.config.js

8. Firebase設定(インフラ構築)

コーディングと並行して、Firebaseの設定をします。

一般的なインフラ(&ミドルウェア)構築だと、VPC作ったり、インスタンス立てたり、DBを用意したり、Apache用意したり、SSL証明書用意したり、デプロイの仕組みを作ったり、作業面でもコスト面でも大変ですが、Firebaseだとスキップできるの(&無料)でスピーディーに開発を進められました。

今回は「Firestore(DB)」「Authentication(認証)」「Hosting(ホスティング)」を設定します。

アプリケーションからFirebaseに疎通するために、FirebaseのSDKもnpmで導入し、
ホスティングするためにローカル環境のターミナルとFirebaseも疎通させておきます。(参考)

Firestore セキュリティルール

Firestoreは基本的に「誰でもどこからでもアクセス可能」なので、セキュリティ制御のために「セキュリティルール」を設定します。

アウトプット 👉

アプリケーションから疎通可能なFirebase(インフラ)環境
Firebaseに疎通したローカル環境

9. データ投入

YoutuberのデータをスクレイピングやYoutuber Data APIを利用して取得して、DBに投入します。
管理画面からデータをDBに投入し、Youtube Data APIを呼び出してデータを更新します。

アウトプット 👉

Youtuberデータの登録されたFireStore(DB)

管理画面からデータを投入

10. SEO対策

Google検索の上位表示を目指して、titleタグやmeta descriptionタグの設定をします。

必要なSEO設定は、こちらのサイトが非常に参考になりました。

※ 今回採用したSPAはSEOにおいて比較的不利とされています。SEOが特に重要なサイトについては、SSR等別のスキームを採用した方が良いかもしれません。

sitemap.xml

Googleのクローラーにページを検知してもらうために、sitemap.xmlを生成します。
今回は、pythonスクリプトでsitemap.xmlを生成して、public/配下に配置する方式にしました。

Firebase Functionsを利用すれば、静的なSPAサイトでも動的にsitemap.xmlを生成させることも可能です(参考)

robots.txt

クローラーにクロール指示を出すためのファイルであるrobots.txtを用意します。（無くてもSEO影響はないみたいです）

タグ構造の調整

Google Botはタグ構造も解析するので、文章の意味に合わせてタグ構造も調整しました。(Hタグの構造を調整したり、パンくずリストを追加したり。参考)

vue-metaの導入

コンポーネントからMeta要素やタイトルタグを動的に変更するために、vue-metaというプラグインを導入しました（SPAの場合はこういう工夫が必要）

OGP 動的にできない問題

SEOとはちょっと違いますが、関連項目として「OGP」の課題があります。
通常、普通のサーバーサイドレンダリングであれば動的にHEADタグ内を書き換え可能ですが、SPAだと固定になってしまいます。

なので、ページごとにOGP設定を切り替えるには、Firebase Functionsを駆使してやや面倒なことをしないといけません（参考)

今回はOGPは大して重要ではないと判断して、完全に静的なOGP設定で我慢します

アウトプット 👉

「ペライチドキュメント」に「SEO設計」のセクションを加筆しました。
index.htmlや、各ページコンポーネントにタイトルタグなどのメタタグを設定し、Hタグ等のページ構造の調整をしました。
sitemap.xmlを生成するpythonコードを実装し、sitemap.xmlやrobots.txtを静的に配信します。

参考書籍 SEO技術バイブル

11. ロゴ作成

今回はLOGOSTARというサービスを利用してロゴを作成しました。
このサービスは、いくつかの条件や色を設定すると、AIが自動でロゴを作成してくれます。
faviconや透過画像など、あらゆるバージョンの画像が自動生成されるので便利です。

費用は約5000円ですが、僕は間違えて2度振り込んでしまったので10000円かかりました💸

ロゴが生成できたら、ヘッダ部分やOGP、faviconなど各所に配置していきます。

アウトプット 👉

かわいいロゴ
faviconやヘッダロゴ、OGP画像の設定

作成したロゴをOGPに設定

12. デザイン調整

一通り実装が完了したら、Chromeのスマートフォンエミュレーターでサイズを変えながらデザイン調整をしていきます。
今回はレスポンシブデザインを採用したので、各デバイスできれいに表示されるようにメディアクエリを駆使して微調整しました。

レスポンシブデザインに対応したCSSフレームワーク(bulma.css)を採用したのでCSS設計等も比較的楽でした

アウトプット 👉

SP・PC各デバイスでのきれいなページの表示

13. お問い合わせ・規約系画面

お問い合わせ画面と利用規約・プライバシーポリシーも作っておきます

「お問い合わせ画面」はサクッとGoogleフォームで作りました。
「利用規約」はこちらを参考にカスタマイズしました。
「プライバシーポリシー」はこちらを参考にしました。（後述するGoogle Adsenceの導入にはプライバシーポリシーに特定の内容が入っている必要があります）

14. GoogleAnalytics 導入 & レポート作成

ユーザー行動のトラッキングのためにGoogle Analyticsを導入します。
SPAだと普通にGAを導入してもイベントがとれないので、vue-analyticsプラグインを導入しました。

次に、どんなユーザー行動を把握したいか、からGAイベントを設計・定義していきます。
また、開発環境のIPをGAのフィルタ機能を使って除外しておきます。

流入情報やユーザーのサイト内行動のデータはGoogleデータポータルで動的なリアルタイムレポートにして分析しました。

ユーザー行動のトラッキングは、グロースハックの考え方など、サービスを改善していくための大事な情報源になります(参考書籍)。

アウトプット 👉

「ペライチドキュメント」に「GAイベント設計」のセクションを加筆しました。
各コンポーネントにGAイベントを埋め込むことで、ユーザー行動をトラッキングし、ユーザーのサイト内行動をリアルタイムで表示・分析するレポートを作成しました。

アクセスレポート：https://datastudio.google.com/reporting/cbb95325-6c97-48e0-b460-4d37fa565864

15. Google Search Console 導入

SEOの状況を取得・管理するために、Google Search Console（通称サチコ）の登録をします。

サチコを利用することで、Googleでの検索状況（検索文字列や、回数）、Googleへのインデックス情報(インデックスされるとGoogle検索に表示されます)、リンク・被リンクなどの情報を確認することができます。

16. ホスティング・ドメイン設定

アプリケーションの方が出来上がってきたので、ホスティングしましょう。
Firebaseの設定が終わっていればnpm run build && firebase deployと叩くだけでSPAページがホスティングされます。

ドメインはvalue-domainで「youtuber-ranking.com」を取得して、Firebaseの画面の指示通りにDNSレコードに追記すると、ドメインからホスティングしたページに疎通できるようになります。

アウトプット 👉

https://youtuber-ranking.com でサイトにアクセスできるようになった🎉

17. Google Adsense 導入

収益化のための広告枠を設置するためにGoogle Adsenseを導入します。（参考)

Google Adsenseのページからぽちぽち登録して、1週間ほどすると、審査が完了します。
...が、残念ながらコンテンツがしょぼいとのことでリジェクトされました。しゃーない。

アウトプット 👉

広告枠の設置（失敗）
マネタイズ（失敗）

2021/03/05 追記
Qiitaからの大量流入があったせいか、急に審査が通りましたというメールが来ました。
Google Adsenseは勝手に広告枠の場所を決めて自動挿入してくれるらしいです！すごい

18. Google広告 導入

サイトが出来たのでGoogleにお金を払ってユーザーを購入してみます(参考)。
実際にユーザーを流入させてサイト内行動をトラッキングすることで、サイトの問題点やニーズを把握し、PDCAを回していきます。

初めのうちはクリック単価100円程度でしたが、最適化が進むと10円くらいにまで下がりました。

アウトプット 👉

実際に流入したユーザーの、サイト内行動に基づくサイトの改善案

参考書籍 リスティング広告の教本

19. 機能追加(PDCA)

GAで取っているユーザー行動のレポートから得た洞察に基づいて、サイトをより使いやすく価値のあるものになるよう、機能追加をしていきます。
適宜新しい機能を追加しましたが、ここではおもしろ味のある機能を紹介します。

19.1 検索機能の追加

Youtuberを全文検索で検索する機能を追加します。
Firebaseで全文検索機能を実装するためにAlgoliaを導入しました。

導入手順はGoogle公式やQiitaを参考にしました。
WEB上でぽちぽちして、SDKを利用してJSON(firestoreのデータそのまま)を放り込むだけなので、一般的に利用されるElasticSearchなどに比べると構築が大変楽に感じました。

また、精度・速度も大満足な出来でした（興味のある方はYoutuberRanking.comの右上の検索ボタンから試してみてください）

19.2 Amazon広告の導入

Google Adsenceの審査に落ちてしまったので、代わりにAmazon広告を導入してみます。

Amazonアソシエイトというサイトで登録をすると簡単にアフィリエイトバナーを置けるようになります。

初めは自動生成のシンプルなバナーを置いていたのですが、クリックされる気配がなかったので、Youtuber関連の本のリンクをランダムで出すような実装を追加してみました。

20. Qiitaを書く

せっかく作ったので、誰かにみてもらいたいので、Qiitaを書きます。

Qiitaのエディタは絶望的に書きづらかったので、StackEditで書きました。

タイトルには「バズワード」と「曖昧さ」があると比較的興味を持ってもらいやすいと思います。

長いだけの記事は読んでもらえないため、形容詞を減らしてシンプルな文章を心がけたり、図をたくさん入れることで簡単に概要が分かるよう心がけました。

アウトプット 👉

LGTMのついた記事（願望）
Qiitaユーザーにサイトをみてもらえる機会（願望）

まとめと反省

今回は「Youtuberに関するサイト」を立ち上げるまでの一部始終を紹介しました。

かわいいサイトはできたので満足ですが、提案価値の「企画」段階がしょぼすぎて、壮大なゴミを生産してしまった気がしました。

免責

本記事は独断と偏見が多く含まれていますので参考に留めてください。