えっ！Notionってウェブサイトまで作れちゃうの！？調査して200サイトまとめてみた！

2021/3/14
Notion Meetup Kyoto #2 での発表資料です。
https://notionkyoto02.peatix.com/

【Notion で作られた国内サイト事例集】
https://www.notion.so/Notion-5279483f808c4b1183406a72afdf31a7

【スライド内で紹介させていただいたサイト】
みんなのマーケット株式会社様 https://minma.jp/
株式会社ノースサンド様 https://career.northsand.studio/
株式会社TranSe様 https://www.notion.so/your-school-8ba9451c50ce40ff938bd0b8aad34c3f
Ubie株式会社様 https://www.notion.so/Ubie-Dev-3cc3b2222c79405a8c20d5a2415ab0e2
株式会社イトーヨーカ堂様 https://www.notion.so/7b401ff149aa47a797a8f7d98a2eb87f
NTTコミュニケーションズ様 https://www.notion.so/NeWork-52ae6b3145f74176b2ee579ed9d93a42
株式会社 Channel Corporation様 https://guide-jp.channel.io/
株式会社プッシュ様 https://www.notion.so/891cdf723110434c82054f1c871917e2?v=5666efb314ae490ca8b181fa44ec782c
バーチャル雪まつり様 https://vsfp.xyz/
ナインステクノロジーズ様 https://www.notion.so/24ecfb53c576400f92e8a8c007831e27

【その他】
Notion https://www.notion.so/
けんすうさんのツイート https://twitter.com/kensuu/status/1369836142447665162
Anotion https://anotion.so/
Anotionで作られたサイト例 https://www.io-craftstudio.net/
Super https://super.so/
Superで作られたサイト例 https://appify.jp/
Typeform https://www.typeform.com/
Chilipepper https://chilipepper.io/

Transcript

1. 2021/3/14 ⽥原 聖悟 ウェブサイトまで作れちゃうの！？ 調査して200サイトまとめてみた！ って ＼えっ！ 👀∕ Notion
2. ⾃⼰紹介 • ⽥原 聖悟（たはら しょうご） • 建設🚧 × IT💻 の会社のプロジェクトマネージャー👨💼 • 業務上、タスク管理やドキュメント管理の重要性を⽇々感じる中で 
   Notionと出会う → ⼤好きになりました❤ • 「Notionで作られた国内サイト事例集🇯🇵」を作りました 
 https://www.notion.so/Notion-5279483f808c4b1183406a72afdf31a7 • 好きなもの：Notion、ねこ、ゲーム（スプラトゥーン） • Twitter：@shogocat
3. 📢 今⽇お話しすること 「Notionで作られた国内サイト事例集🇯🇵」 あなたもNotionでウェブサイトを作ろう！    Notionってなに？
4. Notionってなに？ 
5. Notionとは • オールインワンワークスペース✨ • “個⼈のメモ” から “企業のタスク管理” まで 
 1つのアプリで幅広く使える 
 夢のようなツール💪 https://www.notion.so/
6. ⽇本でもどんどん盛り上がってきている 🎊 いろいろなメディアでNotionの話題が取り上げられています！
7. 今週Twitterトレンドに載っていました（2021/3/12）
8. Notionは2021年に⼤幅アップデート予定 • 2021年 ⽇本語化予定 🎉 • 2021年 公式APIの登場によって多彩な活⽤⽅法が⽣まれる 🎉 これからますます流⾏ること間違いなし！
9. 🚩 Notionでできることを分類してみた 🏢 企業 👨💻 個⼈ ⾃⼰紹介ページ 趣味のサイト ⽇記 備忘録 TODOリスト 作業進捗管理 ホームページ 採⽤サイト 議事録管理 チームWiki タスク管理 社内向けメンバー紹介
10. 🏢 企業 👨💻 個⼈ 趣味のサイト ⽇記 備忘録 TODOリスト ホームページ 採⽤サイト 議事録管理 チームWiki タスク管理 社内向けメンバー紹介 🌐 公開 🔒 ⾮公開 ⾃⼰紹介ページ 作業進捗管理 🚩 Notionでできることを分類してみた
11. ͜ͷൃදͰ͸
    ঺հ͠·ͤΜ 
 🙅 ͜ͷ͋ͱ
    ୈষͰ
    ࿩͠·͢🙋 ͜ͷ͋ͱ
    ୈষͰ
    ࿩͠·͢🙋 🏢 企業 👨💻 個⼈ 趣味のサイト ⽇記 備忘録 TODOリスト 作業進捗管理 ホームページ 採⽤サイト 議事録管理 チームWiki タスク管理 社内向けメンバー紹介 🌐 公開 🔒 ⾮公開 ⾃⼰紹介ページ 🚩 Notionでできることを分類してみた
12. 🌐 Notionのページを公開する⽅法はとても簡単 ① 画⾯右上の Share ボタンを押す ② Share to web をオンにする 🎉
13. 🛠 ページ公開のオプション紹介 Allow editing ページ閲覧者が編集可能 Allow comments ページ閲覧者がコメント可能 Allow duplicate as template ページ閲覧者が複製可能 Search engine indexing Googleなどの検索エンジンの 検索結果に表⽰されるようにする
14. 第１章のまとめ • Notionは⾊々なことができるオールインワンツール • 2021年⽇本語化され、ますます流⾏るでしょう • 個⼈、企業それぞれで 
 🌐公開ページ、🔒⾮公開ページの使い道がある • 🌐公開ページを作るのはとても簡単
15. 「Notionで作られた国内サイト事例集🇯🇵」 
16. ここのお話をします 🏢 企業 👨💻 個⼈ 趣味のサイト ⽇記 備忘録 TODOリスト 作業進捗管理 ホームページ 採⽤サイト 議事録管理 チームWiki タスク管理 社内向けメンバー紹介 🌐 公開 🔒 ⾮公開 ⾃⼰紹介ページ
17. 企業の公開ページをまとめてみました • とある会社🏢のホームページがNotionで作られていることに 
 衝撃を受けたのがきっかけ • 「Notionってこんなことまでできるの!? 👀」と驚きました • 最初は⾃分⽤にまとめ始めた✏ • たくさんの企業がNotionでウェブサイトを作っていることに気付いた💡
18. まとめた情報を公開しています https://www.notion.so/Notion-5279483f808c4b1183406a72afdf31a7
19. （2021/3/14時点） 200サイト以上掲載
20. Notionで実際に作られているウェブサイトの分類 • 🏢 会社ホームページ • 🤝 採⽤サイト • ❓ サポートページ • 🎫 イベントページ • 📝 会社ブログ • ☀ 特設ページ   などなど…
21. Notionで作られた 素敵なサイトを厳選紹介✨
22. みんなのマーケット株式会社様 https://minma.jp/ 会社ホームページにNotionを採⽤！お知らせが頻繁に更新されている ホームページ
23. 株式会社ノースサンド様 https://career.northsand.studio/ 各種画像やアイコンにアニメーションが付いていてオシャレ 採⽤サイト
24. 株式会社TranSe様 https://www.notion.so/your-school-8ba9451c50ce40 ff 938bd0b8aad34c3f 動画がオシャレで、ページレイアウトや画像配置も綺麗 採⽤サイト
25. Ubie株式会社様 https://www.notion.so/Ubie-Dev-3cc3b2222c79405a8c20d5a2415ab0e2 内容がものすごく濃い！⼀般の求⼈票だけでは実現できないボリューム 採⽤サイト
26. 株式会社イトーヨーカ堂様 https://www.notion.so/7b401 ff 149aa47a797a8f7d98a2eb87f アプリのサポートページでの事例。画⾯キャプチャが豊富で丁寧！ サポートページ
27. NTTコミュニケーションズ様 https://www.notion.so/NeWork-52ae6b3145f74176b2ee579ed9d93a42 情報がわかりやすく綺麗に整理されている。⼤⼿企業の事例。 サポートページ
28. 株式会社 Channel Corporation様 https://guide-jp.channel.io/ 情報量がものすごく充実している。カテゴリ分けもわかりやすい サポートページ
29. 株式会社プッシュ様 https://www.notion.so/891cdf723110434c82054f1c871917e2?v=5666efb314ae490ca8b181fa44ec782c Notionでサービスの開発ロードマップを公開している事例 開発ロードマップ
30. バーチャル雪まつり様 https://vsfp.xyz/ ⼤規模イベントの各種情報をわかりやすく発信している イベントページ
31. ナインステクノロジーズ様 https://www.notion.so/24ecfb53c576400f92e8a8c007831e27 会社で利⽤中のサブスクリプション⼀覧を公開しているのがユニーク！ 特設ページ
32. Notionでウェブサイトを作るメリット • メリット多数！ • ✏ ⼿軽に更新できる • 👥 誰でも更新できる • 🎨 ⾃由に装飾できる • ✨ 情報を整理しやすい
33. ✏「⼿軽さ」はTwitterで話題になっていました https://twitter.com/kensuu/status/1369836142447665162
34. Notionと特に相性が良いウェブサイト２選 • 🤝 採⽤サイト • 👥 求⼈情報を⼈事担当者が直接更新できる • 🎨 写真や動画を埋め込んで会社の雰囲気を伝えやすい • ❓ サポートページ • ✏ お問い合わせ状況に応じてサポート担当者が素早く更新できる • ✨ 情報を整理してユーザに伝えられる
35. 第２章のまとめ • 様々な企業がNotionでウェブサイトを作っている • 🏢 ホームページ • 🤝 採⽤サイト • ❓ サポートページ など • Notionでウェブサイトを作るメリット • ✏ ⼿軽に更新できる • ✨ 情報を整理しやすい
36. あなたもNotionで ウェブサイトを作ろう！ 
37. ここのお話をします 🏢 企業 👨💻 個⼈ 趣味のサイト ⽇記 備忘録 TODOリスト 作業進捗管理 ホームページ 採⽤サイト 議事録管理 チームWiki タスク管理 社内向けメンバー紹介 🌐 公開 🔒 ⾮公開 ⾃⼰紹介ページ
38. サイト事例集🇯🇵も元々は⾃分⽤の⾮公開ページでした • 最初は⾃分だけのためのページでした🔒
39. • 予想以上の反響 💬 • たくさんのいいね、リツイート • 7,000ページビュー • 今回の登壇に繋がった 🎉 サイト事例集を公開🌐してみたら反響がありました
40. あなたの⾮公開ページも公開したら何かが起こるかも？ • ぜひ、あなたのNotionページを公開🌐してみましょう！ • 趣味のこと • あなた⾃⾝のこと • なんでもOKです • あなたが知っていることを共有すると喜ぶ⼈がきっといます 🙌 ※個⼈情報や著作権にはくれぐれもお気を付けください！
41. 「こんなページ公開して意味あるのかな？」と躊躇しなくて⼤丈夫です • １⼈でも喜んでくれる⼈がいるだけで嬉しいものです 🙌 • 私が作ったページにもありがたいコメントが寄せられました 💬 おぉ！これは参考になりそう これは驚き。 まとめていただいて ありがとうございます！ こういうのを⾒ると アイデアが浮かんでくる！
42. 第３章のまとめ • ⾮公開ページ🔒を公開🌐に変えたら反響があった • １⼈でも喜んでくれる⼈がいると嬉しい • あなたもぜひ公開してみてはいかがでしょう？
43. まとめ
44.    まとめ • Notionはオールインワンワークスペース • ⽬的に合わせて柔軟な使い⽅ができる🌐🔒 • 企業のウェブサイトに様々な形で使われている • 🤝 採⽤サイト や ❓サポートページ はNotionと相性が良い • ⾃分⽤に作った事例集ページ🇯🇵を公開したら反響があった • あなたもページを公開するときっと誰かが喜ぶはず • ページを公開したらぜひ教えてください💡 🌐
45. APPENDIX
46. Notionで作ったウェブサイトをグレードアップする⽅法 • AnotionやSuperなどのサービスを利⽤するとさらに進化します 💪 • サイトの表⽰速度アップ • 独⾃ドメインを使える • 独⾃CSSを使える • GoogleAnalyticsなどのタグを仕込める
47. Anotion https://anotion.so/
48. Anotionで作られたサイト例 https://www.io-craftstudio.net/
49. Super https://super.so/
50. Superで作られたサイト例 https://appify.jp/
51. Notionで申し込みフォームは作れる？ • 作れます 🙌 • Googleフォーム、Typeform、Chilipepperなどを 
 埋め込むことができます
52. Typeform https://www.typeform.com/
53. Chilipepper https://chilipepper.io/