「ブロックエディタをもっと便利に使いたい」
「プラグインでブロックエディタの機能を増やしたい」
WordPress5.0バージョンから各記事を書く編集画面がブロックエディタ（Gutenberg）へ変わりました。まだまだ使い慣れない方も多く、Classic Editor などのプラグインを使って旧エディタへ戻す方もいらっしゃるようです。
しかし、2022年には旧エディタのサポートが終わります。
いずれはブロックエディタへ運用変更しなければならないため、少しでも早く慣れていきたいですね。画像挿入や埋め込み機能を使う、いくつかのブロックをグループにして位置移動させる、プラグインでより多くの機能をもったブロックを追加できるなど、利用に慣れればブロックエディタのほうが作業時間を短く済ませることができます。
ブロックエディタの使い方は、WordPress公式サイト内で日本語でサポートされています。
参照：https://wordpress.com/ja/support/wordpress-editor/
2018年の時点で本番の環境でブロックエディタを使っている人が40%とのアンケート結果もあります。
投票数が少ないので偏りがあると考えられますが、WordPressに関係する開発をされている方々には浸透しているようですね。
今の時点で WordPress の Gutenberg エディター使ってる人ってどれくらいいるんだろ。まだ触ってない、っていう人も多そうな気もするけど、どうなんだろな・・・
— bouya Imamura (@s56bouya) November 26, 2018
今回はブロックエディタ導入時に検討したいブロックエディタ拡張プラグインの中から、「Ultimate Blocks」の使い方、追加できる19のブロックについて解説します。
使えるブロックの種類が増えると、これまでの作業時間が大幅に削減できることもあります。
特にランディングページを作る方、商品紹介ページを作る方、デザインをページごとに外注している方は、拡張プラグインを入れるとメリットが大きいです。
※19個は現状（2020年9月現在）での追加機能数なので、今後のアップデートによって増減する可能性があります、ご了承ください。
はじめに：「Ultimate Blocks」はとても評価の高いプラグイン
ブロックエディタを拡張するプラグインは、当サイトでも過去に2つ（Advanced Gutenberg、CoBlocks）紹介したように、いくつも種類があります。
それぞれに特徴がありますが、この「Ultimate Blocks」はユーザーからの評価が非常に高く、現時点では公式サイトのレビューに低評価が付いていません。追加できる機能は他のプラグインより少なめですが、評価が高いところに注目しています。
https://ja.wordpress.org/plugins/ultimate-blocks/
使用の始め方
初期設定は特に必要ありませんが、プラグインをインストール、有効化すると以下の画面が出ます。
これはプラグインとの接続画面ですので、「Manage the Blocks」をクリックして進みます。
追加されるブロックが一覧表示されます。もし不要（使わない）なブロックがあれば、この赤のレバーをクリックすると無効にできます。
記事内でブロックの追加をするときに出るメニュー画面に、「Ultimate Blocks」の項目が追加されて一覧でブロックが表示されます。この中から必要なブロックを適宜選びます。
それでは、プラグイン「Ultimate Blocks」の有効化で使えるようになる19のブロックを一つずつ、表示例付きで解説します。
１．Testimonial（お客様の声）
「お客様の声」「ユーザーレビュー」などに使うブロックです。
150px✕150pxの画像、本文、名前、肩書などを挿入できます。
＜表示例＞
肩書や名前は記入せず空欄にしておけば、その欄は表示されません。
背景色やフォントカラーは右サイドバーの設定（表示されていなければ右上の歯車マークをクリックすると表示されます）から変更できます。
２．Call To Action（お客様の行動喚起）
ページからお客様に問い合わせや資料請求などアクションを起こしてもらいたいときに使うブロックです。
大きな文字でタイトル、その説明、ボタンの上のテキスト、その先のURLを入力できます。
＜表示例＞
色・形や背景色、フォントなどは自由に右サイドバーの設定から変更できます。
お問い合わせボタンなど、画像バナーを作るのが一般的ですが、まずはこのようなブロックを使った表示を試してみるのはいかがでしょうか。
３．Divider（仕切り／水平線）
記事内にボーダーラインを入れたり、線で区切ったりしたいときに使うブロックです。
デフォルトではシンプルな水平線が挿入されます。
＜設定、アレンジ方法＞
・Thickness＝線の幅（数字を大きくするほど太くなる）
・高さ＝線の上下の余白（数字を大きくするほど広くなる）
色やボーダーの幅、余白のスペースは右サイドバーの設定から変更できます。「文章の途中で少し間を空けたいな」というときに自由に設定できるので便利です。
４．Click to Tweet（クリックしてツイート）
ブロックにクリックするだけでツイートできるコンテンツを設置します。ツイートしてほしい文章やユーザーネームを入れておくと、ユーザーが簡単にツイートできます。このブロックを使ってシェアをお願いすることでSNSでの露出を増やすことができます。
＜表示例＞
ツイートしてもらいたい文章や、ユーザーネームを入れておきます。
訪問者はClick to Tweetボタンを押すとTwitterの画面が開きます。
記事のリンク、相手のユーザーネームが自動挿入されるのでツイートしやすいですね！WEBサイトの特性によっては「読んだらシェアしてね」などのカジュアルな文言を入れるなどもいいですね。
５．Social Share（ソーシャルシェアボタン）
メディアサイトには必須といわれているソーシャルシェアボタンの設置ブロックです。
よく利用されているSNS等へシェアできるボタンがまとめてできます。
デフォルトでは上記の6つのボタンが挿入されます。
どのボタンを設置するか、ボタンのサイズ調整などは右サイドバーから設定します。
＜表示例＞
・サイズ：Medium
・形：Square
・種類：フェイスブック、ツイッター、ピンタレスト
・カラー：黄色
WEBサイトのデザイン、ユーザー層に合わせて調整しましょう。
大きなボタンにすると目立ちますし、押しやすいですね。
■ソーシャルボタンの色、デザインは変えたほうがいい？
ソーシャルボタンに使っているロゴは各SNSの規約に沿って使用する必要があります。規約は変更される可能性があるので、随時確認が必要です。以下が主なSNSの規約を確認できるページですので、ご一読の上、ロゴのご利用をお願いします。
○Twitter
https://about.twitter.com/ja/company/brand-resources.html
○Instagram
https://en.instagram-brand.com/
６．Content Toggle （トグルボタン）
アコーディオンメニューとも呼ばれます。クリックするとコンテンツが開いたり閉じたりする見せ方を”トグル”といいます。
そのトグル表示を追加するブロックです。
このブロックを取り入れると、コンテンツを省スペースに収めることができるので、商品説明や規約の表示などに活用できます。
＜表示例＞
デフォルトで開いておくか、閉じておくかはエディタ内のブロックの表示と連動します。エディタのほうで閉じておけば、デフォルトで閉まった状態で表示されます。
７．Button （ボタン）
記事内に美しくデザインされたボタンを挿入するブロックです。
ボタンサイズはS,M,L,XLと4つ。
背景色、ボタンの形などと合わせて右サイドバーから変更できます。
＜表示例＞
・ボタンサイズ：L
・ボタンスタイル：Rounded
・背景色：ピンク
きれいなボタンが挿入されました。資料請求やダウンロードのリンク先を明示するにはボタンがわかりやすいですね。
８．Tabbed Content（タブ）
タブ表示を挿入できるブロックです。
タブもトグルと同様、省スペースでたくさんの情報を書き込めます。
＜表示例＞
タブを押さないと見えない文字がありますが、細かな情報を整頓して載せることで美しさを保つことができます。文字を書き連ねるだけでなく、このような開閉の動きを出すことで、ユーザーも多くの情報を気持ちよく読むことができます。
９．Star Rating（格付け）
星で評価を示すブロックです。
商品レビューサイトや、まとめ・格付けサイトの記事内で使うと便利な機能です。
＜表示例＞
星の数やサイズは右サイドバーから変更できます。
この表示があるだけで、”評価”がはっきりとわかるのでユーザーの行動も変わります。検索エンジンでもこの星が見えることによってコンバージョンが変わったとの調査結果があります。
参考：レビューの星印が検索のCTRに与える影響とは？調査データを公開
上記には「レビューの星印は間違いなく注目を集める助けとなっている。この調査ではCTRは約35％ほど高まり、レビューの星印がある実験のうち97％がレビューの星印がない実験よりも高いCTRを誇ることが分かった」とあります。
このブロック表示の星はこのままでは検索エンジンに表示はされませんが、ユーザーの行動を助けることは間違いないでしょう。
１０．Table of Contents（目次）
記事内の見出しを拾って、自動的に目次をつけるブロックです。
WordPressの記事に目次をつける機能を備えたプラグイン「Table of Contents Plus」が有名ですが、そのプラグインを入れなくても目次が付けられます。
どちらも初期設定のままで目次を付けてみました。
文字の大きさや行間がプラグイン「Ultimate Blocks」を使ったほうが洗練されているかなという印象がありますが、それほど大きな違いはありません。
プラグインを減らす、まとめたいときには目次用のプラグインを削除し、このブロック拡張プラグイン1つに絞り込むことができます。
１１．Progress Bar（タスク進捗状況表示）
アンケートなど、タスクがどれくらい進んでいるかを表示するバー（プログレスバー）を追加するブロックです。
プログレスバー表示により、ユーザーは安心感を得る効果があるそうです。
上部メニューと、右サイドバーよりさまざまな設定ができます。
パーセンテージ、形、色、バーの太さなど視覚的な調整ができます。
プログレスバーがユーザーに与える効果については、TEDでダニエル・エンバーさんがスピーチしてくださっています。ユーザーに長い時間にわたって作業をしてもらうときなど、退屈したユーザーに刺激を与える効果が非常に高いそうです。
１２．Countdown （カウントダウン）
指定の日時まであとどれくらいか、期限をカウントダウンタイマーを表示するブロックです。サービスのリリース時間や資料請求の期限を示したり、メンテナンスでサービス休止するまでの時間を示したりなどのときに活用できます。
タイマーの下部にテキストを入れる欄がありますが、こちらに入れたテキストはタイマーがカウントダウンし終わったあとに表示される文言になります。
＜表示例＞
背景色などを整えればゲームサイト等では使いやすそうです。
ただ、日本のタイマーと表現方法が少し異なるので、使えるWEBサイトは限られるかもしれませんね。
１３．Review (Schema Markup Enabled) （レビュー）
お客様の声や映画の評価などレビューを書きたいときに使えるブロックです。
スキーママークアップ（構造化マークアップ）に対応しているので、検索エンジン対策にも有効です。
＜表示例＞
星が付いているだけでレビューの信頼感が高まります。
各項目の星を付けていくと、総合の星は自動計算されます。
１４．Image Slider（画像スライダー）
プラグインを入れて実装することの多いスライダー（スライドショー）もブロックで追加できます。
・画像
・画像に追加するキャプション
・画像に付けるリンク
ブロックで以上3つの設定ができます。
スライダーの表示は右サイドバーから調整できます。
・Wrap around
・Allow dragging
・Use pagination
スライダーの動きも選ぶことができます。
・slide
・fade
・cube
・coverflow
・flip
＜表示例＞
画像をスライダーにすると省スペースでたくさんの情報を見せることができます。記事内に写真が多くなる場合はスライダーを活用して見たい方には多く見える、スキップしたい人にはスクロールを少なくできるという選択肢をもたせるとベストです。
１５．Content Filter（コンテンツフィルター）
記事内の情報が多い場合、訪問者が自身で必要なコンテンツを絞り込んで表示できるようにするブロックです。
それぞれの情報にラベルを付けておき、ユーザーが見たいラベルの情報だけをチョイス。
他のラベルの情報を隠して必要なものだけ表示させる、といったシステムです。
英語なので何をどこに書いてよいか難しいですが、以下の入力例のように記入してください。
情報を書き込むときは、それぞれの項目の＋を押すと追加していけます。
＜表示例＞
ユーザーがラベルをクリックすると、それ以外のラベルが付いた情報が消えます。
シンプルな仕組みですが、とても便利だと思います。個人的にはすごくオススメの機能です。
１６．Styled Box（スタイルボックス）
デザインされたスタイルボックスコンテンツを挿入できます。
ブロックを追加したら、テンプレートを1つ選び、クリックします。
各テンプレートの見た目はプラグイン公式デモページで確認できます。
→https://ultimateblocks.com/styled-box-block/
＜表示例（NumberBox）＞
ブロックを追加すると番号の付いたデザインボックスが1つできます。並べたい数だけボックスを追加していきます。↑こちはら2つ並べました。背景色等は右サイドバーから調整できます。
１７．Expand （展開）
長いコンテンツの一部を隠しておき、ユーザーが「もっと見る」をクリックするとコンテンツが展開して全部を表示させるブロックです。
＜表示例＞
このブロックはデザイン性に少し難があり、クリックすると続きが出てくることを伝える要素がありません。文章内に書くしかなく、少しブサイクな見た目になります。この”展開ブロック”を使うのであれば、トグルボタンのほうがスマートにコンテンツが展開できると思います。
１８．Styled List （スタイルリスト）
デザインされたリストを追加できるブロックです。
箇条書き表示をしたいときに使います。
＜表示例＞
サイズ、行間は右サイドバーより変更できます。
リストがCSSを触らなくてもキレイに表示できるのは非常に便利で、時短です。
１９．Post Grid （一覧表示）
WordPressで投稿した過去記事を表示させるブロックです。
スクエア型か、縦に並ぶリスト型か、選べます。
関連記事が一覧で表示できるので、訪問者の滞在時間を延ばす効果も期待できます。一般的には関連記事は記事の最後にテンプレとして付いていますが、ブロックを使えば好きな場所に挿入できます。ピックアップする記事のカテゴリ等は選択できます。
＜表示例＞
画像を省くこともできます。
まとめページのIndexとしても便利そうですね。
まとめ
「Ultimate Blocks」のブロック機能の説明、項目の日本語訳、表示例をブロックごとに解説しました。ブロックエディタのユーザー数はまだまだ発展途上で、これからもっと増えることが予想されます。そのため、ブロックエディタ拡張プラグインも、今後ブロック機能が追加されたりデザインが増えたりと、随時アップデートされていくことでしょう。
ブロック機能によって、これまでデザイナーに頼ったり、CSSを追加したりして表示させていたものが簡単に実装させられるようになりました。「もっと充実したWEBサイトにするためには？」を追求し、ユーザーのためになる情報を発信するサイトになれば、SEO効果も高くなると予想されます。
より見せ方を工夫し、できる限り多くの情報をユーザーに届けられるWEBサイトにしていきたいですね。ブロックエディタ＋拡張プラグインを使いこなすことで、その一助となります。ぜひこの解説ページをご活用いただき、ブロックエディタ拡張プラグインを導入して、その便利さを実感してください。