NotionをCMS化！？Webサイト更新業務が軽減するかも！

Notionとは、一言で言えばドキュメント管理サービスですが、単純なドキュメントだけでなくタスク管理やエクセルのようなデータベースとしての機能があり、他サービスの埋め込みなども可能で入力の自由度が高いサービスです。

社内や個人でもさまざまなドキュメントを管理できる点や、タスク管理としても手間なく簡単に、かつ構造の自由度が高く入力していけるのが魅力の一つです。

入力方法としてはNoteというサービスの入力に近く、分類としてはブロックエディタになると思います。

構造的には、ページ、データベースなどの概念があり、複数のページを階層化させることや、内部リンクなども簡単に作ることができます。

そんな入力が楽なNotionで階層構造やエクセルのようなデータ構造を持てるとなれば、CMSとして使えるのではないか？と考えるのも自然だと思います。

WordpressやHeadlessCMSだとどうしても管理画面を表示させて「さぁ入力するぞ！」と意気込んで入力したりすることもあると思いますし、エクセルなどでデータを管理しておいて、CMSにデータを入力していくこともあると思います。

NotionをCMSにすれば、Notion上でデータの準備をしたり考えをまとめたりした上で、そのまま更新できてしまう便利さが得られますし、実際にCMSにデータを入力しようとしたら、思っていたように入力ができなかったり、ページの構造が合ってなかったりしてせっかく用意したテキストの構造を組み直すなんてこともあると思います。

NotionにはAPIが備わっていますので、実際CMSとして使うことができ、移し替えて入力するなどの手間も軽減できます！

Notion APIの活用！DEPARTでの事例も交えてご紹介！

上記で述べた「実際にCMSにデータを入力しようとしたら、思っていたように入力ができなかった」という部分に関しては、エディタの問題もあると思います。

主にCMSではWYSIWYGと呼ばれるビジュアルエディタや、ブロックエディタが使用されていますが、求める機能を満たすにはカスタマイズが必要だったり、必要のない機能もあって入力に迷ったりすると思います。

WYSIWYG

What You See Is What You Get（見たままが得られる）の頭文字から名付けられていますが、実際には見たままが得られるにはそれなりにカスタマイズが必要になります。

HTMLがわかる方であればソースコードを直接入力できますし、ボタンや機能の制限やカスタマイズをしていれば使いやすくもなります。

しかしカスタマイズがそこまでされていない場合には、h3タグでの見出しをつけたいと思った場合にページ側のCSSをエディタ内に表示することできなかったり、h1は使いたくないと思っても機能としては使えてしまう状態になっていたりもします。

データ的な特徴としては、一つのWYSIWYGエディタは一つの文字列データとして扱われている点で、Webページ側で途中に広告バナーを入れるなどしたい場合には2つのエディタを用意するか、WYSIWYGエディタの中で特殊なタグを入力する必要があると思います。

ブロックエディタ

ブロックエディタはWordpressでも取り入れられており、NotionやNoteでも入力をしながら適切なブロックを選択する、またはブロックを選択してから入力するというような使い方ができるので、ページそれぞれでデータの構造・レイアウトを変えることも可能です。

ただし、WYSIWYGのようにHTMLコードを直接入力することが難しかったり、専用のブロックを独自で開発したりとカスタマイズをする場合にはハードルが高くなります。

データ構造としては、ブロック毎に使われているブロックの種別や中身のデータを取得することもできるので、Javascriptなどのフロントエンドで扱う場合にも扱いやすい構造になっています。

WYSIWYGエディタ、ブロックエディタ双方に課題や使い勝手の良いところがありますが、入力の際にCMSの管理画面とデータファイルを行き来する手間を考えるとNotionのCMS化という部分にも魅力があると思います。

NotionをCMSとして利用する場合にはAPIを介してデータの取得や更新が可能になるので、どのように活用できるかをご紹介します。

JamstackのCMSとして利用する

Jamstackとは、Javascriptフレームワークでデータを元にHTML化してしまう方法になります。

NotionのデータをAPIを通して取得し、それをHTML化してページを作成することで手間を減らせる可能性がありますし、別途CMSを用意しなくてもNotionで更新ができます。

Notionにはワークスペースなどの機能もあるので、公開用領域と社内ドキュメント用領域などを分けることも可能ですし、ページで分けておくくらいの感覚でも利用可能です。

注意点としては、更新ボタンなどは無くリアルタイムに反映するので、公開タイミングの調整をしたい場合には公開用のシステムが走る機能を別途設ける必要があります。

Jamstackであれば基本的に構築フローの中でそういった公開用の仕様を用意する考えがあるので、別途大きくコストはかからないと思います。

また、作り方次第ではNotion上でプロパティなどで公開状態のコントロールをすることも可能です。

ただしJamstack特有の問題ですが、CMSのブロックエディタのように見た目の確認をしながら入力が難しく、プレビューを都度確認しなければならないことには注意が必要です。

サーバーサイド処理でデータを収集できる

例えば今までのCMSのDBを移す場合や、エクセルなどのデータを自動で読み込ませたい場合などにAPIを利用することで手間を減らせる場合もあります。

Notionにはページ、データベース、ブロックという概念があり、それぞれのAPIで取得・更新することが可能ですので、外部のシステムとの連携も可能です。

またエクセルの場合にはAPIじゃなくてもCSVインポート機能があるので、エクセル上であらかじめタグなどを想定してデータを整えておいて一気にインポートするなんてことも可能です。

こういった外部のデータを集約する場所としても活用できそうです。

CMSの入力が大変という悩みを持っている方は一度NotionをCMS化することを検討してみてはいかがでしょうか？

個人や社内のナレッジ共有や、ドキュメント管理など便利な面もありますが、社内でNotionを使える方が増えればWebサイトの更新も複数人で担当できたり、レクチャーのコストも少なくできる可能性もあると思います。

DEPARTではNotionのCMS化や、ReactやNext.js、Vue.jsやNuxt.jsでのJamstackなども相談可能です！