WordPressは本当にホームページ未経験者でも簡単に更新できる?

「WordPressなら誰でも簡単に更新できますよね?」とたまにお客様からお問い合わせを頂くことがあります。

かなりざっくりしたご質問ですが、例えば更新担当者を以下のような全くの初心者と想定した場合、どこまで更新が可能なのか、逆にどんなことが難しいのかについて簡単に解説してみたいと思います。

  • ホームページの制作経験が全くない(HTMLやCSSって何?ってレベル)
  • WordPressはもとより無料ブログ(Amebaブログ、ライブドアブログ等)の運用経験もない

目次

  1. WordPressの編集モードについて
  2. ビジュアルエディタにできること
  3. ビジュアルエディタの苦手なこと
  4. 結論

1.WordPressの編集モードについて

WordPressには「ビジュアルエディタ」と「テキストエディタ」の2種類の編集画面があり、担当者の知識やスキルに応じて、いずれかのモードで更新ができるようになっています。両者はタブメニューでいつでも切り替えることが可能です。
(※WordPress5.0からGutenbergが標準エディタになってますが、対応プラグインの兼ね合い等もあって現在ノウハウを蓄積中、したがって今回はClassic Editorプラグイン + 旧エディタの仕様にて解説させていただきます。)

ビジュアルエディタはいわゆるWYSIWYGエディタと呼ばれるもので、ホームページの制作に必要なHTMLやCSSといった専門知識のない方でも、実際の完成ページに近い状態を画面で確認しながら記事の作成や編集ができるモードです。例えるならWordで文書を作成するような感覚です。以下は、ビジュアルエディタの作成画面です。

ビジュアルエディタの作成画面

一方、以下のテキストエディタは直接HTMLタグを打ち込む上級者モードで、HTMLやCSSに精通している方なら基本的にどんなページでも作成可能です。

↓※それぞれのモードで同じ記事を作成

両モードで作成された記事

今回は全くの初心者という設定なので、ビジュアルエディタでの更新一択になります。

2.ビジュアルエディタにできること

「ビジュアルエディタ + 使い方」等で検索して頂ければ、分かりやすく解説されてるサイトがたくさん出てきますので、操作手順の説明は割愛させて頂きますが、そもそもWordPressはブログソフトウェアですので、文書の挿入はもちろん、テキストの書式変更(文字の太さ、文字色、配置等)などは直感的な操作で初心者の方でも簡単に行うことができます。

ビジュアルエディタの機能説明

  1. 選択したテキストを段落や大見出し・中見出し・小見出しに変更する
  2. 選択したテキストを太字にする
  3. 選択したテキストを斜体にする
  4. 選択したテキストを番号なしのリストにする
  5. 選択したテキストを番号付きのリストにする
  6. 選択したテキストを引用にする
  7. 選択したテキストや画像を左寄せ・中揃え・右寄せにする
  8. 選択したテキストや画像にリンクを設定する
  9. 選択したテキストに打ち消し線を挿入する
  10. 横線を挿入する
  11. 選択したテキストの色を変更する
  12. 選択したテキストの書式をクリアする
  13. 特殊文字を挿入する
  14. 左側の余白を減らす
  15. 左側に余白を入れる
  16. 直前の操作を取り消す
  17. 取り消した操作をやり直す

画像の挿入方法は両エディタとも共通ですが、一度手順さえ覚えてしまえば操作自体は決して難しいことではありません。
※簡単なレクチャーや補完マニュアル等は必要なケースもあります

3.ビジュアルエディタの苦手なこと

「なんだ、やっぱ簡単にできるんじゃん!」と思われるかもしれませんが、一つだけ知っておいて頂きたいのは、WordPressといえども万能ではないので、どんな体裁のページも自由自在に作れるわけではありません。

例えば、雑誌や企業のホームページでよく見かける以下のような「段組み」レイアウトを標準のビジュアルエディタだけで作成するのは至難の業、というかほぼ不可能です。

段組のレイアウト

手の込んだレイアウトやそれなりに体裁の整った記事を作成するには、やはり「HTML」や「CSS」といった専門知識が必須になります。

4.結論

「見せ方」にバリエーションを持たせることは難しいですが、文書と画像が上下に連なる以下のようなシンプルなページであれば、初心者の方でも十分に更新が可能とご理解頂ければと思います。

シンプルなレイアウト

では、少し話を広げて「そうは言っても初心者でももう少し多様な表現は出来ないの?」というお客様もいらっしゃいます。

もちろんそれも可能です。逆に、お客様の要件やメンテナンス体制によっては弊社側からご提案させて頂くこともあります。以下はそのソリューションの一例です。

フォーマット化できるページは専用の更新ページを用意する

手前味噌で恐縮ですが、例えば以下は弊社の「制作実績」の更新ページです。このページは共通のレイアウトでフォーマット化されていますが、見ての通り「ビジュアルエディタ」も「テキストエディタ」もありません。

専用の更新画面

ページに表示させる要素が予めフィールドとして用意され、以下のように①必要な画像を登録②テキストフィールドに文字を入力③該当項目にチェックを入れれば、実績ページが自動で生成されます。

カスタムフィールドにテキストや画像を登録

これなら更新担当者のスキルや経験に依存せず、ビジュアルエディタでは不可能なレイアウトでもクオリティを損なうことなく誰でも簡単に更新ができますよね。

また弊社では、初心者の方が戸惑わずに短期間で更新作業をマスター出来るよう、以下についても適宜カスタマイズをさせて頂いております。

ビジュアルエディタを初心者向けに最適化する

ビジュアルエディタでの表示を実際のページと同じにする

標準のビジュアルエディタでは、記事作成時の表示が実際のページデザインとは異なります。以下は当ブログの標準での作成画面ですが、これだと見出しやフォント、リストの表示等が実際のデザインと異なって完成イメージが分かりづらいですね。不慣れな初心者の方だと何度も「プレビュー」で完成イメージを確認しながら記事を作成することになります。

標準のビジュアルエディタの作成画面

この手間をなくすため、以下のようにビジュアルエディタでの表示を実際のページデザインに合わせれば、初心者の方でも安心かつ効率的に記事の作成ができるようになります。

ビジュアルエディタを実際のページデザインに合わせる

必要のないボタンやメニューは極力非表示にする

ビジュアルエディタのツールバーには様々なボタンアイコンがありますが、発信する情報によっては全く不要なボタンや、初心者が使い方を誤るとレイアウトが崩れがちな機能もあります。これらのボタンはお客様のリテラシーに応じて予め非表示にし、誤操作防止に配慮するようにしています。

ちなみに、以下は先般納品させて頂いたお客様のビジュアルエディタですが、ボタンアイコンを大幅にカットし、なおかつSEOの観点から選択できる見出しも2つだけに制御しています(※h2、h3タグのみ選択可)。

表現の幅は狭まりますが、その分、更新担当者の知識や経験によって見栄えに差異が出るのを防ぎ、デザインの統一感や記事のクオリティを維持する目的に役立てられます。

初心者向けのツールバー

追記(2019-06-23)
ソリューション例として、本来はブロック単位で雛形を簡単に挿入できるAddQuicktagというプラグインを一番に紹介したかったのですが、「WordPress5 + Classic Editor」には非対応なので、機会があればGutenbergの使い方等の記事で別途ご紹介させていただきます。

Share!