DMM.comの、一番深くておもしろいトコロ。

【勉強会情報】デザインコンセプト勉強会〜デザイナーの「色」の選び方、教えます〜

【勉強会情報】デザインコンセプト勉強会〜デザイナーの「色」の選び方、教えます〜

f:id:dmmlabotech:20171228175513p:plain

こんにちは。デザイン本部のマルシオです。
DMMのアートディレクター・光岡いさおが主催する「デザインコンセプト勉強会」。
光岡いさお

第4弾となる今回のテーマは、題して「先手必勝!! 調査データを基にデザインをリードする!」。

題材は、2017年11月にリリースされたばかりの新サービス「DMMスクラッチ」。
サービス立ち上げ当初から、担当デザイナーとして携わったデザイン本部の酒井が講師を務めました。

酒井さん似顔絵

0からサービスを立ち上げる際、デザイナーはどんな視点でデザインを完成させるのか?
その背景には、デザイナーによる各種調査が存在します。

今回の記事では、デザイナーの視点が活きる「フィールドワーク調査」や「デザイン調査」について、勉強会の内容の一部をご紹介します。

f:id:dmmlabotech:20171228181130p:plain

「フィールドワーク調査」に行ってきた!

そもそも「くじ」とはどんなサービスなのか? どんな人がユーザーになってくれるのか? オンライン、オフラインを問わず、既に世の中に流通する「くじ」というサービスを知るべく、デザイナー自らが現場に赴いて調査します。

酒井が足を運んだのは、複数のコンビニエンスストア。商品のラインナップや陳列状態、ユーザーがどのようにくじを引くのか、生の情報をチェック。
「DMMスクラッチ」はオンラインくじなので、コンビニエンスストアのくじと比較した優位性と劣位性を抽出することで、デザインの仮説を立てていきます。

生の調査から導いた仮説

  • 商品を手に取って確認できない→詳細ページで商品を見せ、サイズや素材なども明記する。
  • 商品はすぐには手元に届かない→商品が届く日時の目安を掲載しメールで明確なお届け日をお知らせすることで、補完する。
  • 店舗販売にはない即時性の高い情報→SNSと連携し、作成過程や使用感など最新の情報をお届けする。
  • 店舗販売よりも買う手間が大きい→限定商品を取り揃えた商品ラインナップ!

もちろん、オンラインくじの競合調査も行いました。フィールドワーク調査からデザインの課題やポイントを導き出したら、次はデザイン調査です。

「デザイン調査」ってなんですか?

デザイン調査とは、最適な見せ方に辿り着くためのリサーチで、webデザインであればサイトの方向性を決める判断軸になります。

どんなUIならユーザーに受け入れられてもらえるか?

デザインに関するさまざまなデータを調べ、分析し、サービスにもっともふさわしいデザインをつくりあげていきます。

サイトの「色」ってどう選ぶの?

f:id:dmmlabotech:20171228181312p:plain
Copyright © 2009-2017http://iro-color.com

サイトの見せ方を考える時、デザイナーはどうやって「色」を選ぶのか。
今回の勉強会ではそのロジックが解き明かされました。

ユーザーが「DMMスクラッチ」に抱くイメージとは?

「DMMスクラッチ」と聞いて想像する「色」そのものが与える印象を調べます。

ここで重要になるのがデザインコンセプト。
「どんなサービスをユーザーに届けたいのか?」という根幹的な考えをもとに、意味のある色選びをしていきます。

DMMスクラッチは、さまざまなジャンルの商品が集って成り立つサービスなので、

  • タイトルの個性を引き立たせる
  • ごちゃごちゃしない
  • 安心感や落ち着きを感じさせる
  • どの商品が当たるかわからない楽しさを表現

できる色選びをする必要がありました。

どんな人がどんな色を好きなのか調べる

f:id:dmmlabotech:20171228181336p:plain
Copyright © 2009-2017http://iro-color.com

提供する商品から想定されるターゲットユーザー層の仮説を立て、そのユーザー層に刺さる色を探します。また、そのユーザー層が「色」に対してどんな印象を持っているのかを把握します。
年代別、性別ごとに、どんな色が好まれているのか、その結果に基づきサイトのメインカラーを決めていきます。

商品タイトルによって年齢・性別が大きく異ることが予想されるため、万人に受け入れられやすい色を選ぶ必要がありました。
統計データをもとに調査し、「青色」という結論に辿り着きました。

競合サービスはどんな色をを使っているのか調べる

次は競合調査です。
類似する他社のサービスはどんな色でデザインされているのか、徹底的に調べ上げます。

サービスサイトはもちろん、ロゴや関連媒体で使われる色まで洗い出したところ、くじというジャンルでは「赤」と「青」が多く使われていました。

キーカラーの検証

ベースのカラーが決まったところで、次はキーカラーのセレクトを模索しました。キーカラーはサイトのアクセントになる色で、購入ボタンにも使われるため、慎重に選ぶ必要があります。

一般的に、補色やそれに近い色が選ばれる傾向にあるキーカラー。

青色+赤色、オレンジ色、黄色のサイトを複数比較し、想起しやすいようサイトイメージを作成。彩度や明度の異なるさまざまな青色や黄色を組み合わせ、イメージに落とし込みました。ここでの細かい調整で、検証を重ねていきます。

こうして決まった「青」と「黄」

DMMスクラッチのベースカラーは青、キーカラーは黄。
当たり前ですが、「なんとなく」ではなく、色選び一つとっても背景にはサービスに合わせた根拠があります。

色選びに明確な理由があると、ともにサービスをつくる他のメンバーと認識を合わることができます。

デザイナーが一方的にデザインを提案するのではなく、同じ方向を向いて話し合いながらデザインすることができれば、デザイナーがプロジェクトをリードすることも可能になります。

今回お伝えした色選びの手法はあくまで一部にすぎませんが、デザイナーがさまざまな手法を用いてデザインしていることがお分かりいただけたでしょうか?

次回のデザインコンセプト勉強会のテーマは「UX手法を取り入れたデザイン戦略」。
レポートをお届けする予定ですので、お楽しみに!