数百ページの専門情報ポータルを、共通部品と明確な分担で構築

扱う情報の種類とページ数が非常に多く、企画・デザイン・フロントエンド・システムを複数社で分担するため、各ページの目的と担当範囲を明確にする必要がありました。長期プロジェクトの中で運営方針、社名、サイト名にも変更があり、ページ単位で個別対応するだけでは、類似ページの重複やデザイン・実装ルールのばらつきが生じます。

利用者にとっては、動画、記事、最新情報など目的の異なるコンテンツを迷わず行き来できることが重要です。一方、制作側には、共通する見出し、カード、一覧、詳細、ナビゲーションを再利用し、外部システムのデータが入ったときにも表示が成立する設計が求められました。FHWの担当は構成、デザイン、コーディングまでとし、システムやクリックイベントの担当境界を明確にした進行も必要でした。

まず「要件定義」を一括で扱わず、ページ種別の整理、共通部品の抽出、一覧と詳細の関係、ナビゲーション、外部システムとの受け渡しなど、確認可能な作業単位へ分解しました。類似ページを探して流用するのではなく、カード、見出し、タブ、動画情報、記事情報などを共通パーツとして整理し、その組み合わせでページを構成する方針を採用しています。

デザイン指示は複数担当者から個別に流すのではなく、ページの役割と共通ルールを確認できる形に整理。実装後半では、色や余白などの差分をmodifierで管理し、共通コードを維持したままページ固有の表現へ対応しました。システム開発会社には、画面名とページ形式を添えて引き渡し、フロントとシステムの責任範囲を明確化。公開後のカテゴリ再編やコンテンツ追加でも、既存部品を組み替えて対応できる状態を整えました。

専門情報を繰り返し確認するポータルとして、情報量の多さを探しやすさへ変えることを目指しました。トップ、動画、記事、最新情報など、内容の異なる画面に共通の色、文字、余白、カード、画像比率を設定し、どのページから入っても同じサイトだと分かるデザインルールを用意しています。

大量のページを一枚ずつ独立してデザインすると類似パーツが増えるため、一覧、詳細、関連情報、特集などのパターンを先に整理し、部品の組み合わせとしてページを設計しました。運営方針や名称、カテゴリが変わった場合も、全ページを作り直さず調整できることを重視。複数の制作担当が関わっても、基準となるコンポーネントを共有することで、サイト全体の視覚的な一貫性を保ちました。

数百ページを効率的に実装するため、ページ固有のHTML・CSSを増やすのではなく、繰り返し使用するカード、見出し、リスト、タブ、ナビゲーションをパーツ化しました。色や余白、表示形式の違いはmodifierクラスで切り替え、同じ部品を多様なページで再利用できる構成にしています。これにより、途中で仕様やデザイン方向が変わっても、共通部分と個別差分を分けて影響範囲を判断できます。

FHWはフロントエンドまでを担当し、データ連携やクリックイベントなどシステム側の処理とは境界を分けました。各画面にページ種別と用途を添えて外部開発チームへ共有し、組み込み時の認識差を抑えています。公開後のカテゴリ再編、利用案内ページ、新規コンテンツ、月次更新にも既存部品を活用。サーバー移行時も公開中コンテンツへの影響を確認しながら切り替えを行い、長期運用を支えています。