Notionで編集・更新できるCMSサービス Wraptas でコーポレートサイトを構築してみた

ども、大瀧です。

皆さんNotionは使っていますか。クラスメソッドでは情報集約ツールとして全社導入されているため、あらかたの社員はNotionの使い方をある程度知っています ^*1。人材教育サービスを提供するクラスメソッドのグループ会社であるプロパゲート株式会社のコーポレートサイトをリニューアルするにあたり、メンバーみんなでページが更新できたら便利かなと思い、Notionで編集や更新ができるCMSサービスWraptasを利用してみた様子をご紹介します ^*2。

WraptasはNotion公開ページ機能のかゆいところを全力でフォロー

Wraptas最大のライバルは、Notion自身の持つ公開ページ機能ですが、Notionは情報集約のためのツールであり一般的なWebサイトに最適化されたルックアンドフィールというわけではありません。WraptasはNotionに書いたコンテンツをWebサイト向けにカスタマイズするためのサポート機能が充実しており、"Notionっぽい"見た目を多少回避できます。以下のページで一覧できるので、今回のコーポレートサイト作成で利用した機能をいくつかピックアップします。

1. 角丸ボタン(リンクボタン機能)

Notionでのテキストリンクは少し明るめの文字色とアンダーラインの見た目ですが、Webサイトでは次ページへの遷移を訴求するために目立たせたいときがあります。リンクボタン機能で色つきの角丸ボタンが表示できます。

作り方はシンプルです。Wraptasのサイトデザインの設定画面であらかじめリンクボタン機能をONにしておき、通常のテキストリンクの前後を[](ブラケット)で挟むだけです。ボタンの色はブロックの背景色に連動します。簡単ですね。

2. 画像にリンク

Notionの画像貼り付けには、Webサイトによくあるリンクの設定ができません。WraptasではNotionの画像貼り付け時のキャプションにURLを設定し、リンクとして動作させる機能があります。

リンクボタン機能と同様、事前にサイトデザインの設定画面で「画像のキャプションがURLの場合、画像をリンクにする」という設定項目をONにしておきます。

3. 画像クリックの拡大表示を抑制

Notionの画像貼り付けでは、クリック時に画像を拡大表示するonClickイベントが付与されます。Webサイトの装飾目的で画像を表示する場合はそのイベント処理が不要な場合があるので、それを抑制する機能です。

リンクボタン機能と同様、サイトデザインの設定画面で「タップすると画像を拡大する機能をOFFにする」で設定します。

4. データベースをリンクリストに

Notionのデータベース機能は情報を集約するための強力な機能ですが、Webサイト用途では冗長な印象です。Wraptasでデータベースをそのまま表示することももちろんできますが、Whats'Newやお知らせなどのシンプルなリンクリストとして利用することもできます。サイトデザインの設定画面で「データベースをURLリンクにする機能をONにする」を有効にし、URLにするプロパティ名にリンクするURLを設定するプロパティをセットします。

あとは通常どおりデータベースを作成し、アイテムに前述のURLを追加すればOKです。

リンクリストにするならば、リストビューにして表示するプロパティを調整することでシンプルな見た目にできると思います。今回はニュースの一覧に使うために、作成日時とは別に日付プロパティを追加して表示項目にしました。

今後リストの項目が増えてきたら、カテゴリとして お知らせ や プレスリリース などセレクトやマルチセレクトのプロパティを増やして使うと便利そうです。

もっといじりたいあなたは、NotionのHTMLおよびCSSの特性をおぼえよう

Wraptasではコンテンツに任意のHTML要素を追加したり、CSSでスタイルシートの指定ができます。Notionのコンテンツ部分はNotionによるHTMLのクラスやIDが付与されるので、CSSでスタイルを指定する場合はどのようなコンテンツにどのようなクラスやIDが付くのかを一通り把握する必要が出てくるでしょう。今回も追加CSSに以下のような設定でスタイルを指定しています。

.container { padding: 0; }
.notion-h2 {
  position: relative;
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 1.5em;
}
.notion-h2::before {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: #7ED9E3;
  position: absolute;
  bottom: -8px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

サンプルのCSSが大量に公開されているので、まずはこちらを見てみるのが良いでしょう。

ただしNotionのHTML構造は、列配置などを除いて見出しと本文が同じ階層になるためWebサイトでよくある項目ごとの表示切り替え、いわゆるセクション単位でのスタイルシートの指定が苦手です。Wraptasにはセクションを区切るための独自設定があり、これによってセクション単位のスタイルシート指定が可能になります。以下のブログ記事が詳しいです。

また、つい最近ページ単位でのHTML/CSS指定機能が追加されました。トップページだけスタイルを変えたい、特定のランディングページを作りたいという場合に重宝しそうです。

【アップデート】
個別のページにCSS,HTMLの挿入が設定できるようになりました！
今までCSSはページIDなどで指定していただいていましたが、ページ設定から個別に適用できるようになりました。個別ページのプレビューの確認も画面内で遷移せずに確認できるようになりました? pic.twitter.com/WwtkserDeM

— Wraptas?NotionでWebサイトが作れるサービス (@wraptas) October 27, 2022

まとめ

Notionで編集や更新ができるCMSサービスWraptasの機能をご紹介しました。記事では機能全般の説明に終始しましたが、一番の強みはNotionでコンテンツを書けることでみんながWebページ作成や更新に関われることだと思います。土台となるHTML/CSSのカスタマイズはパパッと済ませて、みんなで内容の充実を図るために時間をかけるのがオススメです。

脚注