Notion公開サイトにカテゴリ・タグライブラリ・関連記事・問い合わせフォームを実装

Super — Create Websites with Notion

Create a website in less than a minute with instant page loads, SEO optimization, and no-code theming. All your content is kept and managed in Notion so you can focus on creating while Super handles the rest.

super.so

純粋なNotion本体の公開リンクによる公開や、国産のNotionサイト化ツール Wraptas においても、基本的には同様です。（Wraptasの場合はより簡便化された仕組みがあるかもしれません。）

タグページ
リレーションを組んで、タグのデータベースを作成（タグライブラリ）
Next.jsを利用してタグを取り出す実装
その他
カテゴリページ
カテゴリ一覧ページへのリンクが必要な場合、リレーションとしてプロパティを設置する
カテゴリに親子関係をもたせたうえで、選択した親カテゴリで
作成するカテゴリをOption（単一選択）プロパティとしてデータベース内に作成
カテゴリページを作成し、Linked View of Databaseブロックでカテゴリを絞り込むビュー（フィルタ）を作成
関連記事セクションを記事文末に表示させる
関連記事セクションは、データベースビュー（リンクトデータベース）を埋め込んでフィルタをかけて表示させる
関連記事セクションを執筆時に毎回追加するのが面倒 → フィルタで絞り込んだビューを保存することが可能です！🎉
フィルタでカテゴリを絞り込んだビューの作成・保存方法
関連記事セクションのビューを呼び出す具体的な手順
Template機能・Synced Block機能は関連記事としての利用には不向き
お問い合わせフォームの実装
TypeFormなら簡単にNotionと連携可能
その他埋め込み形式の問い合わせフォーム
コメント機能
静的サイト上でも動くコメント機能アプリケーション
NotionにHTMLコード埋め込みを行うにはApption.coによる変換作業が必要
ページネーションは実装が難しそう

タグページ

WordPressのようなCMSと異なり、カテゴリやタグの形でまとめて表示させることはできません。

Superで利用したテンプレートでは、Notion上でのタグは表示される。ただクリックして一覧の形で表示させることは不可。

Notionをカスタマイズして、タグページを表示させる必要あり。

リレーションを組んで、タグのデータベースを作成（タグライブラリ）

「タグライブラリ」という方式を用いてNotionの機能で実装します。

[Notionでタグライブラリーを作るとめちゃくちゃ捗った｜こにゃ｜note](https://note.com/ko_nyaku/n/nbb0355b099ba#8tmzB)

通常、タグは"multiselect"のカラムを作成して実現することが多いかもしれません。しかしその場合にはリレーションを組むことができないため、別途「タグライブラリ」というデータベースを作成。そのタグライブラリデータベースと各記事を紐付ける形で実装します。

各タグライブラリのプロパティと各記事を"Relation"のカラムで紐付けます。

1対Nでの紐付けも可能。

データベース上としては、下画像の「Tag Library」カラムで紐付ける形となります。

実際に、本サイトではこのタグライブラリ形式でタグを実装しています。 🔖Tag Library のページでタグ一覧を確認、それぞれ関連するタグに絞り込まれたページを閲覧することができます。

Next.jsを利用してタグを取り出す実装

こちらはNotionを利用したブログをNext.jsで実装・公開する場合です。

Notion Blog にタグ機能を追加する【Notion Blog 徹底解説 #6】 | 35d

その他

Notion Blogで記事をタグ付けしてタグごとに一覧表示する - アルパカログ

カテゴリページ

カテゴリページについては、次の2段階の方法で実装します。

作成するカテゴリをOption（単一セレクト）プロパティとしてデータベース内に作成
別途、カテゴリページを独立させた形で作成。そのカテゴリページ内にLinked View of Database ブロックを配置し、カテゴリページ名と同じカテゴリ名でフィルタをかける

この方法では、記事ページに表示されるカテゴリ名はリンクがなく、ただ該当のカテゴリ名が表示されるのみ、というケースとなります。

カテゴリ一覧ページへのリンクが必要な場合、リレーションとしてプロパティを設置する

上記の方法だと記事上のカテゴリ名を選択した場合にはカテゴリ一覧ページにジャンプする、といったことは実現できません。

カテゴリ名を表示するのみならず、該当カテゴリの一覧ページへのリンクが必要な場合、セレクトプロパティではなく「リレーション」としてプロパティを設置します。

カテゴリに親子関係を持たせたい場合、親カテゴリDB, 子カテゴリDBの2つを用意して、相互にリレーションさせることで階層関係を表現できます。

カテゴリに親子関係をもたせたうえで、選択した親カテゴリで

カテゴリ自体に親カテゴリ・子カテゴリというような階層を持たせたうえ、別のコンテンツDB等で親カテゴリ・子カテゴリを紐づける際に「選択した親カテゴリで絞り込んだ子カテゴリのみ紐づけ可能」としたい場合があります。

Notionはカラム上（プロパティ上）での絞り込みは仕様上できないため、別の手段をとります。具体的な方法は Notionで絞り込み親子タグ・カテゴリ・セレクトを（無理やり）実現するの記事で解説しています。

作成するカテゴリをOption（単一選択）プロパティとしてデータベース内に作成

以下、いったんカテゴリ一覧へのリンク設置なく、カテゴリ名の表示のみのパターンとして記載します。

下画像の「Category」のような形になります。これは通常のNotion機能の「Select」機能で実現しています。

特にリレーションは組みません。ここで設定した名称と同じ名前で、新しくカテゴリページを作成します。

リレーションを組まない理由は、Categoryの場合は1-1の紐付けとなるため、運用でカバーできると判断したため。

名称を呼び出す場合にも、リレーションを組んで参照する場合のほうが呼び出し時間がかかります。

カテゴリページを作成し、Linked View of Databaseブロックでカテゴリを絞り込むビュー（フィルタ）を作成

カテゴリページを新しく作成し、Linked View of Databaseを設置。下画像のように ”Category is 該当カテゴリ”で絞り込んだビューを作成します。

たとえば本ページのカテゴリは「Notion」として設定しています。実際に作成したNotionカテゴリページは 📚Notion からご確認ください。

お問い合わせフォームの実装

問い合わせフォームは、外部ツールを埋め込む形で実装します。Googleフォームもシンプルで良いかもしれません。

Google Forms: オンラインフォーム作成ツール | Google Workspace

Google Forms を使用して、さまざまな質問形式でオンラインフォームやアンケートを作成しましょう。どのデバイスでもリアルタイムで結果を分析できます。

www.google.com

Google Forms: オンラインフォーム作成ツール | Google Workspace

TypeFormなら簡単にNotionと連携可能

Typeform

Typeform: People-Friendly Forms and Surveys

Uh oh! That typeform doesn't exist. Why not make your own? You don't want to make a boring form. And your audience won't answer one. Create a typeform instead-and make everyone happy. No time limit on Free plan No time limit on Free plan One question at a time - like a conversation - keeps your audience engaged.