「在庫切れ」「エラー」を行き止まりにしない — 次のアクションを示す添え言葉
在庫なし・エラー・未選択状態で「できません」と突き放すのではなく、再入荷通知・原因開示・操作ガイドで関係を続ける5つの事例を紹介します。
「できない」で終わらせない
通販サイトを使っていて最もガッカリする瞬間のひとつが、欲しいサイズが在庫切れだったとき。あるいは、カートで操作を進めていたらエラーページに飛ばされたとき。こうした場面で「在庫なし」「エラーが発生しました」とだけ表示されると、ユーザーはそこで立ち止まり、そのまま離脱してしまいます。
しかし、こうした「できない」場面こそ添え言葉の出番です。再入荷通知の提案、エラー原因の開示、次にすべき操作のガイド。「できないこと」の代わりに「できること」を伝えれば、行き止まりは次のアクションへの分岐点に変わります。今回は、在庫切れ・エラー・未選択状態を上手にフォローしている5つのサイトを見ていきます。
事例
ミックスドットトウキョウ — サイズごとに「再入荷お知らせ」を即時提示
ミックスドットトウキョウでは、サイズ選択モーダルで在庫切れのサイズに「在庫 x」の赤字表示とともに 「再入荷お知らせ」 ボタンを並べて表示しています。注目したいのは、すべての在庫切れサイズそれぞれに個別のボタンが設けられている点です。欲しいサイズの行でそのままボタンを押せるため、別ページに遷移することなく通知登録が完了します。在庫状況（x / △ / 在庫あり）をアイコンと色で直感的に区別しつつ、状態に応じたアクションを同じUI上で提供する統合的な設計です。
「再入荷お知らせ」ボタンの近くに「通常○日以内に再入荷します」のような目安期間を添えると、「いつ頃届くのか」というユーザーの次の疑問に先回りできる。 「Microcopy: The Complete Guide」Chapter 15: Questions Answered and Knowledge Gaps Bridged
ストライプクラブ — ボタンの色で「今はできないが、次がある」を伝える
ストライプクラブのサイズ選択モーダルでは、在庫ありのサイズには青い「カートに入れる」ボタンが、SOLDOUTのサイズには黒い 「再入荷を通知する」 ボタンが表示されます。「S / SOLDOUT」という事実だけで終わらせず、すぐ横に次の行動を提示しているのがポイントです。ボタンの色を青から黒に切り替えることで「今は購入できないが、できることがある」という状態を視覚的にも伝えています。
「再入荷を通知する」ボタンの近くに「通知はメールで届きます。 「Microcopy: The Complete Guide」Chapter 16: Alleviating Concerns and Suspicions
antiqua — 売り切れの色に「再入荷のお知らせ」＋残りわずかの表示
antiquaの色・サイズ選択モーダルでは、売り切れの色（ここではホワイト）に黒い 「再入荷のお知らせ」 ボタンを、在庫わずかの色（ブラック）には 「残りわずか」 のテキストをカートボタンの直上に表示しています。在庫切れを行き止まりにしないだけでなく、在庫わずかの希少性を即座に伝えることで迷っているユーザーの決断も後押ししています。ボタンの色も購入可能な青と売り切れの黒で明確に区別されており、ひと目で在庫状況を判断できます。
ワコールウェブストア — ボタン内テキストで「次にすること」を先回り
ワコールウェブストアでは、カラーやサイズが未選択の状態で「カートに入れる」ボタンがグレーアウトし、ボタンラベルの下に 「カラー/サイズ/数量を選択してください」 と表示されます。多くのサイトではボタンを押してからエラーが出るか、グレーアウトするだけで理由を説明しません。ワコールはエラーが起きる前に「次にすること」をボタン内に直接書くことで、選択が完了すれば購入できることを自然に伝えています。
「カラー/サイズ/数量を選択してください」というテキストを、未選択の項目だけに動的に絞り込む（例：カラー選択済みなら「サイズ/数量を選択してください」に変化）とさらに効果的になる。 「Microcopy: The Complete Guide」Chapter 14: Microcopy and Usability: Basic Principles
ドスパラ — エラーの原因を正直に開示する
ドスパラのカートエラーページには、「よくあるエラーの原因」 として「操作をせず長時間が経過した」「ブラウザの戻るボタンで移動した」「大変混雑している」の3つが列挙されています。特に「大変混雑している」という記載はサイト側の都合によるエラーであることを正直に伝えており、ユーザーに不必要な自責感を持たせません。原因がわかれば「自分が何か間違えたわけではない」と理解でき、冷静に買い物を再開できます。
「ショッピングを続ける」ボタンに加えて、人気商品やカテゴリーへの直接リンクを設置すると、エラーページを単なる行き止まりではなく商品発見の機会に転換できる。 「Microcopy: The Complete Guide」Chapter 12: 404 Error: Page Not Found
紹介サイト
- ミックスドットトウキョウ — TSIグループのマルチブランドファッション通販
- ストライプクラブ — earth music&ecologyなど複数ブランドを展開するファッション通販
- antiqua — 大阪発のオリジナルファッションブランド公式通販
- ワコールウェブストア — ワコール公式のインナーウェア・ランジェリー通販
- ドスパラ — BTOパソコン・PCパーツ専門の通販サイト
マイクロコピーの観点
「Microcopy: The Complete Guide」p.110 では、エラーメッセージについて「できないことではなく、できることを言う」ことが推奨されています。「この商品は購入できません」ではなく「この商品は現在在庫切れです。再入荷通知を受け取りますか？」——今回の在庫切れ事例はまさにこのアプローチを実践したものです。
また同書 p.165 では、標準的な404メッセージについて「ユーザーが何が起きたかを理解する助けにも、行きたい場所にたどり着く助けにもならない。行き止まりだ」と指摘されています。エラーや在庫切れの画面を行き止まりにせず、次のアクションへの出口を設けること。それが小さな添え言葉でできる、大きな体験改善です。
※ マイクロコピーは株式会社オレコンの登録商標です。
