サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

こんにちは。デザイン本部のマルシオです。 
DMMのアートディレクター・<a href="https://www.facebook.com/isao.mitsuoka?fref=ts" target="_blank">光岡いさお</a>が主催する「デザインコンセプト勉強会」。

<img alt="" height="200" src="https://image.dmm-corp.com/25k1gktqy99fnk0p1rr7qnu8hwmd" width="200" />

第4弾となる今回のテーマは、題して「先手必勝!!　調査データを基にデザインをリードする！」。

題材は、2017年11月にリリースされたばかりの新サービス「<a href="https://scratch.dmm.com/" target="_blank">DMMスクラッチ</a>」。 
サービス立ち上げ当初から、担当デザイナーとして携わったデザイン本部の酒井が講師を務めました。

<img alt="" height="300" src="https://image.dmm-corp.com/00brbd9t1dg6jng4wy2rq0a07ksk" width="300" />

0からサービスを立ち上げる際、デザイナーはどんな視点でデザインを完成させるのか？ 
その背景には、デザイナーによる各種調査が存在します。

今回の記事では、デザイナーの視点が活きる「フィールドワーク調査」や「デザイン調査」について、勉強会の内容の一部をご紹介します。

<img alt="" height="500" src="https://image.dmm-corp.com/xkddsiecs9526td37movpct7o4e6" width="800" />

<h3>「フィールドワーク調査」に行ってきた！</h3>

&nbsp;

そもそも「くじ」とはどんなサービスなのか？　どんな人がユーザーになってくれるのか？　オンライン、オフラインを問わず、既に世の中に流通する「くじ」というサービスを知るべく、デザイナー自らが現場に赴いて調査します。

酒井が足を運んだのは、複数のコンビニエンスストア。商品のラインナップや陳列状態、ユーザーがどのようにくじを引くのか、生の情報をチェック。 
「DMMスクラッチ」はオンラインくじなので、コンビニエンスストアのくじと比較した優位性と劣位性を抽出することで、デザインの仮説を立てていきます。

生の調査から導いた仮説

<ul>
	<li>商品を手に取って確認できない&rarr;詳細ページで商品を見せ、サイズや素材なども明記する。</li>
	<li>商品はすぐには手元に届かない&rarr;商品が届く日時の目安を掲載しメールで明確なお届け日をお知らせすることで、補完する。</li>
	<li>店舗販売にはない即時性の高い情報&rarr;SNSと連携し、作成過程や使用感など最新の情報をお届けする。</li>
	<li>店舗販売よりも買う手間が大きい&rarr;限定商品を取り揃えた商品ラインナップ！</li>
</ul>

もちろん、オンラインくじの競合調査も行いました。フィールドワーク調査からデザインの課題やポイントを導き出したら、次はデザイン調査です。

<h3>「デザイン調査」ってなんですか？</h3>

デザイン調査とは、最適な見せ方に辿り着くためのリサーチで、webデザインであればサイトの方向性を決める判断軸になります。

どんなUIならユーザーに受け入れられてもらえるか？

デザインに関するさまざまなデータを調べ、分析し、サービスにもっともふさわしいデザインをつくりあげていきます。

<h3>サイトの「色」ってどう選ぶの？</h3>

<figure class="image"><img alt="" height="247" src="https://image.dmm-corp.com/0a1oj9bj7iv4rtp4kg0pgmjcdslf" width="800" />
<figcaption>Copyright &copy; 2009-2017http://iro-color.com</figcaption>
</figure>

サイトの見せ方を考える時、デザイナーはどうやって「色」を選ぶのか。 
今回の勉強会ではそのロジックが解き明かされました。

ユーザーが「DMMスクラッチ」に抱くイメージとは？

「DMMスクラッチ」と聞いて想像する「色」そのものが与える印象を調べます。

ここで重要になるのがデザインコンセプト。 
「どんなサービスをユーザーに届けたいのか？」という根幹的な考えをもとに、意味のある色選びをしていきます。

DMMスクラッチは、さまざまなジャンルの商品が集って成り立つサービスなので、

<ul>
	<li>タイトルの個性を引き立たせる</li>
	<li>ごちゃごちゃしない</li>
	<li>安心感や落ち着きを感じさせる</li>
	<li>どの商品が当たるかわからない楽しさを表現</li>
</ul>

できる色選びをする必要がありました。

どんな人がどんな色を好きなのか調べる

<figure class="image"><img alt="" height="193" src="https://image.dmm-corp.com/alejmlch7c4hl72pm5e9lqq0aocb" width="800" />
<figcaption>Copyright &copy; 2009-2017http://iro-color.com</figcaption>
</figure>

提供する商品から想定されるターゲットユーザー層の仮説を立て、そのユーザー層に刺さる色を探します。また、そのユーザー層が「色」に対してどんな印象を持っているのかを把握します。 
年代別、性別ごとに、どんな色が好まれているのか、その結果に基づきサイトのメインカラーを決めていきます。

商品タイトルによって年齢・性別が大きく異ることが予想されるため、万人に受け入れられやすい色を選ぶ必要がありました。 
統計データをもとに調査し、「青色」という結論に辿り着きました。

競合サービスはどんな色をを使っているのか調べる 
次は競合調査です。 
類似する他社のサービスはどんな色でデザインされているのか、徹底的に調べ上げます。

サービスサイトはもちろん、ロゴや関連媒体で使われる色まで洗い出したところ、くじというジャンルでは「赤」と「青」が多く使われていました。

キーカラーの検証 
ベースのカラーが決まったところで、次はキーカラーのセレクトを模索しました。キーカラーはサイトのアクセントになる色で、購入ボタンにも使われるため、慎重に選ぶ必要があります。

一般的に、補色やそれに近い色が選ばれる傾向にあるキーカラー。

青色＋赤色、オレンジ色、黄色のサイトを複数比較し、想起しやすいようサイトイメージを作成。彩度や明度の異なるさまざまな青色や黄色を組み合わせ、イメージに落とし込みました。ここでの細かい調整で、検証を重ねていきます。

<h3>こうして決まった「青」と「黄」</h3>

DMMスクラッチのベースカラーは青、キーカラーは黄。 
当たり前ですが、「なんとなく」ではなく、色選び一つとっても背景にはサービスに合わせた根拠があります。

色選びに明確な理由があると、ともにサービスをつくる他のメンバーと認識を合わることができます。

デザイナーが一方的にデザインを提案するのではなく、同じ方向を向いて話し合いながらデザインすることができれば、デザイナーがプロジェクトをリードすることも可能になります。

今回お伝えした色選びの手法はあくまで一部にすぎませんが、デザイナーがさまざまな手法を用いてデザインしていることがお分かりいただけたでしょうか？

次回のデザインコンセプト勉強会のテーマは「UX手法を取り入れたデザイン戦略」。 
レポートをお届けする予定ですので、お楽しみに！

ブランディング

デザイン

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

プラットフォーム開発本部

障がい者

facebook

twitter

DMM TV

DMMブックス

DMM pictures

DMM GAMES

DMMオンクレ

DMMスクラッチ

DMMくじ

DMM Factory

ぷらさぷ ～＋SURPRISE～

DMMオンラインサロン

DMMいろいろレンタル

DMM DVD／CDレンタル

DMM通販

DMMオンラインクリニック

デジタルコミック事業

DMMチャットブースト

DMM英会話

DMM FX

DMMかりゆし水族館

ベルリング

ハッシャダイソーシャル

ヤンキーインターン

シント=トロイデンVV

DMM 地方創生

DMM.make 3Dプリント

DMM.make PRODUCTS

Seamoon Protcol by DMM Crypto

DMMバヌーシー

DMM EV ON

DMM WEBCAMP

DMMぱちタウン

DMM競輪

Waitinglist

Algoage

DMMポイントクラブ

社会課題

エンターテインメント

動画

電子書籍

アニメ

ゲーム

アプリゲーム

コミュニティ

オンラインサロン

PCゲーム

通販

レンタル

オンラインイベント

ビジネスソリューション

教育

英会話

水族館

ハードウェア・プロダクト

救急車両

消防車両

モノづくり施設

サッカー

スポーツ

地方創生

VR体験

Web3

生成AI

研究開発

アプリ

ブロックチェーン

プラットフォーム

横断開発

社会インフラ

アミューズメント

ダイバーシティ

同人

Webエンジニア

フロントエンドエンジニア

バックエンドエンジニア

サーバーサイドエンジニア

モバイルエンジニア

SRE・インフラエンジニア

情報システム

データ・AI・機械学習エンジニア

エンジニアリングマネージャー

テックリード

プロジェクトマネージャー・ディレクター

プロダクトマネージャー

事業開発・経営企画

営業

マーケティング・プロモーション

企画・プロデュース

ゲーム企画・プロデュース

コンテンツ制作・編集

カスタマーサポート・運営

データ分析・ストラテジー

UI・UXデザイナー

Webデザイナー

2Dデザイナー・イラストレーター

デザインマネージャー

デザインリード

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

シェア

関連する求人

関連する記事