🍨

育休中の私が1週間でNotion使ってWEBサイトを公開した話

こんにちは。4月の育休復帰に向けてメルカリ社内転職中のまちるだです。(以前所属してたチームがなくなり、自分で復帰先見つけなきゃなの!) 普段は育児中心の生活ですが、1年前からフリーアジェンダという元メルカリのHikaruさんとYamottyの2人がやってるPodcastのお手伝いをしています。(ある日LINEでお誘いもらった)
notion image
2020年1月にスタートし、約1年で122本公開、総再生回数は約17万回、総再生時間は27,700時間 (※一部推計)という人気Podcastです。
今日のサイト作成の話は、1週間ほど前のYamottyの一言から。
notion image
ということで、最近Notion触る機会も増えていたので、いっちょLP作りを頑張ってみることにしました。
完成したサイトはこちら
前提
  • Notionは普段から主にToDoリストで愛用中
  • HTMLとCSSはProgateやったので、なんとなくわかる
  • 子育て中でもあり、自分の自由時間はほぼ朝の数時間
  • superもanalyticsもstripeも全く触ったことがない
  • いざとなったらYamottyに聞くけど、なるべく自分で調べて頑張りたい意気込みだけはある
 
超初心者の私でもなんとか公開にたどり着けたのは、インターネット上でやり方をまとめてくれた人達がいたからでした。その恩返しがしたいと思って、私もこのまとめを書いています。プロダクト界隈の方からしたら、ビックリするくらい初歩的なことも含まれていますが、どうかご容赦ください。
 
目次

tl;dr

  • Notionすごい
  • superもすごい(エンジニアリングのスキルがなくても、それっぽくサイトが作れる)
  • stripeというか決済周りは初心者だと全体像を把握するのが大変。stripeは日本語かつ初心者向きのドキュメントがほぼない
  • 美味しいアイスが食べたい
  • 自前決済を断念して超悔しいので、誰か教えてくれませんか?

1. notionでページ作る

ここでは、基本的なnotionの使い方の説明は省きます。私はスワンさんの動画で基本的な動作を学んだり、使い方のユースケースとしてはフリーアジェンダでも何度かご紹介しているので、良かったらお聴きください。

2.superのアカウント取得

superというサービスを紹介します。色々やるにはこのサービスへの登録は大前提です。 Turn your Notion pages into fast, functional websites with custom domains, fonts, analytics, and more. との説明にある通り、要はNotionページをカッコよくしてくれます。現在月額12ドル発生しますが、それでもお安い気がします。気になった方はこちらから登録頂けると、明日私がハーゲンダッツを食べることができます。

3. 独自ドメインの取得

superのアカウント設定と同時並行で、独自ドメインも取得しました。実はドメイン取るのって昔から憧れがあったんですよね。私はお名前.comで取得しました。年間数千円程度です。

4. super上でドメイン設定する

私はこちらのサイトを参考にさせていただき、何度も何度も読みました。このサイトの通りにやったらDNS設定まで、なんとか出来ました。
その後お名前.comから「SSL証明書発行しないと危険です!数万円払ってください!」と連絡がきてビビっていたのですが、Yamottyに聞いたら「いらない!notion自体が既に対応してるから!」とのことで、一安心しました。いざとなった時に、質問できる環境は、思った以上に心強いと感じました。

5. 忘れちゃいけないのが、子ページでもURL設定が必要!

ページ1枚だけだったら上記設定で事足りるのですが、私達の場合はメンバーそれぞれの紹介ページと決済完了後のページがあったので、そのページのURL設定もやりました。↓こんな感じ
notion image
見よう見まねでしたが、なんとか設定できました。これはURLのセンスが問われるなと感じました。
 

6. superでサイトの詳細設定やる

次にサイトの詳細設定です。favicnはcanvaで256×256pxで作成してアップロードすれば事足りそうです。あとは、サイトの説明文を入れたりしました。
notion image

7. アナリティクスの設定

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

8. CSSの設定

Yamottyのサイトを見ていたら、アイコンがオシャレじゃありませんか。どうやるんだろ?とつぶやいたら、先生が教えてくれました。
notion image
コードテンプレが用意されていたので、カラーカードなど多少触るだけで設定が出来ました!去年の夏にprogateでCSSを学んでいた自分に感謝。progateは無料枠でも十分に学べるので、IT企業で働く人は全員学んだ方が良いと思います。
 
Progate
さてここまでで、Notionの設定はほぼ終わりました!次は決済です。自分の中で一気にハードルが上がりました。決済はマスト機能ではなかったのですが、今後のコミュニティ管理を自分たちでやりたかったこと、決済サービスを触ってみたかったことから、挑戦してみることにしました。

9. stripeアカウントの作成

Yamottyがstripeと言った時点で、ほぼstripeのつもりでしたが、念のため他の決済サービスも検討しました。
最終的に、決済手数料の安さとユーザーの決済のしやすさ、私が触ってみたい&FREEAGENDAっぽいという理由でstripeにしました。
アカウント作成自体は簡単です。商品作成も割と簡単。
notion image
 
この時点で、どうやって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が生成されます)
notion image
 
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さん)
notion image
  • 私がサイトづくりに夢中になってるのを見て、積極的に1人時間を生み出してくれたパパ
  • フリーアジェンダいつも聴いてくれている皆さん
ということで、ちゃっかり自分のbuymeacoffeeのアカウント作ったので、「まちるだ頑張ったじゃん、アイス食べな」という方は右下のコーヒーマークから1ドルよりお布施をお待ちしてます♡

求む!JavaScriptを上手くNotionで表示させる方法

stripe上でJavaScriptのコードが生成されるので、それをsuperのsnippet上で貼ると、表示はされるのですが、サイトの左上に表示されてダサい感じになります。これを上手いこと、ページ下位の良さげな場所に設置したいんです。どなたか私に解決方法を教えてもらえないでしょうか?切実なお願いです。TwitterでDMもらえると嬉しいです。(素直にNotionのAPI公開を待つ所存ですが、何とか頑張りたい気持ち)
notion image