PROJECT 001 — MANIARUを作る。
SPECIAL S03 / UX IMPROVEMENT
PROJECT 001のSTEP 01〜14とSPECIAL記事を公開したあと、実際にMANIARUを使っていると、制作中には気づかなかった使いにくさが見えてきた。
今回は、リロード時の移動、HOMEからPROJECTへの入口、各記事での現在位置という3つの問題を調べ、PROJECT全体の導線を整えた過程を記録する。
公開したあとに気づいた3つの問題
最初に気づいたのは、HOMEをリロードすると、意図せずPROJECTS付近へ移動することがある点だった。
次に、HOMEにはPROJECT 001の紹介があるものの、プロジェクト全体を読むための入口が分かりにくかった。さらに記事が増えたことで、読んでいるSTEPがPROJECT全体のどこにあるのか、ほかにどんなSTEPがあるのかも把握しづらくなっていた。
どれもサイトを作っている最中には大きな問題に見えなかった。公開後、読者と同じようにHOMEから記事へ進み、複数の記事を読み直したことで違和感として見えてきた。
リロードするとPROJECTSへ戻る原因を調べる
「ページをリロードすると変な位置へ戻る」という現象について、最初からCSSやJavaScriptが原因だとは決めつけず、リンクを押したあとのURLを確認した。
原因は、HOME内でPROJECTSへ移動するリンクに使っていた#projectsだった。アンカーリンクでPROJECTSへ移動すると、URLにハッシュが残る。その状態で再読み込みすると、ブラウザは再び同じアンカー位置を表示していた。
WordPressのスクロール処理やテーマの不具合ではなく、リンクの目的とURLの状態が合っていなかったことが原因だった。
原因になっていたリンク構造だけを直す
PROJECTSへの導線を、ページ内の#projectsへ移動するリンクから、新しく作るPROJECT 001ハブへの通常リンクへ変更した。
修正後は、通常の新規アクセスではページ先頭から表示され、PROJECT 001のリンクを押すとハブへ移動する。ABOUTへ移動する#aboutなど、明示的に必要なアンカーは従来どおり残した。
ブラウザ標準のスクロール位置復元は、今回の原因ではないため無効化していない。ページ途中で再読み込みしたときに自然に同じ位置へ戻る動作まで止めず、問題を起こしていたリンクだけを変更した。
PROJECT 001のハブを作る
リロード問題を直すだけでなく、PROJECTそのものへの入口を整理するため、PROJECT 001 — MANIARUを作る。というハブページを作った。
改善作業の時点で公開していたSTEP 01〜14とSPECIAL S01〜S02の全16記事を、PROJECTの進行順に掲載した。このSPECIAL S03は、その改善作業を記録するためにあとから追加した記事になる。
カテゴリー一覧とは別に、最初から順番に読みたい人が迷わず進めるページを用意したことで、PROJECT全体の形が見えるようになった。
HOMEの3か所からハブへつなぐ
HOMEでは、Hero、PICK UP、PROJECTSの3か所からPROJECT 001ハブへ進めるようにした。
PROJECTSには「プロジェクトを見る →」というリンクも追加した。紹介文を読むだけで終わらず、そのまま記事一覧へ進める入口だと分かるようにするためだ。
これで、HOMEからPROJECTハブへ進み、そこから各STEPを選ぶ流れができた。
PCにPROJECT全体の目次を置く
各記事の右側には、PROJECT 001全体のSTEPナビを設置した。H2やH3を並べる記事内目次ではなく、STEP 01からSTEP 14、SPECIAL S01とS02までを一覧にしたPROJECT全体の目次だ。
読んでいる記事には、ブルーの左線、薄い背景、太字を使った。目立たせすぎず、現在位置だけはすぐ分かる見せ方にした。
改善作業時点の対象は全16記事だった。S03の公開に合わせて、同じナビへSPECIAL S03も追加する。
長いナビをサイドバーで追従させる
PCではPROJECTナビを右サイドバーに置き、position: stickyでスクロールに追従させた。上端は92pxとし、ヘッダーと重ならない位置で止まるようにした。
PROJECT 001は項目数が多い。小さい画面で下の項目が操作できなくならないよう、ナビに最大高さを設け、必要な場合はナビ内部を縦にスクロールできるようにした。
単に固定するのではなく、本文の幅を保ち、長いナビでも最後まで操作できることを優先した。
スマートフォンでは折りたたみ式にする
PC用のサイドバーをスマートフォンへそのまま表示すると、本文が狭くなる。そこでスマートフォンではサイドバーのPROJECTナビを非表示にした。
代わりに記事冒頭へ、details / summaryを使った折りたたみ式ナビを設置した。現在のSTEP、PROJECT 001ハブへのリンク、全STEP一覧を確認できる。
必要なときだけ開けるため、記事を読んでいる間は本文を邪魔しない。PCとスマートフォンで同じUIを無理に使わず、それぞれの画面に合う役割へ分けた。
記事末尾のPROJECTリンクもハブへつなぐ
既存記事の末尾には、前のSTEP、PROJECT 001、次のSTEPへ進む導線があった。ただし中央のPROJECT 001は、PROJECTハブではなくカテゴリーを向いていた。
そこで、記事を表示したときに中央のリンクがPROJECT 001ハブへ向くよう補正した。既存記事の本文そのものは書き換えていない。
記事上部のPROJECTナビと末尾のシリーズ導線のどちらからでも、全体へ戻れるようになった。
PCとスマートフォンで動作を確認する
改善後は、HOMEからハブへ進めること、ハブから16記事へ移動できること、全16記事で現在位置が正しく表示されることを確認した。
PCでは追従ナビと内部スクロールを確認した。スマートフォンは400px幅でナビを開閉し、ハブへ移動できることと横スクロールが発生しないことを確かめた。
HOMEとハブのPC表示、既存のSNSリンク6件、明示的なアンカーリンクも確認した。今回の変更と関係のない導線を壊していないことまで見て、作業を終えた。
必要な範囲だけを変更する
UX改善だからといって、サイト全体を作り直したわけではない。
既存記事の本文、タイトル、slug、meta description、WordPressテーマ、プラグイン、OGP、SNS、アクセス解析、Search Console、セキュリティ、お問い合わせ、プライバシーポリシーは変更しなかった。
PROJECTハブ、HOMEの入口、共通ナビと必要なリンクだけに範囲を絞った。
公開後に使うこともサイト作りの一部だった
今回の改善で、サイトは「公開できたら完成」ではないと分かった。実際に使うことで、制作中には見えなかった違和感が見つかる。
不具合は症状だけを隠すより、原因を確認して必要な部分だけを直す方がよい。今回はスクロール機能そのものではなく、URLへ#projectsが残るリンク構造を直した。
記事が増えると、1記事の読みやすさだけでなく、シリーズ全体の現在位置も重要になる。PROJECTハブと共通ナビを作ったことで、HOMEからPROJECT、STEP、次のSTEPへ進む流れがつながった。
公開し、使い、違和感に気づき、直して、また使う。この改善もMANIARUの実験の一部だ。
試したことを、誰かのマニュアルに。そのためには、作ったものを実際に使い続けることも必要だった。