注意事項

この記事には一部書きかけのものが含まれています。
定期的に追記・更新しているので、このポストに対して興味をお持ちいただけた方はストックしていただけたらと思います。
ある程度の量を更新したタイミングで(変更の度合いは私の感覚ですが)変更通知を送りますので、そのタイミングで再度確認いただけたら幸いです。

追記・修正を、諸々しました。

この投稿をしてから個人でもいくつかWebサイトやWebサービスなどを作ってきました。
実際に作ってみると、あのとき書いた内容では微妙だったり、他にももっと便利な物を見つけたりで、色々と内容を書き換えたくなったので、思い切って内容を大幅に変更しています。

また、開発に関しては触れません、と書いていましたが、下にも書いたように一緒のページに開発についても記載があったほうが見やすいため、開発についても記載していくことにします。
なお、開発については個人のスタイルに依存した内容となっているため、あまり参考にはならないかもしれません。

だいたい私の場合は、

画面側はReact (Next.js含む) で実装する。最近はTypeScript多めになってきた。ずっと同じ環境だと飽きてしまうので、なるべく色々な環境で書きたいと思っていますが、TypeScript + VSCodeの組み合わせだと、ひたすら楽。なので、プロダクトのイメージがしっかりとある場合は、この組み合わせで書き始める。
SPAにする必要がなさそうであれば、Express + pug 、もしくはRuby on RailsなどのWebフレームワークの仕組みに乗っかって書いてしまう
- 最近数年ぶりにRuby on Railsを触ったのですが、生産性が異常なまでに高かったことを改めて思い知らされました。ここ数年は下火とか言われたりするのを見かけますが、サクッとサービスを完成させてリリースまでこぎつけさせるなら、Ruby on Railsは未だに 全然あり な選択肢となるでしょう。
上と重なりますが、サーバ側はNode.js (だいたいExpress多め) , Python (BottleやFlaskあたり)が多め, Ruby(Ruby on Rails), Go(Gin, echo)
Heroku or Netlify or Vercelでインフラ周りは済ます
- 特にVercelはNext.js使うなら、強い。Incremental Static Regenerationなども簡単に実現できるし、持続的なSEO対策とかも考えるなら、かなり選択肢としては強いかと。

という形でJavaScript多めの構成です。
(ここについては今後も変化していく可能性はあります)

なお、この記事は今後の自身のためにも一覧で分かりやすく現状のTIPSを残しておきたい、というのが第一のモチベーションとしてあります。不要だと思った箇所についてはばっさりカットしています。

あと以前は ですます 調で書いていましたが、何となく今はそんな気分じゃないので、口調を変えて書き直しています笑。
まあ、こういうのは文章を書くモチベーションとしては結構個人的に重要視していることなので、まあ、そんなものかと思っていただけたらと思います。

はじめに

WebサイトやWebサービスをリリースする際、サービスの運用を行うにあたって自分が普段行っているセットアップを備忘録として書き残しておこうと思う。
~~主に運用に関することを書いていくので、開発に関しては一切触れない。~~
開発は別に書こうと思ったが、１ページにまとめたほうが見やすいので開発も一緒に書いておこうと思う。イメージ的には作るものの 着想を考え始め、開発、運用 という一通りの流れをまとめておけたらと考えている。

準備編

開発を始める前に、サービス・アプリの構成を考える

当然ではあるものの、個人開発の場合、早く作りたいという気持ちが先行してしまいおざなりになってしまいがち(個人的に)。だが、一日踏みとどまってここをしっかり考えておくと、後々の終着地点が明確で結果的に楽しく開発が行える。
最初 Figma などを使って画面モックを作って〜などと考えていた。確かにFigmaは便利だし、習得すれば面白いのは間違いないが、今の自分にはそれを扱える技量がないので、現在は使わない方針でいる。

他にモックアップを作るツールだと、Balsamiq Mockups などを以前購入したりもしていたが、結局あまり使っていない。便利なツールであることに変わりはないが、ソフトを立ち上げて、そのソフトの流儀に合わせて操作をする、という段階で俺は一体何をやっているのだろうか？という気持ちになって、やる気が無くなってしまうことに気づいた。

代わりに water.css などを使って、HTMLでかんたんなモックを作ったりをするか、アナログだが、ノートに画面構成などを書きながら考える。
これらの手法の場合、構成が大きくなるとモック作成やノートに書くのがしんどくなってくるが、しんどくなるレベルの規模の開発は個人では行わない方針として、案自体をボツにする。
(個人的に、個人開発で重要視する一つとして、**ランニングコストをいかに抑えられるか？**というのがある)

ちなみにここに書いたwater.cssはHTMLを組むだけで、それっぽいデザインになるので、そのままスタイルとして採用することも多い。
個人的にはBootstrap的な立ち位置である。
かなりミニマルなスタイルセットなのでやれることはBootstrapに比べると狭いが、それ以上のものを求めるときは別の手法を考える、という ものさし にもなって良い。

ちなみに画面側だけで済ませるなら Netlify を選択するが、一応無料プランの場合だと、あまり調子に乗ってガンガン使っていると、無料範囲じゃ収まらなくなってきそうだ。
ここについてはGitLabのほうがいいらしいので、今度はGitLabで試してみようかと考えている。
１５分で超カンタンに爆速の無料ブログができるGatsbyの作り方

追記: GitLabことはじめ

その後、実際にGitLabを試してみたので、そちらのリンクを下に残しておく

GitLab Pagesことはじめ

マネタイズの方法を考える

自分の考えとして、個人開発においてもマネタイズは必ず達成する方針で考えているため、これも最初の準備段階で考えるようにする。

別に考えたサービスが完全に個人的なジョークアプリみたいなものであったとしても、１円でも収益は出せるように意識したいと考えている。
金にがめついのかもしれないが、自分の作ったもので満足してしまいマネタイズには目を向けていなかった作曲家時代の後悔があるので、ここらへんはしっかり意識する。

それに現代において収益性は分かりやすいパラメータなので、自分で判断するのも、人に判断してもらうのも、そちらのほうが楽だ。

自分の作るサービスがどういうマネタイズ手法にマッチしそうかは下記のようなサイトを見ながら考える。

ここらへんについてはジャバ・ザ・ハットリさんのブログ(ベルリンで働くソフトウェア・エンジニアのブログ)を参考にさせていただいている。
(ちなみに上に貼ったGitLabのリンクも、彼の書いたポストです)

ジャバ・ザ・ハットリさんは、自身がエンジニアになったばかりの頃に偶然見つけた、個人開発を精力的にやられている方で、個人開発三昧な日々の風景を、村上龍を彷彿とさせるようなパワフルな文体で綴っていて、とても読み応えがある
Qiitaも書いていて、この記事がバズっている(開設後３週間で収益１０万円を得た個人開発サイトでやったことの全部を公開する)。

大まかに分けると下記のようなマネタイズの方法があり、だいたいここらへんを皮切りとして、まずは考えていく。なお、自身はまだ個人開発でしっかりとした成果は出せていないので、ここらへんの記述に説得力はない。
(下に行くほど、ユーザとの密なやり取りが発生するイメージ。ユーザに対するサポートコストは無視できないものがあるので、個人開発レベルの規模でそこに労力を発生させるのは個人的に二の足を踏んでしまう。あまりコミュニケーションが得意ではないというのもある)

広告収入
アフィリエイト
サブスクリプション
サービス利用料・手数料

上に貼った内容について自身が書ける範囲で、下に書いていこうと思う。

広告収入

広告収入を用いたマネタイズの方法は、マネタイズの方法の中でも一番シンプルなやり方となる。
広告収入を用いてたくさん稼ぐためにはアクセスを集めるサイト・サービスを作れば良いからだ。
ただこの「アクセスを集めるサイト・サービスを作る」というのが非常に難易度が高い。

よって、この広告収入によるマネタイズは、

実現するための障壁は低いが
それでしっかりと稼ぐのも非常に難しい

手法となる。

また、広告を出しながら、別のマネタイズ手法も用いて、マネタイズのあわせ技を行うのも一つだ。
そうすることで収益の分散化も図れるし、そのような意味でもマネタイズの方法としては手が出しやすいものかと思う。

Google AdSenseで稼ぐ

広告収入で稼ぐための手段としてもっともポピュラーな選択肢が、 Google AdSense を用いる方法だ。
Google AdSenseの使い方については検索すればいくらでも情報は出てくるので、あえてここに書くまでもないが、サイトの審査さえ通ればすぐに広告を貼ることができる。

表示される公告の量やスペースなどを最適化していくこともできるし、自動広告を設定すればGoogle側でよしなに公告を表示させてくれるので、非常に利用もしやすい。

よく検索で利用するような有名なウェブツールにもGoogle AdSenseを使っている例はたくさんあるので、マネタイズの手段としては非常にポピュラーなものだと思う。

マネタイズの方法について悩まれている方で、かつ自身のサービスに広告を出すことに抵抗がなければ、まずはGoogle AdSenseの広告を出してみるのも一つかもしれない。

Google AdSenseのサイトの審査は厳しい？

これは主にブロガー界隈でよく話題になっていることのような気もするが、Google AdSenseに登録する際にサイトの審査が入るが、その審査が厳しいというのがよく話題に登っている。

審査対象のサイトがブログ形式であれば、それぞれの記事の内容が充実しているかどうかがチェック対象になると言われているなど、審査基準は諸説あるようだ。
(例：1記事の文字数が2,000文字以上でないとダメなど、様々な説が飛び交っている印象だ)

ちなみに私も自身のはてなブログにはこのGoogle AdSenseを貼っており、そちらでは毎日非常に少ないものの収益が発生している。
数ヶ月前に記事の書き方の見直しを行った結果、収益が倍以上に増えたので、ここについてはもっと色々とやりようがあるのかも知れないと考えている。

また、最近作成した、WordPressの公開されている記事の文字数一覧をチェックするためのWebアプリ でもGoogle AdSenseの掲載を始めた。
こちらはブログ形式のサイトではなく、Webツールという体をなしているからか、ページ数や文字数などは少ないものの、審査は問題なく通った。

WordPress 文字数チェッカー

ちなみにこのツール自体、WordPressでGoogle AdSenseの審査が通らないと悩んでいる方向けのツールでもあるので、もしお悩みの方がいれば利用してみてください(宣伝)。

【SEO対策】サービスの流入プランを考える

マネタイズをするには作ったアプリやサービスに触れてもらわなければ何も始まらない。
いかに露出させるか？そのプランを考える。

検索流入を狙う場合

作ろうとしているWebサービスが検索流入でアクセスを稼ぐようなサービスの場合、どのようなキーワードで検索流入を狙うべきなのか？考える必要がある。

ここについてはSEOなどの領域になってくると思うが、検索流入を狙っていく場合、ここは本気で考えていく必要がある。

いかにクールなサービスを作ろうとも、誰も知らなければ評価される機会すら訪れない。

SEOについて語ろうとすると、到底1ページにおさまる量にはならないため、ここではあくまで個人開発サービスレベルでの検索流入を狙っていくやり方について書いてみる。

このやり方が正解というわけではなく、あくまでやり方の一つとして参考程度に読んでもらいたい。

サイトのSEO対策を行う上で参考にすべきサイト

SEOを考える上で、サイトの作り方にも気をつけていく必要がある。
内部SEOについて考えられているサイトと、そうでないサイトであれば、当然前者のサイトのほうがGoogleの検索結果にインデックスされるスピードは速いと思うし、検索流入を狙える可能性は高くなる。

勿論サービスの種類にもよるので、一概には言えないが、やれることはやっておいたほうが良い。

というわけで参考にすべきサイトだが、今あなたが見ているQiitaは参考にできると思う。

Qiitaでは見出しをつけると自動的に目次が付与されたり、タグ毎のページが設定されていたりと、自動的に生成されたりと、基本となるSEO対策についてはしっかり行われている。

Googleの検索結果のインデックススピードも個人的な体感だが、早いと思うし、プログラミングについて検索をかけたときにほぼほぼ１ページ目にQiitaのページが表示される現状を踏まえても、やはりQiitaのSEOは強いと思われる。

これを読んでいる皆さんはQiitaをある程度触っていると思うし、そういう意味からも参考にすべきサイトとしてあげた。

ロングテールキーワードを意識することで検索流入を獲得する(実例あり)

ロングテールキーワードとは、検索ボリュームが少なく、複数語の組み合わせからなるキーワードのことを指す。
ググってもらえばたくさん解説記事は出てくるので、そちらを読んで頂くとして、このキーワードから流入を狙っていくことは、あなたのサービスの認知度向上には必ず役立つだろう。

といっても言葉だけでは
「ふーん...」
で終わってしまうと思うので、ロングテールキーワードにおける実例を一つ紹介させていただく。

自身で作ったサービス(という規模でもないが)で恐縮だが、商用利用可能な音楽を配布しようと思い、下記のサイトを立ち上げた。

無料で使える、商用利用可能な効果音や音楽

このサイトはタイトルのままで、YouTubeなどの動画製作者に向けて商用利用可能な音楽を配布しようという意図から立ち上げた。

ちなみにURLがサブドメインであることからも想像できるように、どちらかというと軽い気持ちで始めたサービスではある

現在はまだ設定していないものの、後ほどGoogle AdSenseなどを設定して収益化しようと考えていた。
ところが、完全に事前のリサーチが不足しており、実はこのような音楽配布サイトというのは個人サイトだけでなく、企業サイトもそれなりに参加しており、SEO的にはかなり競争率の高い分野だった。

というわけでGoogleにインデックスはされるものの、しばらくの間、検索流入はゼロだった。
(SNSなどで呟いたりはしていたのでTwitter経由でのアクセスなどはあったが)

実際に 商用利用可能音楽などで検索してみても１ページ目には出てこない。

これは困ったと思い、施策を考えることにした。

そのときに考えたのがロングテールキーワードを使って検索流入を獲得するということだ。

ロングテールキーワードを決めるまでの過程

そもそもこのサイトはYouTubeなどの動画製作者に向けて、商用利用可能な音楽を配布するというのが一つのテーマとなっている。

そのため、YouTube上などで動画制作を行う人々が読みたくなるような記事を書き、そこを検索流入の最初の入口としてサイトの存在を知ってもらうのはどうか？と考えてみた。

このサイトはGatsbyで作っていたが、急遽ブログ機能を新たに追加し、先ほども上に書いたように見出しやそれに対応する目次機能などもつけて最低限の内部SEO対策を施した上で、少しずつ動画関連の記事をアップしていくことにした。

私は実際に動画制作も行っていたので、これらのテーマでブログを書くのはそこまで大変ではなかった。

というわけで、いくつか動画制作関連の記事を書いたところ、少しニッチなキーワードで検索流入が発生するようになった。

それは３語を組み合わせた単語でのキーワードであり、検索ボリュームとしては少なめだが、最近少しずつ需要も出てきると思われるキーワードである。

(後々、Google AdSenseを入れたい関係上、一旦ここについてはぼやかして書いている。たしかGoogle AdSenseを組み込む場合(組み込まなくてもかな？)、アナリティクスなどのキャプチャを公開するのは規約違反とかになったと思うので、ここらへんの詳細なことについては一応ぼやかすことにした)

ちなみに最もアクセスを集めているブログ記事は下記となる。

Macでゆっくり動画を作成する方法 (ゆっくり音声編)

どういうキーワードでアクセスを集めているかは想像におまかせするが、まあ何となく分かるかもしれない。

また、他のページについても検索流入が発生しており、

ブログを読む → この記事を書いたサイトがどういうサイトなのかを認知 → ついでに音楽もチェックしてみる

という過程を踏んだ上で音楽に関するページへのアクセスも確認できている。

結果的に検索流入0だったサイトが今では一切宣伝をしていなくとも、毎日少数ながら検索流入でアクセスを得られている。

ロングテールキーワードを狙う理由

このように企業サイトが参入している分野でも、少しニッチなキーワードで検索流入を狙うことで検索流入を獲得することは可能だし、個人開発によるサービスなら失敗しても傷は浅く済むケースも多いので、あえてニッチな分野を狙い撃ちしたサービスを手掛けてみるのは戦略としてありかと思われる。

というか、企業にはやれないニッチなサービスを積極的に狙っていける、というのは小規模でのサービス開発における特権の一つだと思うので、ここは活かしていったほうが良い。

居酒屋の口コミサイトを作るより、居酒屋で出されるお通しのみを対象にしたレビューサイトのほうが、勝機をつかめる可能性は高い、ということだ。

サービス運用にかける費用を試算する

マネタイズは大事だが、もっと大事になってくるのがサービスの運用費である。
開発者自身がどれぐらい許容するかに完全による部分だが、まったくもって使われないサービスなのに、毎月確実にお金だけが出ていくのでは精神的にきついものがある。

毎月の出費や、ドメイン代など、払われる出費についてはスプレッドシートでもなんでも良いので、書き出して可視化しておくことがまず大切。
毎月・毎年どれぐらいお金がでていくのか管理することから始めるのが良い。

ちなみに最小だとドメイン代だけに留めることもできる。
ドメインは特別に高いものでなければ、だいたい年間１０００円ぐらいかと思うので、それぐらいの運用費に抑えることは現実的な選択肢となる。

サービス運用費を削減する手段としてのNetlify

その場合、具体的には Netlify などを用いて運用する形となる。
例えばNetlify上で、ReactやVueなどを用いて、フロント側だけで十分に魅力あるコンテンツを作るという選択肢は現実的だ。
(ただしある程度バズったりすると、Netlifyの無料枠だと辛くなるかもしれない。が、そのタイミングで別の仕組みに移行するでも良いと思う。)

いずれにせよ、そのようなスタイルで広告やアフィリエイトなどで収入を得る、というのは現実的に可能だが、まとまった収益を発生させるとなると、PVがある程度集まらないと現実的ではない。

参考として下記のページを貼らせていただく。
100,000PV/月 達成できた場合、広告だとどれぐらいの収益になるかが参考になる。

56. 祝50,000PV/月　Googleアドセンスならどのくらい稼げるの？
月間10万PVで収入はどれくらいになるのか？(月間10万PVを収入に置き換えると…)

サービス運用費を削減する手段としてのVercel

あとは最近 Vercelも使い始めたが、こちらも選択肢としては強い。というか、使ってみて正直感動した(今更)。
Next.js を使うなら、親和性も非常に高いし、Incremental Static Regenerationなどを使うことも考えるならVercelはかなり強い。
実際、自信が運用している下記のサイトも、Vercelに乗り換えた。
(移行のタイミングでIncremental Static Regenerationも導入した)

Dig Music - Dig Musicはレコメンドエンジンを使用せず、完全にランダムな形でユーザに新しい音楽を紹介するWebアプリです。

サービス運用費を削減する手段としてのHeroku

動的なサイトも選択肢に入れるとなると、 Heroku などが上がってくる。
Herokuは無料プランだと、サーバが寝てしまうので流石にきついが(勿論、サーバが眠らないように迂回する方法はあるだろうが...)、月7ドルでとりあえずは運用できるレベルになる。

あとこれは完全にサービスの構成次第になるが、例えば無料プランでも、最初のアクセス時はフロント側だけでコンテンツを完結させるようにして、その間に裏でサーバを起こしておく、ユーザが何らかの操作をしてAPIリクエストが飛んだときにはすぐにレスポンスを変えるようにしておく、、、などの設計でも挑むのもありではないだろうか？
(と書きながら、自分でこれを実際に試していないので、今度検証してみる)

ただ、やはりインフラ周りをあまり考えずに、サクッと git push heroku masterとやってデプロイまでいきなりやれてしまうので楽だ。
インフラを色々と考える必要がないのであれば、魅力的な選択肢だと思う。
最初無料でデプロイしてみて感触を探るとかの、betaテストなどにも大いに活かしていきたい。

Herokuで独自ドメイン&SSL対応を行った上で、完全に無料でウェブサイトを運営する方法については下記に書いたので、興味のある方は参照してみてほしい。

【Cloudflareを用いた独自ドメインのSSL対応】Herokuで無料で独自ドメインありのウェブサービスを運用するための手順

他に Firebase なども選択肢として上がってきそうだが、こちらは全く素人なので、何も書けない。
(近々使ってみるか...)

AWSのクラウド無料枠

あとは AWS も良い。特にクラウド無料枠。
個人開発などの規模がそこまで大きくないサービスで AWS に乗っかるのは個人的にオーバースペックかと思うが、AWS Lambdaなどを始めとするサービスは使いやすい。しかも無料枠があり、これがまた十分な量が用意されている。

私はずっと AWS - Lambda を用い、自宅のSlackと連携させた形で毎日ちょっとした処理を動かしている。動くのは毎日一回だけなので、無料枠を突き抜けることはないが、きっちり仕事はしてくれる。管理もしやすい。言うことなしだ。

Oracle Cloud Free Tierも魅力的

AWSと競合する立場のサービスとして存在するOracle Cloudも魅力的な選択肢となっている。

Oracle Cloud Free Tier

詳細は上のページを見てほしいが、VMインスタンスを一月丸々動かしていても無料というのはかなりインパクトがあるのではないだろうか？

私は最近(2022年2月)になってようやく触り始めたのだが、AWSを触っていれば何となく分かるような感じになっているし、チュートリアルのページなどもわかりやすかったので、第一印象は良い。

~~このまま色々と試してみようと考えている。~~
いろいろ試してみて良さそうだったので、トライアルから有償アカウントにアップグレードし、実際に自身のサービスでOracle Cloudを利用していた。

だが、突如Oracle Cloudアカウントが停止されるという事態となってしまった。。。
この問題については下記にまとめているので、そちらを追ってほしいが、これを書いている現在、なぜ停止になったのか原因ははっきりしていないし、アカウントも停止したままである。

Oracle Cloud Infrastructureのアカウントが突然停止したので状況や調査内容を書いていく

Oracle Cloudを使っていてかなり好感触だったので今回のことは非常に残念であり、有償契約にも関わらず急にアカウントが停止となり復旧の道筋が現在も見えていない、という状況では、あまり人には勧めにくい状況となってしまった。
(もちろん停止になった原因が自身の落ち度であった、という可能性はある)

Google Cloudの無料利用枠

Google Cloudも期間限定での無料クレジットと毎月の上限枠までであれば無料で試せる枠が用意されている。

特にこの無料枠の方は上にも書いたOracle CloudのFree Tierにも通じる内容なので、個人開発関連ではとても重宝すると思う。

無料枠については下記のページが参考になる。

Google Cloud - 無料利用枠と無料枠

これはどのサービスでも同じことだが無料利用枠内に収まる範囲で利用する際は、無料枠で収まるかをちゃんと確認した上で利用することが必要となる。

私はGoogle CloudのCompute Engineを無料枠に収まる範囲で利用しているが、インスタンス作成画面ではこうすれば無料で収まる構成になる、という表示は特に出ていない。

一応利用料金に関する月間予測表示はあるのだが、そこは無料表示にはならず、あくまで無料利用枠が適用されていない金額が表示されるらしい。

ここについてはしっかりと検証しきれていないので誤りが含まれている可能性もあるが、そのようなわけで、もし無料利用枠で収まる範囲で利用したい場合は、利用開始前に公式ドキュメントを読み込んだり、似たようなユースケースでの記事をインターネットで検索して調べてから実施したほうが良いかと思う。

コード公開が前提 + Node.js環境ならGlitchという選択肢もある

無料枠の場合、プロジェクトは公開設定のみとなるのと(コードの内容が公開される形となる)、作成したサービスがNode.jsを使っている場合、という非常に限定的な環境での選択肢となるが、Glitchというサービスもある。

Glitch - Pricing

Glitch自体はNode.jsに特化したPaaSで、ブラウザ上だけで完結して作業ができる。
(といっても私はまだそこまで使い込んではいないので、あくまで世間一般の評判となるが)

ただ、ブラウザ上でサクッと作業を完結できるので、コードは公開しても問題ないようなお手軽なアプリならGlitchという選択肢もありかと思われる。

勿論有料版はプロジェクトのプライベート設定も可能なので、Herokuのような本格的なサーバアプリ構築も可能かと思われる。

少し使ってみたがサービスとしてのデザインが可愛らしく、カジュアルにアプリ開発ができるサービス、という印象を持った。
ちょっとしたサービスをNode.jsでサクッと書いてデプロイする、とかやれそうな雰囲気。

ここに書いた各サービスのPricingページ

こちらに書いたクラウドサービスのPricingページの一覧。

追記: 無料で使えるクラウドサービスについて

Publickeyさんが、とても良い記事を公開してくれていたので、追記。
ひと通り読んでみたが、とてもわかりやすくまとめられており、いかに無料でサービスを運用していくか？良い指針になると思ったので、こちらにも貼らせていただきます。

ずっと無料で使えるクラウドの「Free Tier」主要サービスまとめ。2020年版

追記２: クラウドサービスの料金ページ一覧を作った

はてなが提供するはてなアンテナという機能を利用して、クラウドサービスのpricingページに関する一覧を作成した。
はてなアンテナはページの更新があるとメールでお知らせしてくれたりするサービスだが、はてなアンテナ自体のページでも更新日時などがわかるので、料金体系に変更が生じた際などに検知できる...かもしれない。

はてなアンテナ - クラウドサービス価格ページ

利用規約・プライバシーポリシーについて

ウェブサービスを運用していく上で必須となる。が、腰が重くなりがちなのが、この利用規約とプライバシーポリシーだ。

利用規約やプライバシーポリシーが用意されていない個人開発サービスを時折見かけることもあるが、マネタイズを考えるならこれらは必須となるし(例えば Google AdSense の申請をするときはプライバシーポリシーが必要だったりする)、マネタイズのことを考えた上でWebサービスを作成するなら、当然これらは必須の項目となる。

が、これらの記述を考えるのは敷居が高い。

そもそも法律のプロでもないし...と私も思っていたが、とりあえず下記の書籍を購入して、最初から最後まで読み返すことで心の負担がだいぶ減った。

【改訂新版】良いウェブサービスを支える「利用規約」の作り方

あとは、

自身のサービスがどのようなユーザ情報を扱うのか？
ユーザ同士の交流が発生するのか？
サービスの中で金銭のやり取りが発生するのか？

など、サービスに必要となる要素を書き出して、用意すべき規約の文章を作るようにする。

そのため、サービスの構成を固める段階で、これらの内容についても固めておくのが一番時間を無駄にしなくて良い。

ここについては解説しているサイトもあるし、実際に様々なウェブサービスの利用規約なりプライバシーポリシーをチェックして自分の場合だったらどうするだろう？と考える。

もしサービス内部でユーザ情報を取り扱いつつ、三者間同士で金銭のやり取りが発生したり、何らかの債務が発生するような、本格的なサービスを作成するなら、ウェブサービスの規約確認を引き受けてくれる弁護士などに依頼したほうが良いだろう。

と、やはり色々と考えることは多いが、マネタイズを考えるならここは避けて通れない道なので、諦めてまずは上の書籍を読み込むことをおすすめする。

自分の場合は読むだけで、少し敷居は下がった(実体験)

Googleアカウントは専用のものを作成するか？

これは作る規模による。

小規模なら個人で使っているGoogleアカウントの範囲でまかなえるので作成しないが、例えばある程度運用も含めて、しっかりとした規模でやっていくならGoogleアカウントを専用のものとして、あらかじめ取得しておく。
ここで取得したGmailアドレスを使って今後Slack,Twitterなども作成することになるし、それ以外にも利用するサービスなどはこちらのアドレスを用いて登録することで、管理を楽に行えるようにしておく。

開発編

スタイル

スタイルはいくらでも考えられる領域なので、もう何も考えずに下記の選択肢を検討する
例えばwater.cssで基本的なレイアウトを組んで、styled-componentsで細かく調整とかもする。
(上から下に行くほど、基本的にはスタイルを組むのに対して工数をかけていくようなイメージ)
※BULMA, Bootstrap, Materialize は横一線に並んでいるイメージ。どれもBootstrap的な使用感。

water.css
BULMA
Bootstrap
Materialize
styled-componentsなどを使って自分で組む

作成する場合、大抵はスマフォ対応する。
ただ、レスポンシブ対応を１からやっていたらモチベーションが尽きるので、よほどのことがない限りは絶対にやらないと決めている。
(当然ながらスタイルのこと以外にも考えることは山ほどあるのだ)

アプリを作っていて、俺いつもおんなじデザインだな…と思ったときに、スタイルは差し替えるようにする。

HTML5 UPという選択肢

また、そもそもスタイル自体組むのも面倒だと思ったら、HTML5 UP などのテンプレートを適宜利用する。

この手法は 時間をかけずにそれっぽいサイトを作る という観点から見ると、かなり有用だということに気づいた。
ライセンスの内容を確認した上で利用する必要があるが、一応下記にもライセンスの概要をメモとして残しておいたので、気になる方はチェックしてみてほしい。
また、使用を検討するなら、公式のLicenceページにも目は通しておいてほしい。

【2020年版】ペラサイトを半日で作って独自ドメインでリリースまで行う方法(費用はドメイン代のみ) - HTML5 UPのライセンスについて

HTML5 UP - Licence

私が HTML5 UP を用いる場合、たいてい画面側はReactで書いているということもあり、Reactで開発できるようにソースコードを書き直す。
ソースコードの修正はそれほど大変ではないし、テンプレートによってはReactとjQueryが同居することを許容する必要もあるが、個人的にはそれ以上のメリットがあると思うのであまり気にしない。

というか、サイトのパフォーマンスに問題がでなければ、個人開発という状況なら目をつぶってもよいかと個人的には思っている。
(流石にチーム開発でReactとjQueryが同居している状態というのは、解決すべき問題、という認識になるだろうが ← 経験済みですm(_ _)m)

使用する画像とかロゴとか

商用利用無料なところから選ぶ。例えば下記の様な選択肢がある。
（利用する際は 利用に関する説明 は一読しておく。例えば、いらすとやの場合、商用利用には点数制限があるなど、制限を設けているケースも有る)

画像加工は無料で使えるCanvaがおすすめ

画像は商用利用無料なものをそのまま使う方法もあるが、どうせなら自分なりにアレンジして使いたいもの。
(他にも同じようにそのまま利用しているサイトなんか見つけたりしたら、興ざめしてしまうだろう)

画像の加工やロゴの作成などでおすすめの無料ツールに Canva がある。

Canva

無料から利用できる割に、デザイン初心者にも優しい設計となっており、とりあえず動かしていれば、それなりなデザインが出来上がるというスグレモノ。

デザインのことはよく分からないが、時間をかけずにそれなりのデザインのロゴや画像を作りたいというニーズにはかなりハマるツールなので、個人開発者にもおすすめできる。

フレームワーク

フレームワークはだいたい下記の構成が多い。

なお、基本的にはサービスを作るまでの時間をいかに短くするかを考える。
とりあえず形だけ作ってリリースして、後々整理していくという手順で作っていくことが多い。

また、自身が作るものは基本的にWebアプリのため、そういう領域のものしか書かない(書けない)。

追記: 最近CLIツールもよく書くようになったが、CLIツールだとマネタイズの方法論を見つけられていないので、いずれにせよWebアプリ前提で書いていく。
(CLIツールの場合だと、思いつくのは開発者に対する寄付などになると思うが、これは収益化の仕組みを作る、というよりは利用者の善意に依存するので、一旦マネタイズという観点からは除外した)

フロントエンド

Next.js
- これ一つでReactを用いた基本的な開発はすぐに始められるので、選択肢としては最初に頭に浮かぶことが多い
- SSRやAMP対応などもやりやすいので、Webアプリを作るための道具としてかなり重宝している

バックエンド

Express
- 自分自身は Node.js をよく触っているので、サーバを構築するときは Expressに手を伸ばす。
- koa.jsや fastify などのオルタナティブもあり、試してみると普通に良い感じなのだが、なんだか慣れているというだけで、ついつい yarn add express と打ってしまう。。
Flask, Bottle
- サーバ側の処理で Python を使ったほうが楽にかけそうだと思ったときは Flask か bottle が選択肢に入る。基本的にシンプルな作りになっているので、道具として使いやすい。
- 例に上げると、機械学習を使った処理のときなどだ。
- なお、 Django は昔使おうとしたことがあったが、フルスタックフレームワークを使うなら、 Ruby on Rails でいいか…と思い、結局ちゃんと触れていない。
Ruby on Rails
- 上にも書いたが基本的なWebアプリを作るなら、いまだにありだと思う。自身の場合はもうクローズしてしまったが、過去にサウナのレビューサイトを作っていたことがあり、そちらはRuby on Railsに完全に乗っかった形でサイトを構築した。
- 基本的なログインやメール認証周りなどもやりやすかったし、何より実績が豊富なのでググればどんなやり方でもとりあえず出てくるイメージ。
- ~~ちなみに最近はあまりRuby書けていない。。~~
- 最近数年ぶりにRuby on Railsを触る機会があり触ったところ、その生産性の高さに改めて驚かされた。サクッとテーブル作って、サクッと画面側作って、とりあえずプロトタイプ作る、というのところまでの生産性が、他のWebフレームワークに比べて、かなり高い。特に Active Record の完成度の高さを改めて思い知らされた。Ruby on Railsはレールから外れるときの辛さがネガティブな印象として自分の中に残っていたけど、あまり特殊なことをしなければ、Railsという選択肢は全然ありだなと思った。
gin, echo
- 最近Goをよく触っているので、これらも選択肢に加えた。基本的にミニマルな感じなので、express的な感覚で触れる。あまり特徴などを語れるほど触り込めてはいないので、余計なコメントはしないでおく。(ここについては後ほど追記していけたらと)

メタタグ

Webアプリを作る上で個人的に面倒くさいと思っていたのが、メタタグ周り。
後回しにしがちだが、ちゃんと作らないと人に共有するときに微妙な印象を与えてしまうので、しっかりと整えたいところ。
と思っていたところに、良いツールを見つけた

Meta Tags

これは必要なメタデータを入力すれば、それに応じたメタタグを出力してくれるというもの。
例えばTwitterにリンクを載せたときに、どういう見た目になるかを確認しながら作れるので、かなり便利。

追記: meta tagを生成するためのCLIツールを作った。

そもそもメタタグを生成するのにCLIで生成するのは微妙なので、メタタグを生成するためのWebツールを作りました。下記の 追記、その2 を参照ください。

上のサイトでも便利なのだが画像を実際にアップロードするのではなく、画像自体は画像のパスだけ渡すのでもよいのでは？とふと思った。また他のメタタグも一緒に生成したいという気持ちがあり、それだったら自分で作るかと思い、
ターミナル上でサクッとmeta tagを出力させるGo製のCLIツールを作った。

shinshin86/metatag-gen

Meta Tagsのようにプレビュー表示はできないし、使い勝手向上への余地もまだまだあるが、何も考えずにこれを使ってmeta tagを生成すればOKだよね、と思考停止できるようになるところまでをゴールとしている。

Go環境がないケースでも対応できるよう、各プラットフォームごとのバイナリを用意している。
下記のページから使用したいプラットフォーム向けのバイナリをダウンロードして、コマンドライン上から叩けば実行可能。

Releases - shinshin86/metatag-gen

追記、その2: Webで簡単にメタタグを生成できるツールを作って、公開した

HTML Generator - HTML GeneratorはWebページを作成するために必要となるメタタグなどのHTMLを簡単に生成できるWebツールです。

Web上でサクッとメタタグを作りたいので、Web上で行えるものを作って公開した。
メタタグとして必要な情報を入力して、あとはコード内をクリックすれば、生成したメタタグ(HTMLタグ)をクリップボードにコピーできる。

自身が個人開発時によく使うCSSフレームワークにも対応できるようにした。
例えばBootstrapで開発を行う場合、 CSS FRAMEWORK という項目でBootstrapを選択すれば、Bootstrapを選択するために必要な記述がHTMLタグに追加される。
これらの内容は各CSS フレームワーク内のgetting started的なページにある記述を参考にしている。

自分がよく使う範囲のものしか設定できていないし、上のGo製のCLIツールのように、pugやslimなどにも対応していきたいところ。だが、一旦形になったのでこちらにも書いていく。

このCSSフレームワークも追加してほしい、このツール使いにくい、などありましたら、遠慮なくコメント頂けたらと思います。

favicon

上のメタタグ周りとは別に favicon の生成なども面倒くさいものの一つ。
こちらも下記のツールを使うと、モバイル含め必要なものを一気に作成できる。
(各サイズごとの画像も生成してくれるので、だいぶ助かる)

Favicon Generator for real

faviconに用いたい画像をアップロードすれば、必要な画像とメタタグを出力してくれる。
manifest.json も出してくれるので、PWAのような使わせ方をしたいときにも対応できる。
(site.webmanifest というファイル名で生成される)

i18n対応

作ろうとしているサービスが日本語圏限定なら関係ないが、日本語圏以外のユーザも視野に入れたサービスを作るならi18n対応は必須となってくる。

このi18n対応についてだが、自分の場合、作ろうとしているサービスが小規模なものなら、use-mini18nを利用するようにしている。
これは自身が作ったnpmライブラリで、あくまでReactを用いたWebアプリ限定となる。
こちらについては以前Qiitaにも書いたので、もし興味がある方はこちらを参照していただけると幸いです。

サクッとi18n対応を行うためのReact hooksライブラリ、use-mini18nを作った。

上のポストにも書いたが、use-mini18nで収まりきらなそうな規模なら、react-i18nextやreact-inltを使うようにする。
(react-intlはFormatJSのモノレポに含まれる形に変わったようだ)

なお、これらはあくまでReact限定になる。

SEO周りの観点から考えると各言語ごとのSSRは必須となるので、今だったらNext.jsを使い、SSR対応して各言語ごとの検索流入を狙っていく形になるかと思う。
手前味噌で恐縮だが、Next.jsを用いた場合、use-mini18nでもここらへんの対応はサクッと行えるようになっているので、もしi18n対応 + SSRであまり工数をかけたくない場合は検討してみても良いかもしれない。

運用編

Google アカウントを作成する

まずはサービスを立ち上げる前にやっておくこと。
(と最初書いていたが、規模が小さければ、これや、このあとに書くSlackのワークスペースの作成は必要ない。また、Google Analyticsの設定などは既存のアドレスで行う。)
Google

まず、サービスに関連するGoogle アカウントを作成する。
Gmailのアドレスも作成できるし、後述するが、Google AnalyticsやGoogle Search Consoleも使用するので、一番最初に作っておくと便利だ。

そしてGoogle Chromeに作成したアカウントを紐づけることで、そのサービスに関する作業をChrome内で簡潔化することができる。
個人のアカウントとも混ざらないし、明確に管理を分けれるので、いろいろと楽である。

サービスに関するSlackワークスペースを作成する

作成したサイト・サービスに関するSlackのワークスペースを作成する。
上(Google)で作成したGmailアドレスでワークスペースと自身のアカウントを作成し、もし他にメンバーがいれば、その方も招待する。
Slack

Slackを初めて触る方は最初戸惑うが、「絵文字でリアクションできるLINEだよー😃」と適当なことを言って紹介する。
(最近はもう国内でもかなり浸透しているので、あまりこういうケースは少ない)
必要に応じてSlackのIncoming Webhooksや後述するStatsbotなどを使って様々な通知を行うようにする。

Google Analytics

Webサイト・サービス・アプリをやるなら必須のサービス。
Google Analytics

まだ私自身はそこまで使いこなせていないが、とりあえずよく見る指標だけをまとめたレポートを設定するなどして、作業の簡略化を図っておく。

クリックイベントの検知などを取得したいケースなど、場合によっては、Google Tag Managerの設定もするが、現時点で必要性を感じなければそこまでやる必要はない。
Google Analyticsとこのあとに書くGoogle Search Consoleの設定だけすれば問題ないかと思う。

Google Search Console

こちらもWebサイト・Webサービス・Webアプリをやるなら必須のサービス。
Google Search Console

自分のサイトがどれぐらい検索結果に表示されているか？
どういう検索クエリで自分のサイトへの流入が発生しているか？
など、検索流入に関するデータを集めることができる。

また、他に関わっているメンバーが居る場合は毎日Slackに通知もさせるようにしておくとメンバーのモチベーション維持にもつながるし、アクセス上がってきたじゃん！とかポジティブな会話もできて、なかなか楽しくなるし、プロジェクト感が出てくる。
というわけで、Slackに通知させるためのStatsbot。

Statsbot

ざっくり書くとGoogle AnalyticsのレポートをSlackに通知してくれるツール。
Statsbot

設定も超簡単なので、手間かけずにやれるし、毎日決まった時間にレポートを投げるように設定しておくと、日々進捗が簡単にわかって、とても良い。

ちなみに、StatsbotのSigninは基本的にSlackアカウントでログインするようにしている。
また設定は下記のポストを見て行っていた記憶があるので、参考がてら貼らせていただく。
GA(Googleアナリティクス)のレポートを自動で毎日Slackに通知する方法

最近いじった際にインターフェースが見やすくなっていて使い勝手も向上していたので、好印象。

Twitter

サービスの公式ツイッターアカウントを作ってつぶやかせる。

Wordpressで立ち上げたサイトで、記事更新のタイミングでTwitterにも通知させる場合などはWP to Twitterを使う。

一つ問題点なのは、TwitterのAPI Key取得が面倒くさいこと。
(これについては、別項目としてAPI取得方法を後ほど書き出す: TODO)

また、WP to Twitterの設定方法などは下記を参考にしてやったと思うので貼らせていただく。
更新通知をいち早く！記事公開でTwitterに自動投稿できるWordPressプラグイン「WP to Twitter」
ただ、Twitterアカウントを作っても、ある程度発信力がないと意味なかったりするので、そこらへんは別途どうしていくか考えていく必要あり。

運用編のまとめ: 基本的にはGoogleとSlackを中心において管理していく

このポストを書こうと思ったそもそもの目的が、自分が新たにサイトをリリースした際に、やるべきことをWeb上にまとめておきたいというものだったので、新たな方法や、より良いやり方が見つかったら随時アップデートしていく予定。

(まとめとして)自分の運用方針としては、

通知が必要な情報はなるべくSlackに送るようにする
自身のプロジェクトで利用しているサービスなどは基本的に作成したGoogleアカウントに紐付けるようにする
そのGoogle アカウントでログインしたGoogle Chromeがあれば、作業は完結できる状態にしておく

というようなルールを持って動くようにしている。

もちろん例外はあるが、なるべくこのルールを守ることで無駄なことに頭のリソースを使わないで済むようになる。

Slackに通知させれば、出先でも気付けるし、Google AnalyticsのiPhoneアプリとかも複数アカウントでの切り分けが簡単なので、ストレスは少なくて済む。

ちなみにSlackのIncoming WebHooksは、AWS - lambdaなどのサービスとの連携もしやすいので、色々と必要なデータを通知させる用途で、かなり重宝する。
(ここについてもセットアップ方法などを別項目で書き出しておく: TODO)

あとはGoogle Formsと組み合わせたりとか。
手前味噌だが、下記に自身が以前Qiitaに書いた記事を貼らせていただく。
Slack + Google Forms (Google Apps Script)を組み合わせて、およそ10分でフォームの回答結果をSlackに通知させる設定を行う