[{"data":1,"prerenderedAt":238},["ShallowReactive",2],{"blog-tags":3,"header-recruit-jobs":17,"blog-post-third-party-services":22},[4,5,6,7,8,9,10,11,12,13,14,15,16],"Notion AI","Notionカレンダー","Notionサイト","Notionメール","インテグレーション \u002F 外部ツール連携","データベース","プラン \u002F 請求 \u002F 料金 \u002F 支払い","ページ \u002F ブロック","マーケットプレイス \u002F テンプレート","ワークスペース \u002F サイドバー","共有 \u002F コラボレーション","数式","設定",[18],{"path":19,"title":20,"order":21},"\u002Frecruit\u002Fnotion-consultant","Notionエンジニア\u002Fコンサルタント",1,{"slug":23,"title":24,"date":25,"lastUpdatedAt":26,"excerpt":27,"categories":28,"tags":30,"author":31,"noIndex":38,"html":39,"headings":40,"qas":108,"relatedQAsByTag":109},"third-party-services","Notionの公開ページに埋め込める便利サービス16選","2023-01-08T00:00:00.000Z","2025-09-23T00:00:00.000Z","Notionの公開ページに埋め込める便利なサービスについて紹介されています。ウィジェットを埋め込めるサービスやフォーム作成サービス、アクセス解析サービスなどがあり、それぞれの特徴や使い方が紹介されています。",[29],"個人利用",[11,8],{"id":32,"name":33,"image":34,"description":35,"url":35,"descriptionHTML":36,"SNSHTML":37},"c2f976ab-4882-4e4e-a80e-91d829bd59ca","チャベス","\u002Fblog\u002Ficon\u002Fchabesu.png","","Webライター・ディレクター。Notion公式のおすすめのテンプレートクリエイター。個人でNotionをちょっと便利にするChrome拡張機能を開発中。代表作は「NotionSidebarHider」「Notion文字数カウント」。本業はメーカーで研究開発をしているエンジニア。","\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FChabesuB\" class=\"article-link\" target=\"_blank\">Twitter\u003C\u002Fa> \u002F \u003Ca href=\"https:\u002F\u002Fwww.notion.so\u002Fja-jp\u002F@chabesu\" class=\"article-link\" target=\"_blank\">Notion\u003C\u002Fa>",false,"\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">今回は、Notionのページに埋め込める便利サービスを16個紹介します。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">みなさんは普段Notionを使っていて、「こういう機能があればもっとNotion便利なのに」と思ったことはないでしょうか？ 例えばよくありそうなのは、データベースの内容を「グラフ化」する機能です。現状、Notionにはグラフを作成する機能はないので、Notionでグラフを使うためには外部サービスを使う必要があります。\u003C\u002Fp>\n      \u003Cdiv class=\"notion-callout bg-grayLight5 border-grayLight20 text-black p-4 border\">\n        \u003Cdiv class=\"flex items-start\">\n          \u003Cdiv class=\"flex-shrink-0 mr-3\">\n            \u003Ca href=\"\u002Fblog\u002Fauthors\u002Fチャベス\" class=\"flex flex-col items-center\">\n              \u003Cimg src=\"\u002Fblog\u002Ficon\u002Fchabesu.png\" alt=\"チャベスのアイコン\" class=\"w-12 h-12 rounded-full border border-grayLight20 bg-white mb-1\">\n              \u003Cspan class=\"text-xs text-black6\">チャベス\u003C\u002Fspan>\n            \u003C\u002Fa>\n          \u003C\u002Fdiv>\n          \u003Cdiv class=\"flex-1\">\n            \u003Cdiv class=\"text-[.9em] leading-[1.6] font-normal tracking-[1px] flex flex-col gap-1\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003Cstrong>2025\u002F09\u002F23 追記：\u003C\u002Fstrong>\u003Cbr>2024年8月にNotionの「チャートビュー」がリリースされています。解説記事はこちら → \u003Ca href=\"\u002Fblog\u002Fnotion-chart\" class=\"text-black6 article-link\">Notionチャート（グラフ機能）の使い方を解説\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \n\n\n\n\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-1.png\" alt=\"Notionのデータベースに記録したランニングの距離をグラフ化してNotionに埋め込んだ様子\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notionのデータベースに記録したランニングの距離をグラフ化してNotionに埋め込んだ様子\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">このようにNotionにはない機能でも、外部サービスと連携することでNotionには足りない機能を補完することができます。今回は、Notionのページをよりリッチにしてくれる便利なサービス16選をご紹介します。\u003C\u002Fp>\n        \u003Cdetails class=\"table-of-contents mb-6 hidden\" open=\"\">\n          \u003Csummary class=\"text-[.9em] leading-[1.6] font-semibold tracking-[1px] mb-2\">\n            目次\n          \u003C\u002Fsummary>\n          \u003Cul class=\"toc-list flex flex-col gap-1 ml-5\">\n      \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#1-グラフ\" class=\"toc-link text-sm text-black6 font-bold\">\n                1. グラフ\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#11-notioncharts\" class=\"toc-link text-sm text-black6 \">\n                1.1 NotionCharts\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#12-notion-charts\" class=\"toc-link text-sm text-black6 \">\n                1.2 Notion Charts\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#2-ウィジェット\" class=\"toc-link text-sm text-black6 font-bold\">\n                2. ウィジェット\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#21-indify\" class=\"toc-link text-sm text-black6 \">\n                2.1 Indify\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#22-apption\" class=\"toc-link text-sm text-black6 \">\n                2.2 Apption\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#23-widget-box\" class=\"toc-link text-sm text-black6 \">\n                2.3 Widget Box\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#24-widgets\" class=\"toc-link text-sm text-black6 \">\n                2.4 Widgets\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#25-actions\" class=\"toc-link text-sm text-black6 \">\n                2.5 Actions\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#26-joey\" class=\"toc-link text-sm text-black6 \">\n                2.6 Joey\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#28-codesandbox\" class=\"toc-link text-sm text-black6 \">\n                2.8 CodeSandbox\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#3-フォーム\" class=\"toc-link text-sm text-black6 font-bold\">\n                3. フォーム\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#31-tally\" class=\"toc-link text-sm text-black6 \">\n                3.1 Tally\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#32-typeform\" class=\"toc-link text-sm text-black6 \">\n                3.2 Typeform\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#4-アクセス解析\" class=\"toc-link text-sm text-black6 font-bold\">\n                4. アクセス解析\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#41-hits\" class=\"toc-link text-sm text-black6 \">\n                4.1 HITS\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#42-notionlytics\" class=\"toc-link text-sm text-black6 \">\n                4.2 Notionlytics\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#43-analytics4notion\" class=\"toc-link text-sm text-black6 \">\n                4.3 Analytics4Notion\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#5-その他\" class=\"toc-link text-sm text-black6 font-bold\">\n                5. その他\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#51-notion-image-links\" class=\"toc-link text-sm text-black6 \">\n                5.1 Notion Image Links\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#52-witeboard\" class=\"toc-link text-sm text-black6 \">\n                5.2 Witeboard\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#終わりに\" class=\"toc-link text-sm text-black6 font-bold\">\n                終わりに\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n          \u003C\u002Ful>\n        \u003C\u002Fdetails>\n      \u003Ca href=\"#1-グラフ\" id=\"1-グラフ\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">1. グラフ\u003C\u002Fh2>\u003C\u002Fa>\u003Ca href=\"#11-notioncharts\" id=\"11-notioncharts\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">1.1 NotionCharts\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">NotionChartsは、Notionのデータベースの内容を簡単にグラフ化できるサービスです。例えば自分の場合、毎日Notionのデータベースに記録しているランニングの距離を月ごとに集計してグラフ化しています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-2.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-3.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">以下はNotionChartsのグラフ作成画面です。グラフは 9種類から選ぶことができ、操作はとても簡単です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-4.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notionでグラフを作りたいとなれば真っ先に候補に挙がるサービスだと思います。手軽で簡単なので、ぜひ使ってみてください。\u003C\u002Fp>\u003Ca href=\"#12-notion-charts\" id=\"12-notion-charts\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">1.2 Notion Charts\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">こちらはスプレッドシートのデータをグラフにしてNotionに埋め込むことができます（上記のサービスと名前は似ていますが別サービスです）。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notionへのスプレッドシートの埋め込みは外部サービスを使わずに簡単にできます。例えば、以下のように埋め込むことができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-5.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">ただし上記の場合、グラフ以外の部分も見えてしまうのでグラフが少し見づらい印象です。そのような場合にNotion Chartsを使用すると、スプレッドシートをきれいなグラフにしてNotionに埋め込むことができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-6.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">スプレッドシートのデータを グラフ化してNotionに埋め込みたい場合は、きれいなグラフが作れておすすめなのでぜひ使ってみてください。\u003C\u002Fp>\n    \u003Cdiv class=\"template-text-section mb-6\" data-cta-id=\"task-trial\" data-cta-position=\"after-h2-2\" data-cta-variant=\"default\" data-audience=\"toC\" data-post-slug=\"third-party-services\">\n      \n      \u003Csection class=\"flex flex-col gap-y-5 mb-4 bg-white border border-black px-6 pt-6 pb-7 md:px-8\">\n        \u003Cdiv>\n          \u003Ch2 class=\"blog-heading font-feature-palt\">\n            Notionタスク管理ロードマップ体験版を無料プレゼント\n          \u003C\u002Fh2>\n        \u003C\u002Fdiv>\n        \u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\n          Notionでのタスク管理を基礎から体系的に学べる「タスク管理ロードマップ」の体験版を無料で配布しています。公式LINEの友だち追加だけで、すぐに受け取れます。\n        \u003C\u002Fp>\n        \u003Cimg src=\"https:\u002F\u002Flp.notion-university.jp\u002Fimages\u002Ftrial-task.jpg\" alt=\"Notionタスク管理ロードマップ体験版のプレビュー\" class=\"w-full border border-grayLight20\" loading=\"lazy\">\n        \u003Cdiv class=\"flex flex-col items-center gap-3 pt-1\">\n          \u003Ca href=\"https:\u002F\u002Flp.notion-university.jp\u002Ftrial-0621\u002F?utm_source=blog&utm_medium=referral&utm_campaign=trial0621&utm_content=article_cta&utm_term=third-party-services\" class=\"blog-button blog-button--line\" target=\"_blank\" rel=\"noopener\">\n            \u003Cspan>体験版を無料で受け取る\u003C\u002Fspan>\n          \u003C\u002Fa>\n          \u003Cp class=\"text-xs text-black6\">簡単3分！公式LINEの友だち追加だけですぐに受け取れます\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fsection>\n    \n    \u003C\u002Fdiv>\n  \u003Ca href=\"#2-ウィジェット\" id=\"2-ウィジェット\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">2. ウィジェット\u003C\u002Fh2>\u003C\u002Fa>\u003Ca href=\"#21-indify\" id=\"21-indify\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">2.1 Indify\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">ウィジェットを埋め込めるサービスです。例えば、以下のように、\u003C\u002Fp>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">アナログ時計\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">ライフプログレス\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">天気\u003Cbr>を簡単に埋め込めます。\u003C\u002Fli>\u003C\u002Ful>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-7.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">上記の他にも、「Googleカレンダー」、「カウントダウンタイマー」、「カウンター」などが埋め込めます。どれもデザインがかわいく、おすすめです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-8.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Indifyを使用しないGoogleカレンダーの埋め込み方法は下記の記事で解説しています。\u003C\u002Fp>\u003Ca href=\"#22-apption\" id=\"22-apption\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">2.2 Apption\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">こちらもウィジェットを埋め込めるサービスです。Apptionの場合は、とにかくウィジェットの数が多いのが特徴です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-9.gif\" alt=\"\" class=\"border border-grayLight20 md:max-w-full m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">自分の場合はNotionの公開しているページに自分のTwitterのタイムラインを埋め込んでいます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">※ Notionではツイートは埋め込むことができますが、タイムラインは現状埋め込むことができません。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-10.gif\" alt=\"\" class=\"border border-grayLight20 md:max-w-full m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">上記でも書きましたが、とにかく埋め込めるウィジェットの数が多いので気になる方は一度見てみてください。\u003C\u002Fp>\u003Ca href=\"#23-widget-box\" id=\"23-widget-box\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">2.3 Widget Box\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Indifyと似ており、かわいいデザインのウィジェットが埋め込めるサービスです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-11.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">特徴的なウィジェットとしては、いいねボタンやページビュー数が確認できるウィジェットがあります（有料プランのみ使用可能）。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-12.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">上記のように、有料プランのみしか使えないウィジェットもありますが、無料プランでもかわいいウィジェットがたくさん使えます。\u003C\u002Fp>\u003Ca href=\"#24-widgets\" id=\"24-widgets\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">2.4 Widgets\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Widgetsは上記の2つのサービスと違って、現状埋め込めるウィジェットはボタンのみです（データベースに繰り返しタスクを作成する機能はありますが、ウィジェットの埋め込みではないので今回は紹介を割愛します）。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-13.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">ただし、Widgetsは他のサービスにはない面白い機能があります（少し玄人向けです）。WidgetsではWebhookという仕組みを使うことができます。Webhookというのは簡単に言うと、ボタンを押したら、「ボタンを押したよー」ということを他のアプリに伝えることができる仕組みです。他のアプリでこのボタンを押されたら何かするという仕組みを作っておけば、ボタンを押すだけで色々な作業を自動化することができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">実際に私はWidgetsとMakeという自動化を手助けしてくれるサービスを使って「いいねボタン」を作りました。内容としては、\u003C\u002Fp>\u003Col class=\"list-decimal pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Notionのページに設置されたボタン（Widgetsで作成）を押す\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Makeにボタンが押されたことが通知される\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">MakeでNotionのデータベースに保存されているいいね数を +1 する\u003Cbr>という仕組みです。\u003C\u002Fli>\u003C\u002Fol>\u003Cblockquote class=\"twitter-tweet\">\n\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FChabesuB\u002Fstatus\u002F1600830885464461314\">\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cscript async=\"\" src=\"https:\u002F\u002Fplatform.twitter.com\u002Fwidgets.js\" charset=\"utf-8\">\u003C\u002Fscript>\n\n\n\n\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">ここまでの仕組みを作ろうと思うと少し難しいですが、もし需要がありそうでしたらまた内容を説明したいと思っています。リンクを設定した簡単なボタンならすぐに作れると思うので、興味のある方はぜひ試してみてください。\u003C\u002Fp>\u003Ca href=\"#25-actions\" id=\"25-actions\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">2.5 Actions\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">カードスタイルのようなリッチなウィジェットが豊富にあるサービスです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-14.png\" alt=\"公式HPより引用\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">公式HPより引用\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-15.png\" alt=\"公式HPより引用\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">公式HPより引用\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-16.png\" alt=\"公式HPより引用\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">公式HPより引用\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">自分も以下のようなカードスタイルのウィジェットをNotionの公開ページに埋め込んでいます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-17.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Ca href=\"#26-joey\" id=\"26-joey\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">2.6 Joey\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">コメントボックスやフォーム、いいねボタンやフィードバックボタンなど、高機能なウィジェットを埋め込むことができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-18.png\" alt=\"公式HPより引用\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">公式HPより引用\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-19.png\" alt=\"公式HPより引用\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">公式HPより引用\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">自分の場合は、コメントボックスをNotionの公開ページに埋め込んでいます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-20.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">他のサービスにはない、高機能なウィジェットがたくさんあって非常に面白いサービスです。\u003C\u002Fp>\u003Ca href=\"#28-codesandbox\" id=\"28-codesandbox\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">2.8 CodeSandbox\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">こちらは少し毛色が違いますが、プログラミングの知識が多少あれば自由にNotionに埋め込めるウィジェットを自作することができます。自分の場合はGoogleトレンドをNotionのページに埋め込んで、自分が興味のあるキーワードのトレンドをチェックしています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-21.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">以下の記事で詳細を書いており、プログラミングの知識が無い方でもウィジェットを埋め込める手順を解説しているので、興味のある方は見てみてください。\u003C\u002Fp>\u003Ca href=\"#3-フォーム\" id=\"3-フォーム\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">3. フォーム\u003C\u002Fh2>\u003C\u002Fa>\n      \u003Cdiv class=\"notion-callout bg-grayLight5 border-grayLight20 text-black p-4 border\">\n        \u003Cdiv class=\"flex items-start\">\n          \u003Cdiv class=\"flex-shrink-0 mr-3\">\n            \u003Ca href=\"\u002Fblog\u002Fauthors\u002Fチャベス\" class=\"flex flex-col items-center\">\n              \u003Cimg src=\"\u002Fblog\u002Ficon\u002Fchabesu.png\" alt=\"チャベスのアイコン\" class=\"w-12 h-12 rounded-full border border-grayLight20 bg-white mb-1\">\n              \u003Cspan class=\"text-xs text-black6\">チャベス\u003C\u002Fspan>\n            \u003C\u002Fa>\n          \u003C\u002Fdiv>\n          \u003Cdiv class=\"flex-1\">\n            \u003Cdiv class=\"text-[.9em] leading-[1.6] font-normal tracking-[1px] flex flex-col gap-1\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003Cstrong>2025\u002F09\u002F23 追記：\u003C\u002Fstrong>\u003Cbr>2024年10月にNotionフォームがリリースされました。解説記事はこちら → \u003Ca href=\"\u002Fblog\u002Fnotion-form\" class=\"text-black6 article-link\">Notionフォームとは？使い方と活用事例を解説\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \n\n\u003Ca href=\"#31-tally\" id=\"31-tally\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">3.1 Tally\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">TallyはNotionのようなUIでフォームを作成できるサービスです。フォーム作成のための機能は十分に揃っており、何より操作感がNotionとほぼ同じで非常に使いやすいことが特徴です（スラッシュコマンドの使用感などもNotionとほぼ同じです）。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">以下は実際にTallyでフォームに電話番号を追加している様子です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-22.gif\" alt=\"\" class=\"border border-grayLight20 md:max-w-full m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">上記で作ったフォームを 実際にNotionのページに埋め込んでいます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-23.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">上記のフォームからSubmitすると、コネクトしておいたNotionのページに内容が反映されます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-24.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notionに慣れていれば本当に使いやすいく、ほぼすべての機能が無料で使えるので本当に素晴らしいサービスです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Tallyと似たサービスとして、Noway FormやNotion Formといったサービスもあります。どちらもTallyと同じように使いやすいサービスですが、特にNoway Formは日本のサービスなので、日本語で使いたいという方にはとてもおすすめです（Noway Formは私も自分のブログで使用しています）。\u003C\u002Fp>\u003Ca href=\"#32-typeform\" id=\"32-typeform\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">3.2 Typeform\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">TypeformもTallyと同じようにフォームを作れるサービスですが、かなりリッチなUIのフォームを作ることができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">以下は私が実際にTypeformで作成したアンケートフォームです。\u003C\u002Fp>\u003Cblockquote class=\"twitter-tweet\">\n\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FChabesuB\u002Fstatus\u002F1608341070508875776\">\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cscript async=\"\" src=\"https:\u002F\u002Fplatform.twitter.com\u002Fwidgets.js\" charset=\"utf-8\">\u003C\u002Fscript>\n\n\n\n\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Typeformはかなり高機能で、色々な種類のフォームや複雑な条件分岐なども設定することができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-25.png\" alt=\"Typeformのフォーム作成画面\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Typeformのフォーム作成画面\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">テンプレートも多く用意されているので、複雑なフォームでもテンプレートを改造していけば簡単に作成することができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">ただし注意点として、無料プランの場合は月に10件までしか回答を受け付けることができないので、実際に運用するには有料プランへの登録が必要です。\u003C\u002Fp>\u003Ca href=\"#4-アクセス解析\" id=\"4-アクセス解析\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">4. アクセス解析\u003C\u002Fh2>\u003C\u002Fa>\u003Ca href=\"#41-hits\" id=\"41-hits\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">4.1 HITS\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">HITSはNotionの公開ページにカウンタを埋めこんで、ページビュー数（ページが見られた数）をカウントすることができるサービスです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">以下のようにページにカウンタを埋め込むと、今日のアクセス数と今までのトータルのアクセス数を確認できます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-26.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">左が今日のアクセス数、右が今までのトータルのアクセス数です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-27.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">過去1か月であれば、以下のようにグラフでも確認することができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-28.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">登録不要で無料、無制限で使えるので、自分の公開ページがどれくらい見られているのかを手軽に確認した人におすすめです。HITSの使い方は以下の記事で解説しているので、気になる方は見てください。\u003C\u002Fp>\u003Ca href=\"#42-notionlytics\" id=\"42-notionlytics\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">4.2 Notionlytics\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notionlyticsは ページビュー数のみではなく、ページに訪問したユーザー数やページ滞在時間など、HITSよりも詳細にアクセス解析ができるサービスです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">以下はNotionlyticsの管理画面で、日ごとのユーザー数やページ滞在時間を確認できます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-29.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-30.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">また、Notionlyticsの場合は公開ページのみではなく、公開していないページでもアクセス解析ができるので、例えば組織や会社のページで重要なページへのアクセシビリティを改善するといった使用方法もできます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notionlyticsについては以下の記事で詳細を解説しているので、気になる方は参考にしてみてください。\u003C\u002Fp>\u003Ca href=\"#43-analytics4notion\" id=\"43-analytics4notion\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">4.3 Analytics4Notion\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Analytics4NotionはNotionlyticsと似たサービスで、できることはほとんど変わりません。ただし管理画面のUIがNotionlyticsよりもリッチで見やすいという特徴があります。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-31.gif\" alt=\"\" class=\"border border-grayLight20 md:max-w-full m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">また、Notionlyticsとの大きな違いとして、トラッカーの設置方法があります。Notionlyticsはアクセス解析したいページに手動でひとつひとつトラッカーを埋め込まないといけませんが、Analytics4Notionの場合は管理画面上でアクセス解析したページにチェックを入れるだけです。かなり楽に設定できます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-32.png\" alt=\"\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">できることはNotionlyticsとほぼ同じなので、両方使ってみて自分に合っている方を選ぶというのがおすすめです。 \u003C\u002Fp>\u003Ca href=\"#5-その他\" id=\"5-その他\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">5. その他\u003C\u002Fh2>\u003C\u002Fa>\u003Ca href=\"#51-notion-image-links\" id=\"51-notion-image-links\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">5.1 Notion Image Links\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">こちらはNotionに埋め込んだ画像をリンクにすることができるサービスです。Notionでは現状、画像にリンクを設定することができませんが、こちらのサービスを使えば簡単に画像リンクを埋め込むことができます。使い方もとても簡単で、登録不要、無料、無制限なのでおすすめです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-01-08-third-party-services-33.gif\" alt=\"\" class=\"border border-grayLight20 md:max-w-full m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Ca href=\"#52-witeboard\" id=\"52-witeboard\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">5.2 Witeboard\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notionにホワイトボードを埋め込めるサービスです。登録不要で無料、無制限に使えます。Notion上から編集もでき、複数人で編集してもリアルタイムに反映されるので使い方によっては重宝するかもしれません。\u003C\u002Fp>\u003Cblockquote class=\"twitter-tweet\">\n\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FChabesuB\u002Fstatus\u002F1608322291972333576\">\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cscript async=\"\" src=\"https:\u002F\u002Fplatform.twitter.com\u002Fwidgets.js\" charset=\"utf-8\">\u003C\u002Fscript>\n\n\u003Ca href=\"#終わりに\" id=\"終わりに\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">終わりに\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">今回はNotionのページに埋め込める便利なサービスについて紹介しました。Notion自体のアップデートもかなり早いですが、今回紹介したようなサービスもどんどん出てくると思うので、これからもアンテナを張りながら便利なツールを紹介していけたらと思っています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">今回は各サービスの簡単な紹介でしたが、各サービスの詳細な使い方については需要がありそうなら記事にしていきたいと思います。「このツールの使い方の詳細を知りたい」などがあれば、ぜひご連絡ください。\u003C\u002Fp>",[41,45,49,52,55,58,61,64,67,70,73,76,79,82,85,88,91,94,97,100,103,106],{"id":42,"text":43,"type":44},"1-グラフ","1. グラフ","heading_2",{"id":46,"text":47,"type":48},"11-notioncharts","1.1 NotionCharts","heading_3",{"id":50,"text":51,"type":48},"12-notion-charts","1.2 Notion Charts",{"id":53,"text":54,"type":44},"2-ウィジェット","2. ウィジェット",{"id":56,"text":57,"type":48},"21-indify","2.1 Indify",{"id":59,"text":60,"type":48},"22-apption","2.2 Apption",{"id":62,"text":63,"type":48},"23-widget-box","2.3 Widget Box",{"id":65,"text":66,"type":48},"24-widgets","2.4 Widgets",{"id":68,"text":69,"type":48},"25-actions","2.5 Actions",{"id":71,"text":72,"type":48},"26-joey","2.6 Joey",{"id":74,"text":75,"type":48},"28-codesandbox","2.8 CodeSandbox",{"id":77,"text":78,"type":44},"3-フォーム","3. フォーム",{"id":80,"text":81,"type":48},"31-tally","3.1 Tally",{"id":83,"text":84,"type":48},"32-typeform","3.2 Typeform",{"id":86,"text":87,"type":44},"4-アクセス解析","4. アクセス解析",{"id":89,"text":90,"type":48},"41-hits","4.1 HITS",{"id":92,"text":93,"type":48},"42-notionlytics","4.2 Notionlytics",{"id":95,"text":96,"type":48},"43-analytics4notion","4.3 Analytics4Notion",{"id":98,"text":99,"type":44},"5-その他","5. その他",{"id":101,"text":102,"type":48},"51-notion-image-links","5.1 Notion Image Links",{"id":104,"text":105,"type":48},"52-witeboard","5.2 Witeboard",{"id":107,"text":107,"type":44},"終わりに",[],[110],{"tag":11,"qas":111},[112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235],{"slug":113,"question":114},"0175","Notionでページを印刷できますか？",{"slug":116,"question":117},"0174","NotionにSpotifyを埋め込んでNotion上で音楽を聴くことはできますか？",{"slug":119,"question":120},"0173","Notionで音声ファイルを埋め込むことはできますか？",{"slug":122,"question":123},"0170","NotionでExcelのような見た目の表は作れますか？",{"slug":125,"question":126},"0167","Notionでブロックの種類を後から変更できますか？",{"slug":128,"question":129},"0165","Notionでページのリンクは取得できますか？",{"slug":131,"question":132},"0164","Notionでページをお気に入りに登録できますか？",{"slug":134,"question":135},"0161","Notionのスラッシュコマンドとは何ですか？",{"slug":137,"question":138},"0159","Notionで削除したページをゴミ箱から復元できますか？",{"slug":140,"question":141},"0158","Notionで情報の折りたたみはできますか？",{"slug":143,"question":144},"0156","Notionで直前の変更を取り消して元に戻せますか？",{"slug":146,"question":147},"0152","Notionで箇条書きと番号付きリストを途中で切り替えられますか？",{"slug":149,"question":150},"0148","Notionで同じ内容を複数ページに同期して表示できますか？",{"slug":152,"question":153},"0147","Notionでページを複製したときコメントも引き継がれますか？",{"slug":155,"question":156},"0131","NotionにYouTubeを埋め込めますか？",{"slug":158,"question":159},"0129","NotionでGoogle Driveのファイルやスプレッドシートを埋め込めますか？",{"slug":161,"question":162},"0128","Notionで外部サイトを埋め込み表示できますか？",{"slug":164,"question":165},"0127","Notionでプログラミング言語のコードをハイライト付きで表示できますか？",{"slug":167,"question":168},"0125","Notionで区切り線を入れられますか？",{"slug":170,"question":171},"0124","Notionで3列以上のカラムレイアウトを作れますか？",{"slug":173,"question":174},"0123","Notionでページコメントとインラインコメントの違いはなんですか？",{"slug":176,"question":177},"0122","Notionでページにカバー画像を設定できますか？",{"slug":179,"question":180},"0121","Notion上に表示される文字を小さくすることはできますか？",{"slug":182,"question":183},"0120","Notionでページのフォントを切り替えられますか？",{"slug":185,"question":186},"0115","Notionでボタンを作成できますか？",{"slug":188,"question":189},"0101","Notionページでアイコンを設定できますか？",{"slug":191,"question":192},"0100","Notionで見出しを作成できますか？",{"slug":194,"question":195},"0098","Notionで画像サイズを変更できますか？",{"slug":197,"question":198},"0095","Notionでコールアウトを使うには？",{"slug":200,"question":201},"0094","Notionでページ内リンク（目次）を作成するには？",{"slug":203,"question":204},"0086","Notionのページ履歴・バージョン管理を確認するには？",{"slug":206,"question":207},"0085","Notionでページを複製（コピー）できますか？",{"slug":209,"question":210},"0084","Notionでページやデータベースをロックすることはできますか？",{"slug":212,"question":213},"0081","Notionでサブページ（子ページ）を作成するには？",{"slug":215,"question":216},"0078","Notionに動画をアップロードできますか？",{"slug":218,"question":219},"0022","Notionでテキストを中央揃えにできますか？",{"slug":221,"question":222},"0020","Notionでブロックはどのように移動しますか？",{"slug":224,"question":225},"0019","Notionで文字を太字にできますか？",{"slug":227,"question":228},"0176","Notionでテキストの色を変更できますか？",{"slug":230,"question":231},"0018","Notionのページ横幅は広げられますか？",{"slug":233,"question":234},"0014","Notionでページにパスワードをかけることはできますか？",{"slug":236,"question":237},"0012","Notionでテキスト内で改行できますか？",1793056347958]