【ホームページの作り方講座⑨】ブロックエディタ完全攻略ガイド｜読者の心に届くブログ記事の書き方（基本編）

この記事のゴール

Webサイトは、情報を発信して初めて「メディア」としての命が吹き込まれます。
この記事を読み終える頃には、あなたは、ブロックエディタの基本的な操作方法をマスターするだけでなく、読者にとって分かりやすく、かつGoogleなどの検索エンジンにも評価される、質の高い記事を作成するための、本質的な考え方と技術を、身につけているはずです。

ブロックエディタの画面構成

まずは、記事の編集画面が、どのような要素で構成されているのか、全体像を把握しましょう。

• ① トップツールバー：画面の最上部にあり、「ブロックの追加（＋ボタン）」や「元に戻す／やり直す」といった、基本的な操作ボタンが並んでいます。
• ② メインコンテンツエリア：画面中央の、最も広いエリアです。
  ここに、様々なブロックを積み重ねるように配置して、記事の本文を作成していきます。
• ③ 設定サイドバー：画面の右側に表示される、詳細な設定を行うためのエリアです。
  「投稿」タブ（記事全体の設定）と「ブロック」タブ（選択中のブロックの設定）の2つを切り替えて使います。
• ④ 公開ボタンエリア：画面の右上にあり、記事の公開や下書き保存、プレビューなどを行うための、最終的な操作ボタンが配置されています。

ブロックの基本的な操作方法

ブロックエディタの操作は、主に以下の3つの繰り返しです。

• 1. ブロックを追加する：
  • コンテンツエリア内の「＋」ボタン（ブロック挿入ツール）をクリックすると、利用可能なブロックの一覧が表示されます。
    ここから、使いたいブロック（例：「見出し」「画像」など）を選択します。
  [画像: 「＋」ボタンを押すと、見出しや段落、画像といったブロックの選択肢が表示されている様子のスクリーンショット]
• 2. ブロックに内容を入力・設定する：
  • 追加したブロック内に、文章を入力したり、画像をアップロードしたりします。
  • ブロックを選択した状態で、画面右側の「ブロック」タブを開くと、そのブロックの色やサイズといった、詳細な設定を変更できます。
• 3. ブロックを移動・削除する：
  • 各ブロックに表示されるツールバーの「↑」「↓」矢印で、ブロックの順番を簡単に入れ替えることができます。
  • ツールバーの「︙（オプション）」から、ブロックを削除したり、コピーしたりすることも可能です。

この3つの基本操作さえ覚えれば、どんな記事でも作成することができます。

見出しブロック (Heading)

• 役割：記事の「目次」や「章立て」を作るための、最も重要なブロックです。
  文章の大きな区切りを示し、記事全体の構造を読者に伝えます。
• 使い方と設定：ブロックを追加し、見出しのレベルを「H2」「H3」「H4」などから選択します。
• 戦略的ポイント（SEOと可読性）：
  • 階層構造を必ず守る： 記事のタイトルが自動的に「H1」になるため、記事内の大見出しは「H2」から始めます。
    H2の小見出しとして「H3」、さらにその下に「H4」というように、必ず階層構造を正しく使い分けてください。
    この構造は、Googleが記事の内容を理解する上で、非常に重要な手がかりとなります。
  • 見出しだけで内容が伝わるようにする： 読者は、まず見出しを拾い読みして、その記事を読む価値があるか判断します。
    見出しを読むだけで、その章に何が書かれているのかが、具体的に分かるような言葉を選びましょう。

段落ブロック (Paragraph)

• 役割：記事の本文を構成する、最も基本的な文章ブロックです。
• 使い方と設定：文字を入力するだけで、自動的に段落ブロックになります。
  ツールバーから、文字の太字、斜体、文字色、背景色、そして他のページへのリンクなどを設定できます。
• 戦略的ポイント（読みやすさ）：
  • 段落は短く、簡潔に： スマートフォンでの閲覧が主流の現在、文章が長く続くと、読者は圧迫感を感じて離脱してしまいます。
    1つの段落は、3〜4行以内を目安に、こまめに改行し、リズム良く読めるように心がけましょう。
  • 重要なキーワードを太字にする： 読者が文章を拾い読みしても、重要なポイントが伝わるように、キーワードを適度に太字にすると効果的です。

画像ブロック (Image)

• 役割：記事の内容を視覚的に補足し、読者の理解を助けるためのブロックです。
  文章だけのページに、視覚的なアクセントを加える役割も担います。
• 使い方と設定：「アップロード」または「メディアライブラリ」から、記事に挿入したい画像を選択します。
• 戦略的ポイント（SEOと専門性）：
  • 必ず「代替テキスト（alt属性）」を入力する：画像ブロックを選択し、右サイドバーの「ブロック」タブを見ると、「代替テキスト」という入力欄があります。
    ここには、「その画像が、何を表しているのか」を説明する、簡潔な文章を入力してください。
    このテキストは、Googleが画像の内容を理解するため、また、目が不自由な方が使う読み上げソフトで読み上げられるため、SEOとアクセシビリティの両面で、非常に重要です。
  • 著作権フリーの高品質な画像を使う：自分で撮影した写真以外を使う場合は、必ず著作権フリーの画像サイト（例：Unsplash, Pexels, 写真ACなど）を利用しましょう。
    プロが撮影した高品質な画像は、サイト全体の信頼性を高めます。

リストブロック (List)

• 役割：複数の項目を、箇条書きで分かりやすく整理するためのブロックです。
• 使い方と設定：「番号なしリスト」（・点）と「番号付きリスト」（1, 2, 3…）の2種類があります。
  手順を説明する場合は番号付き、単に項目を並べる場合は番号なし、と使い分けます。
• 戦略的ポイント（情報の整理）：文章で長く説明するよりも、リストで提示した方が、読者の頭に入りやすい情報（例：「施術の3つの特徴」「セルフケアの5つのステップ」など）は、積極的にリストブロックを使いましょう。
  情報を整理してあげることは、読者への「おもてなし」です。

引用ブロック (Quote)

• 役割：書籍や論文、他サイトからの文章を、自分の文章と明確に区別して引用するためのブロックです。
• 使い方と設定：引用したい文章をブロック内に入力し、「引用元」の欄に出典（書籍名やサイト名、URLなど）を明記します。
• 戦略的ポイント（権威性の向上）：あなたの主張を裏付けるために、公的な研究機関のデータや、権威のある専門家の言葉を引用することで、記事全体の信頼性と専門性が向上します。

カラムブロック (Columns)

• 役割：ページの内容を、2列や3列といった、複数のカラムに分割して表示するための、レイアウト用ブロックです。
• 使い方と設定：カラムブロックを追加し、分割したい列数を選択します。
  その後、各カラムの中に、さらに別のブロック（画像ブロックや段落ブロックなど）を配置していきます。
• 戦略的ポイント（プロのデザイン）：例えば、左カラムに人物写真、右カラムにその人のプロフィール文章を配置すると、雑誌のような、洗練されたレイアウトを簡単に作ることができます。
  カラムブロックを使いこなせると、サイトデザインの表現の幅が、格段に広がります。

テーマ独自の「専用ブロック」を使いこなす

講座④で選んだ、SWELLやJIN:Rといった高機能な有料テーマには、記事の表現力を飛躍的に高める、独自の「専用ブロック」が多数用意されています。

• ボックスブロック：「ポイント」「注意点」「まとめ」といった、特定の情報を、読者の注意を引くデザインの枠で囲むことができます。
• ステップブロック：エクササイズの手順などを、番号付きで分かりやすく図解できます。
• FAQブロック：「よくある質問」を、クリックで開閉する形式で、スマートに表示できます。

これらの専用ブロックを積極的に活用することで、専門知識がなくても、プロがデザインしたような、視覚的に訴求力の高い記事を、簡単に作成することができます。

外部コンテンツの「埋め込み」を活用する

ブロックエディタは、YouTubeやGoogleマップといった、外部のコンテンツを、非常に簡単に記事内に埋め込むことができます。

• YouTube動画の埋め込み：YouTubeブロックを使い、共有したいYouTube動画のURLを貼り付けるだけで、記事内に動画プレーヤーが自動で表示されます。
  ストレッチの方法や、エクササイズのフォームなどを、文章だけでなく動画で見せることで、読者の理解度は格段に深まります。
• Googleマップの埋め込み：Googleマップブロックを使い、あなたの治療院やスタジオの住所を入力するだけで、記事内に地図を埋込めます。
  アクセスページだけでなく、特定のイベントを告知する記事内などで活用できます。

読者を導く「内部リンク」と「外部リンク」

リンクは、単に他のページに移動させるだけでなく、読者の満足度とSEO評価を高めるための、重要な役割を担います。

• 内部リンク：あなたのサイト内の、別の関連記事へ案内するリンクです。
  例えば、「腰痛」に関する記事の中で、過去に書いた「正しい座り方」の記事へリンクを貼ることで、読者はより深く情報を得ることができ、サイト内の回遊性が高まります。
  これは、読者の滞在時間を延ばし、Googleからの評価を高める上で非常に有効です。
• 外部リンク：あなたのサイトとは別の、外部のサイトへ案内するリンクです。
  情報の信頼性を示すために、公的な研究機関や、参考にした論文のページへリンクを貼る場合などに使います。
  リンクを設定する際は、「新しいタブで開く」という設定をONにしておくと、読者があなたのサイトから離れてしまうのを防げます。

パーマリンク（URLスラッグ）

記事の「住所」となるURLです。
講座②で解説した通り、日本語のタイトルがそのまま入っている場合は、内容が分かりやすい、簡潔な半角英数字（例：how-to-stretch-backpain）に、必ず修正しましょう。

カテゴリーとタグ

記事を、分かりやすく分類するための機能です。

• カテゴリー：記事の大きな分類です。
  サイトの「本棚」のようなもので、一つの記事には、通常1〜2個のカテゴリーを設定します。
  （例：「腰痛改善」「姿勢改善」「セルフケア」）
• タグ：記事の内容を、より細かく表すキーワードです。
  本の「索引」のようなもので、一つの記事に、複数設定できます。
  （例：「ストレッチ」「デスクワーク」「産後」）

適切に分類しておくことで、読者は、自分の興味のある記事を探しやすくなります。

アイキャッチ画像

記事一覧ページや、SNSでシェアされた際に表示される、記事の「顔」となる画像です。
読者が、その記事を読むかどうかを判断する、非常に重要な要素です。

記事の内容を象徴する、魅力的で高品質な画像を設定しましょう。
Canvaなどのデザインツールで、文字を入れるのも効果的です。

抜粋

記事の短い「要約文」です。
これを設定しておくと、テーマによっては、記事一覧ページなどで、タイトルと共に表示されます。
読者の興味を引き、記事本文へと誘導するための、大切な文章です。
空欄の場合は、記事の冒頭部分が自動で表示されます。

SEOプラグインの設定

講座⑤で導入した「SEO SIMPLE PACK」の設定欄で、この記事専用の「タイトル」（検索結果で表示されるタイトル）と「ディスクリプション」（検索結果で表示される説明文）を、必ず設定しましょう。
検索結果で、いかに魅力的に見せるかを意識して、キーワードを含めつつ、クリックしたくなるような文章を作成します。

結論：最高のパートナーと共に

この記事で学んだことは、あなたの今後の情報発信における、一生モノのスキルとなります。

初めは、少し戸惑うかもしれません。
しかし、いくつかの記事を実際に書いてみるうちに、ブロックエディタが、まるで粘土をこねるように、あなたのアイデアを、自由自在に形にしてくれる、最高のパートナーであることに、きっと気づくはずです。

最高の「器」が完成した今、その中に注ぎ込む「中身（コンテンツ）」の質こそが、あなたのビジネスの成否を分けます。

そのコンテンツの核となる「① 圧倒的な専門技術」を磨き、他の誰とも違う価値を提供したいなら、僕が主宰する「日本IASTM筋膜リリース協会」のセミナーが、あなたの発信する情報に、揺るぎない深みと信頼性を与えるかもしれません。

そして、その素晴らしい価値を、最大限に魅力的に伝えるための「② 集客できるホームページ運用術」。
僕自身が300万円の失敗から学んだ全てを注ぎ込み、あなたのサイトを最強の集客装置に変えるサポートを行う「破格の価格で高品質ホームページも制作」も行っています。