🍨
育休中の私が1週間でNotion使ってWEBサイトを公開した話
こんにちは。4月の育休復帰に向けてメルカリ社内転職中のまちるだです。(以前所属してたチームがなくなり、自分で復帰先見つけなきゃなの!)
普段は育児中心の生活ですが、1年前からフリーアジェンダという元メルカリのHikaruさんとYamottyの2人がやってるPodcastのお手伝いをしています。(ある日LINEでお誘いもらった)

2020年1月にスタートし、約1年で122本公開、総再生回数は約17万回、総再生時間は27,700時間 (※一部推計)という人気Podcastです。
今日のサイト作成の話は、1週間ほど前のYamottyの一言から。

ということで、最近Notion触る機会も増えていたので、いっちょLP作りを頑張ってみることにしました。
完成したサイトはこちら
前提
- Notionは普段から主にToDoリストで愛用中
- HTMLとCSSはProgateやったので、なんとなくわかる
- 子育て中でもあり、自分の自由時間はほぼ朝の数時間
- superもanalyticsもstripeも全く触ったことがない
- いざとなったらYamottyに聞くけど、なるべく自分で調べて頑張りたい意気込みだけはある
超初心者の私でもなんとか公開にたどり着けたのは、インターネット上でやり方をまとめてくれた人達がいたからでした。その恩返しがしたいと思って、私もこのまとめを書いています。プロダクト界隈の方からしたら、ビックリするくらい初歩的なことも含まれていますが、どうかご容赦ください。
目次
tl;dr1. notionでページ作る2.superのアカウント取得3. 独自ドメインの取得4. super上でドメイン設定する5. 忘れちゃいけないのが、子ページでもURL設定が必要!6. superでサイトの詳細設定やる7. アナリティクスの設定8. CSSの設定9. stripeアカウントの作成10.stripeで作った商品をnotionに貼る11.気を取り直してbuy me a coffeeを貼る12.最後に、今回の経験に感謝を!求む!JavaScriptを上手くNotionで表示させる方法
tl;dr
- Notionすごい
- superもすごい(エンジニアリングのスキルがなくても、それっぽくサイトが作れる)
- stripeというか決済周りは初心者だと全体像を把握するのが大変。stripeは日本語かつ初心者向きのドキュメントがほぼない
- 美味しいアイスが食べたい
- 自前決済を断念して超悔しいので、誰か教えてくれませんか?
1. notionでページ作る
ここでは、基本的なnotionの使い方の説明は省きます。私はスワンさんの動画で基本的な動作を学んだり、使い方のユースケースとしてはフリーアジェンダでも何度かご紹介しているので、良かったらお聴きください。
2.superのアカウント取得
3. 独自ドメインの取得
superのアカウント設定と同時並行で、独自ドメインも取得しました。実はドメイン取るのって昔から憧れがあったんですよね。私はお名前.comで取得しました。年間数千円程度です。
4. super上でドメイン設定する
私はこちらのサイトを参考にさせていただき、何度も何度も読みました。このサイトの通りにやったらDNS設定まで、なんとか出来ました。
その後お名前.comから「SSL証明書発行しないと危険です!数万円払ってください!」と連絡がきてビビっていたのですが、Yamottyに聞いたら「いらない!notion自体が既に対応してるから!」とのことで、一安心しました。いざとなった時に、質問できる環境は、思った以上に心強いと感じました。
5. 忘れちゃいけないのが、子ページでもURL設定が必要!
ページ1枚だけだったら上記設定で事足りるのですが、私達の場合はメンバーそれぞれの紹介ページと決済完了後のページがあったので、そのページのURL設定もやりました。↓こんな感じ

見よう見まねでしたが、なんとか設定できました。これはURLのセンスが問われるなと感じました。
6. superでサイトの詳細設定やる
次にサイトの詳細設定です。favicnはcanvaで256×256pxで作成してアップロードすれば事足りそうです。あとは、サイトの説明文を入れたりしました。

7. アナリティクスの設定
Googleにログインして、アナリティクスを開きます。
【google analytics 設定】で検索すると沢山解説サイトが出てくるので、見ながらやりました。アナリティクスの画面で取得したコードをそのままsuperの管理画面(Snippet injection)にコピペすると完了です。
アナリティクス設定までは出来ましたが、ここからどうPDCAを回していくかは良くわかっていません。自転車は手に入れたけど、乗り方も分からず行きたい場所もない状態。今後頑張りたいところです。
8. CSSの設定
Yamottyのサイトを見ていたら、アイコンがオシャレじゃありませんか。どうやるんだろ?とつぶやいたら、先生が教えてくれました。

コードテンプレが用意されていたので、カラーカードなど多少触るだけで設定が出来ました!去年の夏にprogateでCSSを学んでいた自分に感謝。progateは無料枠でも十分に学べるので、IT企業で働く人は全員学んだ方が良いと思います。
Progate
さてここまでで、Notionの設定はほぼ終わりました!次は決済です。自分の中で一気にハードルが上がりました。決済はマスト機能ではなかったのですが、今後のコミュニティ管理を自分たちでやりたかったこと、決済サービスを触ってみたかったことから、挑戦してみることにしました。
9. stripeアカウントの作成
Yamottyがstripeと言った時点で、ほぼstripeのつもりでしたが、念のため他の決済サービスも検討しました。
最終的に、決済手数料の安さとユーザーの決済のしやすさ、私が触ってみたい&FREEAGENDAっぽいという理由でstripeにしました。
アカウント作成自体は簡単です。商品作成も割と簡単。

この時点で、どうやってnotionと連携するんだろうと調べて、当初はこれを考えてました。
- servicebot
- Stripe上の商品をNotionで表示出来るサービス。テストがうまくいかなかったのと、月25ドル発生するので断念
- automate.io
- →Notion APIが未提供なので、つなぎこみ出来ず…
- apption
- stripe連携がなかった。ただ色々notionに機能を追加したかったら、使えるかもしれない
最終的にstripe checkoutというめちゃくちゃ最高なサービスがあることがわかったのですが、ここに至るまでに時間がかかりました。最初にもっとstripeの全体像を把握しておくべきだったと反省です。またstripeの開発者用ページも読み進めたのですが、ほとんどが英語でした。DeepLが大活躍しました。
10.stripeで作った商品をnotionに貼る
ここが本当に最難関!結果的にyamottyの一言で解決したのですが、このnoteで一番伝えたいのはここかも。本当にドキュメントがなくて、手さぐりでした。以下は私なりのやり方です。→と思ったのですが、リンクが24時間でセッション切れを起こして断念しました。備忘録的に残しておきますね。悔しい😭
10.1 商品画面の価格横のからを選択(JavaScriptが生成されます)

10.2 一旦superの管理画面に貼る
10.3 公開ページからstripeに遷移されることを確認した上で、遷移後の画面のURLをコピペする
10.4 コピペしたURLをもとのnotionに貼る
あーら簡単、5分で終わる作業です。私はこれを解決するのに24時間かかりました。24時間の間にインラインスクリプトでむりやりHTMLとくっつけて、それをApptionってやつでNotionに埋め込めるHTMLに変換して、みたいなのをひたすらグルグルしてました…あとはこちらのサイトを見てGoogle Tag Manager使ってトリガー使う方法も試したのですが、上手くいきませんでした。
11.気を取り直してbuy me a coffeeを貼る
これの通りにやりました。ちなみにbuy me a coffeeの売り上げはstripe連携できるので、サポート料金は合算で受け取れるのが地味に便利そうです。あとアイコンが可愛すぎる。
ガイドの通り一瞬で出来ます。stripeで迷子になってた私からすると、これは目を瞑ってでも設定出来る優しさでした。
12.最後に、今回の経験に感謝を!
- 機会をくれたフリーアジェンダの2人(困った時に助けてくれたYamotty、デザインセンスなさすぎる私のために、サイトのページ構成作ってくれたhikaruさん)

- 私がサイトづくりに夢中になってるのを見て、積極的に1人時間を生み出してくれたパパ
- フリーアジェンダいつも聴いてくれている皆さん
ということで、ちゃっかり自分のbuymeacoffeeのアカウント作ったので、「まちるだ頑張ったじゃん、アイス食べな」という方は右下のコーヒーマークから1ドルよりお布施をお待ちしてます♡
求む!JavaScriptを上手くNotionで表示させる方法
stripe上でJavaScriptのコードが生成されるので、それをsuperのsnippet上で貼ると、表示はされるのですが、サイトの左上に表示されてダサい感じになります。これを上手いこと、ページ下位の良さげな場所に設置したいんです。どなたか私に解決方法を教えてもらえないでしょうか?切実なお願いです。TwitterでDMもらえると嬉しいです。(素直にNotionのAPI公開を待つ所存ですが、何とか頑張りたい気持ち)
