Responsive HeroとDevelopment Status Dashboardを実装

概要

画面比率によって詩葉の顔が隠れる問題を解消するため、Hero画像を端末別に設定できるようにした。続いて、プロジェクト全体の現在地を開発段階で表示するDashboardを追加した。

背景 / 課題

同じ縦画像を全画面へcover表示すると、スマートフォン横画面やPCで顔が切れ、ヒーローの意味が伝わりにくかった。また、研究開発へ「40%」のような疑似精密な進捗率を表示すると、実態と誤解が生じる。

実装・変更内容

Responsive Hero

• Desktop / Tablet / Mobile画像を個別設定。
• picture、source、WordPress srcset / sizesを使用。
• 未設定時は上位画像へフォールバック。
• Hero画像とCatch Copy、CURRENT PHASE、SYSTEM STATUS、PHASE HISTORYを分離。
• 横画面では顔を優先する上端基準の表示を採用。

Development Status Dashboard

• PLANNING、DESIGNING、BUILDING、TESTING、ADJUSTING、COMPLETEの6段階表示。
• CORE、HUB、ANDROID、DEVELOPMENT BASEに分類。
• PHASE 01 / HEAD UNITをCURRENT FOCUSとして表示。
• 未登録の状態を推測せず NOT SET と表示。
• 既存Document ID、Revision、Record Status、更新日、DEVLOGを自動反映。

維持したもの

• 既存CPT
• URL / slug
• SEO
• Footer
• Media Metadata
• 既存固定ページ本文

結果 / 現在位置

テーマv8.4.2でResponsive Heroを完了し、v8.5.0でDevelopment Status Dashboardを実装した。現在は本番環境へ導入後の表示確認と、各固定ページのStatus Metadata登録を行う段階である。

CURRENT STATUS

TESTING — 本番導入後のDesktop / Tablet / Mobile表示とStatus登録を確認