コンテンツファーストデザイン

状況: ウェブサイトリニューアルで、先にデザインを完成させた後にコンテンツを流し込んだところ、「テキストが入りきらない」「画像のアスペクト比が合わない」などの問題が30箇所以上発生。修正に1か月を要した。

適用プロセス:

1. 次のリニューアルではコンテンツファーストに転換。全ページのコンテンツモデルを先に定義
2. ライターが実テキストを先行で作成し、デザイナーは実テキスト入りのワイヤーフレームから設計開始
3. コンテンツの「最長パターン」と「最短パターン」で各テンプレートの耐久テストを実施

成果: デザイン〜実装のフェーズでコンテンツ起因の修正がゼロに。プロジェクト全体の工期が前回比30%短縮された。

状況: LP制作を外注しており、デザイン先行で毎回ビジュアルは美しいがCVRが0.8%と低迷。分析すると「ユーザーの知りたい情報が見つからない」が離脱理由のトップだった。

適用プロセス:

1. ユーザーアンケートで「購入前に知りたい情報」を収集。1位：他社比較、2位：導入事例、3位：価格の内訳
2. この優先順位でコンテンツを作成し、ファーストビュー→比較表→事例→価格→CTAの構成を決定
3. デザイナーにはコンテンツ＋構成を先に渡し、「この内容に最適なレイアウトを設計してください」と依頼

成果: CVRが0.8%→2.4%に改善。「知りたい情報がすぐ見つかった」というフィードバックが増加した。

状況: ニュースメディアのレスポンシブ対応で、PC版のデザインをモバイルに縮小した結果、見出しが2行に折り返し、画像が小さすぎて判別不能になるなどの問題が頻発。

適用プロセス:

1. コンテンツモデルを再定義：見出し（全角20文字以内）、リード（80文字以内）、サムネイル（16:9で最小幅320px）
2. モバイルファースト＋コンテンツファーストで設計。まずモバイル画面に実記事を配置し、PCに拡張する順序に変更
3. 見出しの文字数制限をCMSに組み込み、入稿時にバリデーション

成果: モバイルでのレイアウト崩れが月平均15件→1件に減少。記事の回遊率がモバイルで18%向上した。