[{"data":1,"prerenderedAt":156},["ShallowReactive",2],{"blog-tags":3,"header-recruit-jobs":17,"blog-post-notion-web-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":154,"relatedQAsByTag":155},"notion-web-services","NotionをWebサイト化できる連携サービス10選","2022-11-26T00:00:00.000Z","2025-04-09T00:00:00.000Z","NotionをWebサイト化するための連携サービス10選を紹介。Wraptasが企業サイトや個人でも運用するには最適で、SuperとSimple.inkは無料で使えるがカスタマイズ幅が限られる。Fruitionは独自ドメインを安く割り当てられるが設定が難しい。STUDIOはNotion APIを使って自由度高くWebサイトを作成できるがβ版で今後のアップデートに注目。",[29],"個人利用",[6],{"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,"\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]\">2024年7月のアップデートで、独自ドメインを付けてWebサイト化する新機能がリリースされました。詳しくは下記の記事をご覧ください。\u003C\u002Fp>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">\u003Ca href=\"\u002Fblog\u002Fnotion-sites\" class=\"text-black6 article-link\">Notion sites（Notionサイト）で独自ドメインを付けてページを公開する方法\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\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]\">今回はNotionを使って簡単にWebサイトを作成できるサービスを 10個 紹介します。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notionには作成したページをWebページとして公開する機能があります。この機能を使えば自分の作成したNotionのページを他の人に簡単に見てもらうことができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-1.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>\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\">見た目をカスタマイズしたい（ CSSを使いたい）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Notionでは対応していない外部サービスを埋め込みたい（インスタなど）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">検索結果の上位に表示されるように対応したい（SEO対策をしたい）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Google Analyticsなどでアクセス解析をしたい\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\">一部のページにパスワードでロックをかけたい\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\">SEOを強くしたい\u003C\u002Fli>\u003C\u002Ful>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">上記のような機能は、サードパーティ製の連携サービスを使用することで簡単に実現することができます。今回は、Notionのページを簡単にwebサイト化して、様々な機能を付けることができるサービスを 実際に10個使った上で紹介します。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">記事の最後には、それぞれのサービスのプランの比較、細かい機能の特徴などを比較した比較表をスプレッドシートで配布します。企業でwebサイトの構築を検討している方、個人でポートフォリオやブログを作ろうと思っている方など、ぜひ参考にしてみてください。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">各サービスの比較表（スプレッドシート）\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">参考：\u003Ca href=\"https:\u002F\u002Fwww.switchitmaker2.com\u002Fseo\u002Fsearch-engine-optimization\u002F\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">SEOとは？SEO対策完全ガイド\u003C\u002Fa>｜東京SEOメーカー｜英語圏やアジア圏などの\u003Ca href=\"https:\u002F\u002Fwww.switchitmaker2.com\u002Fglobalseo\u002Fkaigaiseo\u002F\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">海外SEO\u003C\u002Fa>にも強い\u003Ca href=\"https:\u002F\u002Fwww.switchitmaker2.com\u002Fservice\u002Fseoconsulting\u002F\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">SEOコンサルティング\u003C\u002Fa>会社\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-wraptas\" class=\"toc-link text-sm text-black6 font-bold\">\n                1. Wraptas\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#1-1-管理画面\" class=\"toc-link text-sm text-black6 \">\n                1-1. 管理画面\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#1-2-導入事例\" class=\"toc-link text-sm text-black6 \">\n                1-2. 導入事例\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#1-3-特徴まとめ\" class=\"toc-link text-sm text-black6 \">\n                1-3. 特徴まとめ\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#2-super\" class=\"toc-link text-sm text-black6 font-bold\">\n                2. Super\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#2-1-管理画面\" class=\"toc-link text-sm text-black6 \">\n                2-1. 管理画面\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#2-2-導入事例\" class=\"toc-link text-sm text-black6 \">\n                2-2. 導入事例\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#2-3-特徴まとめ\" class=\"toc-link text-sm text-black6 \">\n                2-3. 特徴まとめ\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#3-popsy\" class=\"toc-link text-sm text-black6 font-bold\">\n                3. Popsy\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#3-1-管理画面\" class=\"toc-link text-sm text-black6 \">\n                3-1. 管理画面\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#3-2-導入事例\" class=\"toc-link text-sm text-black6 \">\n                3-2. 導入事例\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#3-3-特徴まとめ\" class=\"toc-link text-sm text-black6 \">\n                3-3. 特徴まとめ\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#4-potion\" class=\"toc-link text-sm text-black6 font-bold\">\n                4. Potion\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#4-1-管理画面\" class=\"toc-link text-sm text-black6 \">\n                4-1. 管理画面\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#4-2-特徴まとめ\" class=\"toc-link text-sm text-black6 \">\n                4-2. 特徴まとめ\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#5-simpleink\" class=\"toc-link text-sm text-black6 font-bold\">\n                5. Simple.ink\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#5-1-管理画面\" class=\"toc-link text-sm text-black6 \">\n                5-1. 管理画面\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#5-2-導入事例\" class=\"toc-link text-sm text-black6 \">\n                5-2. 導入事例\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#5-3-特徴まとめ\" class=\"toc-link text-sm text-black6 \">\n                5-3. 特徴まとめ\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#6-helpkit\" class=\"toc-link text-sm text-black6 font-bold\">\n                6. HelpKit\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#6-1-管理画面\" class=\"toc-link text-sm text-black6 \">\n                6-1. 管理画面\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#6-2-導入事例\" class=\"toc-link text-sm text-black6 \">\n                6-2. 導入事例\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#6-3-特徴まとめ\" class=\"toc-link text-sm text-black6 \">\n                6-3. 特徴まとめ\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#7-notaku\" class=\"toc-link text-sm text-black6 font-bold\">\n                7. Notaku\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#7-1-管理画面\" class=\"toc-link text-sm text-black6 \">\n                7-1. 管理画面\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#7-2-導入事例\" class=\"toc-link text-sm text-black6 \">\n                7-2. 導入事例\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#7-3-特徴まとめ\" class=\"toc-link text-sm text-black6 \">\n                7-3. 特徴まとめ\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#8-feather\" class=\"toc-link text-sm text-black6 font-bold\">\n                8. feather\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#8-1-管理画面\" class=\"toc-link text-sm text-black6 \">\n                8-1. 管理画面\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#8-2-特徴まとめ\" class=\"toc-link text-sm text-black6 \">\n                8-2. 特徴まとめ\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#9-fruition\" class=\"toc-link text-sm text-black6 font-bold\">\n                9. Fruition\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#9-1-導入事例\" class=\"toc-link text-sm text-black6 \">\n                9-1. 導入事例\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#9-2-特徴まとめ\" class=\"toc-link text-sm text-black6 \">\n                9-2. 特徴まとめ\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#10-studio\" class=\"toc-link text-sm text-black6 font-bold\">\n                10. STUDIO\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#10-1-導入事例\" class=\"toc-link text-sm text-black6 \">\n                10-1. 導入事例\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#10-2-特徴まとめ\" class=\"toc-link text-sm text-black6 \">\n                10-2. 特徴まとめ\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-wraptas\" id=\"1-wraptas\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">1. Wraptas\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Wraptasは日本製のサービスで、Notionのページを簡単にWebページに変換してくれます。また、管理画面からデザインの変更も簡単にできたり、CSSを使ってちょっと凝ったデザインも実現することができます。日本製のサービスなので、ドキュメントが全て日本語で読みやすく、\u003Ca href=\"https:\u002F\u002Fwraptas.com\u002Fmanual\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">Wraptas公式の使い方ガイド\u003C\u002Fa>や\u003Ca href=\"https:\u002F\u002Fwraptas.com\u002Fhelp\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\"> ヘルプ・よくある質問\u003C\u002Fa>がとても充実しており、公式ページを見るだけで詰まることなくWebサイトを作ることができると思います。また、WraptasユーザーのDiscordコミュニティがあり、例えば 「CSSでデザインを変えたいけれどどうしたらいいかわからない」という場合でも開発者の方が素早くレスポンスを返してくれます。\u003Cbr>機能面でもかなり細かく機能を用意してくれており、他のサービスと見比べても足りない機能はほぼありません。他のサービスにはない特有の機能としては、「\u003Ca href=\"https:\u002F\u002Fdemo.wraptas.site\u002Fcode_block_inject\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">HTMLの埋め込み機能\u003C\u002Fa>」があります。この機能は任意の場所にHTMLやScriptを埋め込むことができるので、例えばNotionでは対応していないインスタグラムの埋め込みも簡単に実現できます。\u003C\u002Fp>\u003Cblockquote class=\"twitter-tweet\">\n\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fwraptas\u002Fstatus\u002F1470193000928407560\">\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cscript async=\"\" src=\"https:\u002F\u002Fplatform.twitter.com\u002Fwidgets.js\" charset=\"utf-8\">\u003C\u002Fscript>\n\n\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-11-26-notion-web-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>\u003Ca href=\"#1-1-管理画面\" id=\"1-1-管理画面\" 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. 管理画面\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Wraptasの管理画面は以下です。右側がNotionのページをwebページに変換した様子で、プレビューとして表示されています。このプレビューを確認しながら、デザインを変更していくことができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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>\u003Ca href=\"#1-2-導入事例\" id=\"1-2-導入事例\" 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. 導入事例\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Wraptasの公式ページや、Notionっぽくない以下のようなページもWraptasで作成されています。Wraptasの公式ページにはさまざまな\u003Ca href=\"https:\u002F\u002Fwraptas.com\u002F#section-block-4ba1fa5fcde2462785a9bf4ccbe54953\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">導入事例\u003C\u002Fa>が掲載されているので、興味のある方は見てください。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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>\u003Ca href=\"#1-3-特徴まとめ\" id=\"1-3-特徴まとめ\" 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-3. 特徴まとめ\u003C\u002Fh3>\u003C\u002Fa>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">月額 1,078円（税込）\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\">html挿入機能でNotionには対応していない外部サービスを任意の位置に埋め込める\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\">独自ドメインを使用できる\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Wraptasのサブドメインも使用可能\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">サイト全体、もしくはページごとにCSSやScriptを適用可能\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">検索エンジンにIndexされる\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Google Analytics対応\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\">パスワードによるロック機能は対応していない\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">チャット機能やコメント機能は外部サービスを埋め込めば対応可\u003C\u002Fli>\u003C\u002Ful>\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=\"notion-web-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=notion-web-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-super\" id=\"2-super\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">2. Super\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Superは海外製のサービスで、NotionをWebサイト化するサービスの中でもWraptasと並んで有名なサービスです（日本に限る、世界的にはSuperの方が有名）。ユーザー数が多いので、安心感があり、アップデートも継続して行われています。Web上に情報も多いですが、言語が英語なので若干情報が探しづらいかもしれません。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">機能面に関してはWraptasと同じくらいの機能が備わっています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">価格面に関しては無料プランと有料プランがあります。有料プランに関しては、 Wraptasよりも若干高くなっています。大きな特徴としては、無料プランでも十分使うことができる点です。無料プランでは、CSSやScriptを使ってのカスタマイズができないことと、Googleなどの検索エンジンにはindexされないなどの制限はありますが、基本的な機能は十分使うことができます。個人で使う場合には自分のポートフォリオやブログをSuperで作って、Twitterなどのプロフィールにリンクを貼っておくという使い方ができそうです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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>\u003Ca href=\"#2-1-管理画面\" id=\"2-1-管理画面\" 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. 管理画面\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Superの管理画面は以下です。Wraptasと同様に、右側がNotionのページをwebページに変換した様子で、プレビューとして表示されています。左側のメニューから様々な設定が可能です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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>\u003Ca href=\"#2-2-導入事例\" id=\"2-2-導入事例\" 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. 導入事例\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Superの公式サイトには以下のような\u003Ca href=\"https:\u002F\u002Fsuper.so\u002Fshowcase\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">導入事例\u003C\u002Fa>が掲載されてます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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>\u003Ca href=\"#2-3-特徴まとめ\" id=\"2-3-特徴まとめ\" 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. 特徴まとめ\u003C\u002Fh3>\u003C\u002Fa>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Wraptasよりも料金は高め\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\">充分な機能が備わっており、管理画面も使いやすい\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\">独自ドメイン使用可能（有料プラン）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">無料プランの場合はSuperのサブドメインのみ使用可能\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">サイト全体、もしくはページごとにCSSやScriptを適用可能（有料プラン）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">検索エンジンにIndexされる（有料プランのみ）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Google Analytics対応（有料プランのみ）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">検索機能あり\u003C\u002Fli>\u003C\u002Ful>\u003Ca href=\"#3-popsy\" id=\"3-popsy\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">3. Popsy\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">WraptasやSuperほど細かいデザインの設定ができず機能は絞られていますが、その分管理画面がシンプルで使いやすい所が特徴です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">機能面に関しては上記でも説明したように、機能は絞られていますが必要最低限の機能は備わっています。WraptasやSuperと比較して実装されていない機能としては以下が挙げられます。\u003C\u002Fp>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">ページごとのCSSやScriptが設定できない\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>価格面に関しては、月額 $8 なのでSuperよりも安くなっていますが、Wraptasと比較すると現在の為替では少し高くなっています。\u003C\u002Fli>\u003C\u002Ful>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-9.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=\"#3-1-管理画面\" id=\"3-1-管理画面\" 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. 管理画面\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Popsyの管理画面は以下です。設定項目がシンプルで使いやすい管理画面です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-10.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=\"#3-2-導入事例\" id=\"3-2-導入事例\" 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. 導入事例\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Popsyの公式サイトには導入事例が掲載されていませんが、NotionアンバサダーのReiさんが\u003Ca href=\"https:\u002F\u002Frei.wkndcreator.popsy.site\u002F\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">ポートフォリオ\u003C\u002Fa>を作成されています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-11.png\" alt=\"Rei丨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]\">Rei丨Notionアンバサダー\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Ca href=\"#3-3-特徴まとめ\" id=\"3-3-特徴まとめ\" 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-3. 特徴まとめ\u003C\u002Fh3>\u003C\u002Fa>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Superよりも料金が安い。為替次第ではあるが、Wraptasよりは高い\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\">テンプレートがおしゃれでかわいい\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\">Popsyのサブドメインも使用可能\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">サイト全体を対象にCSSやScriptを適用可能\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">検索エンジンにIndexされる\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Google Analytics対応\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">複雑な設定にこだわらず、手っ取り早くおしゃれなサイトを作りたい人におすすめ\u003C\u002Fli>\u003C\u002Ful>\u003Ca href=\"#4-potion\" id=\"4-potion\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">4. Potion\u003C\u002Fh2>\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>\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\">ページごとのCSSやScriptの設定ができない\u003Cbr>Potionの特徴としては、無料プランでも検索エンジンのIndex対象になることです（ Superは有料プランからIndex対象にできる）。\u003C\u002Fli>\u003C\u002Ful>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">価格面に関してはSuperとほぼ同じですが、3サイト以上を運営する場合はプランによってSuperよりもPotionの方が安くなります。ただし、Wraptasの方が安いです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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]\">無料でサイトを公開したい場合で、検索エンジンにIndexしたい場合はPotionが選択肢として挙がってきます。\u003C\u002Fp>\u003Ca href=\"#4-1-管理画面\" id=\"4-1-管理画面\" 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. 管理画面\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Potionの管理画面は以下です。問題ないレベルですが、管理画面の使い勝手はWraptasやSuperに劣ります。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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>\u003Ca href=\"#導入事例\" id=\"導入事例\" style=\"pointer-events: none; cursor: text;\">\u003Ch4 class=\"mt-2 relative font-bold text-base md:text-[17px] leading-[1.8] tracking-[0.05em] font-feature-palt\">導入事例\u003C\u002Fh4>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Potionの公式サイトには以下のような\u003Ca href=\"https:\u002F\u002Fpotion.so\u002Fshowcase\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">導入事例\u003C\u002Fa>が掲載されてます。Potionの公式サイトもPotionを使って作られています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-14.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=\"#4-2-特徴まとめ\" id=\"4-2-特徴まとめ\" 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. 特徴まとめ\u003C\u002Fh3>\u003C\u002Fa>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">機能面ではWraptasやSuperと大きく変わらないが、細かい機能はWraptasやSuperの方が豊富\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">料金プランはSuperと近い\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\">無料プランの場合はPotionのサブドメインのみ使用可能\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">サイト全体にCSSやScriptを適用可能。ページごとの設定は不可（有料プラン）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">検索エンジンにIndexされる（無料プランでも対象）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Google Analytics対応（有料プランのみ）\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\">パスワードによるロック機能有り（有料プランのみ）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">無料でサイトを検索エンジンにIndexさせたい場合はおすすめ\u003C\u002Fli>\u003C\u002Ful>\u003Ca href=\"#5-simpleink\" id=\"5-simpleink\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">5. Simple.ink\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">WraptasやSuperと似たようなサービスではありますが、管理画面にプレビュー機能がなく、すっきりしています。また機能については大きく差はありませんが、無料プランでできることが他のサービスより多く、逆に他のプランの無料プランでできることができないなど、料金プランによる機能差で他のサービスと差別化している印象です。\u003C\u002Fp>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">無料プランでもサイト全体、ページ毎にCSSやScriptを適用できる\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">無料プランでも検索エンジンのIndex対象\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>機能面では他のサービスと大きく差はありませんが、WraptasやSuperには若干劣る印象です。\u003C\u002Fli>\u003C\u002Ful>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">価格面に関しては、SuperやPotionとほとんど同じです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-15.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=\"#5-1-管理画面\" id=\"5-1-管理画面\" 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. 管理画面\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Simple.inkの管理画面は以下です。プレビュー機能がなく、すっきりしています。管理画面の使い勝手はWraptasやSuperに劣ります。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-16.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=\"#5-2-導入事例\" id=\"5-2-導入事例\" 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. 導入事例\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Simple.inkの公式サイトには以下のような\u003Ca href=\"https:\u002F\u002Fwww.simple.ink\u002Fnotion-websites-examples\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">導入事例\u003C\u002Fa>が掲載されてます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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=\"#5-3-特徴まとめ\" id=\"5-3-特徴まとめ\" 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-3. 特徴まとめ\u003C\u002Fh3>\u003C\u002Fa>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">機能面ではWraptasやSuperと大きく変わらないが、細かい機能はWraptasやSuperの方が豊富\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">料金プランはSuperやPotionと近い\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\">無料プランの場合はSimple.inkのサブドメインのみ使用可能\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">サイト全体、もしくは ページごとにCSSやScriptを適用可能（無料プランでも可）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">検索エンジンにIndexされる（無料プランでも対象）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Google Analytics対応（無料プランでも可）\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\">パスワードによるロック機能有り（有料プランのみ）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">無料プランでもCSSやJavaScriptでがっつりサイトをいじりたい場合はおすすめ\u003C\u002Fli>\u003C\u002Ful>\u003Ca href=\"#6-helpkit\" id=\"6-helpkit\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">6. HelpKit\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">上記で紹介したサービスは、NotionのページをそのままWebサイトに変換し、管理画面から自由にデザインなどをカスタマイズできるというサービスでしたが、ここから紹介するサービスは少し毛色が変わります。まずはHelpKitです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">HelpKitは「ヘルプセンター」や「ドキュメンテーション」に特化したサイトを作れるサービスです。「ヘルプセンター」とは、ユーザーのよくある質問や困りごとに対して、ユーザー自身が答えにたどり着くように作られたサイトを指します。例えば、ツイッターのヘルプセンターは以下のような内容です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-18.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]\">HelpKitはNotionのデータベースから、高機能で洗練されたデザインのヘルプセンターをとても簡単に作ることができます。HelpKitで用意されているNotionのデータベースを複製しただけで以下のようなページを作れます（見た目は2種類選べます）。\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-11-26-notion-web-services-19.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-11-26-notion-web-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]\">コンテンツを増やしたい場合は、Notionのデータベースのページを増やしてページ内に内容を記載していけば、Webサイトに反映することができます。今までに紹介してきたサービスはNotionのページを自由に作ることができましたが、HelpKitは あらかじめ用意されたNotionのデータベースの形を変えてはいけません。以下は公式が用意しているデータベースです。このデータベースを複製して使います。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">独自ドメインとHelpKitのサブドメインを選択可能\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">CSSやScriptでカスタマイズ可能\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\">フィードバック（コメント機能）\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\">コンタクトフォーム\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">アナリティクスの数字を管理画面で確認\u003Cbr>例えばフィードバック機能（コメント機能）に関しては、ページ下部の3つの絵文字を押すことでフィードバックを送信できます。\u003C\u002Fli>\u003C\u002Ful>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-22.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-11-26-notion-web-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]\">送信されたフィードバックは、下記の様にダッシュボードで確認できます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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]\">他にも様々な機能がありますが、全て紹介すると長くなってしまうのでここでは割愛します。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">価格に関しては少し高めですが、機能やデザインを考えると十分な価値があります（$19 ドルのプランがありますが、25ページまでしか作成できず、機能も制限されているので $39 のプランがおすすめです）。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-25.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=\"#6-1-管理画面\" id=\"6-1-管理画面\" 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\">6-1. 管理画面\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">HelpKitの管理画面は以下のようになっています。高機能でデザインも美しく、とても使いやすいです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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>\u003Ca href=\"#6-2-導入事例\" id=\"6-2-導入事例\" 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\">6-2. 導入事例\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">HelpKitの公式サイトには以下のような\u003Ca href=\"https:\u002F\u002Fwww.helpkit.so\u002F#showcase\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">導入事例\u003C\u002Fa>が掲載されてます。HelpKitは海外のサービスですが、日本の企業の導入事例も掲載されています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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>\u003Ca href=\"#6-3-特徴まとめ\" id=\"6-3-特徴まとめ\" 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\">6-3. 特徴まとめ\u003C\u002Fh3>\u003C\u002Fa>\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\">独自ドメインを使用できる\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">HelpKitのサブドメインも使用可能\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">CSSやScriptも適用可能（サイト全体の一括設定）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">検索エンジンにIndexされる\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Google Analytics対応\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\">パスワードロック機能に対応。ただし、サイト全体のロック。\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\">導入事例も多く、企業でヘルプセンターやwikiページ などを作るのにおすすめ\u003C\u002Fli>\u003C\u002Ful>\u003Ca href=\"#7-notaku\" id=\"7-notaku\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">7. Notaku\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notakuは様々な種類のWebサイトを作れることが特徴のサービスです。作れるサイトは以下の6種類です。\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\">チェンジログ\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\">ロードマップ（2022\u002F11\u002F20 時点でβ版）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">ヘルプデスク（2022\u002F11\u002F20 時点でβ版）\u003Cbr>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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>\u003C\u002Fli>\u003C\u002Ful>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">ドキュメンテーションは、Helpkitのドキュメンテーションと見た目が良く似ています。機能面もそれほど差はありません。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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]\">ただし少し細かい違いですが、Notion側のページ構成がHelpkitとNotakuでは違います。Helpkitは上記でも説明した用に データベースを使ってページを作っていきますが、Notakuの場合はデータベースは使用せずに子ページを作っていくことでWebページを作っていきます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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]\">ブログも作ることができます。ブログの場合は、HelpKitのようにNotakuが用意しているNotionのデータベースから作成できます。シェアボタン、目次機能、検索機能、ダークモード、フィードバック機能、RSSフィードなど、高機能でかっこいいブログを作ることができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-31.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]\">チェンジログページもNotakuが用意しているNotionのデータベースから簡単に作れます。この機能は他のサービスでは現状見当たりません。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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]\">Notionのページをそのまま公開する機能も用意されています（シンプルレイアウト）。こちらはWraptasやSuperと同じようにNotionのページをそのままWebサイト化し、管理画面やCSSでデザインをカスタマイズします。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">WraptasやSuperに無い特徴としては、ライトモードとダークモードを切り替えるボタンがついています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-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>\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-11-26-notion-web-services-34.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のページはNotakuが用意したデータベース（ボードビュー）で作成します。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-35.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]\">最後にヘルプデスクです。こちらはHelpKitと内容はほぼ同じで、Notion側のデータベースもHelpKitとほぼ同じ構成です。こちらも現状は β版になります。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-36.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]\">価格面に関しては、HelpKitと近いプランになっています。ただし違いとして、Notakuには無料プランがあり複数サイトを作ることも可能なので、試しにいろいろなサイトを作って試すことも可能です。ただしPV数（ページビュー数）に制限があるので、本格的に運用する場合は注意が必要です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-37.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=\"#7-1-管理画面\" id=\"7-1-管理画面\" 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\">7-1. 管理画面\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notakuの管理画面は以下のようになっています。こちらの管理画面もとても使いやすいです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-38.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=\"#7-2-導入事例\" id=\"7-2-導入事例\" 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\">7-2. 導入事例\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notakuの公式サイトには以下のような\u003Ca href=\"https:\u002F\u002Fnotaku.so\u002Fshowcase\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">導入事例\u003C\u002Fa>が掲載されてます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-39.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=\"#7-3-特徴まとめ\" id=\"7-3-特徴まとめ\" 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\">7-3. 特徴まとめ\u003C\u002Fh3>\u003C\u002Fa>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">複数のタイプのWebサイトが簡単に作れる\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\">無料プランがあり、複数のサイトを作成可能なので試しやすい\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">PV数に制限があるので、本格的に導入する場合はプランに注意\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\">Notakuのサブドメインを使用可能\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">CSSやScriptも適用可能（サイト全体の一括設定）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">検索エンジンにIndexされる\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Google Analytics対応（自身でタグに貼り付け）\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\">パスワードロック機能に対応\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">管理画面もデザインが洗練されており、使いやすい\u003C\u002Fli>\u003C\u002Ful>\u003Ca href=\"#8-feather\" id=\"8-feather\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">8. feather\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notionで簡単に高機能のブログを作ることができます。作れるのはブログのみですが、ブログに関する機能は大体そろっており、管理画面もWordPressの管理画面のように高機能で使いやすいです。featherが用紙いているNotionのテンプレートを複製するだけで、以下のようなブログを作ることができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-40.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-11-26-notion-web-services-41.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]\">記事ページ以外に、固定ページを作ることもできます。例えば、ホーム画面を作ったり、ポートフォリオページを作ってヘッダーにリンクを貼っておくこともできます。また、タグページなども作ることができます。私の場合はWordPressを使ってブログを運用していますが、WordPress製のブログと比較しても遜色のないブログがこんなに簡単にNotionでできてしまうのかと感動するレベルでした。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">特徴的な点として、Notion側のデータベースを 4つ使って記事を管理します。\u003C\u002Fp>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Contentデータベース\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Pagesデータベース\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Tagsデータベース\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Authorsデータベース\u003Cbr>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-42.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>\u003C\u002Fli>\u003C\u002Ful>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Contentデータベースは、記事を作成するデータベースです。データベースのページに記事を書き、このページが投稿記事として掲載されます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-43.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-11-26-notion-web-services-44.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]\">Pagesデータベースは、固定ページを作成するデータベースです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-45.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]\">Tagsデータベースは タグを管理するデータベースで、Contentデータベースとリレーションして使います。任意のタグの記事一覧ページも作成することができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-46.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]\">Authorsデータベースは投稿者を管理するデータベースで、こちらもContentデータベースとリレーションして使います。任意の投稿者が投稿した記事一覧ページも作成することができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-47.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]\">価格面に関しては、以下のようなプランになっています。プランで違うのはPV数の制限だけなので（機能制限はない）、安いプランを使っておいてPV数が多くなってくれば、プランを上げて対応するのがおすすめです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-48.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=\"#8-1-管理画面\" id=\"8-1-管理画面\" 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\">8-1. 管理画面\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">featherの管理画面は以下のようになっています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-49.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]\">featherの管理画面もかなり高機能で、例えばアナリティクス画面がとても充実しています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-50.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=\"#導入事例\" id=\"導入事例\" style=\"pointer-events: none; cursor: text;\">\u003Ch4 class=\"mt-2 relative font-bold text-base md:text-[17px] leading-[1.8] tracking-[0.05em] font-feature-palt\">導入事例\u003C\u002Fh4>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">featherの公式サイトには以下のような\u003Ca href=\"https:\u002F\u002Ffeather.so\u002Fshowcase\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">導入事例\u003C\u002Fa>が掲載されてます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-51.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=\"#8-2-特徴まとめ\" id=\"8-2-特徴まとめ\" 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\">8-2. 特徴まとめ\u003C\u002Fh3>\u003C\u002Fa>\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\">WordPressと比較しても遜色のない高機能なページや管理画面\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\">featherのサブドメインも使用可能\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">サイト全体、もしくはページごとにCSSやScriptを適用可能\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">検索エンジンにIndexされる\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Google Analytics対応\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\">パスワードによるロック機能は対応していない\u003C\u002Fli>\u003C\u002Ful>\u003Ca href=\"#9-fruition\" id=\"9-fruition\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">9. Fruition\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">残り 2つは今までのサービスと違って番外編的な扱いです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">まずはFruitionです。こちらはNotionの公開ページに \u003Ca href=\"https:\u002F\u002Fblog.cloudflare.com\u002Fintroducing-cloudflare-workers\u002F\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">Cloudflare\u003C\u002Fa> という無料のサービスを使って独自ドメインを割り当てることのみに目的を絞ったサービスです。基本的に見た目はNotionのページのままです。追加機能としては以下があります。\u003C\u002Fp>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Notion公開ページの右上の「複製」や「Notionを開く」を消せる\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>少し設定が難しいですが、Fruitionの公式サイトに詳しく手順が載っています。できるだけ安くサイトを公開したいけれど、独自ドメインは割り当てたいというときに選択肢に入ってくるサービスです。\u003C\u002Fli>\u003C\u002Ful>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">価格面は先ほども述べた通り、独自ドメイン代のみになります。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">管理画面もありません。\u003C\u002Fp>\u003Ca href=\"#9-1-導入事例\" id=\"9-1-導入事例\" 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\">9-1. 導入事例\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Fruitionの公式サイトには以下のような\u003Ca href=\"https:\u002F\u002Ffruitionsite.com\u002Fshowcase\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">導入事例\u003C\u002Fa>が掲載されてます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-52.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=\"#9-2-特徴まとめ\" id=\"9-2-特徴まとめ\" 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\">9-2. 特徴まとめ\u003C\u002Fh3>\u003C\u002Fa>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Notionの公開ページに独自ドメインをできるだけ安く割り当てたい\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">見た目はほぼNotionのサイトのまま\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">設定が若干難しい\u003C\u002Fli>\u003C\u002Ful>\u003Ca href=\"#10-studio\" id=\"10-studio\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">10. STUDIO\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">STUDIOは日本製のサービスで、ノーコードでWebサイトを簡単に作成できるサービスです。Notionのみに対応したサービスではありませんが、2022\u002F09 にNotion APIとの連携機能が発表されました。まだ β版ではありますが、STUDIOを使ってノーコードで自由度高くWebサイトを作り、コンテンツの中身はNotionで管理するということができるようになりました。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">実際にSTUDIOでNotion APIを使う様子を紹介します。例えば以下のようなNotionのデータベースがあるとします。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-53.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]\">このデータベースをSTUDIOと連携し、画像を引っ張ってくることが簡単にできます（もちろん、画像以外も可）。ただし注意点としてデータを引っ張れるのはデータベースのプロパティのみで、ページ内のブロックは引っ張れません。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-54.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]\">価格面に関しては以下の通りですが、無料でもほとんどの機能を使うことができます。無料プランの制限は 月間PV数が 10,000 PVまでなので、個人で使うには十分です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-55.png\" alt=\"[https:\u002F\u002Fstudio.design\u002Fja\u002Fpricing](https:\u002F\u002Fstudio.design\u002Fja\u002Fpricing)\" 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]\">\u003Ca href=\"https:\u002F\u002Fstudio.design\u002Fja\u002Fpricing\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">https:\u002F\u002Fstudio.design\u002Fja\u002Fpricing\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Wraptasと同様、日本のサービスでサポートも手厚いのでおすすめです。ただし、Notion API連携は現状は無料プランで使用できますが、以下の通り将来的には使えなくなる可能性もあるのでご注意ください。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-56.png\" alt=\"[https:\u002F\u002Fhelp.studio.design\u002Fja\u002Farticles\u002F6500751-api連携-beta#h_a2c44a2bde](https:\u002F\u002Fhelp.studio.design\u002Fja\u002Farticles\u002F6500751-api%E9%80%A3%E6%90%BA-beta#h_a2c44a2bde)\" 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]\">\u003Ca href=\"https:\u002F\u002Fhelp.studio.design\u002Fja\u002Farticles\u002F6500751-api%E9%80%A3%E6%90%BA-beta#h_a2c44a2bde\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">https:\u002F\u002Fhelp.studio.design\u002Fja\u002Farticles\u002F6500751-api連携-beta#h_a2c44a2bde\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">管理画面に関してはSTUDIOの紹介になり、今回の趣旨とはずれてしまうので割愛します。\u003C\u002Fp>\u003Ca href=\"#10-1-導入事例\" id=\"10-1-導入事例\" 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\">10-1. 導入事例\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notion APIを使ったSTUDIOのWebサイトはまだ少ないですが、YouTubeチャンネルの \u003Ca href=\"https:\u002F\u002Fshowcase.studio.design\u002Fja\u002Fwebsite\u002Fnotionzadankai\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">Notion座談会のページ\u003C\u002Fa>が掲載されています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-11-26-notion-web-services-57.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=\"#10-2-特徴まとめ\" id=\"10-2-特徴まとめ\" 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\">10-2. 特徴まとめ\u003C\u002Fh3>\u003C\u002Fa>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Notion APIを使ってNotionのデータベースから簡単にデータを引っ張ってノーコードで 自由度高くWebサイトを作成できる\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\">Notion API連携はまだ β版なので、今後のアップデートに注目\u003C\u002Fli>\u003C\u002Ful>\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を簡単にWebサイト化できるツールを 10個紹介しました。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">個人的なオススメとしては、企業サイトや個人でもしっかりと運用したい場合は圧倒的にWraptasがおすすめです。細かい機能までどんどんアップデートされるのも素晴らしいですが、何よりサポートが手厚く、日本語のドキュメントも充実しているという点が非常に魅力的です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">無料でWebサイトを作ってみたいという場合は、SuperかSimple.inkがおすすめです。Superは使いやすさが魅力的ですが、無料だとカスタマイズできる幅が限られています。Simple.inkは 無料でもCSSやScriptを使うことができるので、がっつり自分でカスタマイズしたい方はこちらがおすすめです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">最後に、スプレッドシートで作成した比較表のリンクを貼っておきます。もし、Notionを使ってWebサイトを作成しようと思っている方は参考にしてください。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">参考：\u003Ca href=\"https:\u002F\u002Fprotoout.studio\u002Fa6eb9e212ee84e7895df35ad6e0f6c85\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">無料で始められる！NotionでWebサイトが作れるサービス8選｜プロトアウトスタジオ\u003C\u002Fa>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">参考：\u003Ca href=\"https:\u002F\u002Fdekita.net\u002Fseo\u002F%E6%A4%9C%E7%B4%A2%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3%E3%81%AB%E8%A9%95%E4%BE%A1%E3%81%95%E3%82%8C%E3%81%9F%E3%81%84%E3%81%AA%E3%82%89%E3%80%8C%E6%A5%BD%E3%80%8D%E3%81%AF%E9%81%BF%E3%81%91%E3%81%9F\u002F\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">検索エンジンに評価されたいなら「楽」は避けたほうがよい\u003C\u002Fa>\u003C\u002Fp>",[41,45,49,52,55,58,61,64,67,70,73,76,79,82,85,88,91,94,97,100,103,106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151],{"id":42,"text":43,"type":44},"1-wraptas","1. Wraptas","heading_2",{"id":46,"text":47,"type":48},"1-1-管理画面","1-1. 管理画面","heading_3",{"id":50,"text":51,"type":48},"1-2-導入事例","1-2. 導入事例",{"id":53,"text":54,"type":48},"1-3-特徴まとめ","1-3. 特徴まとめ",{"id":56,"text":57,"type":44},"2-super","2. Super",{"id":59,"text":60,"type":48},"2-1-管理画面","2-1. 管理画面",{"id":62,"text":63,"type":48},"2-2-導入事例","2-2. 導入事例",{"id":65,"text":66,"type":48},"2-3-特徴まとめ","2-3. 特徴まとめ",{"id":68,"text":69,"type":44},"3-popsy","3. Popsy",{"id":71,"text":72,"type":48},"3-1-管理画面","3-1. 管理画面",{"id":74,"text":75,"type":48},"3-2-導入事例","3-2. 導入事例",{"id":77,"text":78,"type":48},"3-3-特徴まとめ","3-3. 特徴まとめ",{"id":80,"text":81,"type":44},"4-potion","4. Potion",{"id":83,"text":84,"type":48},"4-1-管理画面","4-1. 管理画面",{"id":86,"text":87,"type":48},"4-2-特徴まとめ","4-2. 特徴まとめ",{"id":89,"text":90,"type":44},"5-simpleink","5. Simple.ink",{"id":92,"text":93,"type":48},"5-1-管理画面","5-1. 管理画面",{"id":95,"text":96,"type":48},"5-2-導入事例","5-2. 導入事例",{"id":98,"text":99,"type":48},"5-3-特徴まとめ","5-3. 特徴まとめ",{"id":101,"text":102,"type":44},"6-helpkit","6. HelpKit",{"id":104,"text":105,"type":48},"6-1-管理画面","6-1. 管理画面",{"id":107,"text":108,"type":48},"6-2-導入事例","6-2. 導入事例",{"id":110,"text":111,"type":48},"6-3-特徴まとめ","6-3. 特徴まとめ",{"id":113,"text":114,"type":44},"7-notaku","7. Notaku",{"id":116,"text":117,"type":48},"7-1-管理画面","7-1. 管理画面",{"id":119,"text":120,"type":48},"7-2-導入事例","7-2. 導入事例",{"id":122,"text":123,"type":48},"7-3-特徴まとめ","7-3. 特徴まとめ",{"id":125,"text":126,"type":44},"8-feather","8. feather",{"id":128,"text":129,"type":48},"8-1-管理画面","8-1. 管理画面",{"id":131,"text":132,"type":48},"8-2-特徴まとめ","8-2. 特徴まとめ",{"id":134,"text":135,"type":44},"9-fruition","9. Fruition",{"id":137,"text":138,"type":48},"9-1-導入事例","9-1. 導入事例",{"id":140,"text":141,"type":48},"9-2-特徴まとめ","9-2. 特徴まとめ",{"id":143,"text":144,"type":44},"10-studio","10. STUDIO",{"id":146,"text":147,"type":48},"10-1-導入事例","10-1. 導入事例",{"id":149,"text":150,"type":48},"10-2-特徴まとめ","10-2. 特徴まとめ",{"id":152,"text":153,"type":44},"おわりに比較表配布","おわりに（比較表配布）",[],[],1793056351674]