ブロックエディタの使い方｜クラシックとの違い

01はじめに｜この記事でわかること

要点：この記事では、ブロックエディタの使い方を「担当者が自分で企業サイトを直せるようになる」ところまでに絞ってご紹介します。クラシックエディタとの違いと、切り替えの判断材料もあわせて整理します。WordPress制作・保守を引き継いだ方に向けた内容です。

「前任者から更新を引き継いだんですが、編集画面が前と違っていて、どこを触れば直るのかわからなくて」。企業サイトのご相談で、この一言をよく聞きます。

ブログを書くために覚えるのなら、全部の機能を試せば済みます。ただ、企業サイトの担当者は事情が違います。本業の合間に、お知らせを1本足したい。価格表の数字を1か所直したい。求めているのはそこだけです。

そこでこの記事では、実際に使われているブロックだけに絞ってご紹介します。あわせて、クラシックエディタのままにしておくべき場面もお伝えします。

お伝えするのは、2000年創業のWeb制作会社ZenWeb Japanが、担当者向けに実施してきた引き継ぎ研修の内容です。更新を止めてしまうリスクについてはWordPressの更新は必要かでも整理しています。

まずは編集画面の全体像を、動画で確認しておきましょう

02ブロックエディタとクラシックの違い

要点：クラシックエディタは1枚の原稿用紙、ブロックエディタは部品の組み立てです。見た目は大きく変わりますが、公開されるページの中身はどちらもHTMLです。担当者にとっての実際の違いは、レイアウトを変えるときに制作会社を呼ぶかどうかに出ます。

WordPressの標準の編集画面は、2018年12月のバージョン5.0からブロックエディタに変わりました。公式のドキュメントでは「ブロックエディター」と表記されていますが、同じものを指しています。

2つの違いを、担当者の作業に引きつけて並べてみます。

表のとおり、差がいちばん出るのはレイアウトです。文字を直すだけなら、どちらでも手間は変わりません。「2列にしたい」「ボタンを置きたい」と思ったときに、依頼が要るか要らないかが分かれます。

03最初に覚える5つのブロック

要点：ブロックの種類は数十ありますが、企業サイトの更新で使うのは段落・見出し・画像・リスト・カラムの5つでほぼ足ります。この5つを覚えれば、お知らせの追加からサービス紹介の書き換えまで自分で進められます。

編集画面の「＋」を押すと、選べるブロックが一覧で出てきます。最初はここで手が止まります。数が多いからです。

研修では、まずこの5つだけをお伝えしています。

• 段落ブロック。ふつうの本文です。改行したいだけのときは、Enterではなく「Shift＋Enter」を押してください。行間が開きません。
• 見出しブロック。章のタイトルです。大きさで選ぶのではなく、話の階層で選んでください。H2の下にH3を置く、という順番を守るだけで十分です。
• 画像ブロック。写真を1枚入れます。置きたい場所にブロックを追加してから、画像を選びます。
• リストブロック。箇条書きです。3項目以上を並べるときは、文章のままにせずリストにしてください。読み手が拾いやすくなります。
• カラムブロック。2列や3列の横並びを作ります。パソコンでは横に並び、スマートフォンでは縦に積み上がります。

逆に、最初は触らないほうがよいものもあります。カスタムHTMLとショートコードの2つです。どちらも壊れたときに原因が追いにくく、担当者が1人しかいない体制では戻すのに時間がかかります。

覚えるブロックを5つに絞ると、研修の時間は半日から2時間ほどに縮みます。

04実際に使われたブロックの割合

要点：引き継ぎ研修を受けた担当者の記録を見ると、実際に使われるブロックは段落・見出し・画像に集中しています。カラムやテーブルまで使う方は3割前後です。覚える順番は、この割合に沿って決めるのが近道です。

研修後3か月の編集履歴を集計しました。1度でも使ったブロックを、担当者の人数で割った割合です。

上から3つで、更新作業のほとんどが終わっています。ここが動くようになれば、お知らせも実績紹介も自分で出せます。

反対に、下の3つは月に1回使うかどうかです。頻度が低い操作は、覚えても忘れます。必要になった時点で調べる、という前提で構いません。

051ページ公開するまでの手順

要点：ブロックエディタの使い方は、手順として覚えたほうが早く身につきます。下書き保存から公開までを6つに分ければ、はじめての方でも30分ほどで1ページ出せます。慣れると10分を切ります。

お知らせを1本公開する手順

実際の研修で使っている流れです。この順番どおりに進めると、公開後の直しがほとんど出ません。

1. 投稿の新規追加を開く。管理画面の左メニューから「投稿」→「新規追加」を選びます。固定ページを直す場合は「固定ページ」から入ってください。
2. タイトルを入れて、すぐ下書き保存する。本文を書く前に一度保存します。ここを飛ばすと、途中で画面を閉じたときに消えます。
3. 段落と見出しで本文を組む。先に文章をすべて入れてしまいます。見た目の調整は後回しで構いません。
4. 画像を入れる。写真は横1200ピクセルほどに縮めてから入れてください。カメラやスマートフォンの写真をそのまま入れると、表示が重くなります。
5. URLスラッグを半角英数字にする。右側の設定から変更します。日本語のままだと、共有したときにURLが長い記号の羅列になります。
6. プレビューで確認してから公開する。パソコンとスマートフォンの両方を見てください。公開後は、一覧ページにも正しく並んでいるかを確認します。

手順4の画像サイズだけは、あとから直すのが面倒です。ここは最初から気をつけておくと、表示速度で悩まずに済みます。

06クラシックのままでよい場合

要点：クラシックエディタを使い続ける選択も、いまのところ間違いではありません。Classic Editorは公式のプラグインで、必要とされる限りメンテナンスを続けると明記されています。ただし、いつまでも残る前提で運用計画を立てるのは危険です。

「早く切り替えるべきですか」と聞かれると、私たちは「急がなくて大丈夫です」とお答えする場面があります。次の3つに当てはまるサイトです。

• 更新が文字の差し替えだけ。レイアウトを変えないなら、切り替える利点がほとんどありません。
• 旧エディタ前提のプラグインが動いている。予約や会員機能が古い作りだと、切り替えで止まることがあります。
• 数か月以内にリニューアルの予定がある。作り直すページに手を入れても、作業が二重になります。

ここで安心材料をひとつ。クラシックの編集画面を戻すClassic Editorプラグインは、WordPressチームが管理する公式プラグインです。配布ページには、2024年まで、または必要とされる限り完全にサポートしメンテナンスすると書かれています。有効インストール数は900万件を超えています。

とはいえ、これは「終わりの日を決めていない」という意味です。永久に続くという約束ではありません。新しいテーマやプラグインはブロックエディタを前提に作られていきますから、選べる部品は年々減っていきます。WordPressテーマの選び方で候補を比べるとき、この差は年を追うほど大きくなります。

07継続と切り替えの比較データ

要点：クラシックのままと、ブロックエディタに切り替えた場合を並べると、差は覚える手間と依頼件数に出ます。最初の習得には3倍の時間がかかりますが、3か月後には1ページあたりの更新時間が半分以下になります。

同じ規模の企業サイトを対象に、切り替えたグループとそのままのグループを1年間追いかけた記録です。

注目していただきたいのは最後の行です。クラシックのままだと、見た目を整えるためにプラグインが増えていきます。増えた分は、そのままメンテナンスの負担になります。この観点はWordPressプラグインの選び方でも取り上げています。

切り替えで3割ほどに表示崩れが出ている点も、隠さずにお伝えしておきます。ただ、その原因はブロックエディタそのものではありません。次の章で中身を見ていきます。

08崩れる原因はテーマとプラグイン

要点：切り替えで画面が崩れるとき、犯人はエディタではありません。ほとんどが、ブロックエディタに対応していないテーマか、旧エディタ前提のプラグインです。原因の場所がわかれば、直し方も決まります。

「ブロックエディタにしたら崩れた」というご相談を受けると、私たちはまずテーマの更新状況を確認します。ここで答えが出ることが多いからです。

既存のページを新しい編集画面で開くと、中身は「クラシックブロック」という1つの箱に入ります。この時点では見た目は変わりません。崩れるのは、その箱を分解してブロックに置き換えたときです。

よくある症状と、原因の切り分け方を並べます。

• 文字だけが左に寄る。テーマ側が新しい編集画面用のCSSを読み込んでいません。テーマの更新で直ることが多い症状です。
• ボタンや囲みが消える。旧エディタのショートコードが残っています。対応するブロックに置き換えてください。
• 編集画面だけ真っ白になる。プラグインの競合です。ひとつずつ止めて、原因を絞り込みます。
• スマートフォンだけ崩れる。独自CSSが特定の画面幅にだけ適用されています。制作会社に確認したほうが早い箇所です。

作業前にバックアップを取るのは前提です。加えて、いきなり本番で試さないでください。1ページだけ複製して、そこで確認してから広げると安全です。ワイヤーフレームの作り方のように、先に構成を紙で決めておくと、置き換える範囲も判断しやすくなります。

09切り替え後の不具合の内訳

要点：切り替え後に出た不具合を原因別に分けると、テーマ側の対応不足がおよそ4割で最多でした。旧エディタ前提のプラグインが続きます。エディタ本体の不具合は、記録の中にはありませんでした。

実際に対応した不具合を、原因の場所ごとに集計しています。

上の2つで7割を超えます。つまり、切り替えの前に見ておくべきは、テーマとプラグインの2か所だけです。ここを確認してから進めれば、事故はかなり減らせます。

10社内で回すための決めごと

要点：ブロックエディタの使い方を覚えても、決めごとがないと更新は続きません。使うブロックを絞る、テンプレートを用意する、触らない範囲を明記する。この3つを最初に決めた会社は、1年後も自社更新が続いています。

研修の直後は、みなさん熱心に更新されます。問題はその先です。半年経つと、更新が止まっているサイトが出てきます。

続いている会社と止まった会社を比べると、差は担当者の熱意ではありませんでした。決めごとがあったかどうかです。

• 使うブロックを社内で5つに限定する。誰が編集しても同じ見た目になります。人によってページの雰囲気が変わる問題も防げます。
• お知らせと実績のひな形を1本ずつ用意する。複製して中身を差し替えるだけにします。ゼロから組む作業がなくなり、時間が読めるようになります。
• 触らない範囲を書き出しておく。トップページ、フッター、フォームの3か所は制作会社に任せる、と決めている会社が多いです。

実績やお知らせのように定期的に増えるページは、投稿の入れ物そのものを整理しておくと運用が軽くなります。カスタム投稿タイプの活用例で、その考え方を紹介しています。

更新が続く会社は、覚える範囲と触らない範囲を最初に決めています。

11年別・自社更新できた割合

要点：社内だけで完結した更新の割合は、5年で38%から72%まで上がりました。制作会社への更新依頼は、1サイトあたり年14.6件から5.8件に減っています。ブロックエディタの普及と、ひな形の整備が重なった結果です。

メンテナンス契約を続けているサイトの記録を、年ごとに並べます。

依頼が減った分、内容は変わりました。以前は「文字を1行直してほしい」という依頼が中心でした。いまは新しいページの設計や、レイアウトの相談が多くなっています。

これは望ましい変化だと考えています。日々の更新が社内で回り、判断が要る仕事だけが外に出る形です。

12制作会社に依頼する線引き

要点：自社で進める作業と、外に出す作業の線引きは「戻せるかどうか」で引いてください。文章と写真の差し替えは社内で十分です。テーマの編集、フォーム、決済まわりは、止まったときの損失が大きいため外に出したほうが安全です。

線引きの基準を、費用ではなく復旧のしやすさで考えると迷いません。自分で戻せる作業なら、社内で試して構いません。

• 社内で進めてよい作業。お知らせの追加、文章と写真の差し替え、料金表の数字の修正、既存ページの複製。
• 相談してから進める作業。ページの新規追加、メニュー構成の変更、フォームの項目追加、プラグインの追加。
• 制作会社に任せる作業。テーマファイルの編集、独自CSSの追加、決済まわりの変更、サーバーの設定変更。

ZenWeb Japanでは、この線引きを納品時にお渡ししています。担当者が代わっても引き継げるよう、1枚の書面にまとめる形です。日本品質を適正価格でご提供する、という考え方の一部でもあります。

13まとめ｜ブロックエディタの使い方

要点：ブロックエディタの使い方は、5つのブロックと6つの手順に絞れば覚えられます。クラシックとの違いが出るのはレイアウト変更の場面です。切り替えの前に、テーマとプラグインの2か所だけ確認してください。

覚えるのは段落・見出し・画像・リスト・カラムの5つです。公開までは6つの手順で進みます。先に文章を入れて、あとから見た目を整える。この順番が手直しを減らします。

クラシックエディタを続ける判断も、いまなら成り立ちます。ただ、リニューアルのタイミングでブロックエディタに寄せる方針だけは、社内で共有しておいてください。

そして、更新が続くかどうかを決めるのは操作の習熟ではありません。使うブロックとひな形、触らない範囲を決めておくことです。ここまで整えば、日々の更新は社内で回ります。

14よくある質問

要点：ブロックエディタの使い方について、企業サイトの担当者からよくいただく質問をまとめました。切り替えの判断、クラシックへの戻し方、社内での教え方の3つが中心です。

1. ブロックエディタはクラシックに戻せますか？

戻せます。Classic Editorプラグインを入れて有効にすると、以前の編集画面に切り替わります。WordPressチームが管理する公式プラグインです。ただし、ブロックで作り直したページを戻すと、レイアウトが崩れることがあります。戻す前にバックアップを取っておいてください。

2. ブロックエディタの使い方を覚えるのにどのくらい時間がかかりますか？

5つのブロックに絞れば、2〜3時間で日常の更新はできるようになります。1日で全部を覚えようとせず、まずお知らせを1本公開してみてください。手を動かした回数が、いちばん早い近道です。3か月ほど続けると、1ページ15分前後で終わるようになります。

3. ブロックエディタで表示が崩れました。自分で直せますか？

症状によります。文字の位置や余白のずれなら、テーマの更新で直ることが多いです。編集画面が開かない、保存できないという症状は、プラグインの競合が原因です。この場合は制作会社にご相談ください。いずれの場合も、まず現状のバックアップを1つ取ってから作業を始めてください。

4. 社内の複数人でブロックエディタを使っても大丈夫ですか？

問題ありません。むしろ担当者が1人だけの体制のほうが危険です。異動や退職で更新が止まります。ただし、人数が増えるほど見た目がばらつきます。使うブロックを5つに限定し、お知らせのひな形を用意しておくと、誰が書いても同じ体裁に収まります。

5. ブロックエディタでSEOに不利になりませんか？

編集画面の違いで検索順位が下がることはありません。公開されるHTMLの中身が適切であれば、評価は変わらないためです。むしろ見出しの階層を選びやすくなるぶん、構造は整えやすくなります。気をつけるのは画像のサイズです。大きすぎる写真は表示速度に影響します。