こんにちは。Social Designチームです。UIデザイナーは様々な職種の方と仕事をしますが、特に強い関りがあるのは、企画者と開発者です。その中でも開発者と一緒に仕事をする上で、デザイナーとして気を付けるべき点を共有したいと思います。

1．フォント

デザイナーであれば綺麗なフォントでかっこよくデザインしたいと考えると思いますが、実はiOSとAndroidで使われる基本のフォントがあります。 この基本フォント以外のカスタムフォントを使用すると、レンダリングとロードに時間がかかり、代替言語の非対応やデザイン的な違和感が生じます。 またライセンスの心配もありますよね。 このような問題点を抱えてでも使用しなければならない理由はありますでしょうか。 カスタムフォントを使うことは本当に簡単なことではありません。性能に無理がない程度でポイントになる部分にのみ使えたら良さそうですね！

2．黒色のようで黒色ではないカラーの使用

多くのデザイナーが、黒のように見える濃い灰色や白のように見える薄い灰色でデザインをします。 それが間違っているというわけではありませんが、そのようなデザインをする場合は、必ずhex codeを開発者に伝えなければなりません。開発者の目で見た時に黒のように見えるため、デザイナーが意図した色合いに開発がされない場合があります。その為、あえて重要な意図がないのであれば、黒色の系列は#000000を白色の系列は#ffffffにするのがスムーズだと思います。

3．影、ぼかしの使用

デザインをする際に影を使う場合がありますが、過度に使用すると様々な問題が発生します。オブジェクト毎にマージンや並び替えがずれる為、なるべくなら影の使用はしない方が良いです。デザインをする際に簡単に入れられる美しい効果が、開発においては大きな問題になる可能性があります。したがって、審美的な部分だけを考えてデザインすることはとても危険な行動となります。

4．ルールのあるデザイン

初心者デザイナーが多くするミスでもありますが、それはデザインにルールがないということです。ページ毎にマージン、フォントサイズ、色を無作為に使用する場合がありますが、こうした場合デザインに均衡感がないばかりか、開発者も開発する際に無作為に開発することになります。 その為、デザインガイドを握り、そのルールを守りながらデザインをしなければなりません。 そのようにデザインをすれば、全体的なデザインも統一され、バランスのとれた良いデザインが生まれます。

5．レスポンシブデザインの考慮

最近は画面サイズが数十個、数百個を超える時代です。 デザイナーとしてこのすべての画面をデザインすることは不可能です。 しかし、レスポンシブデザインを考慮することはできます。 レスポンシブデザインを考慮するということは、スクリーンのサイズが増減したとしても、カスタムコーディングの必要なしにデザインのレイアウトの反応が可能なデザインのことです。 デザインをする際に、カスタムコーディングが必要な部分を最大限自制し、必要な部分でのみ適切に使用すれば、プロのデザイナーのように見えると思います。

以上、開発者と協業するためのUIデザインについてお話ししましたが、実際は今回ご紹介した5つの他にも非常に多くの点に注意してUIデザインをしなければなりません。 それでも、今日お話しした5つの方法を参考にしてデザインをすれば、開発者にとって一緒に働きたいデザイナーになれると思います。

現在クリエイティブセンターでは、UIデザイナーを募集しています。詳細は以下よりご覧ください。