可変コンテンツから逆算した、モバイルファーストの企業サイト

求められたのは、スマートフォンを中心に企業の情報を分かりやすく見せながら、公開後に増減するコンテンツや外部サービスの表示を組み込むことでした。静止画では一定件数のカードが整って見えても、実際の運用では件数、文章量、画像比率が変わります。外部コンテンツは取得できない時間や仕様変更も考慮する必要があります。

また、デザイン検討中の状態で実装を先行すると、見た目の修正がデータ構造や共通部品の作り直しへ広がります。画面上の要望と、更新データが持つ項目、表示件数、例外時の振る舞いを分け、どこまで確定したら実装へ渡すかを揃えることが課題でした。

最初に、固定情報と可変情報を分け、可変側については最小件数、通常件数、多い件数、データなしの状態を整理しました。カードの高さや並びを静止画の件数へ合わせ込む案は採用せず、文章量や画像比率が変わっても情報の優先順位が保たれる部品を設計しました。

外部コンテンツはサイト本体の情報と同じ前提で扱わず、取得できない場合でも主要な企業情報や問い合わせ導線へ影響しない位置と表示にしました。具体的な外部ツールへ過度に依存せず、差し替えや停止ができる境界も設けています。

デザイン確認では、代表的な一画面だけでなく可変状態を共有し、部品の構造が確定してから実装へ進みました。更新データの項目が未確定の場合は、見た目を固める前に管理方法の確認が必要です。

スマートフォンでは、画面内に同時に置ける情報が限られるため、企業理解、実績や活動、次の行動の順に優先順位を定めました。単にPC版を縦に並べ直すのではなく、一覧の一件あたりで何を判断できるべきかを起点に部品を設計しています。

可変コンテンツは、支給されたサンプル件数でだけ美しく見える状態を避けました。長いタイトル、画像なし、件数が少ない状態も作り、余白や高さ、折り返しを確認しました。外部コンテンツには、本体コンテンツと区別できる見せ方を与え、読み込み不成立時にも空白が不自然に残らないようにしています。

デザインデータには、完成図だけでなく、データ条件と例外状態を実装担当へ伝える役割を持たせました。

実装では、一覧カードや外部コンテンツを、固定HTMLではなくデータの増減に追従する部品として扱いました。タイトル、画像、日付などの項目を確認し、欠ける可能性のある値に依存しないレイアウトへ調整しています。

外部データの取得に失敗した場合、ページ全体の表示を止めるのではなく、その領域だけを安全に省略できる構成にしました。読み込み中、取得成功、取得なしを区別し、主要な導線は外部状態から独立させています。

デザイン確定前に本実装へ進むと、DOM構造やデータ項目まで手戻りになるため、先に一つの可変部品で状態を検証しました。この経験から、動的な画面は完成画像ではなく、データの種類と例外状態を含む仕様として受け取る必要があると整理しています。