ウェブ今昔物語 第1話 HTML構造とブロックエディタの進化をめぐる編

Gutenbergの標準構造に感じた違和感

HTMLを触り始めたのは、まだホームページビルダーやDreamweaver（ドリームウィーバー）が一般的だった時代。気がつけばもう29年。HTMLコードをひたすら手で書いてきた、“生きた化石”みたいな制作者です。主流だった制作ソフトには一切頼らず、タグを打ち続けて鍛え上げてきたウェブオタクでもあります（笑）

とはいえ、今でこそ「構造が意味を持つべき」なんて言ってますけど、昔はそんなの全然考えてなかったんですよ。どちらかというと、「どうすれば検索エンジンに気に入られるか？」ばかりを意識してました。今でいう“黒歴史SEO”に、どっぷりハマってたクチです。

たとえば──

• 背景と同じ色でキーワードを詰め込んだ「不可視テキスト」
• フッターの端にびっしり並べた「被リンク集」
• meta keywords に全力でキーワードを羅列しまくる

……とか、まぁ今思えば笑っちゃうようなことを本気でやってました（笑）でも、当時はそれが「正解」でしたし、実際に効果もありました。「被リンクを増やせば上がる」「キーワードを詰めれば順位が上がる」──そんな時代だったんです。

でも今ではこういったSEOテクニック、見事なくらい通用しません（笑）。キーワードを詰め込もうが、リンクを並べようが、Googleのアルゴリズムにはまるっと見抜かれてスルーされます。むしろ「これ、不自然じゃない？」と突っ込まれて、順位を下げられることすらあるのが現状。昔の自分に言ってやりたい、「もうその手は効かないぞ」って（笑）。

それからHTML5の登場とともに、「構造には意味がある」という考え方がじわじわと広まってきました。検索エンジンもユーザーも、見た目だけじゃなく“文書構造そのもの”を評価するようになってきたんですね。

そんな流れの中、WordPressのブロックエディタ（Gutenberg）を使って記事を書いていると、ふと違和感を感じました。

見た目はキレイに組めているのに、クラシックエディタの頃みたいに自分で構造を組んでいた感覚がない。出力されるHTMLを見ても、見出しと本文がただdivで区切られているだけで、意味のある“まとまり”が見えてこないのです。

📌 クラシックエディタとは？
クラシックエディタとは、WordPressに以前から標準搭載されていたシンプルな投稿画面で、HTMLを手動で整えやすいのが特徴です。クラシックエディタの頃は、自分で見出しを入れて、段落を組んで、必要なら <section> で囲んで…というふうに、構造を意識したマークアップが可能でした。

📌 Gutenberg（ブロックエディタ）とは？
Gutenbergとは、WordPress 5.0以降に標準搭載されたブロック型の投稿エディタで、文章や画像などの要素を「ブロック」として直感的に操作できるのが特徴です。視覚的なレイアウト編集に優れていますが、出力されるHTML構造が自動化されているため、細かいタグ構造やセマンティクスを意識したマークアップはやや行いづらくなっています。

ウィドックではこの違和感をきっかけに、「もっと意味のあるHTMLを出力したい」と考え、独自の<section>ブロックを実装し、Gutenbergでも“まとまりのあるマークアップ”を実現できるようにしました。

この記事では、その背景や考え方、具体的な実装方法を経験談を交えながら紹介していきます。

sectionタグを導入する理由

検索エンジンにも「ここからが大事！」ってわかってもらおう

sectionタグを使うと、検索エンジンに「ここからここまでがひとまとまりですよ」とわかりやすく伝えられます。こうすることで、ページの重要な部分や内容の階層を正しく理解してもらいやすくなり、SEOにも良い影響をもたらします。たとえば、見出しとその内容がセットになっていると、検索エンジンもページの意味をバッチリ理解できます。

スクリーンリーダーさんも助かる、読みやすい区切りづくり

sectionタグでしっかりまとまりを作ると、スクリーンリーダーを使う人が「ここはひとつのグループだな」とわかりやすくなります。ページの区切りがはっきりしていると、読みやすく操作もしやすくなります。みんなに優しいウェブサイトを作るためには欠かせないポイントです。

リッチな検索結果を狙うなら、構造化データとの仲良しが必須！

きちんとsectionで区切ることで、Googleのリッチスニペットに使われる構造化データと相性バツグンになります。意味のあるまとまりで分けられていると、検索結果で目立つ表示ができてクリック率アップが期待できます。このあたりは日々進化しているので、今後も注目したいポイントです。

Gutenbergでのブロック実装例

WordPressのブロックエディタ、Gutenbergは確かに便利で直感的。でも生成されるHTMLの構造を見ると、どこか**「物足りないな～」**と感じることもあります。そこでウィドックでは、「ただの飾りじゃなくて、ちゃんと意味のあるsectionを出力したい！」という気持ちから、自前でsectionタグを出すカスタムブロックを作っちゃいました。

編集画面では投稿者が背景色や枠線を自由にカスタマイズできるので、思い通りに見た目を変えられます。表示画面では意味のあるsectionタグでシンプルにまとめるのがポイント。この二刀流で、「使いやすさ」と「正しいHTML構造」の両立を狙っています。

ウィドックは面倒なビルドツールは使わず、手作業中心のシンプルな開発スタイルを貫いています。これなら必要な時にすぐ修正や拡張ができて意外と便利なんですよ。

編集画面では背景色をRGBAで自由に入力可能、枠線の有無や位置も細かく設定できます。投稿者が気軽に見た目を変えられますが、実際のHTMLは意味のあるsectionタグのまま。まさに「わかってるカスタムブロック」です。

独自sectionブロックの概要

ウィドックで作ったsectionブロックは、ただの飾りじゃありません。意味のあるHTML構造を守るためのこだわりの結晶です。普通のGutenbergブロックは見た目は整っていても、HTMLはdivの寄せ集めでどこがまとまりかわかりにくいことがあります。そこでウィドックでは、「ここはひとまとまりですよ」と明示するために、ちゃんとsectionタグを使って意味を伝えることを徹底しています。

編集画面では背景色や枠線の設定を自由に変えられるので投稿者にやさしく、表示画面は無駄をそぎ落としたシンプルなsection構造で仕上げています。このバランスが投稿者の使いやすさとSEO・アクセシビリティの両立に役立つのです。

単なる見た目の装飾以上に、意味のある文書構造を保つための大切なブロックとして活躍しています。

PHPとJavaScriptでの登録方法のポイント

カスタムブロックの登録は、まずWordPressのfunctions.phpにPHPのコードを書いて「このブロックを使いますよ」と宣言するところから始まります。ここでブロックの名前や、どのスクリプトやスタイルを読み込むかを指定し、WordPressに認識させるわけです。

編集画面の中身はJavaScriptで作っていて、投稿者が触るUI部分を制御しています。投稿者が背景色や枠線を選べるラジオボタンやカラーピッカーを用意し、直感的に設定できるようにしました。

ウィドックではなるべくシンプルな環境構築で進め、必要な部分だけを手作業で修正・拡張できるようにしています。これにより、環境の複雑さに悩まされず、メンテナンス性を高めることが可能です。

また、PHP・JavaScript両面での連携がスムーズになるよう、名前空間の付け方やファイルの整理にも気を配っています。こうした細かな積み重ねが、長期的な保守性や拡張性を高めるポイントになるんですね。

カスタムブロック編集画面と表示画面の使い分け

カスタムブロックを作るときは、編集画面と表示画面で役割をしっかり分けることがとても大事です。編集画面は投稿者が直接触る場所なので、使いやすくわかりやすい操作性が求められます。

例えば、ウィドックのsectionブロックでは、背景色を自由に変えたり、枠線のオンオフを切り替えたり、細かく設定できるUIを用意しています。こうした設定があると、見た目のカスタマイズが簡単になるので投稿者も気軽に使えますよね。

一方、表示画面はサイトを訪れたユーザーが実際に見る部分です。ここでは意味のあるsectionタグでしっかりまとまったHTMLを出力することに注力。装飾のための余計な余白や複雑な要素は避けて、シンプルかつ意味のある構造を保つことがポイントです。

こうして編集画面と表示画面の使い分けをしっかり作ることで、投稿者にとって使いやすく、かつSEOやアクセシビリティに強いウェブサイトを実現できます。

PHPでサクッとブロック登録の基本を押さえる

WordPressでカスタムブロックを使うには、まずPHPでそのブロックを登録する必要があります。ここでは最低限のコードで**「このブロックを使いますよ」とWordPressに伝える**簡単なやり方を紹介します。

基本的にはregister_block_type()関数を使い、ブロックの名前や編集画面用のJavaScriptファイル、スタイル用CSSファイルを指定します。

たとえばテーマのfunctions.phpに次のように書けば、そのまま動きます。

function wedok_register_section_block() {
    register_block_type( __DIR__ . '/blocks/section' );
}
add_action( 'init', 'wedok_register_section_block' );

blocks/sectionフォルダ内にblock.jsonやJS、CSSを置いておけば、これで管理画面に新しいブロックが表示される仕組みです。まずはこのシンプルな登録の仕組みを押さえましょう。

JavaScript（JS）で編集画面のUIを作る超シンプル実装

sectionブロックの編集画面は、InnerBlocksを使って子ブロックを自由に追加・編集できるシンプルな構成です。投稿者は段落や見出し、画像など好きなブロックをsectionの中に自由に配置可能で、固定テキストやプレースホルダーはありません。

JavaScriptのコードは最小限にまとめられています。

const { registerBlockType } = wp.blocks;
const { useBlockProps, InnerBlocks } = wp.blockEditor;

registerBlockType('wedok/section', {
    edit() {
        return wp.element.createElement('section', useBlockProps(),
            wp.element.createElement(InnerBlocks)
        );
    },
    save() {
        return wp.element.createElement('section', useBlockProps.save(),
            wp.element.createElement(InnerBlocks.Content)
        );
    }
});

このコードにより、投稿者は編集画面で自由にコンテンツを組み立てられ、表示画面では意味のあるsectionタグで囲まれた構造が出力されます。複雑なUIは不要で、シンプルかつ直感的な実装がポイントです。

カスタムブロック編集画面と表示画面の使い分け

カスタムブロックを作るときは、編集画面と表示画面で役割をしっかり分けることがとても大事です。編集画面は投稿者が直接触る場所なので、使いやすくわかりやすい操作性が求められます。

たとえばウィドックのsectionブロックでは、背景色を自由に変えたり、枠線のオンオフを切り替えたり、細かく設定できるUIを用意しています。こうした設定があると、見た目のカスタマイズが簡単になるので投稿者も気軽に使えますよね。

一方、表示画面はサイトを訪れたユーザーが実際に見る部分です。ここでは意味のあるsectionタグでしっかりまとまったHTMLを出力することに注力。装飾のための余計な余白や複雑な要素は避けて、シンプルかつ意味のある構造を保つことがポイントです。

こうして編集画面と表示画面の使い分けをしっかり作ることで、投稿者にとって使いやすく、かつSEOやアクセシビリティに強いウェブサイトを実現できます。

今日のおさらいとこれからのヒント

この記事では、WordPressのブロックエディタGutenbergで感じた構造の違和感をきっかけに、独自にsectionタグを使ったカスタムブロックを作る理由を詳しく解説しました。

sectionタグを使うことで、検索エンジンにページ構造を正しく伝えやすくなることや、スクリーンリーダーに優しい設計となること、さらには構造化データとの相性が良くリッチな検索結果への可能性が高まることをお伝えしました。

また、ウィドックのカスタムsectionブロックは、編集画面で見た目を自由にカスタマイズできる使いやすさと、表示画面で意味のあるHTML構造を保つ堅実さを両立させています。

この記事を通じて、単なる見た目の良さだけでなく、意味のあるHTML構造の重要性を改めて実感していただけたら嬉しいです。

これからのウェブ制作では、こうした「意味のある構造」と「使いやすさ」の両立がますます求められていくでしょう。