初心者の為のWEB開発

ブロックエディターが使いにくい?WordPressの古い常識の昔と今

※当サイトはPR(プロモーション)を含みます。

WordPress ブロックエディターは使いにくい? 初心者の為のWEB開発

「ブロックエディターが使いにくい」って記事を見かけたんだけど・・そうなの?みんなブロックエディターとクラシックエディターどっち使ってる人が多いんだろう?

今回は↑こんな方向けの記事!
これからブログを始めたいと思った方などが下調べで遭遇するワード「ブロックディターは使いにくい」。

調べたならご存じかもしれませんが、WordPressには「ブロックエディター」と「クラシックエディター」と呼ばれるビジュアルエディターと呼ばれるコンテンツ作成機能があります。

いずれかがデフォルトで実装されていますが、後からでも個人の好みで変更可能。

でも、「やるなら使いにくい方はイヤ」というのは当たり前ですよね。

結論

「ブロックディターが使いにくい」というのは一昔前の話で、現在では完全対応のテーマやプラグインの登場で逆に使いやすくなっています!

というのが答えで、「今から使うならどっちのエディター問題」を挙げると解答はほぼほぼ「ブロックディター」と答える方が多いと思います。

ではなぜブロックディターは「使いにくい」と言われていたのか?

その理由と「使いにくいと言われた理由」や「“今は使いやすい”理由」、合わせて「実際にブロックエディター1度使ってみたけど使いにくかった!」という方のために内容をまとめていきたいと思います。

ファズ

Hello!ファズです。

◆仕事関連 WEB制作4年:「WordPress/WEB制作」
◆インドア趣味:アニメ好き歴10年/ガンプラ購入数十種以上!
◆生活品:ソイプロテイン常用2年、試した数十数種

↑インドア多趣味の実際に試した内容の記事を紹介していきます。

※当サイトはリンクフリーですが「出展元」として記載をお願いします!

ファズをフォローする
wordpressのおすすめテーマ
WordPressのテーマ選びでお悩みの方必見!

【初心者におすすめの記事】

◆おすすめ有料テーマが知りたい
◆「集客」や「収益」をあげたい
◆テーマを選ぶポイントが知りたい
◆初心者でも使いやすいテーマが知りたい

ブロックエディターが使いにくいと言われていた7つの理由

  • 不具合が多かった
  • インターフェースの複雑さ
  • 古い投稿やページとの互換性の問題
  • クラシックエディタが浸透していた
  • パフォーマンスの問題
  • カスタマイズの難しさ
  • プラグインとして使用することができるから

さっそくですが、WordPressでブロックエディターが「使いにくい」と言われていた要因を箇条書きでまとめました!

3つあるように思いますが基本的な理由はどれも同じで、結局のところ「WordPressに対応しきれていなかった」というのが答えですね!

下記で詳しく解説します。

要因①【不具合が多かった】

ブロックエディターは2018年にリリースされ、WordPress5.0から標準実装されたビジュアルエディタのこと。

しかし、リリース当初は検証データやテストが足りておらず、様々ある「WordPressのテーマ」に対し対応しきれていませんでした。このため、表示の不具合や一部機能の停止など致命的な欠陥となって現れることが多々あったんですよね。

また、5.0未満のWordPressに関してはプラグインを入れて使う必要があったため、互換性の無さに加え、さらに不具合を起こす要因になりました。

その結果「使いにくい」とリリース当初は判断されることが多かった。

【現在】

多くのテーマがブロックエディターに完全対応し、普及したことで上記の問題はほとんど解消されているに近い。

要因②【インターフェースの複雑さ】

クラシックエディターよりもできることが増えた分、インターフェース・・・例えばボタンの配置など多数の要素が増えました。

同時に大幅な配置変更や追加が行われ、クラシックエディターのUI(ユーザーインターフェース)画面とは全く異なる形になったんですよね。

クラシックエディターのシンプルな画面に見慣れたユーザーは「どこで何ができるのか?」ある程度操作に対する学習コストが発生するのがとっつきにくさの原因にあったと思います。

簡単に言うと、使い慣れたコントローラーから、全く新しい最新のコントローラーに持ち替えてゲームしてる感じ!

要因③【古い投稿やページとの互換性の問題】

クラシックエディターからブロックエディターへ移行をスムーズに出来なかった当初の問題点。

クラシックエディターで作成したページをそのままブロックエディターに移植できなかった点は大きいと思います!

登場したばかりのブロックエディターはクラシックエディターとは全く異なるコンテンツの作成方法になるので、そのまま引き継ぐことができなかったんですよね。

既存のサイトをクラシックエディターで作っていて、これを移植しようとするとうまく表示されないと・・・使う気萎えますよね?さらにページ数が多いと移植するまでに費やす時間は膨大。

これがWordPressを運用している既存ユーザーが移行に足踏みした理由としては大きいと思います。

要因④【クラシックエディタが浸透していた】

5.0以前はクラシックエディターを使用している方が多く、機能性・使いやすさも十分。根強いファンもいてプラグインになったクラシックエディタを今でもインストールして有効化している方も多い。

不具合の多いブロックエディターよりも、使いやすいクラシックエディタを後発に伝えることも多かったように思います。

ぼく自身、クラシックエディターを何度すすめられたことか・・・。それをそのまま最初鵜呑みにしてしまってたですよね。

【現在】

現実問題として、クラシックエディターの知識は今でも必要!というのも、既存サイトにはまだまだクラシックエディターで作られたコンテンツがたくさんあり、案件によっては必須になるから。

要因⑤【パフォーマンスの問題】

ブロックエディターは多くの機能を実装し便利に使える反面、端末のリソースを割いてしまいパフォーマンスを一時的に低下させることがあります。

ぼくが体験したのは以下の通り。

【パフォーマンス低下時の事象】

  • 1部のコンテンツコピーができない
  • 範囲選択ができない
  • ブロックの削除ができない

上記はぼくが使ってて起こるブロックエディターパフォーマンス低下時の事象。あくまでぼくが触って体験したことがあるものなので、もっと他にもあると思います。

要因⑥【カスタマイズの難しさ】

ブロックエディターには便利な機能がありますが、自身で新たにカスタムを考えた際、専門的な知識が必要になるケースが多くなる傾向にあります。

特に無料テーマはその辺が顕著で、膨大な時間を費やすことになりかねない。「それなら、クラシックエディターで既存の便利なプラグインを使った方が・・・」と考える方も少なくないと思います。

要因⑦【プラグインとして使用することができるから】

あくまで原因ではなく要因になると思うんですが、「クラシックエディターが完全に消えなかった」ということがあると思います。

標準実装がブロックエディターになり数年経過した現在でも、クラシックエディターはプラグインとして配布されており手軽にインストールできる環境にあります。

クラシックエディターを使い慣れた方はインストールして使える環境であることに加え、ブロックエディターリリース当初のイメージや経験から「使いにくい」と印象に残っている方も多かったと思います。

【現在】

ブログ界隈ではブロックエディターはかなり浸透しており、制作現場でも以前より「当たり前」に使用されることが増えてきました。

今ブロックエディターが使いやすい理由

ブロックエディターが使いやすい理由をまず挙げると「カスタムブロック」があるから。

カスタムブロックとは?
ブロックエディターからカスタムブロックを表示する様子

ブロックエディター内でワンクリックで呼び出せる機能群で、テキスト枠や画像の呼び出し、CTAボタンの表示など様々な機能テンプレートが容易されています。

カスタムブロックはWordPressテーマごとに実装されている機能は違いますが、いずれもテーマごとに特化した機能を実装しています。

デザインや機能をゼロから作る必要がないので、コンテンツ作成の時間を圧倒的に時短できるのが強み!

↑上記カスタムブロックを含めた使いやすい理由を下記でまとめていきたいと思います。

【使いやすい理由】

  • htmlコードをビジュアルエディタで埋め込める
  • htmlで書かなくても入れ子を使える
  • ブロックや要素ごとにクラスを付与できる
  • ブロック要素として任意の形で呼び出せる
  • 画像表示選択肢が増えた
  • カスタムプラグインが使える

「テーマを調べたい」・「使いやすいWordPressテーマが知りたい方」は↓記事をご覧ください。

①【htmlコードをビジュアルエディタで埋め込める】

クラシックエディタではhtmlコードを直接書き込むことはできず、実装するにはプラグインを使用する必要がありました。

ブロックエディターでは、記事内に直接html専用のブロックを挿入し、その中にhtmlコードを書きこんで使用することができます!

htmlカスタムブロックを表示する様子

これはかなり便利で、特にアフィリエイトをしている方や、特定のコンテンツに力を入れたいという方は事前にcssを準備しておくことで、よりオリジナリティを出せる柔軟なコンテンツ作成もできますね。

②【htmlで書かなくても入れ子を使える】

htmlには「入れ子」と呼ばれる概念があり、ブロックレベルのタグにタグを入れ込むことができます。

【入れ子例】

<div class="oya">
  <div class="youtube">入れ子の要素</div>
</div>

↑ブロックレベルである「divタグ」の中に子となる「div」を追加した例。

通常、コードエディタやhtmlカスタムブロックを使ってコードを書く必要があるんですが、ブロックエディターではそれを視覚的に操作して行なうことが可能なんですよね。

【手順】

  • 異なる要素を任意の数用意(1つでもOK)
  • 子要素となる全部を「ドラッグ」やツールバーの「ドキュメントの概観」から選択
  • 選択した状態でツールバーから「グループ化」を選択

【要素を用意してドラッグ選択
選択してツールバーから「グループ化」を指定

【ツールバーから「グループ化」
グループ化すると2つの子要素を囲む形で「div」が追加されます。

③【ブロックや要素ごとにクラスを付与できる】

ブロックエディターはファイルを触らず、指定したいブロックにカーソルを合わせるだけで「class」を任意で設定することができます。

htmlを使えなくても、目視で任意の要素にクラスを設定できるのは非常に便利で、cssを拾ってきて事前に追加して置けば「class」を書き込むだけで範囲させることができます。

詳しい使い方と反映されない場合の対応は↓記事をご覧ください。

そもそもcssって何?という方は↓記事からご覧ください。

【CSSとは?】初心者向けに読み方や書き方を簡単にお伝えします!

④【ブロック要素として任意の形で呼び出せる】

先述した通り、1番ブロックエディターが便利な機能として「カスタムブロック」の豊富さがあります。

無料テーマだと最低限のブロックしか用意されていませんが、有料テーマだと種類や利用できる幅はかなり広く、それをワンクリックで呼び出して使うことができるのは効率よく大きな時短に繋がりますね。

↓以下はブロックエディターで呼び出したカスタムブロックの一例。直接書いてしまうとSEO的に良くない部分もあるので画像で表示します。

任意のブロック箇所でブロックを選択して出力することで、↑画像のように決まったコンテンツテンプレートをよびだすことができます。

事前に呼び出すカスタムブロックのデザインを整えておくことで、何度も複数回使い回せるのは便利というのは何となくイメージできると思います。

カスタムブロックを呼び出す方法は4つ!

1.ブロックを指定した時に表示される「+」を選択する

ブロックにカーソルを置いた状態で黒い「+」ボタンを押すと、よく使う「カスタムブロック」を表示できます。


2.ブロックを指定した時に表示される「+」を押し、「検索入力する」

ブロックにカーソルを置いた状態で黒い「+」ボタンを押すと検索窓も表示されるので、名前を覚えていればカスタムブロック名の一部を文字入力してすぐに選択できます。

ちなみに「すべて表示」を押すとブロックエディターの左側にカスタムブロック一覧が表示されます。


3.ブロックエディター左上にある「+」を押し、「ブロックを選択する」

ブロックエディターの左上に青ボタンで「+」が表示されています。

これを押すと「2.」で示したカスタムブロックの「すべて表示」を押した状態と同じく、「カスタムブロックの一覧が表示」されます。


4.ブロックにカーソルを合わせた状態で「/(バックスラッシュ)」を入力する

/を入力してよく使うカスタムブロックを表示
/の後にカスタムブロックの一部を入力してしぼる

(左側画像)ブロックにカーソルを合わせた状態で「/(バックスラッシュ)」を入力するとよく使うカスタムブロックを表示できます。

(右側画像)左側画像のように「/」を入力した状態で続けてカスタムブロックの1部を入力すると一覧の中から任意のブロックにしぼることができます。

⑤【画像表示選択肢が増えた】

クラシックエディターで「メディアを挿入」する場合アップした画像を選ぶしかできませんでしたが、ブロックエディターの場合、「URL」での指定もできます。

引用したい場合なんかにも使いやすいですね。

⑥【カスタムプラグインが使える】

上記ではカスタムブロックを例に使いやすさを挙げてきましたが、ブロックエディターが使いやすいと言える要因の1つとして専用のプラグインが登場しているということもあると思います。

ノンカスタムで使っているブロックエディターにも多少のカスタムブロックはありますが、各段に便利に使える機能というのは少ない。

導入したテーマに実装されているものを使うか、自身でカスタムプラグインを使って利便性をあげるのが必須だと思います。

↓下記は特に使いやすい便利なブロックエディタ拡張プラグインです。

【便利なカスタムブロックプラグイン】

  • Ultimate Blocks
  • Useful Blocks

ブロックエディターを使ってみて「使いにくい」という方におすすめ

  • ブロックエディターは現在使いにくいとは言えない
  • カスタムブロックが非常に使いやすい

上記ではブロックエディターは使いにくくないという証拠を示してきましたが・・・中にはそれでも「使いにくい!」という方がいるかもしれません。

そんな方のために荒業を1つ紹介したいと思います。

それが「両方使う」です!!!!

実は、ブロックエディターとクラシックエディターは共存することができないということはありません。

WordPressバージョンを5.0以上で使っているブロックエディターをデフォルトで実装しているものに限定しますが、ページ単位でエディターを使い分けることは可能なんです!

【条件】

  • WordPress5.0以上でブロックエディターが使える
  • クラシックエディタープラグインをインストールしている

使用条件はこれだけ!

両方使える状態であれば、記事単位でエディターの切り替えができるようになります!

切り替えの詳しい手順は↓記事をご覧ください。

【WordPress】ブロックエディタとクラシックエディタの切り替え方

ブロックエディターが使いにくい?【まとめ】

以上、WordPressのブロックエディターの「使いにくい」についてまとめてきました!

【まとめ】

  • 昔は不具合が多く使いにくかった
  • クラシックエディターの人気が高かった
  • 今はブロックエディターは使いやすい
  • カスタムブロックが豊富でワンクリックでのデザイン・機能反映が可能
  • 今はブロックエディターに完全対応したテーマが充実している
  • カスタムブロックのプラグインがある
  • ブロックエディターとクラシックエディターは両方使える

簡単にまとめるとこんな感じ。

そうですね・・・両方使った経験がある身としてもやっぱり今から使うならブロックエディターで良いと思います。

いつかは名言されていませんが、数年以内にクラシックエディターはサポートされなくなるアナウンスはあるので、そのうち消えてしまう可能性はあります。

遅かれ早かれかもしれないので、今のうちから使ってみるのもいいですし、両方使ってみたい方は切り替えて使用してみてもOK!

どっちさわっても勉強にはなると思うので!

ファズ
ファズ

今回はこんな感じ。

またね!

コメント

タイトルとURLをコピーしました