この授業は次のような方におすすめです。
・初めてWebデザインの案件を受注した方
・Webデザインをする上でクライアントやチーム間でスムーズに仕事ができるために、ラフの描き方をすればいいのかの取り組み方のを知りたい方
猫でもわかる！デザイン教室 on 2022-10-04
https://www.620nobuko.com/web-design-rough
Webデザインのラフとは
- Webデザインのラフと言うのは、Webページのイメージやレイアウトの設計図のようなもの。一般的にはワイヤーフレームと呼ばれる。
- 多くの場合はデザインを作るときにはラフを作成して、それを下書きにしてイメージを膨らませてからWebデザインの制作に取り組んでいる。
Webデザインのラフを描く目的
- Webページ内に必要な情報整理：必要な情報を整理したり、デザインをまとめるための材料作りをするのに、ラフが役立つ。ラフが役に立つのは具体的には次の2つのようなことが挙げられる：
- テキストや画像を並べて見て、大きさの比率や配置を変える。
- 並べた後に必要な情報に足りない部分がないのかチェックする。
- Webデザインの完成イメージをある程度見えるようにする：ラフそれ自体は、簡単なテキストや線を並べただけのデザインの下書きだけれど、それだけでもWebサイトの完成形をイメージすることができる。複数人のチームでWebデザインを制作している場合は、共同担当者と、1人でWebデザインを制作する場合には、クライアントとのイメージの共有に、ラフが役に立つ。ラフを作成して関係者と詳細なイメージのすり合わせを行うことで、必要な場所に必要な要素を置いていくだけで、ほとんどデザインは出来上がる。
Webデザインを制作する際のラフの重要性とは
Webサイトを制作する際に、クライアントやディレクター、コーダーなどの関係者の間で、意見を出し合うことで、不足している部分がないかを確認しあったり、使いやすくて見やすいかをチェックして改善していく際にラフを共有することが必要になる。ラフを作ることは、スムーズにWebサイトの制作を進めていくのに欠かせない工程である。
Webデザインのラフの取り組み方の5つのポイント
- 消さない：デジタルでラフを描いていると、すぐに消すことができるのが裏目に出て、アイデアの源泉の段階で編集をちまちまとしてしまう。アナログで描いていると、消すのが面倒なので、アイデアをどんどんと出していくことに集中できるから、ラフを描くならまずはアナログで描く。
- 時間をかけずに描く：短い時間で描きながら違和感に早く気がついたり、頭の中を整理できたりするから、粗い描き方になっても良い。
- 広いスペースで描く：何もない広いデスクでばら撒かれた資料に囲まれながら描くのが良い。
- ヒアリング中に描く：ヒアリング内容を言葉でメモするだけじゃなくて、図や構成などがどんな感じにしたいかを伝えるためにラフとして描いていきながらクライアントと意思疎通できることが多い。ラフによって目の前で、どんなWebサイトにしたいのかを具体的にされていくと、持ち帰ってから考えるよりも前進できている感じがする。
- たくさん描く：たくさん描いていくことで、たくさん引き出しができるし、輪郭を作り上げる力もついていく。
ラフを他の人に見てもらおう
- 1人でラフを描くのに没頭していると、思考が一つのことに集中してしまって全体像が見えづらくなることもある。
- 他の人に自分が描いたラフを見てもらって、何を表現したいのかを説明してみると、自分の頭の中を整理すると言う効果もある。
- ラフの感想を人から行ってもらうことで、新しいアイディアが出てくることもある。
- 客観的に見れるようになると、また違う角度からデザインをみることもできるようになる。
Webデザインのラフ制作の流れ
- サイト内に載せる要素を整理：
- Webサイトに載せる商品や会社の情報、会社情報に必要な項目、紹介したいテキストや画像をどうするかなど、何が幾つ必要なのかを整理する。
- 会社の紹介や商品の詳細といったように、使い道や意味の近い要素をまとめてグループにしておく。
- マインドマップでまとめてみる：Webサイトに載せたい情報やコンセプトを書き出していくと、たくさんの数になること多くあるけれど、これらのアイディアをわかりやすくするのに便利なのが「マインドマップ」。マインドマップとは、情報のカテゴリごとにまとめたものを図にしたもの。真ん中に置いたメインとなるコンセプトを中心にして、放射状に情報を線で繋げていくもの。
- 手書きでイメージを整理する：手書きは、紙とペンだけで誰でもすぐに描き始めることができる。手描きで自由に線を描いたり消したりすることが、頭の中のイメージを整理するためには必要。
- ツールで清書する：ツールで清書することで、Webデザイナーの頭の中のイメージがクライアントに伝わるようなラフにすることができる。