独学デザイン入門

Webデザインの制作の際に役に立つラフとは?目的と作る際のポイント

この授業は次のような方におすすめです。

・初めてWebデザインの案件を受注した方

・Webデザインをする上でクライアントやチーム間でスムーズに仕事ができるために、ラフの描き方をすればいいのかの取り組み方のを知りたい方

この授業を受けていただくことで、上のような方の力になることができるかもしれません。

どうぞ最後までご覧になってください。

Webデザインのラフとは

先生
先生
Webデザインのラフと言うのは、Webページのイメージやレイアウトの設計図のようなもので、一般的にはワイヤーフレームと呼ばれることもあるんだ。

デザイニャー
デザイニャー
Webページのデザインを制作するときに、何も見ないでいきなりデザインを作ることは、難しいニャン。

先生
先生
それはプロのWebデザイナーでも同じでね、多くの場合はデザインを作るときにはラフを作成して、それを下書きにしてイメージを膨らませてからWebデザインの制作に取り組んでいるんだ。
Webサイト制作に欠かせないワイヤーフレームのポイントを詳しく解説この授業は次のような方に是非受けてもらいたいです。 ・Webサイト制作のためにワイヤーフレームを作ることになった方 ・ワ...

Webデザインのラフを描く目的

デザイニャー
デザイニャー
ラフを作ることで、デザインがしやすくなるのはわかったけれど、それってどうしても必要なのかニャン?

先生
先生
簡単なバナーを作ったり小規模なWebページ制作歩ときには、ラフを作らないことも多いんだけれど、Webデザインのラフ作成には明確な目的があって作られているんだ。ここではラフを作る目的として次の2つのことについてお話ししていくよ。

・Webページ内に必要な情報整理

・Webデザインの完成イメージをある程度見えるようにする

Webページ内に必要な情報整理

デザイニャー
デザイニャー
Webページの中には、画像やテキスト、バナーなど、たくさんの要素が含まれているんだけれど、それらの要素が多くなると、どこに何の要素を置いて、表示する順番はどうするか、など決めないといけないことがたくさん出てくるニャン。

先生
先生
そこでラフの登場だよ。必要な情報を整理したり、デザインをまとめるための材料作りをするのに、ラフが役に立つんだ。ラフが役に立つのは具体的には次の2つのようなことが挙げられるよ。

・テキストや画像を並べて見て、大きさの比率や配置を変える

・並べた後に必要な情報に足りない部分がないのかチェックする

デザイニャー
デザイニャー
このように、Webページを作るために必要な構成要素を整理するためにラフを作成するんだニャン。

Webデザインの完成イメージをある程度見えるようにする

デザイニャー
デザイニャー
ラフそれ自体は、簡単なテキストや線を並べただけのデザインの下書きだけれど、それだけでもWebサイトの完成形をイメージすることができるんだニャン。

先生
先生
だから、複数人のチームでWebデザインを制作している場合は、共同担当者と、1人でWebデザインを制作する場合には、クライアントとのイメージの共有に、ラフが役に立つんだ。

デザイニャー
デザイニャー
デザインが出来上がってしまってから、イメージと違うと言われてしまうと、初めからやり直しになってしまうことがあるから、面倒なことになるニャン。

先生
先生
でも、ラフを描いた時点で相談しておけば、お互いの認識があった場合でも、修正はそれほど難しくはないでしょう。

デザイニャー
デザイニャー
だから、ラフを見ながらチームやクライアントなどの関係者の間で意見を出し合って修正していくことが大事なんだニャン。

先生
先生
ラフを作成して関係者と詳細なイメージのすり合わせを行うことで、必要な場所に必要な要素を置いていくだけで、ほとんどデザインは出来上がるんだ。

Webデザインを制作する際のラフの重要性とは

デザイニャー
デザイニャー
ラフの制作は、Webデザインを制作する時の皇帝の中でも最も重要な要素になるんだニャン。

先生
先生
Webサイトを制作する際に、クライアントやディレクター、コーダーなどの関係者の間で、意見を出し合うことで、不足している部分がないかを確認しあったり、使いやすくて見やすいかをチェックして改善していく際にラフを共有することが必要になるんだ。

デザイニャー
デザイニャー
そう言ったことから、ラフを作ることは、スムーズにWebサイトの制作を進めていくのに欠かせない工程であると言えるんだニャン。

Webデザインのラフの取り組み方の5つのポイント

先生
先生
Webデザインのラフを作る際の取り組み方について、次の5個のことをお話ししていくよ。

・消さない

・時間をかけずに描く

・広いスペースで描く

・ヒアリング中に描く

・たくさん描く

消さない

デザイニャー
デザイニャー
デジタルでラフを描いていると、すぐに消すことができるのが裏目に出て、アイデアの源泉の段階で編集をちまちまとしてしまうという落とし穴があるニャン。

先生
先生
その点、アナログで描いていると、消すのが面倒なので、アイデアをどんどんと出していくことに集中できるから、ラフを描くならまずはアナログで描くことをおすすめするよ。

時間をかけずに描く

デザイニャー
デザイニャー
ラフはあまり時間をかけないで描いた方が良いニャン。

先生
先生
粗い描き方になっても良いんだ。その短い時間で描きながら違和感に早く気がついたり、頭の中を整理できたりするからね。

デザイニャー
デザイニャー
そうすることでゴールに近づいて結果的にデザインが早くなるんだ。

広いスペースで描く

デザイニャー
デザイニャー
ラフを描く際には、PCも何もない広いデスクで描く方が良いそうだsニャン。

先生
先生
それはなぜかというと、何もない広いデスクでばら撒かれた資料に囲まれながら描くのが良いからなんだ。

ヒアリング中に描く

デザイニャー
デザイニャー
クライアントとの打ち合わせでヒアリングしている中でラフを描いた方が良いそうだニャン。

先生
先生
ヒアリング内容を言葉でメモするだけじゃなくて、図や構成などがどんな感じにしたいかを伝えるためにラフとして描いていきながらクライアントと意思疎通できることが多いんだ。

デザイニャー
デザイニャー
ラフによって目の前で、どんなWebサイトにしたいのかを具体的にされていくと、持ち帰ってから考えるよりも前進できている感じがすると言うことだニャン。
【徹底解説】Webデザインやサイト制作に必要なヒアリングのポイントこの記事は次のような方におすすめです。 ・初めてWebサイト制作を依頼された。 ・Webサイトを作る際のヒアリングはどん...

たくさん描く

デザイニャー
デザイニャー
ラフを作るときには、とにかくたくさん描いていこうニャン。

先生
先生
たくさん描いていくことで、たくさん引き出しができるし、輪郭を作り上げる力もついていくからね。

ラフを他の人に見てもらおう

先生

デザイニャー
デザイニャー
1人でラフを描くのに没頭していると、思考が一つのことに集中してしまって全体像が見えづらくなることもあるニャン。

先生
先生
そこで他の人に自分が描いたラフを見てもらって、何を表現したいのかを説明してみると、自分の頭の中を整理すると言う効果もあるよ。

デザイニャー
デザイニャー
それに、ラフの感想を人から行ってもらうことで、新しいアイディアが出てくることもあるニャン。

先生
先生
それに、客観的に見れるようになると、また違う角度からデザインをみることもできるようになるよ。

Webデザインのラフ制作の流れ

デザイニャー
デザイニャー
ここまでは、Web制作をするにあたって、ラフを作ることが重要な工程であることを教わったけれど、具体的にラフの制作はどんなふうに行っていくのかを知りたいニャン。

先生
先生
ラフ制作には、大きく次の4つの工程があるんだ。

・サイト内に載せる要素を整理

・マインドマップでまとめてみる

・手書きでイメージを整理する

・ツールで清書する

サイト内に載せる要素を整理

先生
先生
Webサイトにはたくさんの要素が必要になるけれど、その要素には次のようなものが挙げられるんだ。

・Webサイトに載せる商品や会社の情報

・テキストで表示するか

・画像(バナーなど)で表示するか

・会社情報に必要な項目(会社名、住所、電話番号、メールアドレス、その他)

・バナー広告

・紹介したいテキストや画像をどうするか

デザイニャー
デザイニャー
上にあげたような要素をピックアップして、何が幾つ必要なのかを整理するんだニャン。

先生
先生
また、会社の紹介や商品の詳細といったように、使い道や意味の近い要素をまとめてグループにしておこう。

デザイニャー
デザイニャー
必要な情報をまとめてグルーピングしておくことで、配置するときに忘れたり、どこに何があるのかわかりにくいといったことを防ぐことができるんだニャン。

マインドマップでまとめてみる

デザイニャー
デザイニャー
Webサイトに載せたい情報やコンセプトを書き出していくと、たくさんの数になること多くあるけれど、これらのアイディアをわかりやすくするのに便利なのが「マインドマップ」と言うものなんだニャン。

マインドマップとは、情報のカテゴリごとにまとめたものを図にしたものです。真ん中に置いたメインとなるコンセプトを中心にして、放射状に情報を線で繋げていくものです。

先生
先生
マインドマップは、個人でじっくりとアイディアを考えて出すことをおすすめするよ。マインドマップをチームでしようと思うと、予想外の所からアイディアがたくさん出てくるから、まとめにくくなることがあるからね。

手書きでイメージを整理する

先生
先生
必要な情報を整理することができたら、手書きでイメージを整理してみよう。

デザイニャー
デザイニャー
手書きでするメリットは、紙とペンだけで誰でもすぐに描き始めることができるところなんだニャン。

先生
先生
ツールを使うことに慣れているのであったら、初めから専用のツールを使って作っても良いけれど、自分が考えた線を描くためのツールの使い方を考えてしまうことによって注意力が散漫しやすくなる傾向があるからね。

デザイニャー
デザイニャー
手描きで自由に線を描いたり消したりすることが、頭の中のイメージを整理するためには必要になるということだニャン。

ツールで清書する

デザイニャー
デザイニャー
そして最後にツールを使って清書するんだニャン。

先生
先生
ツールで清書することで、Webデザイナーの頭の中のイメージがクライアントに伝わるようなラフにすることができるんだ。

参考動画:Webデザイナーは提案用ラフデザインをどこまで作り込むのか?実際のデザインで解説!

まとめ

先生
先生
この授業では次のようなことについてお話ししてきたよ。

・Webデザインのラフとは

・Webデザインのラフを描く目的

・Webページ内に必要な情報整理

・Webデザインの完成イメージをある程度見えるようにする

・Webデザインを制作する際のラフの重要性とは

・Webデザインのラフの取り組み方の5つのポイント

・消さない

・時間をかけずに描く

・広いスペースで描く

・ヒアリング中に描く

・たくさん描く

・Webデザインのラフ制作の流れ

・サイト内に載せる要素を整理

・マインドマップでまとめてみる

・手書きでイメージを整理する

・ツールで清書する

・参考動画:Webデザイナーは提案用ラフデザインをどこまで作り込むのか?実際のデザインで解説!

私たちは頑張るあなたを応援しています。