Tweet
Tweet

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

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

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などを 
 埋め込むことができます

Slide 52

Slide 52 text

Typeform https://www.typeform.com/

Slide 53

Slide 53 text

Chilipepper https://chilipepper.io/