MANIARUのHOMEでは、PROJECTを一覧で紹介するだけでなく、各STEPがどこまで進んでいるかを表示しています。記事が増えるにつれて、公開済み・現在地・未公開を同じ見た目で並べるだけでは、状況を読み取りにくくなりました。
そこでPROJECTの進捗を、状態とリンクの有無が一致するUIとして整理しました。この記事では、完成したPROJECT 001と、制作中だったPROJECT 002を同じHOMEで見せるために決めたことをまとめます。
進捗表示で伝えたい情報を分ける
最初に分けたのは、「いま何を作っているか」と「PROJECT全体のどこまで進んだか」です。HOMEの現在地を示す場所では最新STEPを中心にし、PROJECTSではSTEP全体の順序を見せる役割にしました。
同じSTEP情報を二重に詳しく載せるのではなく、現在地から読み始めたい人と、最初から流れを追いたい人の入口を分けています。
公開済み・CURRENT・未公開を分ける
進捗には、公開済み、CURRENT、未公開、PROJECT完了という状態があります。公開済みSTEPとCURRENTは記事へ移動できるリンクにし、未公開STEPはリンクにしませんでした。
色だけで区別すると、環境や見え方によって意味が伝わりません。ノードの塗りと枠、CURRENTやCOMPLETEDの文字、リンクの有無を組み合わせ、状態と操作結果が一致するようにしました。
四角いカードからロードマップへ変える
STEPごとに独立した箱を並べると、数が増えたときに情報の密度が高くなります。そこで、番号、小さなノード、細いライン、短いSTEP名によるロードマップへ変更しました。
記事タイトル全文は載せず、CONCEPTやHOMEPAGEのような短い名称を使います。詳しい内容はリンク先へ任せ、HOMEでは順序と状態を短時間でつかめることを優先しました。
関連記事：CSS Gridで進捗カードを並べる。PCとスマートフォンで列数を変える最小例（カードを並べる CSS の最小例）
PCとスマートフォンで並べ方を変える
PCでは横方向のロードマップにし、STEPが多い場合は自然に次の段へ折り返します。行末から次の行へ複雑な線をつながず、番号で順序を追える形にしました。
スマートフォンでは横へ詰め込まず、縦型のタイムラインへ切り替えます。番号、名前、状態を読める幅と、公開済みSTEPを押せる領域を確保し、ページ全体に横スクロールが出ないことを確認しました。
最新STEPとPROJECT全体のリンクを分ける
PROJECT 002には「最終STEPを見る」と「PROJECT全体を見る」を用意しました。前者は最新の公開記事へ、後者はSTEP一覧を持つPROJECTハブへつながります。
リンク先が違う以上、ボタンの文言でも役割を示します。「プロジェクトを見る」だけにまとめず、現在地へ進むのか、全体像を見るのかを選べるようにしました。
完成したPROJECTにも同じ仕組みを使う
PROJECT 001はSTEP 01から14までが公開済みなので、COMPLETEDとして表示します。PROJECT 002も完成後は同じ考え方で完了状態へ切り替えられます。
進行中だけに使える見た目ではなく、公開済みSTEPの記録を後からたどれる一覧として残すことで、PROJECTが終わった後もロードマップが導線として機能します。
新しいSTEPを公開するときに同期する
表示を作っただけでは、次のSTEP公開時に状態がずれます。そのため、新STEP、直前STEP、PROJECTハブ、HOMEを基本の更新範囲として決めました。
- 公開済みSTEPだけをリンクにする
- 最新STEPをCURRENTとして示す
- HOMEの最新STEP導線とPROJECTハブの状態をそろえる
- 完了時はPROJECT全体をCOMPLETEDへ切り替える
進捗UIは飾りではなく、WordPress上の公開状態を読者へ伝える案内です。表示とリンクを同じ運用ルールで更新することで、長いシリーズでも現在地と全体像を分けて追えるようになりました。
実際にPROJECT 002をHOMEへ追加し、進捗表示を調整した過程は、PROJECT 002 STEP 03「社内ポータルのHOMEを作る」にまとめています。