Gutenbergで直感的に記事作成！WordPress標準ブロックエディターの使い方

WordPressで記事を書く時、「なんだか操作が難しそう」と感じたことはありませんか？実は、そんな悩みを解決してくれるのがGutenberg（グーテンベルク）という標準エディターなのです。

このブロックエディターは、まるでレゴブロックを組み立てるように記事を作れる画期的な仕組み。HTMLの知識がなくても、クリック一つでプロ級のレイアウトが完成します。

ただし、新しい機能だけに「使い方がよくわからない」という声も多いのが現実です。そこで今回は、Gutenbergの基本から応用まで、誰でもマスターできるように詳しく解説していきます。この記事を読み終わる頃には、あなたもGutenbergの虜になっているはずですよ。

Gutenbergってどんなもの？WordPress標準エディターの基本情報

「Gutenberg」という名前を初めて聞いた方もいるでしょう。実はこれ、WordPressに標準搭載されている無料のエディターなのです。

無料で使えるWordPressの心臓部〜Gutenbergの正体とは

Gutenbergは2018年にWordPress 5.0から正式に導入された標準エディター。「ブロックエディター」とも呼ばれ、従来のクラシックエディターに代わる新しい編集システムです。

項目	詳細情報
正式名称	Gutenberg（グーテンベルク）ブロックエディター
提供開始	2018年12月（WordPress 5.0〜）
料金	完全無料
開発元	Automattic（WordPress公式チーム）
対応バージョン	WordPress 5.0以降
ライセンス	GPL v2以降

最大の特徴は、記事作成を「ブロック」という単位で行うこと。段落、見出し、画像、リストなど、すべてが独立したブロックとして扱われます。

たとえば、従来は「画像を挿入したい」と思ったら複雑なHTMLを書く必要がありました。しかしGutenbergなら、画像ブロックを追加するだけ。まさに革命的な変化といえるでしょう。

従来のエディターから何が変わった？ブロック式編集の革命

クラシックエディターとGutenbergの違いは、一言でいうと「自由度」です。従来は文章を上から下に書くしかありませんでしたが、ブロック式なら思い通りのレイアウトが可能になりました。

比較項目	クラシックエディター	Gutenberg
編集方式	テキストベース	ブロックベース
レイアウト自由度	低い（上下のみ）	高い（自在な配置）
HTMLの知識	必要	不要
ビジュアル確認	プレビュー必須	リアルタイム
学習コスト	低い	中程度

実は、この変化には明確な理由があります。スマートフォンやタブレットの普及により、多様な画面サイズに対応したコンテンツが求められるようになったのです。

ブロック式編集なら、デバイスごとに最適なレイアウトを自動で調整してくれます。つまり、一度作成すれば、パソコンでもスマホでも美しく表示されるのです。

作成者と開発背景〜活版印刷の父グーテンベルクの名前を受け継ぐ理由

「なぜGutenbergという名前なの？」と疑問に思った方もいるでしょう。この名前は、15世紀の発明家ヨハネス・グーテンベルクに由来しています。

グーテンベルクは活版印刷技術を発明し、情報伝達の方法を根本的に変えた人物。WordPressの開発チームは、彼の革新精神にちなんでこのエディターに名前を付けました。

グーテンベルク（人物）	Gutenberg（エディター）
活版印刷を発明	ブロック編集を発明
情報伝達を革新	ウェブ制作を革新
15世紀の革命家	21世紀の革命ツール

まさに「印刷革命」ならぬ「編集革命」を起こしたといえるでしょう。ただし、革命には慣れが必要。最初は戸惑うかもしれませんが、慣れれば手放せなくなる魅力的なツールなのです。

ブロックエディターが初心者に愛される理由

「エディターが新しくなったら、また一から覚え直しかな」と不安に思う方もいるでしょう。でも安心してください。実はGutenbergは、初心者にこそ優しい設計になっているのです。

HTMLなしでプロ級デザイン〜知識ゼロでも美しいページが作れる秘密

従来のWordPress編集では、ちょっとしたレイアウト変更でもHTMLの知識が必要でした。しかしGutenbergなら、コードを一切書かずにプロ級のデザインが完成します。

たとえば、2列のレイアウトを作りたい時を考えてみましょう。クラシックエディターなら複雑なHTMLタグが必要でしたが、Gutenbergなら「カラム」ブロックを選ぶだけ。まるでパワーポイントを使う感覚で操作できるのです。

作業内容	クラシックエディター	Gutenberg
画像配置	HTMLタグ入力	ドラッグ&ドロップ
文字装飾	タグ記述	ボタンクリック
リスト作成	手動コーディング	自動フォーマット
レイアウト変更	CSS編集	ビジュアル操作

実は、この簡単さには技術的な工夫があります。Gutenbergは各ブロックに必要なCSSを自動生成してくれるのです。つまり、見た目の美しさを保ちながら、操作は直感的になるという理想的な仕組みなのです。

パズル感覚で記事作り〜ドラッグ＆ドロップで思い通りのレイアウト

記事作成が「パズル」のように楽しくなる。これがGutenbergの最大の魅力といえるでしょう。ブロックを自由に移動させて、思い通りのレイアウトを作り上げる体験は、まさにクリエイティブな作業そのものです。

実際の操作は驚くほど簡単。ブロックの左側にある「⋮⋮」マークをつかんで、上下にドラッグするだけ。段落の順番を入れ替えたり、画像の位置を調整したりが瞬時にできます。

ここで注意したいのは、ドラッグ操作に慣れるまで少し時間がかかること。最初は「あれ？うまく動かない」と感じるかもしれません。でも大丈夫、練習すれば必ず上達します。

操作方法	効果
ブロックのドラッグ	順番の入れ替え
複数選択	まとめて移動
グループ化	レイアウト固定
複製機能	同じ形式を量産

時短効果がすごい〜従来の半分の時間で記事完成

「記事作成にかかる時間を短縮したい」という悩みを持つ方は多いでしょう。Gutenbergなら、その願いが叶います。実際に使ってみると、従来の半分程度の時間で記事が完成することに驚くはずです。

時短の秘密は「再利用ブロック」機能にあります。よく使うレイアウトやデザインをテンプレートとして保存できるのです。たとえば、商品紹介のフォーマットを一度作れば、次回からは呼び出すだけで同じデザインが使えます。

また、リアルタイムプレビュー機能も時短に大きく貢献します。従来は「編集→プレビュー→修正→プレビュー」の繰り返しでしたが、Gutenbergなら編集画面で仕上がりが確認できるのです。

ただし、最初は操作に戸惑って時間がかかるかもしれません。でも心配無用。慣れてしまえば、驚くほどスムーズに作業が進むようになりますよ。

編集画面をのぞいてみよう！画面構成がわかれば操作は簡単

「新しいエディターって、画面が複雑そう」と思っていませんか？実は、Gutenbergの画面構成はとてもシンプル。基本的な配置を理解すれば、迷わず操作できるようになります。

3つのエリアを理解すれば怖くない〜コンテンツ・ツールバー・サイドバーの役割

Gutenbergの編集画面は、大きく3つのエリアに分かれています。まるで新聞の編集部のように、それぞれが明確な役割を持っているのです。

エリア名	位置	主な機能
コンテンツエリア	中央	記事の執筆・編集
ツールバー	上部	全体設定・保存
サイドバー	右側	詳細設定・プレビュー

中央のコンテンツエリアが「作業台」だとすれば、サイドバーは「道具箱」のような存在。必要な機能が整理整頓されて並んでいます。

実は、この配置には心理学的な配慮があります。人間の視線は自然と中央から右へ移動する傾向があるため、メインの作業を中央に、設定を右側に配置することで直感的な操作を可能にしているのです。

初めて触る時は「どこに何があるかわからない」と感じるかもしれません。でも大丈夫、使っているうちに自然と手が覚えてくれます。

サイドバーの使い分け術〜「投稿」タブと「ブロック」タブの活用法

サイドバーには2つのタブがあります。これが初心者を混乱させる原因の一つなのですが、役割を理解すれば とても便利な機能です。

「投稿」タブは記事全体の設定を行う場所。カテゴリーの設定やアイキャッチ画像の選択など、記事そのものに関わる設定がまとまっています。

「ブロック」タブは、選択中のブロック個別の設定場所。文字色を変えたり、画像のサイズを調整したりする時に使います。

タブ名	設定対象	主な機能
投稿	記事全体	カテゴリー、タグ、公開設定
ブロック	個別ブロック	文字装飾、配置、サイズ

たとえば、見出しの色を変えたい時を考えてみましょう。まず見出しブロックを選択して、「ブロック」タブを開く。そこにある色設定で好みの色を選ぶだけです。

ここで注意したいのは、ブロックを選択していないと「ブロック」タブの内容が表示されないこと。最初は「あれ？設定画面が出てこない」と戸惑うかもしれませんが、ブロックを選んでからタブを確認してみてください。

集中モードの切り替え〜執筆に没頭したい時の画面設定

「記事執筆に集中したいのに、あちこちにボタンがあって気が散る」という経験はありませんか？Gutenbergには、そんな悩みを解決する「集中モード」が用意されています。

右上の「オプション」メニューから「スポットライトモード」や「フルスクリーンモード」を選択できます。スポットライトモードは現在編集中のブロック以外を薄く表示し、フルスクリーンモードは管理画面の上部メニューを隠してくれます。

実際に使ってみると、執筆への集中度が格段に上がることに驚くでしょう。まるで静かなカフェで原稿を書いているような、落ち着いた環境が手に入ります。

ただし、集中モードは慣れないと逆に使いにくく感じることも。最初は通常モードで操作に慣れてから、必要に応じて集中モードを試してみることをおすすめします。

基本ブロックをマスターしよう！よく使う機能の操作方法

「ブロックって種類がたくさんあって覚えられない」と不安に思う方もいるでしょう。でも安心してください。実際によく使うのは基本的なブロックだけ。まずはこれらをマスターすれば十分です。

見出しと段落〜記事の骨格を作る基本の「き」

記事作成の基本は「見出し」と「段落」ブロック。この2つを使いこなせば、読みやすい記事の骨格が完成します。

見出しブロックは、H2からH6まで6段階のレベルが選択できます。記事の構造を明確にするために、レベルの使い分けが重要。H2を大見出し、H3を小見出しとして使うのが一般的です。

見出しレベル	用途	文字サイズ（目安）
H2	大見出し	24px
H3	中見出し	20px
H4	小見出し	18px
H5	詳細見出し	16px
H6	最小見出し	14px

段落ブロックは文章を書く基本単位。改行すると自動で新しい段落ブロックが作成されます。ただし、段落内での改行（単純な改行）をしたい時は「Shift + Enter」キーを使います。

実は、この仕組みには SEO的なメリットがあります。各段落が独立したブロックになることで、検索エンジンが文章構造を正確に理解しやすくなるのです。

画像挿入とギャラリー〜ビジュアル要素で読者の心をつかむ

「文字ばかりの記事は読みにくい」という読者の声をよく聞きます。そんな時に活躍するのが画像ブロックとギャラリーブロックです。

画像ブロックの挿入方法は簡単。「+」ボタンから「画像」を選択し、ファイルをアップロードするか、メディアライブラリから選ぶだけです。ドラッグ&ドロップでの直接アップロードも可能。

画像設定項目	効果	推奨値
代替テキスト	SEO対策・アクセシビリティ	画像の内容を簡潔に
サイズ	表示サイズ調整	記事幅に合わせて
配置	レイアウト調整	左寄せ・中央・右寄せ
リンク先	クリック時の動作	メディアファイル推奨

ギャラリーブロックは複数の画像をまとめて表示する機能。商品の写真を複数掲載したい時や、イベントの様子を伝える時に便利です。

ここで注意したいのは、画像のファイルサイズ。大きすぎる画像はページの読み込み速度を遅くしてしまいます。一般的に、ウェブ用画像は100KB以下に圧縮することをおすすめします。

リストとボタン〜情報整理と行動促進のテクニック

情報を整理して伝えたい時は「リスト」ブロックが重宝します。箇条書きと番号付きリストの2種類があり、用途に応じて使い分けができます。

箇条書きリストは順序に意味がない項目の列挙に最適。商品の特徴や注意点を並べる時によく使います。番号付きリストは手順や優先順位がある情報に使用します。

リストの種類	適用場面	例
箇条書き	順序なし項目	商品の特徴、メリット
番号付き	順序あり項目	手順、ランキング
チェック付き	確認項目	TODO、必要なもの

ボタンブロックは読者の行動を促す重要な要素。「お問い合わせ」「購入はこちら」「詳細を見る」など、次のアクションに誘導する役割を果たします。

ボタンの色やサイズは自由に調整可能。サイトのデザインに合わせて統一感を持たせることで、プロフェッショナルな印象を与えられます。

実は、ボタンの配置や色選びには心理学的な効果があります。アクションを促したいボタンは目立つ色（赤やオレンジ）を使い、安心感を与えたい場合は青系統を選ぶと効果的です。

レイアウト自在！高度な表現を可能にするブロック活用術

基本ブロックに慣れたら、次は応用的なレイアウトブロックに挑戦してみましょう。これらをマスターすれば、プロのウェブデザイナーが作ったような洗練されたページが作成できます。

カラム機能で情報を整理〜左右分割レイアウトの作り方

「情報を比較しやすく並べたい」「雑誌のようなレイアウトを作りたい」という時に活躍するのがカラムブロック。2列、3列、さらに複雑な分割も可能です。

カラムブロックの作成は簡単。「+」ボタンから「カラム」を選択し、列数を指定するだけ。あとは各カラムに好きなブロック（文章、画像、リストなど）を配置できます。

カラム数	適用場面	推奨幅比率
2列	比較、Before/After	50%:50%
3列	商品紹介、特徴説明	33%:33%:33%
4列	ギャラリー、アイコン	25%:25%:25%:25%

実際の使用例を考えてみましょう。商品とサービスを比較したい場合、左側に商品情報、右側にサービス情報を配置。読者は一目で違いを把握できます。

ここで注意したいのは、スマートフォンでの表示。カラムはモバイル端末では自動的に縦並びに変換されます。この点を考慮して、各カラムの内容は独立して理解できるように構成しましょう。

グループとカバーで魅力的なセクション〜背景画像を活用した演出方法

「記事にメリハリをつけたい」「印象的なセクションを作りたい」という時は、グループブロックとカバーブロックが効果的です。

グループブロックは複数のブロックをまとめて一つの単位として扱う機能。背景色を設定したり、余白を調整したりして、視覚的に区切られたセクションを作れます。

カバーブロックはさらに高度な機能。背景に画像や動画を設定し、その上に文字を重ねることができます。まるでプロのランディングページのような演出が可能です。

ブロック名	主な用途	設定可能項目
グループ	関連コンテンツのまとめ	背景色、パディング、ボーダー
カバー	ヒーローセクション作成	背景画像・動画、オーバーレイ

たとえば、セミナー告知のセクションを作る場合を考えてみましょう。カバーブロックに会場の写真を背景として設定し、半透明のオーバーレイを加える。その上にセミナータイトルと開催日時を白文字で表示すれば、プロ級の告知バナーが完成します。

ただし、背景画像を使う時は文字の可読性に注意が必要。明るい画像には暗い文字、暗い画像には明るい文字を使い、必要に応じてオーバーレイで調整しましょう。

再利用ブロックで効率アップ〜よく使うパーツを保存する便利技

「同じレイアウトを何度も作るのが面倒」という悩みを解決してくれるのが再利用ブロック機能。一度作成したデザインをテンプレートとして保存し、別の記事でも使い回しできます。

再利用ブロックの作成方法は2つ。既存のブロックグループを選択してメニューから「再利用ブロックに追加」するか、「+」ボタンから「再利用ブロック」セクションで新規作成する方法です。

再利用ブロック例	構成要素	活用場面
商品紹介カード	画像+タイトル+価格+ボタン	ECサイト、アフィリエイト
プロフィールbox	アバター+名前+肩書き+SNS	記事執筆者紹介
CTA（行動喚起）	キャッチコピー+説明文+ボタン	問い合わせ誘導

実際に使ってみると、作業効率の向上に驚くはず。商品レビュー記事を書く場合、商品情報テンプレートを再利用ブロックとして保存しておけば、商品名と画像を変更するだけで統一感のある記事が量産できます。

ここで重要なのは、再利用ブロックは元のデザインと連動していること。テンプレートを修正すると、そのブロックを使用しているすべての記事に反映されます。サイト全体のデザイン統一には便利ですが、個別修正したい場合は「通常のブロックに変換」機能を使いましょう。

ブロック操作のコツ！移動・複製・削除をスムーズに

「ブロックの並び順を変えたい」「同じブロックをもう一つ作りたい」といった操作も、Gutenbergなら簡単です。基本的な操作方法を覚えておくと、編集作業がグッと楽になります。

ブロックの追加と移動〜思い通りの順番に並べる方法

新しいブロックの追加方法は3つあります。最も基本的なのは、任意の場所で「Enter」キーを押して段落ブロックを追加する方法。より多彩なブロックを追加したい時は「+」ボタンをクリックします。

ブロックの移動も直感的。各ブロックの左側にある「⋮⋮」マークをドラッグするか、ツールバーの上下矢印ボタンを使って位置を変更できます。

操作方法	手順	適用場面
ドラッグ移動	⋮⋮マークを掴んで移動	大幅な位置変更
矢印ボタン	ツールバーの↑↓クリック	微調整
複数選択移動	Shift+クリックで選択→移動	まとめて移動

複数のブロックをまとめて移動したい時は、Shiftキーを押しながらブロックをクリック。選択されたブロック群を一度に移動できます。

実は、移動操作には「リスト表示」という便利な機能もあります。左上のアウトライン表示ボタンをクリックすると、記事全体の構造がツリー表示されます。長い記事の編集時には、この機能が重宝するでしょう。

複製機能で時短テク〜同じ形式のブロックを量産する裏ワザ

「似たようなブロックをいくつも作りたい」という時に便利なのが複製機能。一から作り直すより、既存のブロックを複製して内容だけ変更する方が効率的です。

複製の方法は簡単。対象ブロックを選択し、ツールバーのメニュー（⋮）から「複製」を選ぶだけ。キーボードショートカット（Ctrl+D）も利用できます。

商品紹介記事を例に考えてみましょう。1つ目の商品情報ブロック（画像+タイトル+価格+説明文）を作成したら、それを複製して2つ目、3つ目の商品情報を作成。画像と文字だけ変更すれば、統一感のある商品一覧が完成します。

複製が効果的な場面	理由
商品リスト作成	レイアウト統一
Q&A形式の記事	形式の統一
ステップ解説	デザインの一貫性
比較表作成	項目の標準化

ただし、複製する前にブロックの設定を確認することをおすすめします。文字色やサイズなどの設定も一緒に複製されるため、後から一つずつ修正するより、最初に理想的な形を作ってから複製する方が効率的です。

削除とやり直し〜失敗を恐れずに編集できる安心機能

「間違って削除してしまった」「やっぱり前の状態に戻したい」といった心配も、Gutenbergなら大丈夫。充実した復旧機能があるため、安心して編集作業を進められます。

ブロックの削除は、選択してDeleteキーを押すか、ツールバーのメニューから「削除」を選択。間違って削除した場合は、すぐに「Ctrl+Z」（取り消し）で復旧できます。

操作	キーボードショートカット	効果
取り消し	Ctrl+Z	直前の操作を取り消し
やり直し	Ctrl+Y	取り消した操作をやり直し
全選択	Ctrl+A	記事内容をすべて選択
コピー	Ctrl+C	選択内容をコピー
貼り付け	Ctrl+V	コピー内容を貼り付け

さらに強力なのが「版管理」機能。WordPress の「リビジョン」と連携して、過去の編集状態を丸ごと復元できます。「昨日の状態に戻したい」といった場合でも、管理画面の「投稿」→「リビジョン」から任意の時点の状態を選択可能です。

実際の編集では、大きな変更を行う前に「下書き保存」をする習慣をつけることをおすすめします。こうすることで、いつでも安心できる状態にワンクリックで戻れるのです。

プラグインで機能拡張！Gutenbergをパワーアップさせる方法

標準のGutenbergでも十分に高機能ですが、プラグインを追加することで、さらに強力なツールに進化させることができます。まるでスマートフォンにアプリを追加するような感覚で機能拡張が可能です。

拡張ブロックプラグインの選び方〜サイトに合った追加機能の見つけ方

「プラグインって種類が多すぎて、どれを選べばいいかわからない」という声をよく聞きます。確かに、WordPress のプラグインディレクトリには無数の選択肢があります。

プラグイン選びで重要なのは、まず自分のサイトの目的を明確にすること。ブログなのか、企業サイトなのか、ECサイトなのかによって必要な機能は大きく変わります。

サイトタイプ	推奨プラグインジャンル	具体例
ブログ・メディア	コンテンツ拡張	記事装飾、SNS連携
企業サイト	ビジネス向け	問い合わせフォーム、アクセス解析
ECサイト	販売支援	商品表示、決済連携
ポートフォリオ	ビジュアル強化	ギャラリー、アニメーション

プラグイン選択時にチェックすべきポイントは以下の通りです。最終更新日が1年以内であること、アクティブインストール数が一定以上あること、評価が4星以上であることが基本的な判断基準になります。

また、同じ機能を持つプラグインを複数インストールするのは避けましょう。競合によって予期しない問題が発生する可能性があります。

人気プラグイン紹介〜編集体験を劇的に改善する厳選ツール

Gutenberg拡張プラグインの中でも、特に評価が高く、多くのサイトで使われているものをご紹介します。これらは実績と安全性の両方を兼ね備えた信頼できる選択肢です。

Kadence Blocks は最も人気の高い拡張プラグインの一つ。30以上の追加ブロックを提供し、高度なレイアウトやアニメーション効果を簡単に実現できます。

プラグイン名	提供者	主な機能	価格
Kadence Blocks	Kadence WP	30+追加ブロック、アニメーション	無料版あり
Ultimate Addons	Brainstorm Force	20+ブロック、テンプレート	無料版あり
Stackable	Gambit Technologies	デザインブロック、レスポンシブ	無料版あり
GenerateBlocks	Tom Usborne	軽量設計、カスタマイズ性	無料版あり

Ultimate Addons for Gutenberg は、特にマーケティング機能に強みを持つプラグイン。CTAブロック、価格表、お客様の声など、コンバージョン向上に役立つブロックが豊富に用意されています。

Stackable は デザイン性を重視する方におすすめ。美しいテンプレートが多数用意されており、プロ級のデザインをワンクリックで適用できます。

実際の導入効果は大きく、これらのプラグインを使うことで制作時間を50%以上短縮できることも珍しくありません。

プラグイン導入時の注意点〜安全に機能を追加するポイント

「プラグインをインストールしたら、サイトが重くなった」「エラーが発生するようになった」という トラブルを避けるために、導入時の注意点を確認しておきましょう。

最も重要なのは、バックアップを取ってからインストールすること。万が一問題が発生した場合でも、すぐに元の状態に戻せます。

導入前チェック項目	確認内容
WordPress バージョン	プラグインの対応バージョン確認
テーマの互換性	使用中テーマとの相性
既存プラグイン	機能の重複・競合チェック
サーバー環境	PHPバージョン、メモリ制限

プラグインは段階的に導入することをおすすめします。一度にまとめてインストールすると、問題が発生した時に原因の特定が困難になるためです。

また、プラグインの自動更新は慎重に判断しましょう。更新によって仕様が変わり、既存のデザインが崩れる可能性もあります。重要なサイトでは、テスト環境で確認してから本番環境に適用することが安全です。

定期的な見直しも大切。使わなくなったプラグインは停止・削除し、サイトのパフォーマンスを維持しましょう。プラグインが多すぎると、サイトの表示速度や管理画面の動作に悪影響を与える場合があります。

まとめ

Gutenbergは、WordPressの記事作成を根本的に変革した画期的なエディターです。従来の複雑な操作から解放され、まるでパズルを組み立てるような直感的な編集が可能になりました。

HTMLの知識がない初心者でも、プロ級のレイアウトを簡単に作成できる点は特に魅力的。ドラッグ&ドロップでブロックを自由に配置し、リアルタイムで仕上がりを確認しながら編集できるため、作業効率は従来の2倍以上に向上します。

最初は新しい操作に戸惑うかもしれませんが、基本的なブロック操作をマスターすれば、記事作成が楽しい創作活動に変わるでしょう。さらに拡張プラグインを活用することで、より高度な表現や機能を追加できます。今こそGutenbergを活用して、魅力的なコンテンツ制作を始めてみませんか。