WordPressで記事を公開するとき、最後に少しだけ不安になりませんか。
本文は入れた。
タイトルも入れた。
スラッグも決めた。
カテゴリも設定した。
アイキャッチ画像も入れた。
代替テキストも入れた。
メタディスクリプションも入力した。
よし、公開しよう。
……と思ったところで、
「スマホでちゃんと読めるかな」
「画像、変に切れてないかな」
「目次が崩れてないかな」
「タイトルが二重になってないかな」
と、ちょっと気になってくる。
ありますよね。
公開ボタンの前って、地味に緊張します。
あとから修正できるとはいえ、できれば最初からきれいに出したい。
せっかく書いた記事なら、読みづらい状態で出したくない。
この記事では、WordPress記事を公開する前に確認したい、PC表示・スマホ表示のチェックポイントを整理します。
WordPress投稿全体の公開前チェックはこちらでまとめています。
WordPress投稿が不安な人へ。公開前に確認したいチェックリスト
また、メタディスクリプションまで整えたい場合はこちらも使えます。
メタディスクリプション、毎回なんとなく書いてない？WordPress記事の要約文を整える方法
WordPress記事は、公開前の表示確認でかなり安心できる
WordPressの記事は、編集画面で見ているだけでは分からないことがあります。
編集画面ではきれいに見えていたのに、実際のプレビューでは少し違う。
これ、けっこうあります。
改行の感じ。
画像の大きさ。
目次の出方。
スマホでの見え方。
リンクの位置。
見出しの余白。
細かいところですが、読者の読みやすさには関わります。
編集画面では良く見えても、実際の表示は違うことがある
WordPressの編集画面は、あくまで編集するための画面です。
実際に読者が見るページとは、少し見え方が違うことがあります。
たとえば、編集画面ではちょうどよく見えた段落が、スマホでは長く見える。
画像が思ったより大きく表示される。
目次が長くなりすぎて、冒頭が少し重く見える。
こういうことがあります。
だから、公開前にはプレビューで見るのがおすすめです。
「ちゃんと入っているか」だけではなく、
「読者が見たときに読みやすいか」を見ます。
PCだけでなくスマホでも見る
PC表示だけ確認して終わると、スマホで崩れていることがあります。
今はスマホで読む人も多いです。
特にブログ記事は、スマホでサッと読む人がかなりいます。
PCでは読みやすくても、スマホだと、
「段落が長い」
「画像の文字が小さい」
「表が見切れている」
「見出しが詰まって見える」
ということがあります。
自分でスマホ表示を見ると、けっこう気づきます。
「あ、ここ長いな」
「この画像の文字、読めないな」
「ここで一回改行した方がいいな」
という感じです。
公開前にPC表示で確認したいこと
まずはPC表示です。
PC表示では、記事全体のバランスを見ます。
細かいところまで完璧に見る必要はありません。
ただ、最低限ここは見ておきたいです。
タイトルと本文の見え方
まず、タイトルと本文の見え方です。
確認したいのは、次のような点です。
- 投稿タイトルが自然に表示されているか
- 本文内に同じH1タイトルが重複していないか
- 冒頭文が読みやすいか
- 段落が詰まりすぎていないか
- 記事の入り口で読者の悩みが伝わるか
特にH1の重複は注意です。
WordPressテーマによっては、投稿タイトルがすでにページ上部に出ます。
その状態で本文内にも同じH1を入れると、タイトルが二重に見えることがあります。
「なんか同じタイトルが2回出てる」
となると、少し違和感があります。
目次と見出しの崩れ
次に、目次と見出しです。
Cocoonなどのテーマでは、見出しから自動で目次が作られることがあります。
確認したいのは、次の点です。
- 目次が長すぎないか
- H2とH3の階層が変ではないか
- 見出し番号が重複していないか
- 手動で入れた番号と自動番号がぶつかっていないか
- 見出しだけ読んでも流れが分かるか
特に、見出しに手動番号を入れていると、自動目次と相性が悪い場合があります。
「1. 1. 〇〇」
のように見えることもあります。
地味ですが、見ると気になります。
内部リンクの表示
内部リンクも確認します。
内部リンクは、記事同士をつなぐ大事な導線です。
確認したいのは、次の点です。
- リンク先が合っているか
- URLが間違っていないか
- リンク文が自然か
- 同じリンクを入れすぎていないか
- 記事の流れを邪魔していないか
内部リンクは入れればいいわけではありません。
読者が次に読みたくなる場所に、自然に置くのが大事です。
公開前にクリックして、ちゃんとリンク先が開くかも確認できると安心です。
公開前にスマホ表示で確認したいこと
次にスマホ表示です。
ここはかなり大事です。
PCで見ると整っていても、スマホでは印象が変わります。
段落が長く見えないか
スマホでは、PCよりも段落が長く見えます。
PCでは3行くらいでも、スマホでは6行、7行に見えることがあります。
すると、読者は少し疲れます。
確認したいのは、次の点です。
- 冒頭の段落が長すぎないか
- 1つの段落に情報を詰め込みすぎていないか
- 箇条書きが見やすいか
- 短い一文が入っているか
- スクロールしたときに圧迫感がないか
スマホでは、余白が大事です。
文章がぎっしり詰まっていると、それだけで読む気が少し下がります。
アイキャッチ画像の文字が読めるか
文字入りのアイキャッチ画像を使う場合は、スマホで読めるか確認します。
PCでは大きく見えても、スマホの記事一覧ではかなり小さくなります。
確認したいのは、次の点です。
- 画像内テキストが読めるか
- 文字が小さすぎないか
- 背景と文字のコントラストが弱くないか
- 画像の主役が分かるか
- 過去記事と見分けがつくか
最近は、記事ごとにアイキャッチ画像の見た目を変えるようにしています。
これは良い流れです。
ただ、文字が入る場合はスマホ確認が必須です。
「PCではいい感じだったのに、スマホだと読めない」
これは普通に起きます。
画像や表が見切れていないか
画像や表がある記事では、スマホで見切れていないか確認します。
特に横長の画像や表は注意です。
確認したいのは、次の点です。
- 画像が横にはみ出していないか
- 表がスマホで見づらくないか
- 画像内の文字が小さすぎないか
- 余白が変に空きすぎていないか
- 画像の下に不要な空白がないか
画像そのものがきれいでも、スマホで見づらいと少しもったいないです。
WordPress表示チェックで見落としやすい部分
表示チェックでは、意外と見落としやすい部分があります。
特に次の3つです。
- H1タイトルの重複
- カテゴリラベル
- 余白と改行の詰まり
H1タイトルの重複
これは何度も出てきますが、かなり大事です。
投稿タイトルがページに表示されるテーマでは、本文内のH1を削除した方が自然な場合があります。
本文をMarkdownで作ると、最初に
# タイトル
が入っていることがあります。
それをそのまま貼ると、WordPress上でタイトルが重複することがあります。
公開前に、
「タイトルが二重になっていないか」
を見ておきましょう。
カテゴリラベル
カテゴリラベルも確認します。
記事一覧や記事上部にカテゴリ名が表示される場合があります。
確認したいのは、次の点です。
- 正しいカテゴリになっているか
- 未分類になっていないか
- 旧カテゴリにもチェックが入っていないか
- 記事一覧で見たときに違和感がないか
今回のWordPress系記事なら、
AI活用×WordPress
です。
間違って AI活用×仕事効率化 のままだと、記事群の整理が崩れます。
小さなことですが、カテゴリはあとから記事整理に効いてきます。
余白と改行の詰まり
最後に、余白と改行です。
文章が詰まって見えると、読むのが少し重くなります。
特に、実務系の記事は説明が続きやすいです。
気づくと、
「正しいけど、ちょっと息苦しい」
文章になります。
ここ、AI臭さにもつながります。
きれいに説明しすぎると、人の温度が消えます。
だから、公開前にスマホで見て、
「ここ、少し詰まってるな」
と思ったら、短い一文や改行を入れるのもありです。
ChatGPTで表示チェックリストを作る方法
WordPressの表示チェックも、ChatGPTに手伝ってもらえます。
ただし、実際の画面表示そのものは自分で見る必要があります。
ChatGPTには、確認項目を整理してもらうイメージです。
記事情報を渡して確認項目を作る
まず、記事情報を渡します。
- 投稿タイトル
- スラッグ
- カテゴリ
- 内部リンク
- アイキャッチ画像の内容
- 画像内テキスト
- メタディスクリプション
このあたりを渡して、表示チェック項目を作ってもらいます。
たとえば、
「この記事を公開する前に、PC表示とスマホ表示で確認する項目を作ってください」
と頼めます。
スマホで見づらそうな部分を確認する
記事本文や見出し構成をChatGPTに渡して、
「スマホで読みにくくなりそうな部分はありますか？」
と聞くのも使えます。
たとえば、
- 段落が長い
- 見出しが似ている
- 箇条書きが多すぎる
- 導入が説明っぽい
- 内部リンクが唐突
こういう部分を確認できます。
もちろん、最終的には自分でプレビューを見る必要があります。
でも、事前にチェック観点を作るだけでもかなり楽です。
公開前チェックとセットで使う
表示チェックは、公開前チェックの一部です。
タイトル、スラッグ、カテゴリ、画像、代替テキスト、メタディスクリプションを確認したあとに、最後に表示を見る。
この流れが自然です。
31記事目で作った公開前チェックリストに、PC表示・スマホ表示の確認を入れておくと安心です。
そのまま使える表示チェックプロンプト
ここからは、WordPress記事の表示チェックに使えるプロンプト例を紹介します。
PC・スマホ表示チェックリストを作るプロンプト
プロンプト例：
以下の記事について、WordPress公開前のPC表示・スマホ表示チェックリストを作ってください。
記事タイトル：
【ここに記事タイトル】カテゴリ：
【ここにカテゴリ】アイキャッチ画像の内容：
【ここに画像内容】画像内テキスト：
【画像内テキスト】内部リンク：
【内部リンク】チェックしたいこと：
・PC表示
・スマホ表示
・目次
・見出し
・アイキャッチ画像
・内部リンク
・カテゴリラベル出力形式：
・PC表示チェック
・スマホ表示チェック
・見落としやすい点
・公開前に直した方がよい可能性がある点
このプロンプトで、公開前に見るべきポイントを整理できます。
公開前の最終確認プロンプト
プロンプト例：
以下の記事情報をもとに、WordPress公開前の最終確認項目を作ってください。
投稿タイトル：
【投稿タイトル】スラッグ：
【スラッグ】カテゴリ：
【カテゴリ】メタディスクリプション：
【メタディスクリプション】画像ファイル名：
【画像ファイル名】画像タイトル：
【画像タイトル】代替テキスト：
【代替テキスト】内部リンク：
【内部リンク】出力形式：
・設定まわりの確認
・本文まわりの確認
・画像まわりの確認
・PC表示確認
・スマホ表示確認
・公開後報告テンプレート
これは、投稿前の総合チェックに使えます。
表示崩れを見つけるための確認プロンプト
プロンプト例：
WordPress記事を公開する前に、表示崩れを見つけるための確認ポイントを教えてください。
前提：
・ブログ記事
・スマホ読者も多い
・アイキャッチ画像に文字あり
・Cocoonの目次を使用
・内部リンクあり確認したいこと：
・スマホで読みにくい部分
・目次の崩れ
・画像の見切れ
・タイトル重複
・カテゴリ表示出力形式：
・確認項目
・よくある失敗
・公開前に見る順番
このプロンプトは、WordPressに慣れていない人にも使いやすいです。
まとめ：公開前は、読者の画面でどう見えるかを確認する
WordPress記事は、編集画面で完成したように見えても、実際の表示では印象が変わることがあります。
PCでは読みやすい。
でもスマホでは段落が長い。
画像の文字が小さい。
目次が少し重い。
タイトルが二重に見える。
カテゴリが違っている。
こういうことは、公開前にプレビューを見るだけで気づけます。
確認したいのは、主に次の項目です。
- PC表示
- スマホ表示
- タイトル重複
- 目次
- 見出し
- 内部リンク
- アイキャッチ画像
- カテゴリラベル
- 余白と改行
完璧にしようとしすぎると、公開が止まります。
そこまで神経質にならなくて大丈夫です。
でも、公開ボタンの前にもう一回だけ。
PCとスマホで見ておく。
それだけで、かなり安心して記事を出せます。
