WEBデザイナーが考えるデザインの手順
デザイン案件を進める場合、案件やスケジュールによっても違いはありますが、弊社では大抵の場合、カンプ制作の前にラフスケッチを描きます。頭の中の完成イメージを確認・整理する、インスピレーションを得る、後々認識の違いから手戻りとなるのを防ぐため、初段階のラフスケッチは制作は重要です。
デザイン制作に入る前に、ディレクターやクライアントからワイヤフレームが支給されることは多々あります。ワイヤーフレームのクオリティも実に様々です。手書きのまま、スキャンされたものから、ほとんど完成に近いんじゃないかと思われるほど、作り込まれたものまであります。
しかしワイヤーフレームを見ただけで、すぐにPC上の作業に移ってしまうのは自分の解釈を持たずにデザインを始めることになり、危険です。
支給されたワイヤーフレームを一度、自分の中に落とし込むためにラフスケッチを描くと、ワイヤーフレームで見落とされたポイントや、エンドユーザーがより使いやすいアイデアを発見できることが多くあります。
サムネールとラフスケッチ
サムネールとは、WEB業界では一覧ページ用の小さめの画像のことを指すことが多いですが、グラフィック業界などではラフなどと同じく、デザイン作業に入る前のスケッチを指します。ただし、サムネールを描くときは「なぐり書き」のようにしてスピーディーに、ディテールは詰めず、いくつも描きます。「つまらないかな？」と思ったこともひとまず描いておくと、この時点で意外な発想を得たりもします。
例えば、家庭でポピュラーに使用される冷凍食品を扱う企業様で「親しみやすさ」を感じさせるデザインの要望であれば、メインビジュアルのトリミングを角のない有機的で柔らかな形にしてみる方法が思いつきます。思いついたら、それを描いてみます。メインビジュアルの形に従えば、あまりカッチリしたヘッダー、ナビゲーションは相性が悪いかもしれません。ボタンなどのパーツやフォントも少し柔らかな形を検討します。後からサムネールを見返した時にそれらの着想が振り返られるように特徴だけを強調して描き進めます。この時点ではまだ一つの発想にこだわりすぎないよう気をつけます。１つ前の発想から、わざと大きく外した次の案を描いてみるのも視野を広げるコツです。
ひとつの情報に、様々な解釈の「親しみやすさ」というフィルターを試すことで、ニュアンス違いのデザインが複数生まれてきます。その中から、企業様のブランドイメージや目的にあった、よりターゲットに刺さるデザインを選択し、方向性を固めていきます。
サムネールでイメージが固まってきたら、実際のサイズに近いラフスケッチを描きます。ここでも細部を詰める必要はありませんが、サムネール時点で気になった発想を盛り込んでいきます。実寸に近くしたら思ったほど良くなかったり、またはその逆であったりします。
ナビゲーションやスライドなど動きのあるパーツなどで動作イメージがある場合はスケッチの横などに補足しておきます。
この時点で、考えた方向性に沿っているかの確認方法は、デザイン意図を言葉にできること、それがラフスケッチに反映できているか、この２つがポイントになります。
PC作業に移る前にディレクターにラフスケッチを見てもらい、お互いの認識に違いがないか確認します。
単一ページでなく、下層ページがある場合は、共通パーツとなるヘッダーや見出しなどもイメージして描き出しておきます。「このナビゲーション、下層に行くとどうなるの？」と聞かれることがありますが、下層ページに遷移しても無理のない画面設計を心がけます。
ギャラリーサイトを見ながら
良質なインプットがなければ、アウトプットもありません。
デザインの引き出しが不足してる、と感じたり、ラフスケッチを描く手が止まるようであれば、ギャラリーサイトを見ながらインスピレーションを得ます。
オススメのギャラリーサイト
サイト全体の雰囲気で探すのも大事ですが、部分的なあしらい、カラーリング、使用してるフォントなど「素敵だな」「今回のトンマナにあっている」と感じたものはその箇所をキャプチャを撮るなどしてコレクションすると、頭の中のイメージが明確になり、カンプ制作時の助けになります。
まとめ
ラフスケッチは本人を除いてほとんど人目に触れる機会は無く、更に締め切りへの焦りから工程を省いてしまいがちです。しかし、頭の中にあるイメージを過信して、すぐにPCでの作業を始めてしまうと、思っていたような成果が得られず、余計な手戻りで結局、時間を浪費してしまうことになりかねません。ラフスケッチを描くにあたって決まったルールやクオリティはありません。描いて行く作業の中で起こる「気づき」「発想」が何よりも大事です。
WEBデザイナー ／ S.K
