悩む人Aグーテンベルクとクラシックエディタの違いは何だろう？グーテンベルクの基礎知識が知りたい
悩む人Bグーテンベルクのブロック機能で何ができるの？
メリットやデメリットも教えてください。
この記事は、こんな疑問の声にお応えします。
WordPressの編集画面には2つのタイプがあります。新エディタ「Gutenberg（以下グーテンベルク）」と旧エディタ「Classic Editor（以下クラシックエディタ）」です。
グーテンベルクは段落ごとの文章や見出し・画像などを1つのブロックとし、ブロックごとに編集できます。
直感的な操作でHTMLやCSSの知識が不要になったというのも、グーテンベルクの特徴のうちの1つでしょう。
| エディタ名 | WordPressバージョン | リリース | できること |
|---|---|---|---|
| グーテンベルク | WordPress5.0以降 / 新エディタ | 2018年12月 | 直感的なブロック操作でHTMLやCSSが不要 |
| クラシックエディタ | WordPress5.0以前 / 旧エディタ | 「ビジュアルエディタ」と「テキストエディタ」の2種類で編集できる |
2018年12月以降、このグーテンベルクが標準搭載されることとなりました。
そんなグーテンベルクは一言では伝えきれないほどの、沢山の魅力があります。
- WordPress5.9からフルサイト編集（FSE）に対応
- Gutenberg（グーテンベルク）でできる10のこと
それでも一言でまとめるとすれば「直感的な操作で効率化することができる（時間の短縮）」です。
もちろんデメリットもありますので、そちらもしっかり解説していきます。
ブロックエディタ・Gutenberg（グーテンベルク）とは？
Gutenberg（以下グーテンベルク）は、WordPress5.0（2018年12月6日リリース）から標準搭載されたブロックエディタです。ブログで言うところのエディタとは、投稿画面を編集する機能。
2018年末以降にWordPressを始めた方からしたら、使い慣れている投稿編集画面です。
2018年12月以前のWordPressはクラシックエディタという投稿編集画面でした。現在は全てのWordPressユーザーがこのグーテンベルクを使っています。
グーテンベルクは文章や見出し・画像などのコンテンツがそれぞれブロックという1つの塊で構成されています。
ブロック機能はHTMLやCSSの知識ゼロでも直感的な操作で記事作成することができるので、使いこなせば大変便利なエディタです。
人気のWordPressテーマSWELLはこのブロックエディタに特化しています。
ブロックエディタとSWELLを組み合わせて使うことで、HTMLやCSS知識ゼロでも「このブログ、真似したい」と思ってもらえるようなプロ仕様のブログデザインにすることが可能です。
WordPress5.9からフルサイト編集（FSE）に対応
2022年1月26日リリースのWordPress5.9からフルサイト編集（Full Site Editing）に対応。グーテンベルクが大幅改良されました。
フルサイト編集とは、記事投稿のようにサイドバーやヘッダー、フッターといったサイト全体をブロックを使って編集できるという機能です。
と言っても標準搭載ではなく、フルサイト編集に対応しているテーマのみ現時点で対応となっているようです。
参考 : フルサイト編集 | WordPress.com
対応テーマ一覧
- Twenty Twenty-Two
- Clove
- TT1 Blocks
- Zeever
- Extendable
フルサイト編集は、現時点で多くの無料テーマに対応しています。
WordPress公式のテーマ検索ページから「フルサイト編集」タグを入れれば多くのテーマが引っかかるはずです。
人気のテーマSWELLは現時点で非対応。SWELLはこまめにアップデートされるので、今後対応される可能性は十分あると言えるでしょう。
Gutenberg（グーテンベルク）の由来
グーテンベルクは、500年以上前に活版印刷技術を発明したヨハネス・グーテンベルクという人物からきています。
活版印刷とは昔の印刷技術で1文字をハンコのような金属にし、それを組み合わせて文章を作り印刷する技術です。WordPressブロックエディタのグーテンベルクはかつて印刷業界に革新が起きたように、WordPressにおける記事投稿の革新を目的としています。
参考 : Gutenberg | WordPress.org
ちなみに今までのWordPressバージョンは、ジャズやピアニストアーティストの名前がつけられています。
- WordPress4.8 William John Bill “Evans” アメリカのジャズピアニスト
- WordPress4.9 Billy Tipton アメリカのジャズミュージシャン・バンドリーダー
- WordPress5.0 Bebo Valdés キューバのピアニスト・作曲家
WordPress5.0のバージョン名はキューバのピアニストが由来の「Bebo Valdés」。
その中のブロックエディタ機能で、グーテンベルクという名前が使われているのです。
Classic Editor（クラシックエディタ）とは？
新エディタのグーテンベルクの基礎知識を把握したところで、旧エディタ「クラシックエディタ」の基礎知識をざっくりですが見てみましょう。
「グーテンベルクでできることが今すぐ知りたいよ」という方はこちらからどうぞ。
クラシックエディタは、グーテンベルクが登場する前に標準搭載されていた旧エディタです。
クラシックエディタの記事編集は非常にシンプルな2パターン。「ビジュアル」と「テキスト」です。
「ビジュアル」が実際の記事の見た目で編集する画面。「テキスト」がHTMLを編集する画面になります。
グーテンベルク登場と同時に、クラシックエディタと呼ばれるようになりました。
投稿編集するためのエディタがないとCMS（ブログ作成ツール）として成立しないので、WordPreses登場からあったことになります。
このクラシックエディタの「ビジュアル」を実装するための機能に使われているのが、TinyMCEというエディタツールです。TinyMCEは2004年からの登場ですから、今のクラシックエディタの「ビジュアル」になったのは2004年以降と考えられます。
参考 : TinyMCE | ウィキペディア
最終的なクラシックエディタのかたち「ビジュアル」と「テキスト」の切替ができるようになったのが、2007年1月22日リリースのWordPress2.1からです。
参考 : WordPress 2.1 Ella | WordPress.org
そのことから「ビジュアル」と「テキスト」2パターンの切替ができるクラシックエディタの始まりは2007年1月22日ということになります。
Gutenberg（グーテンベルク）でできる10のこと「SWELL・Cocoon比較」
一言でグーテンベルクでできることといっても、高機能すぎて覚えきれません。
「記事を書く上で、必要な機能をその都度使っていく」
その方法がベストかもしれません。
この章「Gutenberg（グーテンベルク）でできること」では、実際に使う機会が多く実用性のあるブロック機能を10紹介します。
グーテンベルクのブロック機能はテーマによって微妙に異なり依存するパターンもあります。
ここではグーテンベルクに特化した国内シェアNo.1の有料テーマ「SWELL」と、無料と思えないほど超高機能の無料テーマ「Cocoon」を使って解説していきます。
賛否両論あるでしょうが、有料テーマ無料テーマそれぞれで3本の指に入るほどの高機能人気テーマです。
【グーテンベルクでできること】調査に使ったテーマ
| テーマ | 料金 | 開発者 / 販売者 | 公式サイト |
|---|---|---|---|
| SWELL | 有料「17600円（税込み）」 | 了 / 株式会社LOOS | https://swell-theme.com/ |
| Cocoon | 無料 | わいひら | https://wp-cocoon.com/ |
①吹き出し
| テーマ | 対応 | ブロック名 |
|---|---|---|
| SWELL | 〇 | ふきだし |
| Cocoon | 〇 | 吹き出し |
ブログ記事にかかせないのが吹き出しです。
吹き出しの例
ユーザー記事に吹き出しを使おう
Web犬タロウ吹き出しを入れることで記事が華やかになるね！
吹き出しとは主に漫画の用語で、登場人物（ブログ運営者やキャラクター）のセリフを表現する空間。これを吹き出しと言います。現代漫画にとって吹き出しは必要不可欠なものです。
最近はこの吹き出しをブログ内のコンテンツに入れるのが主流で、ここ数年で見かける機会が多くなってきました。
具体的にはブログ運営者や登場キャラクターのセリフや、悩む人のセリフや考えていることを表現するために使われます。文章の間に吹き出しを挟むことで、読者を飽きさせないという効果が期待できます。
吹き出しはブログ集客において大事な要素のうちの1つです。手短にまとめるとこのような効果が。
- 吹き出し内の文もコンテンツとして認識される
- 読者の疑問や悩みを吹き出しにすることで共感されやすくなる
- 会話形式にすると盛り上がる雰囲気を演出できる
- 読者を飽きさせない（離脱率を下げる）
- 記事にストーリー性が生まれる
あくまでも推測ですが、SWELLやCocoonの普及でここまで吹き出しが広がったのだと思われます。メリットが多いというのも吹き出しが使われる理由でしょう。
②キャプションボックス / タブ見出しボックス
| テーマ | 対応 | ブロック名 |
|---|---|---|
| SWELL | 〇 | キャプションボックス |
| Cocoon | 〇 | タブ見出しボックス |
SWELLでよく使う機能と言えばキャプションボックスです。
中にリストを作り伝えたいポイントを箇条書きにしてタイトル付けすることができますし、簡易的なアイコンを入れることができます。
キャプションボックスの例
- 赤パジャマ黄パジャマ茶パジャマ
- 隣の客はよく柿食う客だ
- この釘はひきぬきにくい釘だ
このようにアイコンやタイトルを入れたり、ボックスの中に箇条書きを入れることができます。
SWELLの専用機能を使えばキャプションボックスの形・アイコン・色が自由自在。思い通りに記事を装飾することが可能です。
キャプションボックスの例・その2
- 赤パジャマ黄パジャマ茶パジャマ
- 隣の客はよく柿食う客だ
- この釘はひきぬきにくい釘だ
SWELLのキャプションボックスに相当するのが、Cocoonのタブ見出しボックス。2つとも伝えたいポイントをまとめて目立たせるのに効果を発揮しますが、やはりカスタマイズ性高いのがSWELLのキャプションボックス。便利で実用性が高いブロック機能です。
③リスト入りグループ / アイコンリスト
| テーマ | 対応 | ブロック名 |
|---|---|---|
| SWELL | 〇 | リスト入りグループ |
| Cocoon | △ | アイコンリスト |
続いて紹介する使える実用的なブロック機能が、リスト入りグループです。
アイコンが使える使えないの多少の違いがありますが、SWELLのリスト入りグループに似ているのがCocoonのアイコンリストです。ボックスを装飾編集することができます。
具体的にはこのように使います。
リスト入りグループ2つの例 | SWELLの場合
- 赤パジャマ黄パジャマ茶パジャマ
- 隣の客はよく柿食う客だ
- この釘はひきぬきにくい釘だ
- 赤パジャマ黄パジャマ茶パジャマ
- 隣の客はよく柿食う客だ
- この釘はひきぬきにくい釘だ
リスト入りグループ2つの例 | Cocoonの場合
Cocoonの場合は箇条書きのアイコンを装飾編集することができます。Cocoonでも使いこなせば豊かな表現を演出することができますが、SWELLの方が「ボックスの種類」「アイコンの種類」ともに選べるバリエーション豊富です。
④文字装飾
| テーマ | 対応「マーカーの色」 | 対応 – ふりがな（ルビ） | 総合 |
|---|---|---|---|
| SWELL | 〇「赤、黄色、緑、青」 | × | △ |
| Cocoon | 〇「赤、黄色、青」 | 〇 | 〇 |
記事編集で欠かせないのが文字装飾です。
単に黒文字だけだとなんだか味気ない印象になってしまいますし、強調したいポイントはしっかり色や太字で目立たせたいところ。
グーテンベルク標準では「太字」「イタリック（斜め文字）」「取り消し線」などの装飾機能がついています。SWELLとCocoonはそこにプラスアルファで独自の文字装飾機能が付いているんです。
使える機能としては「ルビ」と「マーカー」でしょう。
- 赤マーカー
- 黄色マーカー
- 緑マーカー
- 青マーカー
ルビは漢字のふりがなを付けるという機能です。教育系や外国人に向けたブログを運営する方はかなり重宝するかと。
現在ルビは、Cocoonのみ対応しているという状況。CocoonとSWELLは業務提携しているのでそのうちSWELLにも実装される可能性がありますが、現時点ではまだ未定です。
特にマーカーは使う機会が多いので、ブロガーにとっては嬉しい機能のうちの1つです。
マーカーを作るためのHTMLに<mark>あります。ですが、CSSでカスタマイズしないとデフォルトのままではなんだかしっくりこない印象です。
SWELLやCocoonのマーカー文字装飾は、お洒落でしっくりくるレイアウトなのでCSSの知識ゼロでも簡単に使うことができます。比較して見れば、その違いが一目瞭然です。
| HTMLマーカータグ「<mark>」 | 赤パジャマ黄パジャマ茶パジャマ |
| SWELL・マーカー文字装飾①「黄色」 | 赤パジャマ黄パジャマ茶パジャマ |
| SWELL・マーカー文字装飾②「緑色」 | 隣の客はよく柿食う客だ |
| SWELL・マーカー文字装飾①「青色」 | この釘はひきぬきにくい釘だ |
⑤アフィリエイトボタン＆マイクロコピー
| テーマ | 対応 | ブロック名 |
|---|---|---|
| SWELL | 〇 | SWELLボタン |
| Cocoon | 〇 | ボタン、または囲みボタン |
アフィリエイトで収益化をしている方にとって必須なのが、アフィリエイトボタンやマイクロコピーです。
アフィリエイトの広告リンクには3種類あります。
- バナーリンク
- テキストリンク
- ボタンリンク
アドセンスの場合、バナーリンクでもある程度のクリック率が見込めますがアフィリエイトの広告リンクに使う場合は主にテキストリンクかボタンリンクになるかと思います。
そしてボタンリンクに添える短い文をマイクロコピーと言います。主に読者の行動を促す目的で使われますが、マイクロコピーという言葉の意味自体は、ボタンリンクだけでなく問い合わせフォームやログイン画面、エラーメッセージなどわりと幅広く使われます。
グーテンベルクで言うところのマイクロコピーは「ボタンリンクに添える、ユーザーに行動を起こしてもらうための短い文」という意味になります。
アフィリエイトボタン＆マイクロコピーの例 | SWELL
＼ ボタンです ／
⑥FAQ「よくある質問」
| テーマ | 対応 |
|---|---|
| SWELL | 〇 |
| Cocoon | △ ※寄付特典 |
読者に寄り添う記事を目指すなら、欠かせないのがFAQ。俗に言う、よくある質問です。
ブログジャンルによってはFAQは必要不可欠と言っても過言ではありません。
通常、WordPressにFAQを設置する場合はプラグインを入れる必要があります。
プラグインを使えば簡単に実装することができますが、プラグインの入れすぎはWebページの速度低下の原因につながります。
SWELL、Cocoonどちらも対応していますが、Cocoonは有料の寄付特典になっております。
FAQの例 | SWELL
- SWELLはFAQに対応していますか？
-
はい。対応しています。
- CocoonはFAQに対応していますか？
-
はい。対応していますが、寄付特典という条件つきのようです。
⑦ステップ
| テーマ | 対応 |
|---|---|
| SWELL | 〇 |
| Cocoon | × |
ステップはSWELL独自のブロック機能になります。
WordPressテーマは数多くありますが、確認できている中で対応しているのはSWELLのみです。
手順を順序立てて解説するときに使います。
ステップの例 | WordPressの始め方
まずは独自ドメイン、そしてブログ名を決めましょう。
できるだけ短く、ブログ名や運営者に関連するドメインにします。
レンタルサーバーを決めたら、契約をしましょう。
レンタルサーバーに独自ドメインを設定してWordPressをインストールしたら完了です！
ステップブロックはこのように、順序立てて解説するときに使います。「STEP」は「順序」などに自由に変更することができるので、かなり使い勝手の良いブロックと言えるでしょう。
⑧タブ切り替え
このブロック機能もブログのジャンルによっては使える機能と言えるでしょう。
| テーマ | 対応 | ブロック名 |
|---|---|---|
| SWELL | 〇 | タブ |
| Cocoon | △ ※ トップページのみ | Cocoon 設定 / タブ一覧 |
こちらも便利なブロック機能、タブ切り替えです。
このようにタブを別ブラウザで開いているかのように、クリックして切り替えることができます。
タブ切り替えの例その1 | SWELL
隣の客はよく柿食う客だ
タブ切り替えの例その2 | SWELL
赤パジャマ黄パジャマ茶パジャマ
SWELLは投稿記事でも使うことができますが、Cocoonはトップページのみです。
お洒落なデザインの印象になったり、長い文章がスッキリまとまるというメリットがあります。デメリットとしては訪問した読者がクリックしないと切り替わらないということです。
CSSでこの機能を実装するとなると、正直厳しく難易度が高いです。
ブログのジャンルによっては使える機能だと言えるでしょう。
⑨アコーディオン
| テーマ | 対応 | ブロック名 |
|---|---|---|
| SWELL | 〇 | アコーディオン |
| Cocoon | 〇 | アコーディオン（トグル） |
アコーディオンは、閉じたり開いたりするブロック機能です。
最初は閉じた状態で、クリックすることで開きます。
アコーディオンの例 | SWELL
用途としては文章内の専門用語について解説するとき。文章全体でさほど重要なポイントではなく、場所をあまりとられることなく簡潔に解説したいときです。
最初は閉じた状態ですから、見たくない読者はスルーできます。
「見たい読者だけ見て下さい」そんなときに使えるブロック機能です。
➉ボックスメニュー
| テーマ | 対応 | ブロック名 |
|---|---|---|
| SWELL | 〇 | ボックスメニュー |
| Cocoon | 〇 | ボックスメニュー「外観→ウィジェットから」 |
ボックスメニューは、主にトップページで使うアイコン型メニューのことです。
ボックスメニューの例 | SWELL
読者に伝えたい情報やカテゴリを、アイコンで視覚的にアプローチできるというメリットがあります。
Cocoonは以前から対応していましたが、業務提携のSWELLも2022年の4月から対応することとなりました。
ボックスメニューを入れるだけでトップページの印象が華やかになります。
これをHTMLやCSSだけで実装するとなると難易度が高いので、心が折れるほどの作業です。
SWELLやCocoonのボックスメニューメニューを使えば、調べながらでも20分ほどで完成させることができます。ボックスメニューはブログでサイト型のトップページを作るときに活躍してくれることでしょう。
グーテンベルク3つのメリット
- 直感的に操作できる「投稿作業の効率化」
- HTMLやCSSの知識ゼロでもレイアウトできる
- リライトがしやすい
グーテンベルクに、使うことで得られる3つのメリットがあります。
1つずつ順に解説していきますので、見ていきましょう。
直感的に操作できる「投稿作業の効率化」
投稿作業の効率化。
グーテンベルクのメリットとして真っ先に思い浮かぶのがやはりこれでしょう。
直感的な操作による作業の効率化。つまり時間を短縮することができるということ。
これがグーテンベルクのベネフィット（メリットや使うことで得られる体験）と言えます。
段落ごとの文章や見出し・各ブロック機能「ボックスや箇条書きなど」を1つのブロックとして、簡単操作で並び替えすることができます。
クラシックエディタに慣れ親しんだユーザーからしたら、最初は抵抗感があるかもしれません。グーテンベルクに慣れれば直感的な操作で自由自在に作業を進めることができますから、大きなメリットがあるはずです。
HTMLやCSSの知識ゼロでもレイアウトできる
2つ目のメリットは、知識がない全くの初心者でも完成度の高いレイアウトを作ることができる点です。
Webのレイアウトで難しいのが、HTMLやCSSの知識。
HTMLやCSSはフリーランスとしてレイアウトを1から学びたいのであれば必須のスキルとも言えますが、ブロックエディタを使えばそのような知識を覚えなくても問題なくブログ運営することができます。
レイアウトを1から全て自分で作るとなると、かなりの時間と労力を費やすことになってしまいます。
できれば記事コンテンツの作成に注力したいところなので、効率化できるところはブロックエディタをガンガン活用していきましょう。
リライトがしやすい
3つ目のメリット。それは、リライトがしやすくなるということです。
ブロックごとがパッと見でわかりやすく、どこを修正すればいいのか一目瞭然でわかります。
「ここのブロックを修正したら、次は下のブロック。一番下のブロックを修正したらリライト完了！」
こんな感じで、ブロックで区切られていますからわかりやすいです。
また、ブロックごとに上下移動が簡単にできるので見出し（h2）の並びを変えたいというときもすぐさま修正することができます。
グーテンベルク3つのデメリット
- クラシックエディタの方がいいという声も
- 慣れるまで使いづらい
- HTMLやCSSの細かい調整がしづらい
直感的な操作で使いやすいグーテンベルクですが、もちろんデメリットもあります。
WordPress5.0がリリースして間もない初期の頃はテーマやプラグインに対応しきれていないという状況でした。初期はそれがデメリットでしたが今は状況が変わりつつあります。
リリースから4年目の今では各テーマやプラグインの対応が進んで使いやすくなってきました。
それ以外のデメリットと言える部分3つをまとめてみましたのでご覧ください。
クラシックエディタの方がいいという声も
グーテンベルクのリリースから今年で4年目になりますが、クラシックエディタは一部ユーザーにおいて今だ根強い人気と需要があります。
クラシックエディタの評判
人気の理由はシンプルな操作性です。グーテンベルクは直感的な操作が特徴とは言え、昔からのクラシックエディタに慣れた人にとっては「クラシックエディタに戻したい」。そう思ってしまうのは無理もないでしょう。
そのようなニーズをとらえたプラグインに「Classic Editor」があります。WordPress公式のプラグインです。
クラシックエディタを使いたい派の方はこの「Classic Editor」を使えば問題解決できますが、2022年度中にサポートが終了してしまうとのこと。
それ以外でクラシックエディタを使うためのプラグインに「Disable Gutenberg」があります。気になる方は試してみたらどうでしょうか。
慣れるまで使いづらい
グーテンベルクのデメリット2つ目は、慣れるまで使いづらく感じてしまうということです。
たしかに旧エディタのクラシックエディタに慣れた人からしたら最初は違和感あるかと思います。実際筆者もそうでした。
目新しいものはエディタに限らず慣れないものです。
これは使い慣れていくうちに慣れてくるものですし、SWELLといったグーテンベルクに特化した有料テーマを使うことでカスタマイズの幅が驚くほど広がります。ブログ活動を効率的にしてくれます。
まずは慣れるまで使ってみて、どうしてもダメな場合は「Classic Editor」や「Disable Gutenberg」のプラグインでクラシックエディタに戻すという選択肢もあります。
実際、慣れたらグーテンベルクの方が使いやすいという声が多いのも事実です。
グーテンベルクの評判「慣れたら使いやすいという意見」
どっちが使いやすいか、それはあなた自身が決めることかもしれません。
HTMLやCSSの細かい調整がしづらい
クラシックエディタの記事編集はシンプルに2パターン。「ビジュアルエディタ」と「テキストエディタ」です。
ビジュアルが実際の記事の見た目で編集する画面。テキストがHTMLを編集する画面になります。
クラシックエディタはテキスト画面で全体のHTMLやCSSをカスタマイズすることができます。
グーテンベルクの方はHTMLやCSS編集ができないイメージですが、編集することが可能です。
ですが画面全体のHTMLやCSSではなくブロック単位の編集しかできません。
とは言え、グーテンベルクを使いこなせばは直感的な操作で自由自在なカスタマイズをすることができます。やはり慣れればグーテンベルクの方が使いやすいと言えるでしょう。
まとめ | ブロックエディタの魅力を最大限に引き出せるテーマ
今回はグーテンベルクとは何なのか？ということから、ブロックエディタの魅力を解説しました。
グーテンベルクには、もちろんデメリットもありますがそれを打ち消すだけの沢山の魅力と得られるメリットがあります。
- 直感的に操作できる「投稿作業の効率化」
- HTMLやCSSの知識ゼロでもレイアウトできる
- リライトがしやすい
そしてなんといっても、ブロックエディタの魅力を最大限に引き出してくれるのがWordPressテーマです。
ここでは「無料版」と「有料版」それぞれ最強だと思われる2つのテーマを紹介しました。
- 「無料版」Cocoon
- 「有料版」SWELL
忖度なしでどちらがいいのか、正直に言いましょう。どちらもいいテーマです。
無料テーマでブロックエディタの機能を使いこなしたいのであればCocoon。本気のブログ運営を目指すのであればSWELL一択。
今回【ブロックエディタでできること】ということで「こんな機能あったらいいな」「この機能があるから、このテーマを選ぶ」という厳選10の機能を解説しました。
結果はこのような感じに
| テーマ | 対応【〇】 | 中間【△】 | 非対応【×】 | 総合 |
|---|---|---|---|---|
| Cocoon | 6 | 3 | 1 | 7.5 |
| SWELL | 9 | 1 | 0 | 9.5 |
CocoonとSWELLの厳選ブロック機能の評価です。Cocoonも悪くないですが、無料版ではやはり限界があります。
やはりモチベーション高く、本気のブログ運営を目指すのであればSWELL一択と言えるでしょう。
今回の記事は以上になります。
コメント