ラフデザイン（Rough Design）｜ホームページ制作 用語集

ラフデザインとは｜イメージ共有のための“設計の下書き”

ラフデザイン（Rough Design）とは、Webサイト、チラシ、ロゴ、広告バナーなどのデザイン制作において、完成形に向けた構成・レイアウト・要素配置などを大まかに描いた設計の下書きのことです。「ラフ案」「ラフ」「デザインラフ」などとも呼ばれ、デザイナーとクライアントの間でイメージや方向性を共有するための初期資料として用いられます。

ラフデザインの目的

ラフデザインは「完成に近づける作業」ではなく、「認識のズレを防ぐ作業」です。制作物の方向性について早い段階で共通認識を持つことにより、以下のような効果が得られます。

• イメージの食い違いを未然に防ぐ
• 修正の回数や大幅な手戻りを減らす
• 構成・情報設計の整理ができる
• クライアントのフィードバックを得やすい

特にWeb制作では、情報設計（IA）・ユーザーフロー・コンテンツの優先順位などを視覚的に示すことができるため、UX設計の重要なプロセスとしても活用されます。

ラフデザインの主な構成要素

制作物の種類により異なりますが、一般的なラフには以下のような要素が含まれます。

要素	内容例
レイアウト	ヘッダー、メニュー、本文、CTAなどの配置
テキスト	仮タイトルや見出しの配置（ダミーでもOK）
イメージ	写真やイラストの配置位置（具体的な画像は未定でも可）
色・フォント	指定がある場合は注釈として記載
注釈・説明	なぜこうした構成にしたのかなどの補足説明

ラフと他工程との違い（ワイヤーフレーム・デザインカンプ）

項目	ラフデザイン	ワイヤーフレーム	デザインカンプ
精度	低（手描きや簡易ツール）	中（構造中心）	高（見た目を再現）
主な目的	イメージ共有、方向性確認	情報設計、機能設計	実際の見た目・配色の確認
作成者	デザイナー／ディレクター	デザイナー／UX担当	デザイナー
ツール	紙・ホワイトボード・PowerPoint等	XD／Figma／スプレッドシート等	Photoshop／Illustrator／Figma等

ラフデザインの作成ツール例

• 手描き（紙・iPadなど）
• PowerPoint、Keynote（プレゼンソフト）
• Adobe XD / Figma / Canva（デジタルUIツール）
• ホワイトボード共有アプリ（Miro, Muralなど）

目的や相手に応じてツールを使い分けることがポイントです。
たとえば、クライアントとの初回ヒアリングでは紙に手描きのラフで即興的に構成を描きながら話すケースもよくあります。

ラフデザイン（Rough Design）　まとめ

ラフデザインは、完成品ではなく“合意形成のための設計メモ”です。
デザインの方向性や構成イメージを共有することで、制作の無駄や手戻りを減らし、プロジェクト全体のスピードと品質を高めることができます。

特に中小企業やWeb制作の現場では、「完成品の前に話を整理する工程」として、ラフの有無がプロジェクトの成否に直結することも少なくありません。