デザインを作るときに最初に作る「ラフ」。手間がかかるので省きたいと思うかもしれませんが、ラフはデザインの方向性をそろえ、あとからの大きな作り直しを防ぐための大切な工程です。
この記事では、デザイン制作をしている株式会社Ryuki Designの編集部が、ラフデザインとは何か、作る目的、作る前の準備、作り方の流れ、伝わるラフにするポイント、ラフをたたき台としてうまく使うコツを紹介します。
目次
- 1：ラフデザインとは
- 2：ラフを作る目的
- 3：ラフを作る前の準備
- 4：ラフデザインの作り方（流れ）
- 5：伝わるラフにするポイント
- 6：ラフを「たたき台」としてうまく使うコツ
- ●まとめ
ラフデザインとは
ラフデザイン（ラフ）とは、完成したデザインの大まかな下書きのことです。英語の「rough（おおまかな）」が語源で、きれいに作りこむ必要はありません。文字や写真、図などをどこに、どのくらいの大きさで置くかを、手書きや簡単なデータで表したものです。
言葉だけでイメージを伝えると、受け取り方が人によってちがってしまいます。ラフがあれば、完成形のイメージを目で見て共有できます。
ワイヤーフレームとの違い
ワイヤーフレームは、ページの骨組み（どこに何を置くか）を線と箱で表した設計図です。ラフはそこからもう一歩進めて、色や書体、写真の雰囲気など、見た目のイメージもある程度表したものを指すことが多いです。くわしくは「ワイヤーフレームとは」で紹介しています。
ラフはだれが作るのか
デザイナーが作ってお客さまに見せることもあれば、依頼する側が「こんな感じにしたい」と手書きのラフを用意することもあります。依頼する側のラフは、絵の上手さは関係ありません。入れたい情報と、いちばん目立たせたい情報が分かれば十分です。
ラフを作る目的
ラフを作る目的は、大きく3つあります。
必要な要素を整理する
Webページやチラシには、見出し、文章、写真、ボタンなど多くの要素が入ります。ラフを作ると、何を、どこに、どの順番で置くかを整理でき、情報の足りないところや多すぎるところにも気づけます。
完成イメージを見える化して共有する
ラフがあると、お客さま、デザイナー、ディレクター、コーダーなど、制作に関わる人どうしでイメージをそろえられます。
大きな作り直しを防ぐ
制作の現場で、修正が長引く原因として多いのが「お客さまが出来上がりのイメージを持っていない」場合です。ラフの段階で方向性を確かめておけば、作りこんでから「思っていたのと違う」となる大きな作り直しを防げます。
ラフを作る前の準備
いきなり描き始めるのではなく、先に次の3つを整理しておくと、ラフが作りやすくなります。
目的とターゲットを整理する
そのページやチラシで何を実現したいのか、だれに見てもらうのかを決めます。目的が決まると、いちばん目立たせる情報が決まります。
情報を書き出してグループに分ける
入れたい情報を全部書き出し、「会社の情報」「サービスの内容」「写真」「よくある質問」のようにグループに分けて、どれをメインにするかを決めます。アイデアが多いときは、中心にテーマを置いて放射状に広げるマインドマップを使うと整理しやすくなります。情報整理のくわしいやり方は「デザインの情報整理のやり方」で紹介しています。
参考にしたいデザインを集める
近いイメージのWebサイトやチラシを集めておくと、色や雰囲気を決めるときの手がかりになります。どこを参考にしたいのかもメモしておきましょう。
ラフデザインの作り方（流れ）
Webページのラフを作るときの、基本的な流れを紹介します。
1. 希望を聞く
まずは、お客さまのデザインの希望や、参考にしたいサイトを聞きます。デザインの希望と、ページの目的やコンセプトが合っていないときは、この段階で話し合っておきましょう。
2. ワイヤーフレームで配置を決める
ロゴ、キャッチコピー、写真、ボタンなど、ページに入れる要素を書き出し、紙やツールで配置を決めます。
3. 色と書体を決める
メインカラーを1〜2色、アクセントカラーを1〜2色決め、デザインの雰囲気に合った書体を選びます。
4. ラフを作り、時間をおいて見直す
ワイヤーフレームに、決めた色と書体を当てはめて形にします。ある程度できたら、少し時間をおいてから見直すと、おかしなところに気づきやすくなります。
伝わるラフにするポイント
ラフを作るときは、次の4つを意識すると、完成形に近いイメージを伝えられます。
いちばん伝えたいことを目立つ位置に置く
人は、横書きのページを左上から右下へ「Z」の形に見ていくことが多いです。いちばん伝えたいことは、最初に目に入る位置に大きく置きましょう。言葉は、専門用語を避けたシンプルなものにすると印象に残ります。
最初の画面で続きを見たくなる構成にする
Webページを開いて最初に見える範囲（ファーストビュー）で、ページが終わっているように見えると、下まで見てもらえません。写真や見出しが画面の下で少し切れるようにして、続きがあることを感じさせましょう。
文章は短く、1文に1つのことだけ
文章の書き出しは読む人の興味を引くものにし、1文には1つのことだけを書きます。ラフの段階で文章の量をおおまかに決めておくと、あとから入りきらないということが減ります。
強調は必要なところだけに
色や太字、下線を使った強調は、本当に目立たせたいところだけにしましょう。Webでは、下線はリンクに使うのが一般的なので、リンク以外にはつけないほうが混乱を防げます。
ラフを「たたき台」としてうまく使うコツ
ラフは、意見をもらってデザインを良くしていくための「たたき台」です。制作する側がラフを見せるときは、次の点を意識すると話がスムーズに進みます。
デザインの意図をセットで伝える
「なぜこの配置・この色にしたのか」を添えて見せると、相手も意見を出しやすくなり、的はずれな修正も減ります。
迷う意見には、案を2つ見せる
「ここは少し情報が多い気がするのですが、どうでしょう」のように、直すべきか迷う意見をもらったときは、今の案と意見どおりの案を並べて見せると、決めやすくなります。
専門用語を使わずに説明する
ラフを見る人の多くは、デザインの専門家ではありません。専門用語を使わずに説明し、どんな質問も歓迎する姿勢でいると、意見をもらいやすくなります。
意見はデザインの上で集める
ラフへの意見がメールやチャットに散らばると、どの意見がどこのことか分からなくなります。デザインに直接書きこめる無料のツール「mitekaku」なら、ラフの上に意見を書きこんでURLで共有できます。
まとめ
ラフデザインは、完成したデザインの大まかな下書きです。ラフの段階で必要な要素を整理し、関わる人とイメージをそろえておくことで、作りこんでからの大きな作り直しを防げます。
デザインのイメージの伝え方は「デザインイメージの伝え方」でも紹介しています。
ポイント
■ラフを作る目的
・必要な要素を整理する
・完成イメージを見える化して共有する
・大きな作り直しを防ぐ
■作り方の流れ
1. 希望を聞く
2. ワイヤーフレームで配置を決める
3. 色と書体を決める
4. ラフを作り、時間をおいて見直す
■伝わるラフにするポイント
・いちばん伝えたいことを目立つ位置に
・最初の画面で続きを見たくなる構成に
・文章は短く、1文に1つのことだけ
・強調は必要なところだけに
