2つの学習ゲームを公開前につなげた実録｜表示改善と説明記事の導線設計

2つの学習ゲームを一つの入口へつなぐ途中で、主ボタンが背景へ埋もれ、通常時に文字が読めない問題が見つかりました。説明導線も大きすぎ、遊ぶボタンより目立っていました。まず主従と通常表示を直し、説明記事2本と外部リンクを整理しています。

ただし、本番ページへすべて反映された最終確認は記録上残っていません。入口を作ったことと、公開先で使えることを分けて扱います。

別々だった2つのゲームに共通の入口を作った

目的は、専門知識を知らない人でも無料ゲームから興味を持てる入口を作ることでした。ポータルに2つのゲームカードを置き、遊ぶ場所、説明を読む場所、ゲームを選ぶ場所の役割を分けました。

販売案内を前に出さず、主な行動を「あそぶ」にしました。説明記事は必要な人が後から読む補助導線です。

一方の主ボタンが白い背景へ埋もれ、ほとんど見えませんでした。枠線だけでは改善しなかったため、もう一方のボタンと同じ色へ統一しました。

日本語説明と英語説明を別々のボタンにした初期案も、カードが縦長になり、説明が主役に見えました。説明導線を日英併記の1ボタンへまとめています。

各ゲームには初心者向けの説明記事を1本ずつ用意しました。実装上の用語をそのまま使わず、運営者の語り口に合わせて表現を整えています。

ゲーム本体は遊ぶ場所、説明記事はルールと背景を読む場所です。ポータルへ説明を詰め込まず、カードには要約だけを残しました。

ゲームは新しいタブで開き、ポータルへ戻りやすくする指示にしました。各ゲームから対応する説明記事と外部リンクへ移動できる導線も確認項目に含めています。

抽象的に「目立たせすぎない」と伝えず、主ボタンの強さを10、説明導線を5程度と表現しました。正確なデザイン数値ではなく、色、面積、余白、位置の主従を伝えるための目安です。

スクリーンショットを添え、通常時の文字、説明ボタンの数、新しいタブ、戻り方を確認対象にしました。カーソルを重ねた時だけ読める状態は完成に含めません。

公開告知の文章や画像を用意しても、リンク先が未確認なら準備完了とは言えません。2つの主ボタン、説明記事2本、外部リンク、通常表示が本番へ反映されたかは、次の確認として残っています。

最終確認では、ボタンの文言とリンク先の記事タイトルが一致するか、新しいタブからポータルへ戻れるかも試します。確認できるまでは「公開前の導線を整えた段階」と記録します。