2012年09月27日 12:08Fujii

UIのビジュアルデザインを考えるタイミング

IMG_1040

UIのビジュアルデザインを考えるタイミングはいつ?

さて、方向性を決めたあともUIデザインプロジェクトを襲いかかる敵はまだまだいます。

そのひとつが「ビジュアルデザインを考えるタイミング」の間違いです。

書籍などではUIの要素の話の章と、ビジュアルデザインの話が分けて書いてあることも多いようです。

それは書籍の構成上なのか、デザインのプロセスを単純に説明するためか、スキルセットとして、上流のリサーチや企画をする人は言語で考える方が得意で絵があまりかけないからかわかりませんが、あまり同時に検討するという表現がされていないように感じています。

ただ、書籍などで分けて書いてあるからといって、実際に完全に分離できると考えていると現実とのギャップが生まれます。

以前に書きましたが、目に見えるという意味では、UIデザインは最初からビジュアルデザインでもあるからです。

「見た目はあとで」と思っていると、あとで「自分たちは実は見た目も作っていた」ときづくことになります。

なぜ分離できないか?

では、なぜ分離できないのでしょうか?

まず、ここでいうビジュアルデザインとは何を指すかが問題です。

そもそも、そこが整理されていればあまり問題ではありません。

UIデザインでは、主に線画レベルのものから、色や質感もしっかり描かれたもののふたつのレベルがあり、どちらかというと後者のレベルまで作ることになるのがビジュアルデザインかもしれません。

前者の線画レベルは、ラフな手書きの線画で良いということをよく言いますが、ラフな手書きの線画に魔法をかければ別のものができあがるわけではありません。

単にラフな手書きの絵というのは、「途中」なだけで、より次のレベルのビジュアルデザインにつながっているものであるという認識を持ったほうが現実的です。

というのも、絵というのは、色々な描き方があると思いますが、基本的な手順があるからです。

Shape(形)、Color(色)、Highlight(明るい部分)、Shadow(影)

絵を描く基本的な手順とは、Shape(形)、Color(色)、Highlight(明るい部分)、Shadow(影)です。これらの手順の前に絵を描くキャンバスを用意するフェーズや構図を考えるフェーズがあります。

言い換えると、まずスペースの制約を把握し、そこに形を描き、色をつけて、場合によっては、明るい部分と暗い部分を描くというステップがあるということになります。

では、先ほどの線画レベルというのはどこにあたるのかというと、前半のスペースを把握し、形を描くあたりになるでしょう。

絵を描くフローと比較すると、線画でもビジュアルデザインがはじまっていることになります。

ほんとにポンチ絵でいいのか?

たまにポンチ絵で良いとか、手書きのだいたいの絵で良いということでラフに線画を描くことがあります。

もちろん最初はラフで構わないのですが、ダメな線画もあります。

それは要素を密集させるなどして描いてしまうものや、はいりきらないけど、あとのデザインフェーズでおさめてもらおうとしてしまうことです。

これは、スペースの制約を把握し、形を描くということができていない状態で進むことになります。

当然、後のフェーズで色や質感を加えても、密集具合はかわりません。

この例のようなラフな絵というのは画面にいれたい要素の羅列にすぎなくなってしまっているので、いわゆる線画レベルの絵まで至っていないとも言えます。

どうすればよいのか?

まずは、入れたい機能の羅列ではなく、スペースの制約を把握しどうするか決めるようにすることが大事です。

しかし、細かいレベルまで決めようとすると時間がかかります。

ある程度スピード感を持って進めたいのも事実です。

なのでひとつだけ気にしておくと良いのは、「要素は少なめに、スペースはあまらせるくらい」ということです。

その理由は簡単で、要素はあとあと増えることが多いからです。

直接増えなくても、関係する上位の分類が追加されるなどが原因で、要素間を区別するためにスペースが必要になることもあります。

また、ボタンを増やすときに、ひとつのボタンを減らせるような組織であればいいですが、大抵はそうではありません。

基本的にはUIは複雑になる圧力がつねにかかっているからです。

なので、「要素は少なめに、スペースはあまらせるくらい」にしておけば後のフェーズで結局どうにもならないのでやり直しという確率は減らせるかもしれません。

2012年09月19日 09:58Fujii

「何か売りになるUIを!」の位置づけ

IMG_1033

「売りになるUI」の位置づけ

「なにか売りになるUIを!」という要望があがることがあります。

多くの場合、特徴のないサービスをプレゼンテーションする際に加えるスパイスのような位置づけで語られます。

こういったケースでは実際にプロジェクトを進めると、ベーシックなUIが必要になってくることがあります。

1サービスに複数のUI

最近はこんな風に考えるようにしています。

Twitterなどのサービスがあり、そこにアクセスするためにいろいろなアプリがあり、そのアプリはそれぞれUIを持っています。

ベーシックなアプリもあれば、奇抜なアプリもあります。

何かをするときには、大抵必要なのがベーシックなアプリで、時々好みに応じて、異様に何かに特化したアプリもつかうかもしれません。

Twitterのように大きなサービスであれば、様々なアプリを選択できます。

「何か売りになるUIを!」というのは、何かに特化したアプリをいきなり作るのと似ていると思います。

普通のベーシックな操作は犠牲にして、何かに特化することになるので、スパイス程度の位置づけでは、あとあと普通のUIによるアクセス方法が必要になるのは当然とも言えます。

ここまで考えると、Twitterのように様々なアプリでサービスにアクセスするような場合でなければ、つまり、例えば自社のサービスにアクセスできるアプリは自社のアプリのみというような場合は、まずは普通のUIを作ることが大事だということになります。

スパイスかメインディッシュか?

さてTwitterのような場合以外で「何か売りになるUIを!」からスタートしても問題ないケースはあるのでしょうか?あるとすればそれはTwitterのように大きなサービスではないけれど、メモや映像などすでに広くサービスがある場合で、それらのサービスとの住み分けを狙うときかもしれません。

しかし、これはある点に注意しておく必要があります。

住み分けを狙うということなので、「何か売りになるUIを!」ということがプロジェクトのスパイスではなくメインディッシュになるということを意味しますので、そのつもりでスタートすることが必要になってくると思います。

まずは、UIの設計のスタート地点で、どのタイプの乗り物を選択しレースをスタートさせるか、させようとしているかを考えると良さそうです。