ラフ

概要

ラフは、Webサイトやバナーなどの制作で「完成前に方向性を合わせるための下書き（たたき台）」のことです。細部の作り込みよりも、構成・雰囲気・要点が伝わることを重視します。

どんな場面で使うか

• ヒアリング後に、認識合わせとして最初に提示する
• 画面構成や情報の優先順位を早めに固める
• デザインに入る前に、修正コストを小さくして検討する

ラフに入れることが多い要素

• 目的・ターゲット・訴求ポイント（何を一番伝えるか）
• 大まかなレイアウト（見出し／画像／CTAボタン等の配置）
• コンテンツの粒度（何を載せるか、どれくらいの量か）
• トーンの方向性（例：信頼感／親しみ／高級感）※色や写真は仮でもOK
• 参考イメージ（競合や参考サイト、雰囲気の近い事例）

よく似た用語との違い

• ワイヤーフレーム（ワイヤーフレーム：画面構成を線で示す設計図）

- 構成・情報設計が中心。装飾は最小限

• デザインカンプ（デザインカンプ：完成見本に近いデザイン案）

- 色・フォント・余白など、見た目をかなり詰めた段階

• モックアップ（モックアップ：見た目や操作を模した試作品）

- 実物に近い形で見せる。操作感の確認にも使う

• プロトタイプ（プロトタイプ：動作検証用の試作）

- クリックや遷移など「動き」を含めて検証することが多い

進め方のコツ

• 「どこが仮か」を明記する（文言・写真・色など）
• 判断基準を添える（目的、KPI、優先順位）
• 1案だけでなく、方向性が割れる部分は複数案で比較する
• 版管理をする（例：ラフv1 / v2、修正点メモを残す）

注意点（トラブル予防）

• ラフは「完成品」ではないので、完成品質の期待値を先に合わせる
• 早い段階で細部（色や装飾）に寄りすぎると、構成の議論が止まりやすい
• 修正依頼は「目的に照らして」出してもらうとブレにくい

関連用語

• たたき台：議論の出発点となる案
• 情報設計：載せる情報の整理と優先順位づけ
• UI（ユーアイ：画面の見た目や操作部品）
• UX（ユーエックス：利用体験全体）