見出し画像

オイシックスのデザイナーが意識しているデザインのポイントや進め方をまとめてみた

オンラインでUIUXやグラフィックなどのデザインを学べるコミュニティサービス「Cocoda!」をつくっているココディーです。

近ごろ、デザイナーとして働く方から
「他社のデザイナーは、どうやってデザインをしているんだろう...?」
という相談をよく受けます。

たしかに、チームの中にデザイナーが自分しかいない環境や、身近に自分よりレベルの高いデザイナーがいない環境で、「自分のデザインをもっとよくするにはどうすればいいのか」と悩むことはたくさんありそうだと思います。


そんな中、オイシックス・ラ・大地さんでデザイナーをしているおふたりから「デザイナーが意識しているデザインのポイントや進め方」をお聞きする機会があったので、noteにまとめさせてもらいました。

・上流のデザイン工程まで任されるようになってきたが上手く進められない
・他の会社や業界のデザイナーがどのように仕事しているのか知りたい
・デザイナーとして1人前になるまでの道のりが知りたい
(その中でも特に、食や生活領域に関わるサービスのデザインを行なっている方)

このような状況の方に、すこしでも役に立てれば、と思います。
もしよろしければ、ぜひ読んでみてくださいね。(意見や感想をnoteのコメント・Twitterなどで聞けると嬉しいです!)

アートディレクター戸田さんに聞いた「食のグラフィックデザイン」のポイント

画像11

戸田俊作さん
オイシックス・ラ・大地のアートディレクター / グラフィックデザイナー。2008年に多摩美術大学グラフィックデザイン学科を卒業した後、広告制作を経て2017年にオイシックス(現オイシックス・ラ・大地)入社。 現在は、OisixECの売場全般のWebや紙のアートディレクションとデザインを兼務されています。

1. このグラフィックで訴求したいものは何か?を明確にしてデザインする

「訴求内容に合わせてグラフィックを変える」という考え方がグラフィックデザインにおいては重要です。

考えやすくするために、「生食パンを訴求するグラフィック」という仕事を例にしてみます。

「しっとりモチモチ!!」という訴求を求められていたとすると、どのようなグラフィックにするべきでしょうか。

戸田さんがデザインしたのはこちらのようなグラフィックでした。

画像11

手でダイナミックに割った一斤のパンにフォーカスすることで、パンの質感や柔らかさを直感的に印象づけることができます。

しかし、これが例えば「徹底的に厳選した原材料」という事を訴求したかった場合どうすれば良いでしょうか?

戸田さんがデザインしたのは以下のようなグラフィックでした。

画像10

パンの周りにバターなどの原材料を並べることで、「このパンはこだわった原材料で丁寧に作られている」ことを印象づけていますね。

このように、パン1つでもどのような写真と言葉を使えば伝えたい事が一番伝わりやすいかを考え、臨機応変にグラフィックを作れる事が重要です。

2. 構成の解像度を上げるためのリサーチを重ねる

訴求とグラフィックをつなげるためには、扱っているものをどのように見せると意図した形で伝わるか?をリサーチしていくことが必要です。

例えば、ヴァイスヴルストというドイツのソーセージを扱ったグラフィックをつくることになった際に、戸田さんはまず日本でのヴァイスヴルストの認知や、現地ドイツでの調理方法を調べていきました。

その中で、「日本の人はヴァイスヴルストがどんな食べ物で、どう調理すればいいか分からない」ということや、「現地では、朝から昼にかけて、ビールやプレッツェルと一緒に楽しむ食べ物である」ということを知ります。

そこから、本場での食事風景を印象づける為に、ビールやプレッツェルを添えたり、朝の日差し感のあるライティングを採用してブランチ時の優雅な食卓を演出するなど工夫を行い、最終的に以下のようなビジュアルに落とし込みました。

画像7

画像8

訴求によって写真を変えるだけでなく、どのように訴求すれば良いか?どのような表現方法があるのか?を、デザインするものの意味まで考えてリサーチを重ねることで、納得感のあるグラフィックをデザイン出来ます。

3. 訴求したいものを確実に届け切り、売上をつくる

グラフィックデザインは、ぱっと見良さそうでも、届け切ることが出来ずに売上に繋がらなければ意味がありません。

例えば、戸田さんが取り組んだデザインの1つに、「お月見まんじゅう」があります。

オイシックスでは、2017年の段階で、お月見まんじゅうを以下のようなデザインで販売されていました。

画像9

ぱっと見、綺麗に整ったデザインなのですが、この年の販売個数は500個の販売目標に対して147個と、伸び悩んでいます。

それに対して、2018年のお月見まんじゅうのデザインは、以下のようなものでした。

画像10

訴求として「大人が子どもと一緒に楽しめる」というところを意識し、お月見まんじゅう自体にも目や耳を付ける、装飾を追加する、などの工夫をしています。

画像11

また、それだけでなく、どのように楽しめばいいのか確実にイメージが湧くように、「OisixのECサイト全体で2018年の十五夜を宣伝」「子どもと親が一緒にお月見まんじゅうセットを作っているビジュアルをつくる」など、見る人との接点全てで訴求をコントロールしています。

そうすることで、この年の5000個のお月見まんじゅうは、1週間で完売し、前年比33倍を達成しています。

このように、何となく良さそうなグラフィックをつくる、のではなく、訴求に合わせたグラフィックをつくり、さらにそれを確実に消費者に届けるために展開させる、ということがグラフィックデザイナーには求められると思います。

UIデザイナー福山さんに聞いた「食のUIデザイン」のポイント

画像11

福山遊果さん
多摩美術大学情報デザイン学科を卒業後、ソフトウェア会社でのUI/UXデザインを経て、2012年にオイシックス(現オイシックス・ラ・大地)入社。現在、WEB、アプリサービスのUIデザインを担当されています。好きな食材は「はちみつパイナップル」とのこと。

1. 利用されるシーンを的確に捉えたサービスづくりを行う

UIデザイン、特に生活領域におけるUIデザインでは、対象がサービスを使う時にどのようなシーンに置かれているのかを色濃く想像することが求められます。

例えば、食の領域でいうと、利用する方は食の課題だけでなく、日常の中で洗濯・料理・子育て、などありとあらゆる課題・困りごとを抱えています。

例えば、レシピのUIをつくるにしても

「そのレシピを見る時は夕方で、となると他にもやらないといけないことが多くある。子供も待っていてくれないかもしれない。」

というようなことを考えると、ただ単にレシピをつくればいい訳でなく、「いかに簡単に見れるか」や「子供と一緒に見れるか」などの工夫が必要になることが分かります。

画像16

このように、本当に利用者にとって刺さるUIデザインには、利用されるシーンを的確に捉えたサービスづくりが求められます。

2. 事業課題とユーザー課題の両方を解決する

サービスデザインをする中で、ユーザーの課題からではなく、事業的な課題が起点になってデザインが始まることがあります。

例えば、食品のECサービスを扱うデザイナーが、マーケティング担当者から、「ブロッコリーの売上を伸ばしたい」という風に言われた時にどのように考えるか考えてみます。

マーケティング担当者:「ブロッコリーが旬なので売上を△△%伸ばしたい」

この時、例えばUIデザイナーが単純に考えて、ブロッコリーを見てもらうことだけを強めたサイトのUIをデザインをしようとするとします。

UIデザイナー:「ひとまず、ブロッコリーへの導線を強めて、多く見られるようにしよう」

しかし、そうしてしまうと「あれ...緑の野菜ばかりでなんだか彩りが良くない...」という不満を抱えてしまい、ブロッコリーの売上は上がっても、結果的に満足度を下げてしまう、というようなことが起こってしまいます。


しかし同じ依頼に対してUIデザイナーが、「ブロッコリーへの導線を強化しながらも、セットで合う食材も意識的に表示を多くしよう」と考えたとします。

UIデザイナー:「導線を強化しながら、セットで合う食材も意識的に多く表示しよう」

そうなると、ユーザーはブロッコリーを購入しつつも、他の旬の食材も購入することが出来て、結果的に栄養や彩り豊かな食卓などの欲しかった体験を手に入れることが出来ます。

ユーザー:「旬のお野菜を見つけられてすごく嬉しい!今日は何をつくろうかな」

つまり、事業的な課題も、ユーザーの本質的に求めている課題と同時に解決するようにしなければ、ユーザーにとっても事業にとっても良いデザインにはならないので、UIデザイナーは常にそこに気を使い、長期的に持続できるサービスデザインをしていく必要があります。

-----------------------------------------------------------

以上、おふたりが意識しているポイントについて、それぞれ3点ずつまとめてみました!最後に3つ、お知らせをしておわります。

【お知らせ❶】話を聞くだけでは勿体無いので、実践的なデザインコンテンツにしてみました!

今回、オイシックス・ラ・大地のお2人に監修してもらい「食のデザイン」を身につけられる実践的なデザインコンテンツをつくり、Cocoda!に掲載させてもらうことができました。
(Cocoda!は無料で利用できるので、本コンテンツも無料で誰でも利用することができます。)

チームの中にデザイナーが自分しかいない環境や、身近に自分よりレベルの高いデザイナーがいない環境で
「自分のデザインをより良くするためには、どうすればいいんだろう...。」と、すこしでも悩むことを減らせるよう、本記事の内容も含め『食の分野』のデザインを例に、手を動かしながら明日使えるデザインのポイントや進め方を身につけることができるとってもすてきなコンテンツになっています。

よければ、ぜひ取り組んでみてくださいね。

▼『食のデザイン』カリキュラムをみてみる!
https://cocoda-design.com/projects/108

画像6


【お知らせ❷】オイシックス・ラ・大地さんがコンテンツを研修に使ってくれることになりました。

コンテンツをつくっていく中で、ありがたいことにオイシックス・ラ・大地さんの社内UIデザイナーに向けた研修カリキュラムとして、ご利用いただけることになりました。

無料でCocoda!のカリキュラムとして取り組めるので、『食』に関連する企業の方はもちろん、若手のデザイナー育成に困っているデザインマネージャー・人事の方は、ぜひ使ってみてください!

▼『食のデザイン』カリキュラムを使ってみる!
https://cocoda-design.com/projects/108


【お知らせ❸】4月2日より、急にリモートワークでの研修・育成を行わなければならなくなった法人に対して、「デザイナー向けオンライン研修支援サービス」の提供を開始しました。

今、社会的な状況からリモートワークの中で研修・育成を行う必要が生まれています。デザイナーも例外なく、そのような状況となっているかと思います。

デザイナー向けの学習カリキュラムをつくり続けているCocoda!として、この状況に対してできることはないかと考え、「デザイナー向けオンライン研修支援サービス」を提供を開始しました。
最短5日以内にデザイン研修を開始することが可能で、サービス設計を中心にデザインの基礎から応用部分までを身に付けてもらえる内容になっています。

また、Cocoda!ならではの工夫として、「チャットで医師に相談できるアプリ」など、実際のスマートフォンアプリのインターフェイス・サービス体験をデザインするテストを実施。グラフィック力・サービス設計力・情報設計力などのデザインスキルを総合的に測ることができる内容になっています。強みや弱みをデザインの実践的なテストによってフィードバックすることや、オンライン上でSlackを活用した研修者が全員入れるコミュニティをつくり、相互学習や同期となるデザイナーをつくることができます。


このような事態ではありますが、少しでも精神的な不安やデザイナーとしてのキャリアの不安を払拭できるよう、日本のデザイナーのために貢献できればと思っています、ご関心のある方は、以下のプレスリリースより詳細をご確認いただければ幸いです!

▼プレスリリースはこちらから
https://prtimes.jp/main/html/rd/p/000000006.000037235.html

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

俺、このサポートをもらえたら、チームのみんなで安安って2000円焼肉を食べにいくんだ、、、、。

💡
279
デザイナーをしているココディーと呼ばれている者です。 デザインに関する気付きや、考えをまとめます。 Twitter:https://twitter.com/co_co_d3

こちらでもピックアップされています

Cocoda!の運営日記
Cocoda!の運営日記
  • 46本

デザイナーになりたい人のためのコミュニティサービスCocoda!の運営が、Cocoda!を作っていく中で学んだ事や、感じた事、について書いた記事をまとめていきます。

コメント (2)
はじめまして!特に、月見団子のエピソードが興味深かったです!
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。