はじめまして、ゴラクログのデザインを担当をしている鬼石広海と申します。
弊サービスは現在大幅リニューアル中ですので、UI周りはリニューアル後、又機会があればご紹介させて下さい。
今回は、駆け出しのデザイナーさん達の多くが課題にあげる、デザイン作業のスピードアップについてお話します。結論から言いますと、細部から作らずに土台作りを頑張ることが、結果的にスピードにつながるというお話です。
かなり基礎的なお話になります。
では実際にバナーデザインを例に紹介します。
1.構成要素を全部置く
まずはプランナーやプロデューサーと話し合って決めた構成要素を、とりあえず全部キャンバスに置いてみます。（今回は構成ありきですが、時間があればプランナーと相談しつつ、デザイナーが構成を作るのがベストです。）
必須要素を全部置かずにデザインし始めると、後で追加するのはとても大変な作業なので、一旦全部置きます。ありがちなのは、プランナーが作ってくれた構成のレイアウトをそのまま利用して、構成に色をつけただけのいわゆるパワポデザインになってしまうこと。構成の完成度が高いほど、そのまま作らなければならないような気になってしまうので、構成はあくまで構成要素と割りきって、プランナーのセンスは無視してとりあえず要素を置きます。
2.ストーリーを考えて優先順位を決める
こんなやり取りを想像すると、優先順位が見えてきます。①インパクトの強い言葉で気を引かせ、②結論を先に言って興味を持ってもらい、③オトクな追加情報で落とす。と言う感じ。ここの優先度は、プランナーとも握っておくと良いと思います。
3.単色でレイアウトする
さて、優先順位が決まったら、実際に優先順に目立つようにレイアウトしていきます。ここを妥協して、色に頼って優先順位をつけ始めると、色とレイアウトの両方で優先順位を付けなければならず、色を変えてはレイアウトを変えたりと、行ったり来たりして時間がかかります。無駄に色数が増える原因にもなります。
あとは、いきなり細部から作り始めると、後で破綻します。例えばレイアウトを決める前に、鼻息荒くカッコイイボタンを作ってしまうと、
「超カッコイイボタンが出来た！！！このボタンに合ったレイアウトにしなきゃ！！」
というよく分からない使命感に駆られ、「ボタンに合ったレイアウトをする」という方向に走ってしまいます。結果的にページ内の優先順位はあやふやになり、俯瞰してみると何を伝えたいのかよくわからないデザインになります。結果先輩に駄目出しをくらい、イチからやり直しで時間がかかります。
これらは、バナーはもちろん、UIデザインなど、どんなデザインをする上でも同じ事が言えると思います。シンプルで美しいデザインは、レイアウトや、マージンのバランスで優先順位が付いているので、沢山の色を必要としません。
ですから極力単色、もしくは2色で根気強くベースデザインをすることをおすすめします。
要は下書きのようなものです。
この作業を、作っては壊しを繰り返し行います。作ってみなければわからなかったりするので、とにかく手を動かして、最良のレイアウトを模索します。ここの作業が早くなれば一気に時間が短縮されると思います。
こんな感じになりました。全体的に主張が強くなりましたが、「急げ！」や「今すぐ応募」が目立ち、何となく優先順位通りになりました。
4.色付けする
ベースが出来れば、あとは色をつけて、優先順位をより際立たせます。ここまでできていれば、あとはフォントを変えても、あしらいや色を変えても、優先順位は崩れません。
こんな感じにも。
こんな感じにもできます。
実際に上の2点は出稿済みのもので、1点目は、あまりCVRが良くありませんでした。そこで、1点目のバナーは、掲載ページと色が馴染んでいて目立たなかったのでは？という仮説を立て、思いっきりトーンを変えて、2点目の黒ベースに変えたところ、CVRが約2倍に上がりました。
このようなトーンを一気に変える作業も、ベースが固まっていれば瞬時に行うことができます。作業工数が短縮できて、汎用的にも作れます。
駆け出しデザイナーの皆様、是非お試し下さい。