← 活動記録一覧

FACTUAL ACTIVITY RECORD · 実際の作業をもとにした活動記録

ホームの活動と提供範囲を再構成する

3つの状態を日英・desktop・mobileで同じ意味と順序に実装する

対象期間:

目的

ホームの活動と提供範囲は、訪問者が今確認できることより先に進行中の取り組みを示しており、活動と現在の閲覧・提供状態を取り違えやすい順序になっていた。

現在確認できること、取り組んでいること、現在提供・公開していないものを一つのsectionで明確に分け、日英と画面幅が変わっても同じ順序で伝わる表示が必要だった。

実装

section内の3項目を、現在確認できること、取り組んでいること、現在提供・公開していないものの順へ変更した。日本語と英語のcopy sourceも同じ配列順に揃え、その順序をそのままDOMとvisual orderへ使う静的な構成にした。

desktopでは3つの項目を等幅のcolumn、mobileでは一列に配置した。section headingを第二階層、各項目headingを第三階層として保ち、visual orderと読み上げ順を一致させた。日英desktop・mobileの4画面で折返し、clipping、footerへの流れを確認した。

  • 活動履歴の一覧・詳細、record metadata、内部link、section内CTAはこの変更で生成しない。
  • Privacy PolicyとTerms of Useへの既存footer導線を維持し、新しい操作要素を加えない。
  • 非公開の内部識別子、clearance metadata、private情報を生成済み表示へ含めない。
  • 3つのheading、正確な本文、順序、件数、非CTA、既存導線を静的検査で固定する。

content sourceの最小変更に加え、生成済み日英ページから対象sectionを取り出して検査するregression guardを追加した。各headingと本文の存在・順序、項目数、linkやbuttonの不在、非公開metadataの不在、semantic structure、policy導線を一度に確認できる。

設計sourceと4つのvisual export、localized copy、静的検査を同じ変更範囲で揃えた。型・構文確認、10ページの生成、6つのcontent routeの静的検査とpreview到達、4画面のvisual確認を行い、release sequenceと公開境界も保持した。

実装では三つの項目を一つの順序付きdata配列に置き、desktopとmobileで同じDOM順を再利用した。

一つのdata順をresponsive表示へ投影

図を描画しています…

確認したこと

確認結果

3項目は日英とも承認順序で表示され、desktopは3列、mobileは1列でDOMとvisual orderが一致した。

見出し階層、responsive表示、既存のpolicy導線を維持し、活動履歴ページ、metadata、内部link、section内CTAは追加されなかった。

型・構文確認はerrorなし、10ページの生成、6つのcontent routeの静的検査とpreview到達、日英desktop・mobileの4画面確認が通った。

cutoff時点で日英の公開面に3分類が承認順序で表示され、到達できることを確認できた。活動履歴の一覧・詳細とその導線はこの活動の対象外である。

完了とした根拠

設計、localized copy、semantic structure、responsive表示、静的regression guardを同じ3分類へ揃え、日英・desktop・mobileの検査と公開面での表示・到達確認まで完了したことをもって実装を完了とした。