POCO は読者に情報を届けることを徹底したブログ向けテーマです

POCOのコンセプト

POCOはカスタマイズ性に乏しいテーマです

上の絵を見て不快な思いをされたのであれば申し訳ございません。

自分でワードプレステーマを制作しようと決意したとき、真っ先にイメージしたのがこれでした。

ブログ向けのワードプレステーマは有料/無料によらず多数出ています。どれもカスタマイズ性、デザインともに素晴らしいものばかりです。

しかし、いまさら新しいテーマをあえてリリースするのには理由があります。

既存のテーマでブログ運営を続けていく過程で、ほとんど使わない機能やめったに変更しない設定が増えていきました。これがストレスでした。

またおしゃれなデザインが自分のサイトに似合わないな~とも思っていました。

これからも長くブログを運営してくためには、誰かの作ったテーマに自分を合わせるのではダメ。自分でテーマを制作してすべて自己管理する必要があると判断しました。

POCO では機能を絞り込みました。具体的にはこのようになっています。

  • ワードプレスの管理画面でカスタマイズできる項目は「メニュー」と「ワードプレスに元々ある設定」のみ
  • サイドバーウィジェットなし。カスタマイズは直接コードを修正
  • コメント欄もなし(情報交換はSNSやメール問い合わせで対応)
  • 子テーマも用意しない
  • ビジュアルエディタも使わない。記事は html コードを直接保存。
    • クラシックエディタプラグインを使う前提
    • 記事の下書きはワープロソフトで書き、 html タグで梱包後ワードプレスのエディタにコピペで十分
  • 機能拡張はプラグインを使う(プラグインで実現できる機能は原則自分で実装しない)

実際に POCO の制作を通じてワードプレス (PHP) の学習をしたところ、私にはソースコードレベルでのカスタマイズ性で十分だと判断しました。

「男は黙ってソースコード!」は自然な結論でした。

5つの内部SEO対策を実装済み

ここまでお読みになり「本当にふざけたテーマだ!」とお怒りかもしれません。

しかし POCO は実際にワードプレスブログで使うために作りました。ブログ運営で求められる SEO 対策は当然実装しました。

POCOの設計思想はシンプルです。

「読者様に情報や知識を速く、無駄なく、確実に届ける」

訪問者様が検索を通じて自分のブログにアクセスするのは「(情報や知識を)知りたい、(悩みなどを)解決したい」です。

この目的を達成するために本当に必要なものは何か。よくよく検討して以下の5つを実装しました。

その1:AMPページを前提とした骨組み(要プラグイン追加)

AMPページ検査に合格

POCO は検索経由で訪問していただいたモバイルユーザーを最優先します。

モバイルユーザーのための SEO 対策の第1は AMP (Accelerated Mobile Page) です。 AMP を使うことで検索順位に影響はないと言われていますが、それでも以下の3つのメリットがあります。

  1. 読み込みスピードの向上は訪問者のためになる(速く情報を届けられる)
  2. 運営側としては離脱率の低下を期待できる
  3. 今後対応される可能性のあるリッチリザルト経由でコンテンツを提供できる

実際のところ、 POCO は AMP ページ化にプラグインの力を借りる必要があります。しかしプラグインでも対応できない部分は POCO で標準実装としました。したがって POCO は AMP プラグインを使っていただく前提のテーマとなっています。

AMP にすることでデメリットもあります。現在 AMP では Javascript を制限しています。 例えば「ページの先頭に戻るボタン」は Javascript でスクロールアニメーションを実現しています。しかし POCO ではこのボタンを押してもスクロールせず「瞬間移動するように」ページ先頭に戻ります。正直不自然ですよね。

でも、検索結果から来たユーザーが「ページの先頭に戻るボタン」を実際に使う可能性は未知数です。訪問者はコンテンツを読むのが先です。ボタンを押してページ先頭に戻るのか、別のページを読んでもらえるのか、または検索結果に戻るのかはわかりません。

そのため細かい機能実装よりも、 AMP 化してまずは情報を素早く届けて読んでもらうことを優先しました。 POCO には Javascript のコードはありません。

もう1つのデメリット。 AMP は PC ページに対してメリットがありません。しかし AMP 前提の html コードでも PC 表示ではエラーになりません。そのため PC でも AMP で生成した html コードをそのまま利用します。

第三者のAMPページ検査にも合格

この画面にあるように、 POCO は公式の AMP テストツールだけでなく、第三者によるベンチマークテスト (AMPBench) でも合格することを確認しています。

AMPBench は後述する構造化マークアップも同時にテストし、 POCO はそちらも合格しています。

AMP に対応するのは投稿ページ、ホーム、カテゴリーページです。固定ページは問い合わせフォームなどで Javascript を使う可能性があるので非対応としています。しかし実際にはプラグインで固定ページの AMP 化も可能です。

CSSを極端に改造したり、画像サイズ(寸法や圧縮)を考慮しないとテストで NG になる恐れがあります。

その2:完全レスポンシブ設計、モバイルフレンドリー対応

レスポンシブ画面比較

POCO は完全レスポンシブ対応です。

レスポンシブとは PC とスマホで異なる画面表示をすることです。レスポンシブ設計も直接 SEO 効果があるわけではありません。しかし、ユーザーフレンドリーなモバイル画面も離脱率の低下や CTR の向上といった間接的な SEO 効果を期待できます。

AMP の機能とレスポンシブは競合しないので標準実装となっています。公開したコンテンツは標準でレスポンシブ画面表示になります。

レスポンシブの実装は原則 CSS のみです(一部 PHP で処理を分けています)。 AMP は CSS のファイルサイズを原則 50 kB までに制限されています。しかし POCO は機能を絞り込むことでこの制限の半分 (25 kB) しか使っていません。

これも「訪問者様にコンテンツを届ける」ことを優先した結果です。装飾を最小限にしたのは結果であり、無理してコードを削ったのではありません。

モバイルフレンドリー検査に合格

レスポンシブ対応にした結果、 POCO はモバイルフレンドリーのテストにも合格します。

CSSを極端に改造したり、画像サイズ(寸法や圧縮)を考慮しないとテストで NG になる恐れがあります。

その3:モバイル表示スピードも最善対応

ページスピードスコアは93点

開発中の画面ですが、 POCO はモバイルページで 90 点以上のスピードを出すことができます。

AMP プラグインを入れた結果です。 AMP プラグインが入っていないと 90 点は出ません。

CSSを極端に改造したり、画像サイズ(寸法や圧縮)を考慮しないとテストの結果が悪くなる恐れがあります。

POCO はスピードを優先するために装飾や機能を最小限としています。公開するコンテンツさえ気を付けていればこの点数は維持できるはずです。

これ以上スピードを改善するにはサーバーを変えるか、ワードプレス (CMS: Content Management System) 自体を見直す必要があるでしょう。

POCO をさらに速くできるアイデアがあれば、是非チャレンジしてみてください。後述しますが POCO は全ソースコードを公開しています。

POCO はキャッシュ系のプラグインにも対応しています。

AMP ページはモバイル表示に対しては Google 側でキャッシュ対応します。しかし PC からのアクセスについては独自に対応する必要があります。その対応としてキャッシュ系プラグインは必須でしょう。

その4:JSON-LD, OGP, Twitter Card の構造化に対応済み

JSON-LD形式による構造化マークアップの検査結果合格

POCO は構造化マークアップにも対応しています。上の画面は JSON-LD 形式の構造化マークアップの検査結果です。エラーはありません。

構造化マークアップはモバイル検索でリッチリザルトやカルーセル表示をするために必須です。ブログページが実際にリッチリザルト表示された経験が私にはありませんが、 SEO 対策として標準実装しています。

構造化マークアップには3つの規格があります。そのうち POCO は JSON-LD 形式のみ対応しています。他にも microdata 形式や RDFa 形式もありますが、対応していません。他の形式もコードに実装するのは冗長と判断しました。

JSON-LD による構造化はホーム、投稿ページ、固定ページに対応しています。一覧ページ(カテゴリページやタグページなど)は対応していません。

OGP, Twitter Card の検査結果合格

OGP (Open Graph Protocol) と Twitter Card はコンテンツをSNSでシェアする際に必要なページ構造を提供します。シェア投稿時に URL だけ指定してもアイキャッチ画像や抜粋文を表示してくれるための構造化マークアップです。

POCOでもアイキャッチ画像や抜粋文を自動で OGP 向けにマークアップする機能を標準で実装しています。 Twitter Card は検査してもエラーは出ません。

facebook では構造化チェックツールを使用すると警告がでます。これは facebook OGP 専用のアカウントの入力を求められているからです。このアカウントは無くても運用できるため、警告を無視してご利用いただけます。

その5:スマートニュース、グノシーへのフィード配信にも対応

カスタムニュースフィードも実装済み

POCO はスマートニュースとグノシーにてニュース配信するための独自フィード (RSS) を自動で生成します。設定は不要です。

ブログ運営の過程で公開した新着記事を各社に通知し、より幅広い読者様に自分の記事を見てもらえる可能性があります。

配信フィードは POCO で自動生成しますが、各社で実際に配信してもらうには別途申請と審査が必要です。申請方法は各社で異なりますのでお調べください。

以上、5つの SEO 対策を紹介しました。

サイトデザインに力を入れるよりも「いかに情報を届けて読んでもらうべきか」に注力したテーマであることがおわかりいただけたと思います。

ダウンロードとサポートについて

ダウンロードも利用も再配布も完全無料

POCOは完全無料です。ダウンロードページよりダウンロードしてご自由にお使いください。

ライセンスは GPL 2.0 とします。ライセンスの範囲内でご自由に改造して再配布していただいて問題ありません。

自分のブログのために作ったので、サポートまで対応できません

誠に申し訳ありませんが、制作者によるサポートは一切しません。

どうしてでしょうか?

POCOは私のブログ用として制作したテーマです。第三者の方に配布して使っていただくことを目的としていません。

カスタマイズ性の悪さから「使いにくい!」という批判が来ることは目に見えています。しかもテーマ的に炎上してもおかしくない感じです。

そういった対応までしている余裕はないため、サポートなしとさせてください。

ソースコードのコメントで学習できる

教材として利用可能

私自身、 POCO の制作を通じて「 WordPress はこうやって動くのか」とか「 PHP プログラミングと html, CSS, Javascript はこうやって関連しているのか」ということを学ぶことができました。

私が POCO を通じて学んだ内容を、ソースコードのコメントに残してあります。「どこで」「何が行われているのか」が分かるようになっています。

上の図の例では「3.15 記事の公開日と更新日の生成パーツ」が functions.php, single.php に実装されていることを示しています。さらに style.css ではこのパーツの装飾コードもあることを示しています。実際には●のあるファイルにコードが実装されているため、 page.php, index.php にも公開日と更新日の生成パーツは実装されています。

このようにどこに、何が実装されているのかが表で一目でわかります。

もしあなたがテーマを自作したいと考えているのであれば、 POCO をベースに改造することができます。

SEO 対策部分のソースコードも全てコメント付きで公開しています。ご自由にご利用ください(ただし OGP はサルワカのコードを使用)。

WordPress のコード規約に沿って実装済み

WordPressコードチェック機能ページ(Git)

正直、 POCO はふざけた名前のワードプレステーマです。しかし教材として公開する以上、全てのコードについて見やすさとルールを順守しました。

PHP Code Sniffer というツールを使うことで「 WordPress の規約に沿ったコードとなっているか」を検査できます。 POCO の全 PHP ファイルはこのツールで検査済み、エラーも警告もゼロです。

WordPressコード規約検査に合格

私も技術者の端くれとして、低品質なものを提供するわけにはいきません。このツールでエラーが出なくなるまで繰り返しコードを修正しました。

それでもまだ POCO にはコメントがたくさん入っています。美しくないコードかもしれませんが、配布して誰かに使ってもらうための最小限の配慮です。

PHP Code Sniffer のインストールと使い方については Google 検索で他のページの解説をご覧ください。

デバッグプラグインを使ってデバッグ済み、エラーなし

デバッグバーを使用

PHP Code Sniffer はコードがルールに沿っているかを検査するものです。実際に動かしてエラーになるかどうかデバッグするツールではありません。

そのため、 Debug Bar プラグインにて動作確認もしています。ソースコードがルールに沿って書かれているだけでなく、実際に動かしてもエラーも警告も出ないように徹底的にデバッグもしてあります。

そのため、 POCO でワードプレスの学習をしたい人、 POCO でブログを運営したい人、どちらも安心してお使いいただけます。

何度も書きますが、 POCO は実際に使うために製作したテーマです。

Debug Bar のインストールと使い方については Google 検索で他のページの解説をご覧ください。

今後の拡張や追加制作について

現在のところ拡張や追加制作については検討していません。少なくとも検索経由でアクセスしてくれる人にできるサービスはすべて実装したと自負しています。

唯一、今後の追加を検討すべきものは「プログレッシブ・ウェブ・アプリ (Progressive Web App, PWA)」です。ブラウザを介してウェブサイトがアプリのようにふるまえる機能です。

この機能はウェブメールなどの動的サイトでは役に立つでしょう。しかし情報を届けるだけのブログでここまで必要なのか?まだ結論が出ていません。

少なくとも AMP と PWA が連携可能であることはわかりました。今後必要だと判断すれば、ぜひ実装したいと思います。

以上、 POCO でした!オス!あっした!

シェアする