🍨
育休中の私が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 商品画面の価格横の
・・・からCheckout スニペットジェネレータを取得を選択（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公開を待つ所存ですが、何とか頑張りたい気持ち）
