記事がないときは、架空の記事より正直なエンプティステートを

ノートページのレイアウトはできているのに、記事はまだ準備できていません。そんなときは、ひとまずカードを何枚か置きたくなります。それらしいタイトルと概要に日付を添えれば、画面を埋められるからです。

ただ、「記事を読む」という言葉には意味があります。クリックした先では、タイトルが示す内容を読めるはずです。横にある公開日も、実際に公開した記事に対応している必要があります。どちらも存在しないなら、そのカードはレイアウト確認用の素材を公開コンテンツとして見せていることになります。

このサイトにノート欄を作ったときは、モックアップの題名や日付をそのまま記事にせず、記事がないことを伝える表示、エンプティステートを残しました。ここでは、その判断を整理します。公開記事がなくても、ページには何が用意されていて、読者が実際にどこへ進めるのかを伝える必要があります。

カードの項目は、記事がすでにあると思わせます

デザイン案に置く記事カードは、タイトルの長さや概要の折り返し、列数を試すのに使えます。問題は、デザイン案の外に出したときも、それが見本だと分かるかどうかです。

たとえば、「リニューアルでサイトが速くなった」というカードに、公開日と「全文を読む」のリンクが付いているとします。これは説明のための仮の例で、このサイトの記事や計測結果ではありません。本文も計測も公開記録も準備できていないのに、読者には成果をうたう記事への入口が見えてしまいます。

日付を削除するだけでは解決しません。タイトル、概要、クリックできるリンクだけでも、読める内容が存在することを伝えています。リンク先を # に変えても、ボタンが本来の役割を果たせなくなるだけです。

まず、そのカードがどこにつながり、リンク先に対応する本文があるかを確認します。本文のない候補テーマは、内部の企画リストに残しておけば十分です。グリッドを埋めるために、公開記事のカードへ変える必要はありません。

何が「ない」のかを伝えます

「現在、コンテンツはありません」だけでは、曖昧な場合があります。記事がまだ公開されていないのか、この言語には記事がないのか、検索条件に合う結果がないのかによって、読者に必要な行動は異なります。

以下は文言を考えるための例です。このサイトに検索機能や動的な読み込みが実装されているという意味ではありません。特定の言語に記事がないという例は、その言語の公開記事がない場合に限って使います。

状況	文言の例	誤解させたくないこと
公開記事がまだない	まだ公開されている記事はありません。	本文は読み込み中で、少し待てば表示されます。
この言語には記事がない	英語で公開されている記事はまだありません。	サイト全体に記事がありません。
絞り込み後の結果がない	現在の条件に合う記事はありません。絞り込みを解除してみてください。	元の記事一覧が空です。
読み込みに失敗した	現在、記事を読み込めません。しばらくしてからもう一度お試しください。	作者がコンテンツを用意していません。

このサイトは、ビルド時に Markdown を読み込む静的サイトです。ノート一覧は、ページを開いてからリモート API に記事を取りに行く仕組みではありません。ここでのエンプティステートは、通信が続いていることを示すローディング表示ではないため、点滅し続けるスケルトンで「もうすぐ内容が表示される」と示唆する必要はありません。

繁体字中国語の原稿を書いた2026年10月6日時点では、英語のノート一覧に「No articles have been published in English yet.」と表示していました。この文言は、対象を英語の公開記事に限定しているので、すでにある繁体字中国語の記事まで存在しないとは伝えません。これは原稿に記録された当時の状態であり、現在も英語の記事がないという意味ではありません。

文言が余計な約束をしていないかも確認します。「コンテンツを準備中です」と書くなら、実際に準備が進んでいる必要があります。「来週更新します」と書くなら、確定した予定が必要です。記事がないことしか分からないなら、そこまでを伝えれば十分です。まだ決めていない日程を付け足す必要はありません。

ページの用途を残し、見せかけの閲覧操作は残しません

エンプティステートにするからといって、セクション全体を消す必要はありません。タイトル、内容の方向性、ナビゲーションがあれば、読者はその入口の用途を理解できます。

このサイトのノート一覧では、公開記事がない場合も、ページタイトル、紹介文、ホームへの導線、「このノートについて」の説明を残します。一覧部分はエンプティステートにして、架空の記事カードは生成しません。ホームのノート欄にも専用のエンプティステートがあり、記事がある場合にだけ「すべてのノート」の入口を表示します。

この二つは状況が異なります。一覧ページ自体には、一時的に記事がなくても内容の方向性を説明する役割があります。一方、ホームのセクションでは、「すべてのノート」を、すでに読める記事へ進む操作として見せないようにしています。どの空の一覧でも入口を隠すべきだという話ではありません。リンク先で何を提供できるかによって判断します。

エンプティステートに次の行動を加えるなら、実際にできる操作として書きます。たとえば、公開できる制作実績がすでにあるサイトなら「制作実績を見る」を置けます。別の言語で読める記事があるなら、そのことを説明したうえで、その言語の一覧へ案内できます。これらは設計上の提案であり、このサイトのエンプティステートに現在あるボタンではありません。

逆に、購読機能を提供していないなら、表示を整えるためだけに「通知を受け取る」を加えてはいけません。そのボタンの先にある申し込みの受け付け、データの保存、その後の通知にも、責任を持つ人が必要です。

見本の内容はレイアウト確認に使えますが、置き場所を選びます

テスト用の記事でレイアウトを確認すること自体に問題はありません。長いタイトルで折り返しを試し、表やコードでスマートフォンでの読みやすさを確認し、複数のテストデータでページ分割を確かめられます。

こうした素材は、用途がはっきり分かるデザイン案や、隔離したテスト環境に置き、公開記事の集合に混ぜないようにします。未完成のインターフェースを見せる必要があるなら、見本であることを明示します。架空の題名、日付、成果を、公開済みの記録として見せてはいけません。

これは、実際の記事の下書きとは異なります。下書きには校稿を待つ本文があり、まだ公開が認められていないだけです。レイアウト確認用の素材では、記事の主張自体が成立していない場合もあります。どちらもそのまま正式な公開コンテンツにはできませんが、その後に必要な作業は異なります。

このサイトでは、下書きのプレビューと正式な出力をすでに分けています。具体的な仕組みは、〈下書きをプレビューしながら、正式なビルドへの混入を防ぐには〉（繁体字中国語）で説明しています。ここで扱うのは読者に見える結果です。公開ページにある記事への入口は、公開して読める内容につながっている必要があります。

エンプティステートも校稿します

記事があるときは、タイトル、概要、リンクを確認します。記事がないときも、表示する文言を読み直す必要があります。

このサイトのノート一覧は、その言語の公開記事全体が空の場合に案内を表示します。現在のページにある通常記事の配列だけを見て判断するわけではありません。この違いは重要です。注目記事には別のセクションがあるため、通常の一覧に項目がなくても、ページ全体に記事がないとは限りません。

校稿では、読者の操作に沿って次を確認します。

• 案内が指しているのは、サイト全体、現在の言語、それとも特定の絞り込み条件ですか。
• ページに別の内容があるのに、「記事がありません」の一言で、それまで否定していませんか。
• 残したリンクは、文言が約束しているものを提供できますか。
• 未確定の更新日、購読機能、翻訳の進捗を文言が示唆していませんか。

また、下書きは正式なホーム、一覧、sitemap に出してはいけません。カードに「下書き」と表示するだけでは、公開対象の絞り込みの代わりになりません。

これらの確認で、コンテンツとインターフェースが一致しているかは確かめられます。ただし、読者の信頼が高まったことや、エンプティステートがコンバージョンを改善することまでは証明できません。このプロジェクトには、それに関するユーザー調査や効果測定はありません。

本文ができたら、記事が案内に取って代わります

原稿を書いた2026年10月6日時点で、このサイトのノート欄にはすでに正式に公開された繁体字中国語の記事がありました。繁体字中国語のホームと一覧には記事が表示され、以前のエンプティステートは表示されなくなっていました。英語と日本語を含め、各言語の表示は、その言語で公開されている内容に従います。エンプティステートは固定の飾りではなく、データの状態が変われば役割を終える表示です。

完了条件は、公開して読める記事があれば、それに対応するタイトル、概要、実際に読める入口を表示することです。記事がなければ、状況を正確に伝える案内を残します。一篇しかないなら、まずは一篇だけを表示します。列を埋めるためにカードを複製する必要はありません。

レイアウトは先に準備できます。公開コンテンツをそこに置くのは、本文と公開条件が整ってからです。

この記録の範囲

この記録は、このサイトのホームとノート一覧の実装、各言語のエンプティステートの文言、公開記事の取得処理、ノート欄を作ったときのコンテンツに関する判断をもとに整理しています。本文に出てくる検索、読み込み失敗、代わりの操作は設計例であり、このサイトがそれらの機能を提供している、あるいはそのような障害が実際に起きたという意味ではありません。購読に関する文言も設計例であり、実装済みの機能ではありません。この方法が流入、信頼、事業上の成果につながったとも主張していません。多言語の記事ルートや公開の仕組みは別の記事で説明し、ここではエンプティステートの文言と、読者に提示する操作の判断に絞っています。