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

by Shogo Tahara

Slide 1

Slide 1 text

2021/3/14 ⽥原聖悟ウェブサイトまで作れちゃうの！？調査して200サイトまとめてみた！って＼えっ！ 👀∕ Notion

Slide 2

Slide 2 text

⾃⼰紹介 • ⽥原聖悟（たはらしょうご） • 建設🚧 × IT💻 の会社のプロジェクトマネージャー👨💼 • 業務上、タスク管理やドキュメント管理の重要性を⽇々感じる中で   Notionと出会う → ⼤好きになりました❤ • 「Notionで作られた国内サイト事例集🇯🇵」を作りました   https://www.notion.so/Notion-5279483f808c4b1183406a72afdf31a7 • 好きなもの：Notion、ねこ、ゲーム（スプラトゥーン） • Twitter：@shogocat

Slide 3

Slide 3 text

📢 今⽇お話しすること「Notionで作られた国内サイト事例集🇯🇵」あなたもNotionでウェブサイトを作ろう！ Notionってなに？

Slide 4

Slide 4 text

Notionってなに？

Slide 5

Slide 5 text

Notionとは • オールインワンワークスペース✨ • “個⼈のメモ” から “企業のタスク管理” まで   1つのアプリで幅広く使える   夢のようなツール💪 https://www.notion.so/

Slide 6

Slide 6 text

⽇本でもどんどん盛り上がってきている 🎊 いろいろなメディアでNotionの話題が取り上げられています！

Slide 7

Slide 7 text

今週Twitterトレンドに載っていました（2021/3/12）

Slide 8

Slide 8 text

Notionは2021年に⼤幅アップデート予定 • 2021年⽇本語化予定 🎉 • 2021年公式APIの登場によって多彩な活⽤⽅法が⽣まれる 🎉 これからますます流⾏ること間違いなし！

Slide 9

Slide 9 text

🚩 Notionでできることを分類してみた 🏢 企業 👨💻 個⼈⾃⼰紹介ページ趣味のサイト⽇記備忘録 TODOリスト作業進捗管理ホームページ採⽤サイト議事録管理チームWiki タスク管理社内向けメンバー紹介

Slide 10

Slide 10 text

🏢 企業 👨💻 個⼈趣味のサイト⽇記備忘録 TODOリストホームページ採⽤サイト議事録管理チームWiki タスク管理社内向けメンバー紹介 🌐 公開 🔒 ⾮公開⾃⼰紹介ページ作業進捗管理 🚩 Notionでできることを分類してみた

Slide 11

Slide 11 text

͜ͷൃදͰ͸ ঺հ͠·ͤΜ   🙅 ͜ͷ͋ͱ ୈষͰ ࿩͠·͢🙋 ͜ͷ͋ͱ ୈষͰ ࿩͠·͢🙋 🏢 企業 👨💻 個⼈趣味のサイト⽇記備忘録 TODOリスト作業進捗管理ホームページ採⽤サイト議事録管理チームWiki タスク管理社内向けメンバー紹介 🌐 公開 🔒 ⾮公開⾃⼰紹介ページ 🚩 Notionでできることを分類してみた

Slide 12

Slide 12 text

🌐 Notionのページを公開する⽅法はとても簡単 ① 画⾯右上の Share ボタンを押す ② Share to web をオンにする 🎉

Slide 13

Slide 13 text

🛠 ページ公開のオプション紹介 Allow editing ページ閲覧者が編集可能 Allow comments ページ閲覧者がコメント可能 Allow duplicate as template ページ閲覧者が複製可能 Search engine indexing Googleなどの検索エンジンの検索結果に表⽰されるようにする

Slide 14

Slide 14 text

第１章のまとめ • Notionは⾊々なことができるオールインワンツール • 2021年⽇本語化され、ますます流⾏るでしょう • 個⼈、企業それぞれで   🌐公開ページ、🔒⾮公開ページの使い道がある • 🌐公開ページを作るのはとても簡単

Slide 15

Slide 15 text

「Notionで作られた国内サイト事例集🇯🇵」

Slide 16

Slide 16 text

ここのお話をします 🏢 企業 👨💻 個⼈趣味のサイト⽇記備忘録 TODOリスト作業進捗管理ホームページ採⽤サイト議事録管理チームWiki タスク管理社内向けメンバー紹介 🌐 公開 🔒 ⾮公開⾃⼰紹介ページ

Slide 17

Slide 17 text

企業の公開ページをまとめてみました • とある会社🏢のホームページがNotionで作られていることに   衝撃を受けたのがきっかけ • 「Notionってこんなことまでできるの!? 👀」と驚きました • 最初は⾃分⽤にまとめ始めた✏ • たくさんの企業がNotionでウェブサイトを作っていることに気付いた💡

Slide 18

Slide 18 text

まとめた情報を公開しています https://www.notion.so/Notion-5279483f808c4b1183406a72afdf31a7

Slide 19

Slide 19 text

（2021/3/14時点） 200サイト以上掲載

Slide 20

Slide 20 text

Notionで実際に作られているウェブサイトの分類 • 🏢 会社ホームページ • 🤝 採⽤サイト • ❓ サポートページ • 🎫 イベントページ • 📝 会社ブログ • ☀ 特設ページなどなど…

Slide 21

Slide 21 text

Notionで作られた素敵なサイトを厳選紹介✨

Slide 22

Slide 22 text

みんなのマーケット株式会社様 https://minma.jp/ 会社ホームページにNotionを採⽤！お知らせが頻繁に更新されているホームページ

Slide 23

Slide 23 text

株式会社ノースサンド様 https://career.northsand.studio/ 各種画像やアイコンにアニメーションが付いていてオシャレ採⽤サイト

Slide 24

Slide 24 text

株式会社TranSe様 https://www.notion.so/your-school-8ba9451c50ce40 ff 938bd0b8aad34c3f 動画がオシャレで、ページレイアウトや画像配置も綺麗採⽤サイト

Slide 25

Slide 25 text

Ubie株式会社様 https://www.notion.so/Ubie-Dev-3cc3b2222c79405a8c20d5a2415ab0e2 内容がものすごく濃い！⼀般の求⼈票だけでは実現できないボリューム採⽤サイト

Slide 26

Slide 26 text

株式会社イトーヨーカ堂様 https://www.notion.so/7b401 ff 149aa47a797a8f7d98a2eb87f アプリのサポートページでの事例。画⾯キャプチャが豊富で丁寧！サポートページ

Slide 27

Slide 27 text

NTTコミュニケーションズ様 https://www.notion.so/NeWork-52ae6b3145f74176b2ee579ed9d93a42 情報がわかりやすく綺麗に整理されている。⼤⼿企業の事例。サポートページ

Slide 28

Slide 28 text

株式会社 Channel Corporation様 https://guide-jp.channel.io/ 情報量がものすごく充実している。カテゴリ分けもわかりやすいサポートページ

Slide 29

Slide 29 text

株式会社プッシュ様 https://www.notion.so/891cdf723110434c82054f1c871917e2?v=5666efb314ae490ca8b181fa44ec782c Notionでサービスの開発ロードマップを公開している事例開発ロードマップ

Slide 30

Slide 30 text

バーチャル雪まつり様 https://vsfp.xyz/ ⼤規模イベントの各種情報をわかりやすく発信しているイベントページ

Slide 31

Slide 31 text

ナインステクノロジーズ様 https://www.notion.so/24ecfb53c576400f92e8a8c007831e27 会社で利⽤中のサブスクリプション⼀覧を公開しているのがユニーク！特設ページ

Slide 32

Slide 32 text

Notionでウェブサイトを作るメリット • メリット多数！ • ✏ ⼿軽に更新できる • 👥 誰でも更新できる • 🎨 ⾃由に装飾できる • ✨ 情報を整理しやすい

Slide 33

Slide 33 text

✏「⼿軽さ」はTwitterで話題になっていました https://twitter.com/kensuu/status/1369836142447665162

Slide 34

Slide 34 text

Notionと特に相性が良いウェブサイト２選 • 🤝 採⽤サイト • 👥 求⼈情報を⼈事担当者が直接更新できる • 🎨 写真や動画を埋め込んで会社の雰囲気を伝えやすい • ❓ サポートページ • ✏ お問い合わせ状況に応じてサポート担当者が素早く更新できる • ✨ 情報を整理してユーザに伝えられる

Slide 35

Slide 35 text

第２章のまとめ • 様々な企業がNotionでウェブサイトを作っている • 🏢 ホームページ • 🤝 採⽤サイト • ❓ サポートページなど • Notionでウェブサイトを作るメリット • ✏ ⼿軽に更新できる • ✨ 情報を整理しやすい

Slide 36

Slide 36 text

あなたもNotionでウェブサイトを作ろう！

Slide 37

Slide 37 text

Slide 38

Slide 38 text

サイト事例集🇯🇵も元々は⾃分⽤の⾮公開ページでした • 最初は⾃分だけのためのページでした🔒

Slide 39

Slide 39 text

• 予想以上の反響 💬 • たくさんのいいね、リツイート • 7,000ページビュー • 今回の登壇に繋がった 🎉 サイト事例集を公開🌐してみたら反響がありました

Slide 40

Slide 40 text

あなたの⾮公開ページも公開したら何かが起こるかも？ • ぜひ、あなたのNotionページを公開🌐してみましょう！ • 趣味のこと • あなた⾃⾝のこと • なんでもOKです • あなたが知っていることを共有すると喜ぶ⼈がきっといます 🙌 ※個⼈情報や著作権にはくれぐれもお気を付けください！

Slide 41

Slide 41 text

「こんなページ公開して意味あるのかな？」と躊躇しなくて⼤丈夫です • １⼈でも喜んでくれる⼈がいるだけで嬉しいものです 🙌 • 私が作ったページにもありがたいコメントが寄せられました 💬 おぉ！これは参考になりそうこれは驚き。まとめていただいてありがとうございます！こういうのを⾒るとアイデアが浮かんでくる！

Slide 42

Slide 42 text

第３章のまとめ • ⾮公開ページ🔒を公開🌐に変えたら反響があった • １⼈でも喜んでくれる⼈がいると嬉しい • あなたもぜひ公開してみてはいかがでしょう？

Slide 43

Slide 43 text

まとめ

Slide 44

Slide 44 text

まとめ • Notionはオールインワンワークスペース • ⽬的に合わせて柔軟な使い⽅ができる🌐🔒 • 企業のウェブサイトに様々な形で使われている • 🤝 採⽤サイトや ❓サポートページはNotionと相性が良い • ⾃分⽤に作った事例集ページ🇯🇵を公開したら反響があった • あなたもページを公開するときっと誰かが喜ぶはず • ページを公開したらぜひ教えてください💡 🌐

Slide 45

Slide 45 text

APPENDIX

Slide 46

Slide 46 text

Notionで作ったウェブサイトをグレードアップする⽅法 • AnotionやSuperなどのサービスを利⽤するとさらに進化します 💪 • サイトの表⽰速度アップ • 独⾃ドメインを使える • 独⾃CSSを使える • GoogleAnalyticsなどのタグを仕込める

Slide 47

Slide 47 text

Anotion https://anotion.so/

Slide 48

Slide 48 text

Anotionで作られたサイト例 https://www.io-craftstudio.net/

Slide 49

Slide 49 text

Super https://super.so/

Slide 50

Slide 50 text

Superで作られたサイト例 https://appify.jp/

Slide 51

Slide 51 text

Notionで申し込みフォームは作れる？ • 作れます 🙌 • Googleフォーム、Typeform、Chilipepperなどを   埋め込むことができます