NotionをWebサイト・ブログとして公開する4つのメリット。最高のライティング体験と高速表示

WordPressブログをNotion製Webサイトに移行することにしました

こんにちは。まほウェブNakataです。普段のエンジニアリング業務メモやSEO・Webマーケティングに関することをブログとして公開していた本ブログですが、 Notionと Wraptas によって制作したブログ、魔法使いのWebスクリプトへと移行することにいたしました。 ...

marketing-wizard.biz

1: アイデアメモやリサーチ経過・アウトラインの段階でも気軽に高速に公開できる。更新もかんたん
「全世界に公開していいメモ帳」のつもりで情報をアウトプットしていく
タブインデントによるアウトライン構造が、文章を書きやすく・わかりやすくする
書き出しにつまらない。「白紙の画面」の恐怖を乗り越えることができる
「サクサク動くことは正義」。Notionではメモ書きアプリの感覚で変更・更新・リライトを素早く気軽に
メモを書き留めておける、「手元にある感覚」・「手触りできる感覚」。Notionローカルアプリでアクセスできるという素早さ
オフラインでもNotionを立ち上げて編集することが（一応）可能
外部記憶装置として、更新・メンテナンスのしやすさは重要
ブログ・記事更新としてNotionを採用できるかどうかは、Webサイトの運営体制による
2: ライティング体験が最高。Notionでは内部リンク参照や外部リンクの埋め込みが簡単にでき、サクサク執筆・編集に集中できる
タグ付けはマークダウン記法で素早く済ませる
Notionでは内部リンクがすぐ・簡単に貼れる（メンションコマンド）
TwitterやYouTube動画の埋め込みも自動で一瞬に
内部・外部リンクを貼るときに重宝する「ブックマーク」作成機能
3: Notionには余計な設定項目がない。細かく設定する必要がなく、すぐに公開できる
SEOにおいて、テクニカルな設定をする価値が小さくなってきている
Notionで公開前に設定する項目
Notionではサムネイル画像を極めて簡単に設定できる
4: SuperでNotionをWebサイトとして公開すると高速表示が可能。セキュリティ・保守を気にしなくてよい
WordPressとNotionライティング体験を比較した場合。WordPressで感じていたストレス
WordPressは挙動が遅い、記事へのアクセスが良くない
WordPressではログインや公開作業など、ライティング以外の操作が必要
WordPressではコンテンツ（記事）制作・ライティング体験が気持ちよくない
Notionの最高なポイントは、コンテンツの作成・ライティングに「全集中」できること
WebflowよりもNotionのほうがインデックスされるスピードが早いかも？
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています

1: アイデアメモやリサーチ経過・アウトラインの段階でも気軽に高速に公開できる。更新もかんたん

「全世界に公開していいメモ帳」のつもりで情報をアウトプットしていく

コンテンツはとにかく高速に発信してナンボ、だと思っています。

「全世界に公開していいメモ帳」のつもりで情報をアウトプットしていく

という言葉は下記ブログに感銘を受けて。

“全世界に公開していいメモ帳”のスタンスで書くブログが誰かの助けになる【エンジニアのブログ探訪】 - 週刊はてなブログ

なんなら「書きかけ」の状態でも公開してしまってOKと考えています。

ただし、さすがにタイトルだけのメモは非公開で運用しています。NotionをWebサイト化して公開する場合、特定の階層以下につくられたページは原則全て公開となるのですが、たとえばフィルター機能を利用して表示されないように出てこないよう設定することは可能です。

全体の割合として書きかけや内容の乏しいコンテンツをWebサイトとして公開してしまった場合、「低品質コンテンツ」としての SEO上の扱いを受けてしまう可能性はあります。

このあたりはコンテンツ量が増えてきた場合に、たとえば Search Consoleなどの指標をチェックしながらコンテンツ管理を行っていくのが良いでしょう。

SEOのことを気にしすぎて、「公開できない」という状態になる方が好ましくないと考えます。とりあえず公開してしまって、評判の良くないコンテンツは後から管理を考える、という方式のほうがリソースが少ない場合のコンテンツ制作体制としては上手くいくでしょう。

参考タグ: 🔍SEO | 👓Search Console

タブインデントによるアウトライン構造が、文章を書きやすく・わかりやすくする

ライティングに関して、文体や書きぶり、読みやすさなどで勝負するのもいいですが、所詮Webの記事などナナメ読みされてしまうものです。

だとすると、「情報そのもの」「アウトラインとして固まっていること」「インデント形式で構造化されている情報」で勝負するのも良いのではないでしょうか？

むしろリサーチ結果などは、「文章」というより「構造化されたアウトライン」のほうが分かりやすい場合もあります。

書き出しにつまらない。「白紙の画面」の恐怖を乗り越えることができる

たとえばWordPressや他のCMSにおいて、いざ記事を執筆しようとしたのに、開かれたタイトル・本文エリアの真っ白に面食らって「ウッ…」と手が進まなくなった経験はありませんか？

ライティングをする人にとって、真っ白な記事編集画面は乗り越えなければいけない壁であり、恐怖です。ブログ記事でなくても、レポート課題などで「何を書こうか…？」と手が止まってしまう方は多いのでは。

これを解決する方法の1つが、先にお伝えしたアウトライン構造から始めること。しかし面倒くさがりな私は、そのアウトライン作成作業さえ気が乗らず、おっくうに感じてしまうこともしばしば。

その点もNotionは解決してくれました。ライティングについて「気が乗らない・着手する気にならない」を解消する1つのテクニックとして、「日付やテーマ・キーワードなど、確実に書ける項目から埋めていく」というものがあります。

Notionには、各ページに対してさまざまな「プロパティ」（属性）を設定することが可能。たとえば私の場合、下画像のような属性を項目としてあらかじめ設定してあります。

本記事の属性・プロパティ一覧

更新日・作成日については自動で入力されますが、それ以外の項目をポチポチと入力していくうちに、いつの間にか本文エリアの書き出し・アウトラインまで書き始めてしまっている、という体験は多いです。

たとえばWordPressでは記事タイトル、そして直下にいきなり本文です。毎回、このハードルを乗り越えるしんどさを感じている人もいらっしゃるのではないでしょうか…！

参考タグ: 🖋️ライティング

「サクサク動くことは正義」。Notionではメモ書きアプリの感覚で変更・更新・リライトを素早く気軽に

公開自体を高速に行うことができる、ということにも関連。

Notionは挙動が高速であること、目的の情報にたどり着きやすいことから、なにか過去の情報に変化があったときに、簡単にリライトを行うことができます。

参考: Notionはなぜブログ記事のリライト・更新・メンテナンスがしやすいのか

後述もしますが、「毎回のログインをスキップできる」「公開ボタンを押す必要がない」ということは意外に大きいです。ストレスなく、気がついたら手軽にリライトを行うことができます。

「サクサク動く」、「iPhoneやiPadなどどこからでもアプリで入力できる」というのは正義だなと感じています…！

メモを書き留めておける、「手元にある感覚」・「手触りできる感覚」。Notionローカルアプリでアクセスできるという素早さ

「記事を執筆する・リライトする」という感覚ではなく「メモアプリにメモをしている、メモを書き直す」という気軽な感覚でライティングを行うことができます。

アプリケーションを開いてすぐに入力・そのまま更新・公開できることがNotionの魅力の1つ。

ローカルPCに「アプリ」としてインストール可能という点も大きいかもしれません。 WordPressなどのブログ型CMSの場合、ブラウザ上のCMSに「アクセス」して、「執筆する」という行為を感じてしまいます。

Notionのように、手元に・手触り感のある、メモのような形で気軽に書き留めておく、という行為とは心理的ハードルが大きく異なるでしょう。

WordPressにはMarsEditやWordPress.comアプリなど、多くのサードパーティアプリがありますが、どれもNotionほどの手元にある感覚・すぐにアクセスできる感覚とは大きく異なります。

参考カテゴリ: 🗳️WordPress

このような簡単なアクセスと手元にある感覚によって、Notionを触る頻度は高くなるでしょう。すると、記事を執筆・更新・リライトしていくことも自動的に習慣化されていくというものです。

参考: Notionを活用した情報発信の方法（ブログ・記事オウンドメディア）

オフラインでもNotionを立ち上げて編集することが（一応）可能

NotionはアプリとしてPC上にダウンロードした場合、オフラインでも利用することが可能です。

ただし、Notionはアプリ立ち上げの際にネットワークと接続されていないとローディング画面のままとなり立ち上がりません。あらかじめアプリが立ち上げてあれば、そのままオフラインでも利用が可能です。

もちろん、WordPressにおいても入稿する前にメモアプリなどで保存だけしておくということはできますが、既存の記事をリライトする作業はオフラインにおいてはできません。（記事閲覧ができない）

ただし、画像やファイルを閲覧することはできません。あくまでテキストのみオフラインで閲覧・編集が可能です。

運悪くWi-fiのないカフェなどに入ってしまった場合でも、最低限の作業をすることができます。

次回、ネットワークにつながった状態でNotionを立ち上げることでクラウド上のデータと同期され（マージされる？）ます。

外部記憶装置として、更新・メンテナンスのしやすさは重要

そもそも私はNotionを「第二の脳」「外部記憶としてのデータベース」として利用しています。

その場合に、メンテナンスしやすいと言う事は非常に大切。

メンテナンスされ情報としての信頼性が高くなることで、ウェブサイト・Webメディアとしての信頼性も高くなっていくものだと考えます。

ブログ・記事更新としてNotionを採用できるかどうかは、Webサイトの運営体制による

NotionをWebサイトとして（CMSとして）採用するかどうかは、発信内容の性格や運営体制にもよります。

特に運営体制において、細かい承認フローが必要な場合であったり、会員限定のコンテンツを届けたいという場合においては、Notionではなく通常のCMSによる運営を考えていくべきでしょう。

ただ、Notionでも簡易的な承認フローを運用面でカバーしながら実施していくことは可能です。その承認フローの細かさや重要性によって採用するかどうかを決めていくとよいでしょう。

参考: Notion製Webサイト・ブログで記事を下書き非公開にする3つの方法

参考タグ: 🥡CMS一般

2: ライティング体験が最高。Notionでは内部リンク参照や外部リンクの埋め込みが簡単にでき、サクサク執筆・編集に集中できる

上記、Notionがサクサク動くことですぐにライティング環境に突入できる、ということにも関連。

ブログ・記事の公開ではテキストライティング以外にも、たとえば本文内に下記の要素を挿入することが多々あります。

見出しや引用部分などのタグ付け
内部リンク（自サイトの関連記事）
TwitterのツイートやYouTube動画の埋め込み

タグ付けはマークダウン記法で素早く済ませる

Notionはマークダウン記法に対応しています。

マークダウン記法とは、特定の記号をHTMLに該当するタグとして反映させる書き方です。

たとえば、下記のような記号を書き、半角スペースを挿入することで、該当のタグとしてNotion上に反映されます。

## // 見出し2
### // 見出し3
* // リスト
- // リスト
1. // 番号付きリスト
``` // コードブロック
[text](link)  // textにlink設置のテキストアンカーリンク
-- // 水平線
> // 開閉可能なトグルブロック
[] // ToDoボックス

一部、Notionのみのマークダウン記法もいれています。詳細は下記リンクより。

Notion Markdown Reference | Markdown Guide

またマークダウン記法同様、/ (スラッシュ)を入力すると、ポップアップが表示され任意のブロックを選択できます。（コマンドと呼ぶようです）

Notionでは内部リンクがすぐ・簡単に貼れる（メンションコマンド）

Notionでは@を用いて「メンション」を行うことができます。

@を押したあとにポップアップが表示され、一瞬でキーワード検索によっていわゆる内部リンクとしての設置が可能。

上の画像のような感じ。キーワードを途中まで入力し、該当のページを選択するだけでOK。

そしてこの一連の挙動が非常に高速なのが大きいです…！

TwitterやYouTube動画の埋め込みも自動で一瞬に

Twitterのツイート埋め込みや、YouTube動画の埋め込みも、該当のURLをペーストするだけで自動的に生成可能です。

埋め込みたいツイート（誰のでも構いません）のURLをNotion上にペーストすると、"Embed Tweet"という選択肢が現れます。

このEmbed Tweetを選択すると、下記のように埋め込み形式でツイートがNotion上に表示されます。

YouTube動画でも同様に、"Embed Video"をクリックすると動画がNotion上に埋め込まれ、ページ上から再生可能となります。

この埋め込み表示はSuperを介して公開されたWebサイト上でもそのまま反映されます。

内部・外部リンクを貼るときに重宝する「ブックマーク」作成機能

内部リンクや外部リンクを貼るとき、通常はテキストアンカーリンクの形（URLをテキストリンクの形で表示させること）が多いと思います。

CSSで制御することも可能なのですが、それをしても装飾として寂しく感じることがあります。

そこで活用できる機能が、"Create Bookmark"という機能。

URLをペーストして、"Create bookmark"を選択すると、下画像のようにカード形式でリンク先が表示されます。右側に表示される画像はページがサムネイルとして設定しているOGP画像属性から引っ張ってくるようです。

参考タグ: 🖋️ライティング

3: Notionには余計な設定項目がない。細かく設定する必要がなく、すぐに公開できる

SEOにおいて、テクニカルな設定をする価値が小さくなってきている

逆に言えば細かな設定ができないと言うことではある。ただし、近年のSEO においてはコンテンツそれ自体と外部リンクやオーソリティーなどの要素が全体のほとんどを占めています。

テクニカルなSEO設定をすることによって残りの部分の点数を稼ぐ事はもちろん可能だが、自分1人で執筆している場合など、リソースが少ない場合にその点にコストをかけるのは賢明ではありません。

（もちろん、 ECサイトなど動的にページが生成されるものが多いようなタイプのサイトにおいて、テクニカルSEOは非常に大事だと思います)

実際に、本ブログはSEOをほとんど意識していないにも関わらず、公開して1年、2年経った時点において複数キーワードで上位表示できています。

参考: Notionで2年間ブログを書き続けてきたSEO成果

参考カテゴリ: 🔍SEO | 🛒EC

Notionで公開前に設定する項目

Notionでコンテンツを作る場合に、意識的に設定している項目は下記くらい。

ページタイトル

参考: NotionをSuper.soで公開したときのタイトル・meta初期設定について

タグ、カテゴリ
サムネイル画像

サムネイル画像は、Notionのテンプレートでコンテンツの中で最初に設置した画像（コンテンツ上部から数えて最初の画像）がそのままサムネイルとして適用される

データベースにおいて、あらかじめフィルタをかけたビューを保存。そのビューを各記事の最後に設置するようにしています。

CTA（自社サイトへのリンクを設置）

記事の内容によっては、私の自己紹介&実績掲載WebサイトへのリンクをCTA（Call to Action）として設置しています。
Synced Block（同期ブロック）をあらかじめ作成しておき、ペーストする。

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

また、パーマリンク（公開用URL）はSuper.soの機能でタイトル内英文から自動的に作成してくれます。もちろんURLの編集も可能。

Notionではサムネイル画像を極めて簡単に設定できる

Super.soでサイトを公開する場合、Notionの本文内に一番最初に登場する画像をサムネイルとして認識するようです。

画像はUnsplashから引っ張ってくることができ、Notion内で完結して挿入可能です。

/image と入力すると、下画像のように画像ブロックがレコメンドで出現。

Unsplashを選択し、検索すると検索キーワードに関連する画像が出てくる。

あとは挿入したい画像をクリックするだけで挿入される。簡単すぎ。

ドラッグ&ドロップで画像サイズも可変できる。

このような画像挿入をコンテンツ内で行えば、その画像がNotionテンプレートの機能によりサムネイルとして設定される。はっきり言ってめちゃくちゃ早くてラク。

ただし、たとえばalt設定を行うことができないなどのアクセシビリティからの問題はあります。

4: SuperでNotionをWebサイトとして公開すると高速表示が可能。セキュリティ・保守を気にしなくてよい

Super.soでNotionをWebサイトとして公開する場合、サイトは静的化された形で公開されます。

参考: NotionをWebサイトとして公開する方法 : SuperとWraptas（Anotion）

静的化されることで、クラッカーとしてはソフトウェア側にたいして攻撃を行うことが非常に難しくなります。

また公開サイトのサーバーはSuper.so側が保守・メンテナンスをしているので、Superに任せる形でホスティング。

また静的化されていることから、非常に高速なサイト表示がなされます。

これがたとえば WordPressを自社・自身でホスティングしている場合には、自身でサーバー・ネットワーク等のセキュリティ対策を行い、さらにWordPressにおけるセキュリティ対策・定期的なアップデートが必要です。

高速表示させたい場合には、サーバー選定やCDNの利用、WordPress側での最適化に気を配る必要も出てきます。（いわゆるWordPressの高速化作業と呼ばれます）

記事を書きたくて、情報発信したくてWebサイトを立ち上げたはずなのに、保守やメンテナンスに労力を割かなければならないのは本末転倒ではありませんか…？

参考: 脱WordPressのための代替ノーコードツール・ヘッドレスCMS

WordPressとNotionライティング体験を比較した場合。WordPressで感じていたストレス

CMSはWordPressが世界シェアNo.1でブログやメディアサイトにもよく利用されています。

公開前の設定項目としては上記Notionと大差ありません。しかし、体感としてWordPressでの公開は非常に煩雑なものに感じてしまいます。

その原因として、Notionと比較してWordPressでは下記のことがライティングの際のストレスとなってしまうからでしょう。

WordPressは挙動が遅い、記事へのアクセスが良くない

いくら高速なサーバーを使っていても、Notionと比べるとWordPressの挙動は速いとは言えない。そもそも該当の記事にたどり着くまでに時間がかかることが多い。
Notionを使ってみるまで、WordPressの管理画面が遅いとは感じなかった。 KUSANAGI環境での VPSを利用していて比較的高速な環境だったとは思うが、それでもNotionに比べるともっさりした挙動を感じてしまう。
これは設計思想によるものなのかも。

参考タグ: ⚔️KUSANAGI | 🌩️VPS

WordPressではログインや公開作業など、ライティング以外の操作が必要

公開作業について。Notionでは Super.soと連携させている場合などにおいて、変更部分が自動的に、というかそのまま反映される。

これは一長一短で、たとえばチェック工程などのワークフローが組まれている場合などは WordPressなどのCMS運用が良いでしょう。

ただ自分ひとりで書いている場合など、あるいはチェック前にとりあえずスピード重視で公開したいという場合には、この「公開ボタンを押して待つ」、そして「公開前に各設定が正しいかチェックする」という工程が意外にストレスとなっているものだと気づいた。

ログインについても同様。セキュリティを万全にしたいのなら2FA(2段階認証)などできっちり防御するほうがもちろん安全。

ただし、WordPressで運営サイトの多くがセキュリティ対策が不十分であるという事実がある。定期的な最新版へのアップデートができていない、2段階認証を設置していない、セキュリティプラグインを導入していない(これは任意)など。
きっちり保守運用をしないのであれば、セキュリティはホスティング会社の運営に任せてしまう、という方が賢明。たとえばnoteやはてなブログなど、プラットフォーム上での発信はそのようなセキュリティ・保守からの解放というメリットもある。

WordPressではコンテンツ（記事）制作・ライティング体験が気持ちよくない

Notionはたとえば前述したメンション機能や、Unsplashと連携した画像挿入機能などによって、ライティング時に不必要な部分へ脳内メモリを割くことがほとんどありません。
ライティング以外の部分へのストレスがなくなるにより、とにかく「コンテンツを作る」、「ライティングする」という体験にフォーカスすることができます。

同様の思想をもつプラットフォームとして note があるが、こちらはやはり「完成した文章」を発信する場所。そうしたプラットフォームの中ではnoteが最もライティングに集中できると思うけれど、Notionのようにアウトライン・メモ形式での発信は難しいでしょう。
アウトラインでの公開、という意味では Scrapbox はまさしくそれ。エンジニアの方が技術ブログを公開する際に利用しているのを見かける。Scrapboxでも良いだろうが、個人的にはWebサイトとしての美しさや機能とのバランスがとれるNotionの方が良いと感じます。

WordPressは「コンテンツ（記事）そのもの」の管理に特化しているわけではなく、デザインやその他管理機能など、多くの機能を一体化して管理するシステムとなっています。

この点、「データ・コンテンツ」の管理に特化したNotionのほうがユーザー体験が好ましくなることは、想像に難くないでしょう。