WordPressでリンク先を間違えない。PROJECTとSTEPの導線を分けてみた

WEB
PROJECTを見るリンクをハブへ、STEPを見るリンクを個別記事へ分ける導線

MANIARUのPROJECT 002を完成させたあと、トップページの「PROJECTを見る」に相当するボタンが、PROJECT全体の入口ではなくSTEP 00へ移動している箇所が見つかりました。

リンク先のページは存在するため、リンク切れではありません。それでも、ボタンの言葉と到着先の役割が一致していない状態でした。

そこで、PROJECTを見るリンクはPROJECTハブへ、STEPを見るリンクは各STEP記事へつなぐルールに整理しました。この記事では、ページを増やすことよりも、リンクの意味と到着先をそろえた過程をまとめます。

リンク切れでなくても導線は間違う

最初に問題になったのは、PROJECT 002を紹介するカード内のボタンです。PROJECT全体へ進むように見える一方、実際のリンク先はPROJECTを始めるSTEP 00でした。

STEP 00もPROJECTの一部なので、まったく無関係なページではありません。ただし、そこからSTEP 01〜10を一覧して選ぶことを主目的にした独立ページではありませんでした。

このような違いは、URLが開くかだけを確認しても見つかりません。ボタンを押した人が期待する情報と、到着先で最初に見える情報を比べる必要があります。

PROJECTハブとSTEP記事の役割を分ける

整理の基準にしたのは、PROJECTハブとSTEP記事の役割です。

  • PROJECTハブ：PROJECTの概要、現在の状態、STEP一覧をまとめた全体の入口
  • STEP記事：一つの作業や判断を時系列で読める個別の記録
  • PROJECTS一覧：複数のPROJECTから読みたいものを探すアーカイブ

「PROJECT 002を見る」なら、概要と全STEPを選べる PROJECT 002ハブが合います。「最終STEPを見る」なら、完成時の確認を記録した STEP 10へ直接移動する方が自然です。

同じPROJECTへのリンクでも、目的が違えばリンク先も変わります。

STEP 00をハブと決めつけない

PROJECT 002には、制作開始時に公開したSTEP 00があります。PROJECTの目的やロードマップを説明するため、見た目だけではハブのようにも見えました。

しかし、PROJECT 001の入口と比べると役割が違います。独立したハブは、PROJECT全体の概要とSTEP一覧を持ち、どのSTEPからでも選んで移動できるページです。STEP 00はあくまでPROJECT開始時の一記事でした。

名前や先頭番号だけで判断せず、ページの中身と利用目的を見て区別しました。既存のSTEP 00はそのまま残し、PROJECT全体の入口だけを独立させています。

ボタンの言葉からリンク先を決める

修正では、すべてのPROJECT関連リンクを同じURLへ置き換えていません。ボタンの言葉ごとに目的を判定しました。

リンクの言葉期待する行き先
最新のプロジェクトを見るPROJECTハブ
PROJECT全体を見るPROJECTハブ
PROJECT 002を見るPROJECTハブ
最終STEPを見る最終STEP記事
STEP 06を見るSTEP 06記事
PROJECTSを見るPROJECTS一覧

「PROJECT」という言葉が全体を示しているなら、特定STEPへ飛ばしません。反対に、STEP番号や「最終STEP」が明示されているリンクは、ハブへ戻さず個別記事への近道として残します。

実際に整えた導線

現在のトップページでは、PROJECT 002に対して次のように役割を分けています。

  • Heroの「最新のプロジェクトを見る」からPROJECT 002ハブへ
  • 「PROJECT全体を見る」からPROJECT 002ハブへ
  • PROJECTカードの「PROJECT 002を見る」からPROJECT 002ハブへ
  • 「最終STEPを見る」からSTEP 10へ
  • ハブ内のSTEP 01〜10から各STEP記事へ

この形なら、全体像を知りたい人はハブへ入り、続きや結果だけを読みたい人は該当STEPへ直接進めます。

直す範囲はリンクに限定する

リンク先の問題を見つけたとき、カードやトップページ全体を作り直す必要はありませんでした。文言が役割を正しく表している箇所は維持し、誤っていたhrefだけを直します。

STEP記事の本文、ロードマップのデザイン、PROJECTの完了状態も変更していません。問題の範囲を「PROJECT全体を見る導線」に絞ることで、すでに機能しているSTEPへの近道を壊さずに済みました。

トップページ全体のセクションごとの役割は、WordPressのトップページ導線を整理した記録で扱っています。今回は、その中でもPROJECTとSTEPのリンク先に焦点を絞っています。

リンク修正後に確認すること

修正後は、リンクのURLだけでなく、到着先まで通して確認しました。

  1. ボタンの文言とhrefを照合する
  2. 実際にリンクを開き、到着先のタイトルを見る
  3. ハブから全STEPへ移動できるか確認する
  4. STEP記事からPROJECTハブへ戻れるか確認する
  5. スマートフォンでもボタンを押せて、横スクロールがないか見る

リンクが200で開くことだけでは、導線の確認として足りません。到着先で次に何ができるかまで見ると、ハブとSTEPの取り違えを見つけやすくなります。

リンクの意味をサイト内でそろえる

PROJECTとSTEPは、どちらも同じ実験の記録です。それでも、全体を選ぶ入口と、一つの作業を読むページでは役割が違います。

PROJECTを見るならハブへ。STEPを見るなら個別記事へ。

この短いルールを決めたことで、ボタン文言からリンク先を判断しやすくなりました。新しいPROJECTを追加するときも、URL名ではなく、リンクが示す役割から接続先を選べます。