Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

6341e83f0fe451e77852a9116b93fb91?s=47 Shogo Tahara
March 14, 2021

 えっ!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/

6341e83f0fe451e77852a9116b93fb91?s=128

Shogo Tahara

March 14, 2021
Tweet

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. 第1章のまとめ • 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と特に相性が良いウェブサイト2選 • 🤝 採⽤サイト • 👥 求⼈情報を⼈事担当者が直接更新できる • 🎨 写真や動画を埋め込んで会社の雰囲気を伝えやすい

    • ❓ サポートページ • ✏ お問い合わせ状況に応じてサポート担当者が素早く更新できる • ✨ 情報を整理してユーザに伝えられる
  35. 第2章のまとめ • 様々な企業がNotionでウェブサイトを作っている • 🏢 ホームページ • 🤝 採⽤サイト •

    ❓ サポートページ など • Notionでウェブサイトを作るメリット • ✏ ⼿軽に更新できる • ✨ 情報を整理しやすい
  36. あなたもNotionで ウェブサイトを作ろう! 

  37. ここのお話をします 🏢 企業 👨💻 個⼈ 趣味のサイト ⽇記 備忘録 TODOリスト 作業進捗管理

    ホームページ 採⽤サイト 議事録管理 チームWiki タスク管理 社内向けメンバー紹介 🌐 公開 🔒 ⾮公開 ⾃⼰紹介ページ
  38. サイト事例集🇯🇵も元々は⾃分⽤の⾮公開ページでした • 最初は⾃分だけのためのページでした🔒

  39. • 予想以上の反響 💬 • たくさんのいいね、リツイート • 7,000ページビュー • 今回の登壇に繋がった 🎉

    サイト事例集を公開🌐してみたら反響がありました
  40. あなたの⾮公開ページも公開したら何かが起こるかも? • ぜひ、あなたのNotionページを公開🌐してみましょう! • 趣味のこと • あなた⾃⾝のこと • なんでもOKです •

    あなたが知っていることを共有すると喜ぶ⼈がきっといます 🙌 ※個⼈情報や著作権にはくれぐれもお気を付けください!
  41. 「こんなページ公開して意味あるのかな?」と躊躇しなくて⼤丈夫です • 1⼈でも喜んでくれる⼈がいるだけで嬉しいものです 🙌 • 私が作ったページにもありがたいコメントが寄せられました 💬 おぉ!これは参考になりそう これは驚き。 まとめていただいて

    ありがとうございます! こういうのを⾒ると アイデアが浮かんでくる!
  42. 第3章のまとめ • ⾮公開ページ🔒を公開🌐に変えたら反響があった • 1⼈でも喜んでくれる⼈がいると嬉しい • あなたもぜひ公開してみてはいかがでしょう?

  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/