ラフデザインを作る意味をご存じでしょうか。
デザインを作るときに必ず作ることになる「ラフ」は、作成に時間がかかるものでもあります。
そのため、ラフデザインの作成を面倒そうだと感じている方もいらっしゃるのではないでしょうか。
一方でラフデザインには、重要な役割があることも事実です。
そこで本記事では、ラフデザインとはそもそも何かというところから、その意味、作り方までご紹介していきます。
ラフデザインの概観を掴める文章となっているので、デザイン初心者のかたはぜひ参考にしてみてください。
目次
ラフデザインとは？
ラフは、「イメージの概略図」のことです。
ラフは「粗い・雑な」という意味を持つ英語roughからきており、語源通りラフデザインは精密なものでなくても大丈夫です。
ラフの役割はイメージを図化し、共有できるところにあります。
このようなラフは、アナログでもデジタルでもデザインでは欠かせません。
なぜなら、言葉だけでイメージを共有するのは困難だからです。
言葉の解釈は人によって大きく異なることがあります。
ラフデザインであれば、そのような解釈の違いもありません。
また、個人でデザインを作るときにもラフデザインは役立ちます。
なぜなら、はじめにラフを作っておけば、制作途中で方向性を見失うことがないためです。
どのようなデザインもラフ作成から始まる
イラストレーターがイラストのデザインをするときも、いきなり出来上がりの作品から描き始めているわけではありません。
他の制作物と同様、何を描きたいのかある程度決まったら、ラフに取り掛かります。
具体的には、メインとなるモチーフが決まったら、小物や背景、色遣いを決めていきます。
そして、これらをラフに描き出すことで、イメージをより鮮明にします。
これはロゴ制作やWebデザインでも同様です。
クライアント側がラフで完成図の希望を伝えることもあれば、デザイナー側でラフを作ってしまうこともあるでしょう。
Webデザインであれば、デザインのイメージとして写真といった具体的な情報をもらえることもあります。
一方で、クライアント側に明確なイメージが無いこともあります。
この場合、まずは制作物のコンセプトについてヒアリングを行います。
加えて、その企業の強みといった情報の収集も行い、ビジュアルに表現したい要素を決めていきます。
そして大枠を捕えられたら、ラフに起こします。
この段階で一度クライアント側とイメージを共有します。
Webデザインでラフを作る目的とは？
では、Webデザインでラフを作る目的を、より具体的に確認していきましょう。
主にWebデザインでラフを作る目的は2点あります。
1つ目：Webページ内で必要な要素を整理する
Webページの中には、テキストやバナー、画像といった、いくつかの要素が含まれています。
これらの要素が多くなるほど、「どこに」「何を」「どのような順番で」配置するか決めなければなりません。
ラフを作ることで、必要な情報の整理ができます。
これはいわば、デザインをまとめるための材料作りと言えるでしょう。
具体的には、実際にテキストと画像を見比べることで大きさや比率を変えてみたり、並べた後に情報に過不足はないかをチェックしたりします。
2つ目：Webデザインの完成イメージを見える化する
ラフ自体は簡単なテキストと線で作られたデザインの下書きにすぎませんが、完成形のイメージにつながります。
そのため、複数人で作業する場合は共同作業者とのイメージ共有に役立ちますし、一人で制作する場合であってもクライアントとのイメージ共有に役立ちます。
では、ラフを作らずにデザインしてしまうとどうなるでしょうか。
最も考えられるのは、完成したデザインがイメージと全く異なるものになってしまうことです。
一方でラフの時点でイメージの相違が確認できていれば、面倒な修正にかかるコストも減らせます。
このように、完成イメージを見えるようにし、共有するのがラフ作成の2つ目の目的です。
ラフデザインをするときの流れは？
ここまではラフデザインの重要性や制作のモチベーションをご紹介しました。
ここからは、実際に制作する際の流れをご紹介します。
1.希望デザインのヒアリング
まずはデザインの希望について、クライアントにヒアリングを行います。
このとき、できるたけ多くの情報を得られるようにしましょう。
また、具体的にデザインの参考にしたいサイトがあるのであれば、その点についても聞いておきます。
なお、デザインとコンセプトがかけ離れている場合は、必ず協議しておきましょう。
2.ワイヤーフレーム作成
まずは、ページに入れるコンテンツ（ロゴ、キャッチコピー、画像など）を洗い出します。
続いて、紙にコンテンツを書き込んでワイヤーフレームを作成します。
クライアントに見せるときは、ざっと清書します。
3.ラフデザインの制作準備
ワイヤーフレームでデザインの構成が決まったら、いよいよラフデザインです。
その前に準備として、色とフォントを決めます。
メインカラーは近似色を1〜2色、アクセントカラーを1〜2色決めます。
フォントに関しては、デザインに合ったものを選びます。
4.ラフデザイン
ワイヤーフレームと決定した色・フォントを用いて、デザインしていきます。
現在ではレイアウトの自由度が高いため、ある程度コーディングを意識しなくても良いかもしれません。
ある程度、形になったら、数日寝かせてみるのもおすすめです。
以上がラフデザインの流れです。
他にもやり方はあるかもしれませんが、あまりラフデザインを制作したことがないという方は、ぜひ参考にしてみてください。
ラフデザインをするときに意識したいポイント
ラフデザインの大まかな流れを確認したところで、作成時に意識したいポイントについても確認していきましょう。
ポイントは4点です。
1点目：効果的に印象付けられるように意識する
具体的には、左側に一番伝えたいコンテンツを配置することです。
なぜなら、人間の視線は左から右に流れるためです。
また、専門用語を避けたシンプルな言葉は、人の印象に残りやすいです。
2点目：画面構成
ファーストビューでページが終わっているように見えると、スクロールしてもらえる可能性が下がります。
そのため、ファーストビューの途中でコンテンツが途切れるような画面設計にしましょう。
また、ファーストビューには画像を配置することも大切です。
文字がぎっしりと配置されたサイトよりは、離脱率が下がるためです。
3点目：文章構成
文章はユーザの心に響くものにしましょう。
そのためのポイントは、以下の通りです。
ユーザの心に響くポイント
・文頭はユーザの興味を惹くもの
・1文1メッセージ
・シンプルかつ簡潔な文章
4点目：文字装飾
一般に、以下のように文字の色は決まっています。
【未読リンク】青文字
【既読リンク】紫文字
また、下線はリンクのみにつけ、赤字や太字は強調したいところのみに付けます。
デザインを効率化する「mitekaku」を紹介します！
今回の記事では、ラフデザインについてご紹介しました。
ラフデザインは、いわば、たたき台です。
認識の違いを洗い出すものですが、修正するときに手間に感じることもあるでしょう。
そこでおすすめするのが、コミュニケーションツール「mitekaku」です。
このツールではデザインに直接書き込んで、直感的に修正指示を行えます。
ソフトを使用せずに利用できるという、導入のしやすさも魅力です。
無料でお試しできるので、デザイン全般の修正を面倒に感じている方は、まずは一度利用してみてください。
まとめ
ラフデザインとは、「イメージの概略図」です。
この段階でクライアントとデザイナーのデザインの方向性を合わせることで、その後の作業を効率化できます。
ラフデザイン制作の流れは、以下の通りです。
以下のポイントを考慮して、効率的にデザインをしていきましょう。
ラフデザイン制作の流れ・制作時に意識したいポイント
■ラフデザイン制作の流れ
1：ヒアリング
2：ワイヤーフレーム作成
3：ラフデザイン制作準備
4：ラフデザイン制作
■制作時に意識したいポイント
・効果的な印象付け
・画面構成
・文章構成
・文字装飾
