エディタの完成度で比較するNotionとWordPress

NotionとWordPressのエディタ両者に共通している機能

マークダウン記法対応

WordPressのブロックエディタにおいては標準でマークダウン記法が有効になっています。

ただし、WordPressでクラシックエディタを利用している場合、「マークダウンボックス」を選択してマークダウンボックスを作成してから、その中にマークダウン記法で書いていく必要があります。

WordPress公式アプリや、MarsEdit4などサードパーティ製の投稿ツールでは、そのままの形でマークダウン記法に対応しているものもあります。

参考: MarsEdit 4をMacブロガーが導入すべき8つの理由と、3つの問題点

スラッシュ(/)によるブロックの呼び出し

WordPressではブロックエディタのみ対応。

記事の自動保存機能

Notion、WordPressともに保存ボタンを押すことなく、自動的に記事が保存されます。

ただし、WordPressのほうが保存ペースは粗く、数秒〜数十秒程度の自動保存されないタイムラグが発生する感覚です。

WordPressにおいては保存ボタンを押すことが想定されているようです。保存ボタンを押さずに記事ページを閉じようとすると、ブラウザから警告が表示されます。

WordPress : 投稿とページのリビジョン – 日本語サポート

投稿とページのリビジョン

WordPress.com は書かれた内容を自動保存し、ブログの投稿やページごとに25個のリビジョンを保存します。リビジョンがあると、ページや投稿の以前のバージョンを復元できます。目次保存と自動保存 WordPress.com の投稿やページを書いたり編集したりしている時、変更点は数秒ごとに自動保存されます。エディターの右上にある「公開モジュール」で、表示が「下書きとして保存」、「保存中」、「保存しました」と変わるのを確認できます。自動保存は、すべての投稿とページで自動的に有効になっています。この機能をオフにすることはできません。「下書きとして保存」を選択すると、手動で保存できます。公開したコンテンツの自動保存すでに公開された投稿やページを編集する時、自動保存は機能していますが、公開されたコンテンツの上書きは行いません。「公開」モジュールの「更新」ボタンを押すまで、変更点はブログに反映されません。最終の自動保存の内容や、その他の投稿のリビジョンは、「Post Revisions Module」で確認できます。投稿やページを自動保存で編集する編集中にオフラインになった場合、または下書きを書いている途中で誤って投稿やページから離れた場合、WordPress.com はウェブブラウザーのローカルストレージに投稿を保存します。エディターに戻ると通知が表示されます。以前の下書きに戻すには、「閉じる」をクリックしてください。最新の自動保存を復元するには、「復元」をクリックしてください。いつでもリビジョンを閲覧し、コンテンツの以前の状態を復元することができます。リビジョンを表示する「リビジョン」画面は、投稿やページのバックアップコピーをすべて表示します。下書きを手動で保存するたび、または「更新」を選択するたび、リビジョンが保存されます。WordPress.com は、ブログの投稿やページごとに、最新の 25 個のリビジョンを保存します。リビジョンを確認することで、直近の変更を見直し、必要であれば以前のバージョンを復元することができます。「参加サイト → サイト → ページ」(または「投稿」) をクリックします。リビジョンを表示したいページや投稿を編集します。右側の「文書設定」の下に「リビジョン」があります。「リビジョン」モジュールは、リビジョンが存在しない時は表示されません。「旧エディター」をお使いの方は、エディターの上部にある「履歴」リンクを使用して、「リビジョン履歴」を表示します。リビジョンを比較する「リビジョン」を表示するには、右側のリビジョンリストから該当するリビジョンをクリックします。また、キーボードのとキーを使用して、キーボードナビゲーションを呼び出すこともできます。各リビジョンの変更点は青 (追記) と赤 (消去) でハイライトされます。「分割」ボタンをクリックすると、リビジョンの消去部分が左側、追記部分が右側に表示されます。選択したリビジョンを表示すると、その1つ前のリビジョンとの比較も表示されます。リビジョンを復元するページの以前のバージョンを復元するには、希望するリビジョンを選択し、下部の「読み込む」ボタンをクリックします。「読み込む」ボタンをクリックすると、選択したリビジョンがエディターに読み込まれます。変更点を保存するには、下書きを保存するか、ページを「更新」します。リビジョンの閲覧権限ブログの管理者と編集者すべてが、投稿のリビジョンを閲覧できます。投稿者は、作成した投稿すべてのリビジョンを閲覧できます (ホームページで投稿者向けに表示されるのは、自分が作成した投稿のみです)。寄稿者は下書きで投稿のリビジョンを閲覧できます。リビジョンの一部を復元するリビジョンの一部を、現在のドキュメントにコピーできます。リビジョンの復元したい部分をハイライトし、「キャンセル」をクリックして、「リビジョン」ウィンドウを閉じます。リビジョンの一部をドキュメントにペーストします。リビジョンの一部をコピーするのは大変です。リビジョンにはテキストだけではなく、HTML ソースコードも含まれているからです。テキストをペーストする前に、リビジョンのテキストを HTML ブロックにペーストするか、ブロックを HTML ...

wordpress.com

オブジェクトの埋め込み

オブジェクトの埋め込みとは、URLをペーストするだけで自動的にURL元から情報を呼び出す形で記事内にブロックを埋め込むことができる機能です。

たとえば

YouTube動画の埋め込み表示
Twitterのツイート埋め込み
Instagramの投稿埋め込み

などがオブジェクトの埋め込みです。

Notion, WordPressブロックエディタともにオブジェクトの埋め込み表示に対応しています。

オブジェクトの埋め込み | WordPress.org 日本語

オブジェクトの埋め込み

WordPress サイトに動画・画像・ツイート・音声ファイルなどのコンテンツを埋め込むのはとても簡単です。 WordPress 5.0 から実装されたブロックエディターではよりシンプルな方法で WordPress サイトへコンテンツを埋め込むことができます。埋め込みブロックをを使うことで、URL をコピーし、ブロック内にペーストするだけです。各特定のブロックはそれぞれカスタマイズの設定ができます。各ブロックの説明は下記表もしくはコアのブロックリストで確認できます。以下がすべて利用できます。注意点: Twitter - 古いバージョンの WordPress では HTTPS 埋め込みに問題が発生することがありますが、URL を HTTPS HTTP に変更すれば修正できます。 YouTube - 公開済み、または限定公開の動画およびプレイリストのみに対応しています。「非公開」動画は埋め込めません。 Tumblr - 投稿 (name.tumblr.com/post/etc) のみが認識されます。個別の画像 (name.tumblr.com/image) は埋め込めません。 Facebook と Instagram リンクの埋め込みは、 Facebook 社が oEmbed エンドポイントを廃止する決定をしたことにより、2020年10月24日以降は動作しません。Facebook と Instagram のリンクをサイトに埋め込みたい場合、エンドポイントへのアクセスにはデベロッパーアカウントと appid

ja.wordpress.org

表の作成。Notionはデフォルトで様々な見た目のテーブルに対応

従来まではNotionで表を作成しようとすると、いかなる表テーブルもデータベースで作成する必要がありましたが、2021年11月のアップデートでシンプルなテーブルを作成することができるようになりました。

/tableコマンドから呼び出し可能です。

Notionテーブルは通常のシンプルなテーブル以外にも、様々な見た目で実装できることが特徴的。

たとえば下記のような見た目のテーブルを作成することができます。

カラフルな評価つきテーブル

3カラムの価格表

価格と機能のグリッドテーブル

クラスレポートのテーブル

詳細や作り方については、11 Ways To Design And Arrange Basic Tables In Notion — Red Gregory を参考にしてください。

WordPressエディタにおいてもテーブルは利用可能です。

ただし、WordPressエディタでNotionのような多機能なテーブルを用いたい場合には、別途プラグインを導入する必要があるでしょう。

NotionにあってWordPressにない機能

アウトライナーとしてのタブキーインデント、1文単位での配置入れ替え

もともとWordPressで運用していた頃、入稿前までは Roam Research というアウトライナーでメモ・アウトライン作成を行っていました。

アウトライナーに必要な機能としては下記があります。

インデントによる文章の入れ子構造化
インデントした箇所をトグルボタンで開閉（表示/隠すの切り替え）
1文単位での配置入れ替え

このうち、Notionは2つめのトグルボタンでの開閉には対応していません。したがって論文レベルの長文を書きたい、という場合には向いていないかもしれません。

が、ブログ記事程度の長さを成果物とするアウトライナーとしては十分です。

ライティングにおけるアウトライナーの重要性、アウトライナーとしてのNotionエディタの完成度については下記記事で説明しています。

アウトライナーとしてのNotionエディタの完成度

WordPressもたしかにテキストを入れ替えることは可能ですが、粒度が「1文のかたまり」（パラグラフ）となっており、pタグでまとめられている箇所での入れ替えを想定されています。

クラシックエディタの場合、デフォルトがマークダウンブロックではなく通常のpブロックであることから、入れ替えたい都度にマークダウンブロックをいちいち作成するのは非常に面倒。

ブロックエディタの場合はクラシックエディタに比べると楽に文章の入れ替えが可能ですが、1行単位ではなくあくまで「1文のかたまり」で動かすことを想定されています。

また、現状ドラッグ&ドロップ動作の出来が悪く、操作していて不快に感じることが多いです。

文章ブロックをうまくつかめない
ドロップ時、挿入したい箇所がうまく選択されない

と、WordPressにおける文章配置変更はあまり気持ちの良い体験ではありません。

アットマーク(@)による自サイト内の記事検索

Notionではアットマーク(@)を記述するだけでNotion内の全データベースを瞬時に検索、他記事へのリンクを設置することができます。

これはたとえばSuperやWraptasで公開した場合もaタグとして設置され、内部リンクとして有効に機能します。

参考:

Notionにおける内部リンクの設置方法

対するWordPressで同様のことをしようと思うと、ブロックエディタ・クラシックエディタを問わず「リンクボタン」をクリックする必要があります。

ブロックエディタの場合

下記はクラシックエディタで、アンカーリンクテキストを入力してからリンクを貼る動作を行う場合。

クラシックエディタの場合

細かいポイントではありますが、記事が増えてくると自分の記事を検索して内部リンクを貼りたい、という要求は大きくなってくるはずです。

内部リンク設置はSEOの観点からも非常に重要であり、Notionでは設置動作をキーボードから手を離さず快適にできるというのは大きなポイント。

Webブックマーク形式でのオブジェクト埋め込み

WordPressでもオブジェクト埋め込みが可能なことは前述しましたが、Notionでは通常の記事ページへのリンクを設置する際、URLをペーストするだけで「Webブックマーク」というリッチ形式での表示が可能です。

たとえば、私のWordPressブログ「魔法使いの道具箱」の記事をwebブックマークで表示させると下記のようになります。

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

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