デザインに欠かせないラフ
アナログであれ、デジタルであれ、『ラフ』イメージを描くことはデザインの仕事に欠かせない作業です。ラフをなぜ描くのか、ラフで何ができるのか、改めて確認していきましょう。
ラフの意味を知ろう
ラフとは『イメージの概略図』のことです。何か新しいものを作り上げようとするとき、頭の中に思い描いた完成図を大まかに見える形にしたものをいいます。
『粗い・雑な』という意味を持つ英語の『rough』からきた言葉であり、その意味のとおりラフは精密でなくて構いません。ラフの役割とは、図化することによってイメージの共有ができる点にあります。
デザイナーに何かを制作してほしいと依頼するとき、言葉のみでイメージを伝えるのは難しいでしょう。違う人間が同じ言葉で全く同じイメージを持つということは稀であるといえます。
また、個人で何かを作り上げようとしたときも、最初にラフを描いておけば、制作途中で方向性を見失わずにすむでしょう。
イラストレーターも行うラフ制作
イラストレーターも絵を描くとき、いきなり出来上がりの絵を描き始めているわけではありません。ほかの制作物と同じように、何を描きたいのかがある程度定まった時点でラフに取り掛かります。
メインにしたいモチーフと構図が決まったら、そのモチーフを魅力的に見せる小物・背景・色使いを決めていきます。ざっとラフにすべて描きだして『イメージをより明確にする』作業を行うのです。
描いている途中で新しいイメージが湧いてくることもあります。ときにはガラっと完成像が変わることも少なくありません。そうしたときに感性の赴くままに変更を加えていけるのも、ラフを描くメリットといえるでしょう。
ロゴ制作やWebデザインもラフから始まる
ロゴ制作やWebデザインの制作プロセスにおいても、ラフの役割は大きいといえます。依頼元がはっきりとラフで完成図の希望を伝えることもあれば、デザイナーの方でラフを作ることもあるでしょう。
Webデザインであれば、使いたい写真を提供してもらうこともありますが、こうした制作依頼を受けるとき、依頼元に明確なイメージがないこともあります。
この場合、まずは依頼元から制作物のコンセプトについてヒアリングします。さらにその企業が何を売りにしているかなどの情報収集も行い、どうビジュアルに表現していくかを決める要素とするのです。
大枠を捉えられた時点で、おおまかな形や色を使ったラフイメージを起こします。ここで1度依頼元とデザイナーとの間で完成イメージの共有、もしくは修正点の提案などを行うのです。
ラフを人に見せてみよう
個人で制作に没頭していると、思考が1点に集中してしまって全体像が見えづらくなることもあるでしょう。ラフイメージを起こすと『コンセプト』を表現できているか視覚化して、客観的に眺めることが可能です。
ここでいったん人にラフを見せて、何を表現したいのか説明してみるのもおすすめです。言葉にして他人に説明するという作業は、自分の頭の中を整理する作業でもあります。
人の感想を聞くことで新しいアイデアが浮かぶこともあります。自らも客観的に捉えられるようになると、違った角度からデザインを見ることができるようになるでしょう。
ラフ制作の準備
本格的な作業に移る前にラフを描きますが、ラフを描く前にも準備が必要です。頭の中がまとまらないままにラフに起こしても、いまいちピント合わないWebデザインになりかねません。
まずは次にあげる2つの作業のなかで、散らばった要素をまとめていきましょう。
デザインに入る前に目的を整理
Webサイトを見たとき、どれほど美しくてもどこに何があるか分からないようなサイトでは見る気がなくなりますね。Webデザインにおいて情報が整理されていることは、デザインセンスに匹敵するほど重要だといえます。
まずは、どんなコンセプトなのか、どんな情報を盛り込んでいくのかを整理することが肝心です。すべての情報を書きだしたら、情報ごとにグループ分けし、メインに持ってくる情報をピックアップしましょう。
具体的には、企業情報・サービス内容・イメージ写真・コンテンツなどに分けられます。出揃ったところで重要な情報を定めてください。企業情報をメインにするのか、コンテンツをメインにするのかはサイトの方向性によって変わります。
説明されなくても操作できるような見た目であることが、優れたデザインです。見る側が、何を目的にそのサイトを見るのかを考えて作業するといいでしょう。
マインドマップにまとめよう
Webサイトに盛り込みたい情報、コンセプトは書きだしていくと膨大な数になることが多々あります。こうした多くのアイデアを集約するのに利用したいのが『マインドマップ』です。
マインドマップとは、情報を羅列するのではなく、情報のカテゴリごとにまとめたものを図に表したものです。真ん中にメインとなるコンセプトを置き、そこを中心に放射状に情報を線で繋げていきます。
マインドマップを作るときには、個人でじっくりとアイデア出しをすることをおすすめします。この時点でチーム作業をすると、アイデアが予想外のところから多数出てくるため、逆にまとめにくくなってしまうでしょう。
あらゆる情報を網羅しながら、終着点を見失わずにすむマインドマップは、個人的に思考をまとめるときにも、プロジェクトメンバーと共有認識を持つときにも役立ちます。
ラフ制作の考え方
情報の整理と取捨選択が終わったら、次はレイアウトについて考えていきましょう。
Webサイト、チラシはどう見られるか
Webサイトを見たとき、何がどこにあればメインの情報に注目を集められるのでしょうか。そこを理解し、視線を誘導できるような作りにすることが、機能的Webデザインの本質といえます。
逆に、まったくエンドユーザーを意識せずに思いのままに作ったサイトでは、最終的な目的にユーザーを誘導することができず、見にくさから離脱率も高くなってしまうことも
人の目の動かし方を考える
『グーテンベルク・ダイヤグラム』という言葉を聞いたことはありますか？これは等しく並んだ情報を見たとき、人の視線が左上から右下に向かうことを表した図のことです。
この左上から右下の斜めのラインに沿って重要な情報を配置すると、見せたい情報を見てもらいやすくなります。
また、左上から右横へ視線が流れ、右上から左下、左下から右へ移動する『Z型』に重要情報を配置するのもよく取り入れられている法則です。横書きの紙媒体でよく見られます。
『F型』はWebサイト上で1番上と左側の情報がよく見られるということを意識してFの形に重要情報を配置するレイアウト方法です。ニュースサイトなどで用いられています。
参考サイトから刺激を受けよう
おしゃれをして出かけようと思ったとき、街で見かけた人やインターネットで見つかるコーディネイト例を参考にしたことはないでしょうか。Webデザインもファッションと同じです。
良いデザイン例のインプットが多ければ多いほど、頭の中にあるデザインの引き出しの数も増えていくでしょう。もし不足していると感じるならば、優れたWebデザインが並ぶギャラリーサイトを巡ることをおすすめします。
トレンドもチェックする
デザインのトレンドは思うよりも早いスピードで変化していくものです。過去には派手で複雑なイラストが多く見られましたが、現在の主流はごくシンプルなものになっています。
たとえば、PCだけではなく、多くの人がスマホやタブレットなどを利用してインターネットを利用している現代では、ボタンやバナーは誤操作を防ぐために大きく押しやすいものが好まれるのです。
密度が濃く縦に短いページが主流であったレイアウトも、今はスクロールバーを利用して縦に長く、その分余裕をもって要素の一つ一つを見やすく作られています。
ラフを描いた後はどうするの？
大まかなイメージをラフに起こせたら、ラフをもとに具体的なデザインへ進めていきます。ラフを描いた後の流れについて確認しておきましょう。
Web制作の場合
Web制作におけるラフから完成品までの流れは以下のようになります。
- マインドマップ作成
- ラフイメージを起こす
- ワイヤーフレームを決める
- カンプ制作
ほとんどの場合においてこの流れで制作が進むと思いますが、作品の種類やデザイナーによって前後することがあります。
ワイヤーフレームの作成
『ワイヤーフレーム』とは、具体的な配置を決めていく作業です。ラフでだいたい決めておいた配置を確定させていく作業と考えていいでしょう。
専用ツールを使う人もいれば、パワーポイントやイラストレーターで作る人もいます。なかにはワイヤーフレームもアナログで描いてしまう人も少なくありません。
完成物の土台となる骨組みなので、この段階で配置に修正のないように詰めていく必要があります。
カンプ、モックアップ
ラフを起こし、ワイヤーフレームも決定したら『カンプ』を制作しましょう。ワイヤーフレームで決めたそれぞれのアイテムに装飾を施す作業です。
カンプとは、ラフよりも精度を上げてより完成図に近づけた模型のようなもので『モックアップ』とも呼ばれます。誰の目にも完成図が明確になるので、デザイン案の最終段階といえるでしょう。
HTMLやCSSの構築作業が進んでからでは変更が難しく、修正に多くの時間を取られる可能性があります。作業に移る前にこのカンプが具体的に作られていると、あとは黙々と作業するだけですむのです。
重要なトップページのラフ
Webサイトで最も重視されるのはトップページの出来栄えです。このページの良し悪しが、サイトのPV数に大きく関わってくるといっても過言ではありません。
デザインが目立つ、新鮮であることも人気を集める要素の一つではありますが、最も重要なのは『何のサイトなのか』が明確であることなのです。
飲食店であればイチオシの料理写真をメインに使ったり、不動産会社であれば物件の検索機能が目につく場所に配置したりと、Webサイトの『目的』をラフに落とし込むことを意識しましょう。
アナログなラフ制作
デジタルで仕上げる制作物であっても、ラフは紙を使った『アナログ派』だという人も少なくありません。ここでは、2通りのアナログラフ制作方法を紹介します。
紙とペンだけで手描き
手描きのラフ制作に必要なのは『紙』と『ペン』だけです。スケッチブックを持ち歩いていれば、アイデアを思いついたときにいつでもラフ案を書き留められます。
このとき、使用する紙はできれば実際の画面や紙面に近いサイズのものを使用するといいでしょう。大きさが違いすぎると、ワイヤーフレームなど次の制作段階に移ったときにイメージが違ってくることがあります。
制作のポイントは、メインとする大きな部分から描き始めることです。サブの情報とのメリハリをつけることを意識してみましょう。
基本の視線の動きを利用したレイアウトに慣れてきたら、雑誌などを参考に大胆に写真の配置を変えてみるなどして、オリジナリティ溢れるレイアウトに挑戦してみてください。
紙にパーツを書いて、切り貼りする
紙に文字や絵をざっと書きだし『切り貼り』していくのもおもしろいラフの制作方法です。たとえば、次のようなWebサイト用の要素を作ってみましょう。各要素の大きさのバランスを考えて書くのがポイントです。
- ロゴマーク
- サービス内容のわかる画像
- キャッチコピー
- 企業情報
- バナー
- 購入用ボタン
書き終わった要素をそれぞれハサミで切り離します。余白はほとんど要りません。次はこの要素を真っ新な紙面に貼り付けていきましょう。
足りないものがあれば足し、実際のレイアウトイメージ通りに制作します。確定したら糊付けしておきましょう。
この方法のメリットは、消しゴムでいちいち消さずにいろんなレイアウトを試せることです。要素が多いと切るのが大変ですが、デジタル制作のように試行錯誤ができる点で優れているといえます。
デジタルなラフ制作
ラフから最終的なイメージに近いものを作りたい場合は、デジタル制作が適しているでしょう。ラフ制作におすすめのアプリを紹介します。
Adobe Comp CCとは
クリエイティブ系の仕事をしている人であれば、知っているであろうPhotoshopやIllustratorといったソフトを提供している『Adobe』にも、ラフ制作に特化した『Comp CC』というアプリがあります。
デジタル制作の大きなメリットは、やはり修正が簡単にできる点にあるといえるでしょう。加えてCompは操作もごくシンプルであるというメリットがあります。
ラフは思いついたアイデアをサッと形にしたいところですが、Illustratorのような専門的知識の要るソフトだと、使用できる人間が限られてしまいます。
Compであれば、ディスプレイ上で手描きするだけで簡単にレイアウトが作成できるのです。デザイン系ソフトになじみのない人でも扱いやすいため、ラフ制作に利用してみてはいかがでしょうか。
スマホでも簡単にデザイン可能
Compは、アプリをダウンロードしておけば、スマホやタブレットでラフデザインの制作ができます。
アプリを開いたら、作りたいものがWebサイトなのか、特定サイズの広告なのかなど、制作物の形式を選択します。次にグリッドとガイドを適宜設定しておきましょう。
ここまで終わったら、さっそくラフの制作に取り掛かれます。指先で描画した操作通りにオブジェクトが作成されていくため、手描き感覚で要素を配置できるでしょう。
サイズを合わせたり、整列させたりといった細かい作業は、下に並んだアイコンをタップすることで操作できます。
設定アイコンの中にヘルプがあるため、操作がわからなければアプリ内ですぐに確認が可能です。難しい操作はないため、何度か使えばすぐに慣れるでしょう。
出典：Adobe Comp | レイアウト、モックアップ、ワイヤフレーム
デザインに行き詰まったときは
Webデザインをしていれば「考えても考えてもよい案が思いつかない」「似たようなデザインばかりだ」と、デザインに行き詰ることもあるはずです。
そんなときには、次に紹介する方法で頭をスッキリさせてみましょう。
一度離れて時間を置く
煮詰まってしまうときは、集中しすぎて視野が狭くなっています。手が止まっている時間が長いと感じたら、いっそデザインのことは忘れてしまいましょう。
外へ気晴らしに出かけたり、好きなことをしてのんびり過ごしてみると、思わぬところからインスピレーションが湧いてくることもあります。
頭の中を切り替えて、改めて客観的な目線からデザインを見直してみると、違った方向から表現する方法が浮かびます。
思いついたことを一通り書き出す
頭の中だけであれこれと考えているよりも、キーワードやアイデアやレイアウトは全部いったん書き出してみることをおすすめします。頭の中が整理され『使える・使えない』案を明確に判別できます。
書いているうちにコンセプトに沿ったデザインが固まっていくはずです。アウトプットすることでより良いデザインへ昇華させられるでしょう。
まとめ
時間短縮を考えて、すぐに完成版の制作に入ってしまうと、逆に修正作業に多くの時間を取られてしまいます。ラフでアイデアをしっかり形にしておくことで、こうした無駄を省くことができます。
手描きでもデジタルでも、自分に合った方法で制作するといいでしょう。ときにはデザインから離れることも必要です。客観的にデザインを見直し、精度の高い表現を目指してください。