WEBデザイン初心者必見！ラフ制作の目的と流れを紹介
WEBサイト制作やリニューアルをおこなう際の重要な工程の1つに、ラフの制作があります。
WEBデザインの勉強中の方や、WEBデザイナーになりたての方には、聞きなれない用語かもしれません。
この記事では、WEBサイトのデザインは「何から始めたらよいのかわからない」、「うまくまとめられない」と悩んでいるあなたへ、ラフ制作の目的と重要性、ラフ制作の流れについてご紹介します。
WEBデザインのラフって何？
ラフを一言で表現すると、”WEBページのイメージやレイアウトの設計図”のようなものです。WEB制作の現場では、ワイヤーフレームと呼ばれることもあります。
WEBページのデザインをおこなう際、何も見ずにいきなりデザインを作り上げることはプロのWEBデザイナーでも困難です。
多くの場合、デザインを作成する際の下書きとしてラフを作成し、イメージを膨らませてから制作に取りかかります。
WEBデザインでラフを作る目的
ラフを作成することで、「デザインがしやすくなるのは何となくイメージできたけど、どうしても必要なの？」と思われた方もいらっしゃるのではないでしょうか。
実際に、簡単なバナーの作成や小規模なホームページの制作では、ラフを作らないケースも多いようです。
しかし、WEBデザインのラフ作成は、明確な目的があって作成されています。ここでは、ラフを作ることの目的について、大きく分けて2つ紹介します。
WEBページ内に必要な要素を整理する
WEBページのなかには、テキストやバナー、画像など、多くの要素が含まれています。登場する要素が多くなればなるほど、「どこに」、「何の要素を置くか」、「表示する順番は」のように、決めなければならないポイントがたくさん出てきます。
そこで、ラフを使って必要な情報を整理して、デザインをまとめるための材料づくりに役立てます。
実際にテキストと画像を並べて見て、大きさの比率や配置を変えてみたり、並べたあとに必要な情報の過不足がないかをチェックしたりするなど、WEBページを制作するのに必要な構成要素を整理するためにラフが活用されます。
WEBページ、サイトの作り方についてはコチラ▼
WEBサイトはこう作る！WEBデザイン制作の基本やコツ、参考サイトまで一挙解説
WEBデザインの完成イメージを見える化する
ラフ自体は、簡単なテキストと線を並べただけの、デザインの下書きです。しかし、それだけでも完成形をある程度イメージすることが出来ます。
そのため、複数人で作業している場合は共同作業者と、一人で制作を担当する場合はクライアントとのイメージの共有に役立ちます。
デザインが出来上がってから、思っていたイメージと違っていたと言われてしまうと、全体のレイアウトを修正したり、細かな調整をしたデザイン上のパーツ間の位置関係など、最初からやり直しになるケースも出てくるでしょう。
しかし、ラフの時点で相談しておけば、お互いに認識の違いがあったとしても、修正は難しくありません。ラフを見ながら関係者間で意見を出し合い、修正しながらできるだけ詳細なイメージにまとめましょう。
ラフのイメージで詳細なイメージのすり合わせが出来ていれば、必要な位置に必要な要素を揃えていくだけでデザインはほとんど完成です。
WEBデザインにおけるラフの重要性とは
WEBサイトの制作は、通常WEBデザイナーの他にも、クライアントやディレクター、そしてコーダーなど、複数の登場人物が関わってきます。
ラフの制作は、それぞれの登場人物が抱いているイメージの違いをすり合わせるため、WEB制作の工程のなかでも重要な要素です。
関係者間でラフを共有し、意見を出し合うことで、クライアントからの意見を取り入れたり、不足している要素がないか確認しあったり、使いやすさや見やすさといった機能面からの改善を取り入れるなど、完成イメージを作り上げていくことが出来るのです。
ラフを作成することは、WEBサイトの制作プロジェクトをスムーズに進めるために欠かせない工程といえるでしょう。
デザインラフの制作の流れ
ここまで、ラフを制作することがWEBサイト制作に重要な工程であることをお伝えしました。
では、ラフの制作は具体的にどのようにおこなわれるのでしょうか。ここでは、ラフ制作の流れについて、大きく3つの工程に分けてご紹介します。
流れ1：サイトに掲載する要素を整理する
最初におこなう工程は、WEBサイトに掲載する、必要な要素を整理することです。
WEBサイトにはたくさんの要素が必要になります。たとえば、次のようなものが考えられるでしょう。
・掲載する商品や会社の情報
・テキストで表示するか
・バナーなどの画像で表示するか
・会社情報に必要な項目は？（会社名、住所、電話番号、メールアドレス、その他）
・バナー広告
・紹介したいテキストや画像はどうするか
これらの要素をピックアップし、”何が”、”いくつ”必要かを整理しましょう。
また、”会社の紹介”や”商品の詳細”のように、使い道や意味の近い要素をまとめてグルーピングしておきましょう。必要な情報がまとまっていると、配置する際に忘れたり、どこに何があるかわかり難いという事態を防ぐ効果があります。
流れ2：手書きでイメージを整理する
必要な情報が整理出来たら、まずは手書きでイメージを整理しましょう。手書きのメリットは、紙とペンがあればすぐに誰にでも始められるところです。
ツールの使い方に成熟している場合には、最初から専用のツールなどを使って制作しても
構いません。しかし、「思い描いた線を描くにはツールをどのように使うのか」のように、使い方を考えることに注意力が散漫になりやすい傾向があります。
手を使って、自由な線を書いたり消したりを繰り返すことが、頭の中を整理するためには必要になります。
流れ3：ツールを使って清書する
大まかなイメージができたら、ツールを使って清書します。
手書きのイメージは、WEBデザイナー自身の頭の整理には役立ちますが、クライアントなどの関係者と共有する際は、見た目を意識した、相手に伝わるイメージになっていることが重要になります。
まとめ
この記事では、WEBデザインの制作中に作成されるラフについて、その目的や重要性を開設し、具体的な制作の流れについて紹介しました。
重要な作業なのはわかったけれど、ラフの制作は大変そうだと感じた方も多いのではないでしょうか。
でも、心配する必要はありません。WEBサイトの要素は、最初は膨大に感じられると思いますが、経験を積むことで徐々に理解が進み、短時間でまとめられるようになってきます。また、ラフのイメージ制作は、必要な要素の組み換えから始めることで、まとめ方のコツもわかるようになりますよ。
ぜひ今回ご紹介した流れで、一度ラフを作ってみてくださいね！
日本デザインスクールでは、WEBデザインのTipsや、幸せに生きるためのちょっとしたコツを発信中
＼毎週火曜・木曜 23:00〜LIVE開催／
デザインTipsを発信、日本デザインスクールのインスタはこちら
＼毎週 月.水.金 12:30〜聞くだけで整うLIVE開催中／
日本デザインスクール校長、久保のインスタはこちら
インスタライブやDMでの質問もお待ちしております。
最後までお読みいただきありがとうございました＾＾