Oisix.daichi Creator's Blog(オイシックスドット大地クリエイターズブログ))

オイシックスドット大地株式会社のエンジニア・デザイナーが執筆している公式ブログです。

good design company代表の水野学さんへのインタビュー記事を公開しました!

はじめまして。CX室の池田です。 Oisixのフロントエンドを担当しています。

今回は、オイシックスドット大地の採用サイトに公開された、水野学さん(good design company代表/弊社クリエイティブディレクター)へのインタビュー記事「水野学さんに聞きました」について紹介させていただきます。


目次

水野学さんのご紹介

デザイナーであれば一度は水野学さんの名前を耳にしたことがあるのではないでしょうか?
デザイナーでなくても、手がけたブランド名を聞けば、知っているものがいくつもあるのではないかと思います。

f:id:oitech:20171004100656j:plain

水野学

クリエイティブディレクター/クリエイティブコンサルタント/good design company 代表/

1972年 東京生まれ。1996年 多摩美術大学グラフィックデザイン科卒業。1998年 good design company 設立。ゼロからのブランドづくりをはじめ、ロゴ制作、商品企画、パッケージデザイン、インテリアデザイン、コンサルティングまでをトータルに手がける。

著作に『センスは知識からはじまる』(朝日新聞出版)、『「売る」から「売れる」へ。水野学のブランディングデザイン講義』(誠文堂新光社)ほか。

より詳しいプロフィールが知りたいという方は、水野学さんが代表を務めるgood design companyのサイトをご覧ください。

gooddesigncompany.com

Oisix.daichiのクリエイティブディレクターとしての水野学さん

水野学さんには2016年8月からOisix.daichiのクリエイティブディレクターをやっていただいています。
就任のニュースが発表された日は、会社内外から驚きと喜びの声があがったことを覚えています。

Oisixのロゴも水野学さんに作成いただきました

Oisixのサービスのロゴ(文字)マーク及びシンボル(絵)マークも水野学さんに作成いただいたものです。 f:id:oitech:20171004101005p:plain
f:id:oitech:20171004101008p:plain
発表当時はオイシックス株式会社の会社ロゴとして作成いただいたものでしたが、大地を守る会との合併後も、引き続きOisixのサービスロゴとして使用しています

弊社やデザインのことについて聞きました

f:id:oitech:20171004100659j:plain

インタビューでは、

  • 弊社のクリエイティブディレクターを引き受けるに至った経緯は?
  • 弊社のデザインについてどう考えているか?
  • 今後デザイナーとはどうあるべきか?

などの質問に答えていただいています。

気になる内容は、是非採用サイトをご一読ください!

recruit.oisixdotdaichi.co.jp

美味しい野菜や果物を食べながらのMeetup「旬野菜を食べながら、デザインの話をしませんか?」を開催しました

初めまして。サービス進化室の高橋です。

KitOisixやママ向け用のサービスの改善などを担当しています。

今回の記事では、9/23(土)に開催した、
美味しい野菜や果物を食べつつOisixデザイナーと話せるMeetup
「旬野菜を食べながら、デザインの話をしませんか?」

について紹介をさせていただきます。

f:id:oitech:20170926185949j:plain


目次

当日の流れ

当日は6名の方に参加していただき、以下のような流れで行われました。

  • Oisixのお野菜・果物の試食タイム
  • 発表1「オイシックスドット大地株式会社の紹介」
  • 発表2「制作会社出身のデザイナーがインハウスデザイナーになってよかったこと、わるかったこと」
  • 発表3「Oisixデザイナーの働き方・働く環境~ アウトレット売り場の改善事例から ~」
  • 懇談会

Oisixのお野菜・果物の試食タイム

簡単な自己紹介が終わったところで、まずは、試食タイム。
当日のメニューは、「トロなすの塩焼き」「生らっかせい」「あめトマトと、ミニトマト(食べ比べ)」「町田さんの巨峰」。

f:id:oitech:20170926185952j:plain f:id:oitech:20170926185954j:plain

「なすがトロっとしてる~」
「やわらかい落花生って初めてたべました!」
「こっちのトマトが方が断然甘い!」
など感想をいただき、盛り上がりをみせたところで、人材企画室の小川より、「オイシックスドット大地株式会社の紹介」をはじめました。

発表1「オイシックスドット大地株式会社の紹介」

f:id:oitech:20170926185956j:plain

「今は男女比半々ですが、創業時は料理もあまり作れない男性ばかりのベンチャーでした。」
などのミートアップでしか話さない裏話を交えながら、会社紹介をしました。

発表2「制作会社出身のデザイナーがインハウスデザイナーになってよかったこと、わるかったこと」

つづいてデザイナー五十嵐からは、
「制作会社出身のデザイナーがインハウスデザイナーになってよかったこと、わるかったこと」
について発表。

f:id:oitech:20170926185958j:plain

クライアントに向いて徹底的にヴィジュアルの品質を上げるの制作会社の仕事と、自社のお客様に向いて、事業の成長のための仕事をする違いについて説明をしました。
ちなみに、試食で体重が増えたことが悪かったことの一つだそうです(笑)

発表3「Oisixデザイナーの働き方・働く環境~ アウトレット売り場の改善事例から ~」

次は私、高橋から
「Oisixデザイナーの働き方・働く環境~ アウトレット売り場の改善事例から ~」
という題目で発表させて頂きました。

f:id:oitech:20170926190000j:plain f:id:oitech:20170926190001j:plain

売上やCVRなどの定量数値と、お客様にヒアリングした定性情報などのFactをつかんで、仮説、改善実行している例を紹介しました。

懇談会

そして最後は、参加者方々や、Oisixデザイナーとの懇談会。

f:id:oitech:20170926190004j:plain f:id:oitech:20170926190006j:plain

再登場した、焼きたての「トロなす塩焼き」をつまみつつ盛り上がり、あっというまの約2時間弱のミートアップは無事に終了しました。

弊社では、10月下旬にもミートアップイベントを予定しています。
具体的な内容などが決まりましたら、本ブログや、Wantedly、TECH PLAYなどの媒体でもお知らせさせていただきますので、ご興味のある方は、お気軽にご参加ください。

おいしい野菜・果物とともにお待ちしています~。

美味しい食卓を支える技術 〜OisixのAndroidアプリ開発〜

Androidエンジニアの @shanonim です。今年7月に弊社の定期宅配サービス「おいしっくすくらぶ」のAndroidアプリをリリースしました。

f:id:oitech:20170822224109p:plain:w600 play.google.com

今回はその開発の裏側を紹介したいと思います。

目次

定期宅配サービス「おいしっくすくらぶ」について

Oisixは食品販売のECサイトを運営しています。安心安全で美味しい商品を購入できることが特徴です。会員向けサービス「おいしっくすくらぶ」に入会すると、商品が毎週もしくは隔週で定期宅配されます。
具体的には、以下のような流れで買い物を行います。

  1. 始めにOisixから「定期ボックス」と呼ばれるデフォルトのお届けセットがレコメンドされます。💁
    f:id:oitech:20170831142130p:plain:w200

  2. 定期ボックスに入っている商品は自由に編集することができます。欲しい商品があれば商品一覧ページから追加します。🍅
    f:id:oitech:20170831142207p:plain:w200

  3. 買いたい商品がすべて決まったら、定期ボックスを確定します。👌
    f:id:oitech:20170831142228p:plain:w200

  4. 締切日になったら定期ボックスに入っている商品が購入され、3〜5日で自宅に届きます。🚚 f:id:oitech:20170831225240j:plain

Androidアプリ開発に至った背景

「おいしっくすくらぶ」は2000年のローンチ以降、長らくPC版のWebサイトがメインで運営されてきました。

f:id:oitech:20170901160404p:plain

ところが近年、PCではなくスマホを利用するユーザ層が増加し、それに伴ってWebより使いやすくパフォーマンスの高いスマホアプリが求められるようになりました。

OisixのアプリはiOS版が2015年にリリースされましたが、Android版は長らくリリースされていませんでした。ユーザ層の拡大とUX改善を考えた場合、やはりAndroid版も必要だろうということになり、本格的に開発を進めた形です。

OisixのAndroidアプリ開発

時流を考えるとだいぶ遅くなってしまったAndroidアプリ開発ですが、使っている技術と開発チームの体制に関してはモダンな環境を追求しています。

Kotlinの採用

OisixのAndroidアプリはKotlinで開発されています。 f:id:oitech:20170901160801p:plain

Kotlinの採用に至った理由をいくつか挙げてみます。

1. 優れた言語仕様

Kotlinは安全でわかりやすいコードを書くための仕組みを言語仕様として備えています。例えば、以下のようなメリットを享受できます。

  • Null Safetyなコードによって保守性が向上する
  • ボイラープレートが少ないので可読性が向上する


個人的な感覚ですが、Android Javaと比べてシンプルで分かりやすいコードが書けるようになったと感じます。

2. 導入事例が増えている

「Kotlin導入してみたけど知見が少なくて開発スピードが上がらない」という懸念は、ここ1年でかなり解消してきたように思います。開発者コミュニティも活発で、最近は勉強会も多く開催されています。
また、先日のGoogle I/OでAndroidアプリ開発言語に正式採用されたことを受けて、次世代のデファクトスタンダードになる可能性が高まりました。今後も導入事例が増加することになるでしょう。

3. Javaとの100%互換

Kotlinの開発元であるJetBrains社が"100% interoperable with Javaと宣言している通り、KotlinはJavaと相互運用可能です。Javaで記述されたライブラリとも問題なく連携できるため、安心して開発を進めることができました。IDE(Android Studio)もJava→Kotlinのconvertをしっかりサポートしてくれます。(Kotlinの文法に慣れ切らない内は「一旦Javaで書いて"Convert Java File to Kotlin File"する」ということを度々やっていました。ばっちり変換してくれます。😉)

開発チーム

f:id:oitech:20170831161103j:plain

OisixのAndroidアプリは、

  • メインエンジニア: 2名
  • テックリード(iOS兼任): 1名
  • ディレクター
  • UXデザイナー

の計5名で開発を行っています。アプリ内で必要になるリソースや配色設計などは社内のデザイナーチームに依頼していますが、基本的にはこの5名がスケジュールとチケットの管理、開発、リリース作業を行います。

開発ツール

メンバー自身が使いたいツールを提案して使っています。

  • コミュニケーション
    • Slack
    • Hangout
  • バージョン管理・プロジェクト管理
    • GitHub
  • デザイン管理
    • Sketch
    • Zeplin
  • KPT
    • Trello
  • レビューモニタリング
    • AppFollow

開発プロセス

“小さなチームだからこそできる素早い意思決定”を活かして、できるだけ早くリリースサイクルを回すことを心がけています。7月のファーストリリース以降、週1回のペースでアップデートを続けています。

日々の開発プロセスは、大きく4つのアクションに分かれています。

1. issueの起票

GitHubでissueを管理しており、随時カテゴリに応じたlabelを付与して起票します。 f:id:oitech:20170831231545p:plain

必要な機能開発はfeature、改善系はenhancement、実験でとりあえずやってみる系はexperimentalなど、細かくカテゴリを分けています。
基本的にチームの誰でも起票可能で、気づいたことはとにかく雑でもいいから起票することを推奨しています。

2. milestoneの設定

起票したissueをリリースサイクル毎に作ったmilestoneに振り分けます。
下記画像を例に説明すると、来週(9/4週)は「release_1.10」、翌週(9/11週)は「release_1.11」という形で週次リリース毎にmilestoneが分かれています。(実施未定チケットは、release_1.xとしています。) f:id:oitech:20170831170432p:plain

3. 開発

issue番号に対応したbranchを切って、コーディングを行います。develop/masterブランチへのmergeは、必ずチームメンバー1人以上のレビューが必要です。merge時にはLGTM画像の添付が推奨されます。😋 f:id:oitech:20170831232354p:plain

4. 振り返り

デイリーでmilestoneを見ながら振り返りmtgを行います。「誰がどのチケットをいつまでに対応するか」を常にチーム全員が把握しているため、助けが必要な場合は相談しやすく、スケジュールのブレも早期にキャッチアップすることができます。

開発を加速させるための施策

継続的にサービスをグロースさせるために「開発戦略」と「スキルアップ戦略」2つの軸で施策を行っています。

【開発戦略】技術的負債の返済

機能開発の速度を上げるために、隔週でリファクタリングだけを行う『CleanDay』を設定しています。日々「あれをこう書き換えたい」「このライブラリ導入して効率化したい」などありますが、その都度対応していたら優先度の高い実装が遅延するリスクがあります。なので、あらかじめリファクタリングしたいissueはまとめておいて、決めた日にガッと一気に消化するようにしました。

f:id:oitech:20170901152941j:plain
これによって、開発速度とクオリティの両方を改善するサイクルを作ることができました。

【スキルアップ戦略】技術顧問の招聘

開発メンバーが少人数で、かつスキル的に成熟していない場合、ベストプラクティスが分からず実装が迷走してしまうことがあります。
根本的な解決はメンバーの採用と教育だと思いますが、短期的には知見が豊富な外部エンジニアと協力する方法もあるのではと考え、7月から @kgmyshin さんに技術顧問をお願いしています。アプリの設計指針や開発プロセスに関して多くのアドバイスを頂き、開発レベルが大幅に向上しました。
また、外部のエースエンジニアと一緒に仕事できる機会を通してチームの士気も向上しています。💪💪

まとめ

「食」と「エンジニアリング」という言葉だけ見るとお互い遠い分野ですが、Oisixの目指す食卓を実現するためにエンジニアリングは不可欠です。どれだけ安心安全で美味しい商品を用意しても、心地よい購買体験を提供できなければそもそも買ってもらえないからです。

Oisixのエンジニアは、これまでも食に対する圧倒的当事者意識を原動力にサービスを創り上げてきました。(食への興味は人それぞれですが、私は食べることと飲むことが大好きです。😋🍖🐟🍅🍺)
今のアプリチームも同様に、日々改善を繰り返して少しずつグロースすることができています。まだまだ未熟なチームとプロダクトではありますが、これからも美味しい食卓を作っていけるように加速していきたいと思います。

食のことが好きで、アプリ開発に興味のあるエンジニアの方はぜひ一度遊びに来てみませんか。:) www.wantedly.com

結果が出るまで繰り返し!お客さまに寄り添ったUI改善事例

初めまして。サービス進化室の風太です。
サービス進化室は、Oisixにおいてヒットする兆しのある新しいサービスの開発や、成長中の既存サービスを更に進化させるための活動を行っている攻めのチームです。

私は主に「KitOisixサービス」の改善・進化における UIデザイン~実装を担当しています。

今回の記事では、「KitOisix販売ページのUI改善」を行った際の改善の仮説と、 デザイナーとしてやったことについて、ご紹介できればと思います。

【目次】

「KitOisix」とは?

KitOisixというのは、必要な食材を必要な分だけ集めた、20分で主菜と副菜が作れてしまうOisixオリジナルの食材セットです。
レシピが付いている上に、5種類以上の野菜が入っていてバランスもばっちり!ということでたくさんの方にご好評をいただいています。

f:id:oitech:20170804134250j:plain

「料理をする」という行為に対する概念を変えたい

今回のUI改善では、KitOisixをご利用いただいているお客さまの中でも
「毎日献立を考えるのが大変…」
「料理はできるだけ短い時間で終わらせたい!」
と思っているお客さまをターゲットに絞り、改善を実施しました。

献立を考えるのが億劫で、料理をあまり得意とされていない方の料理に対する概念として
「レシピサイトでレシピを探す」
→「スーパーに買い物に行く」
→「素材から作る」
という一つの流れがあるかと思います。

これを、
「KitOisixで料理をする(レシピ~料理まで1つでまかなう)」
という概念に変えることを今回の目的としています。

f:id:oitech:20170804134253j:plain

UI改善のためにやった4つのこと

今回デザイナーとしてやったことを大まかに分けると、以下の4つになります。

  1. ユーザー行動の仮説を立て、UIのモックをいくつか作成する
  2. モックをお客さまに見てもらいながらヒアリングをする
  3. ヒアリング結果からモックの改修をし、更にヒアリングを重ねて方向性を固めていく
  4. 完成したUIを実験的に一部のお客さまに公開し、結果を確認しながらPDCAを回していく
  5. PDCA実例

順を追って詳しく見ていけたらと思います!

1.ユーザー行動の仮説を立て、UIのモックをいくつか作成する

先ほどご紹介した目的から、いきなりUIを考えるのは難しいためユーザー行動の仮説を立て、モックを作ってみます。

f:id:oitech:20170804134256j:plain

まずは、目的に沿って「レシピやメニューを探しやすいUIってどんなだろう…」ということを考えつつ、最近のトレンドを探ります。

例えば、最近の若い女性はInstagramでおいしそうな写真を見てからお店に行くという傾向があります。

KitOisixでも「ハッシュタグ」を付けて「とにかく写真をおいしそうに見せる」という今のユーザー行動にあった要素を取り入れることによって、初めて目的が達成できるのではないかと考えました。

その仮説に基づき、

  • どうすれば写真がおいしそうに見えるようになるか
  • ハッシュタグはどうすれば使いやすいのか

に気を付けてUIのアイデアをいくつかモックに起こします。

2.モックをお客さまに見てもらいながらヒアリングをする

今までにやったことのない新しいチャレンジをするのでいきなりページの実装はしません。

まずは作ったモックをお客さまに操作してもらいながらヒアリングをしてご意見をいただき、立てた仮説と実際のお客さまにはどれだけ行動に違いがあるのか、検証をしてUIの方向性を探ります。

Oisixでは定量・定性、両方のデータをもとに改善を行っていく文化があります。

定性データという意味では、ご来社・ご自宅訪問・電話でインタビューやユーザーテストをする機会が多くあり、Oisixではそれを総称してお客さまインタビューと呼んでいます。

6月と7月の2ヶ月だけでも、全社で127件のお客さまインタビューが実施されています。

f:id:oitech:20170804134300j:plain

3.ヒアリング結果からモックの改修をし、更にヒアリングを重ねて方向性を固めていく

1回のヒアリングで分かることもありますが、分からないことも多く、 改修とヒアリングを繰り返しながらUIの完成度を高めていきます。

今回は写真を大きくしておいしそうに見せるようにし、お客さまヒアリングで反応の良かったハッシュタグを優先して写真の上に掲載するUIに決めました。

f:id:oitech:20170809134654j:plain

4.完成したUIを一部のお客さまに公開し、結果を確認しながらPDCAを回していく

そうしてできたUIは、実験的に一部のお客さまに公開します。

f:id:oitech:20170804134307j:plain

大々的にリニューアルして売上が飛躍的に伸びれば万々歳なのですが、なかなか世の中はそう上手くできておらず…

それでも、実験で公開したページから得られる売上やトラフィックの情報からもわかることはたくさんあり、まだまだ改善の余地が見えてきます。

5.PDCAの実例

例えば当初の仮説であり、モックのヒアリングでも「違和感はない」という意見が多かった「ハッシュタグ検索」が蓋をあけてみるとあまり押されておらず…。

実は、KitOisixのお客さまはハッシュタグ検索ができることよりもページの全体感が把握できる「カテゴリのインデックス」を求めていたことが、クリック率を旧ページと見比べることにより判明し、すぐに修正をしました。

f:id:oitech:20170809134657j:plain

このようにページをアップした後も実験を継続していき、現在もPDCAを回しながら改善にあたっています。

お客さまからの反応がすぐに分かることがOisixの魅力

モック段階でのヒアリングや、ページリリース後のアンケートで写真が大きくなったことによっておいしそうに見えるようになった!という嬉しいお声を多くいただいています。

お客さまの声を直に聞けるのと、自分が作ったデザインがどれだけ売上に影響しているのかがダイレクトに分かり、それらをまた自分のデザインに生かす機会がたくさんあることがOisixで働く魅力の一つだと思っています。

これからもお客さまのことを第一に考えた上で、良い結果が出せるページをもっとたくさん作れるよう日々成長してまいりたいと思います。

旬野菜を食べながら、デザインの話をしませんか?

f:id:oitech:20170809193833j:plain

「オイシックスって聞いたことあるけど、正直どんな会社なのかよくわからない」
「インハウスのデザイナーで働く魅力って?」

そんな皆さんに向け、Oisix.daichiのデザイナーが、会社のことやインハウスのデザイナーとして働く魅力をお伝えする夜の会社説明会を、以下の日程で開催します。

www.wantedly.com

www.wantedly.com

当日は、美味しい野菜や果物を食べながら気軽に会社を知っていただく機会にしたいと思っています。

今年の秋には、大地を守る会との統合も控え、第二創業期を迎えるオイシックスドット大地。

第二創業期の会社で働く魅力や、これから先、新会社として取り組んでいく事業やビジョンなどを現場で働くデザイナー社員も交え、ざっくばらんにお話しします。

IT×食×農業の領域で、より多くの方が豊かな食生活を簡単に送れるようなサービスの提供を行うべく、チャレンジしている会社の話をぜひ聞きに来てください。

長いページでも飽きさせない3つの工夫

初めまして。デザイナーの高橋です。普段はUI設計や改善を担当してます。

前回、出口さんの旬ページリニューアル事例のエントリーでは、 スマホファーストの考えに基づき、「読ませる」より「見せる」にデザインの方向性を決めて「ビジュアル訴求を高めた」事例について紹介しました。

では、どのようにして「見せる」ことを実現させるためにスマートフォン上のデザインで解決していったのか?
今回はその事例をご紹介できたらと思います。

f:id:oitech:20170714144620j:plain

簡単に「見せる」と言っても、オイシックスの売り場の特徴はページの「長さ」にあります。

いかにしてお客さまがサイトに訪問していただいた時のテンションを維持したまま、ページの最後まで飽きずに「見て」いただくことが出来るかが、デザインの成功のカギだと考えています。

そのため、長さを極力意識させない工夫、またテンションを上げもらう工夫が必要です。

f:id:oitech:20170714144753j:plain

「見せる」ためにやったこと

そのために具体的にやったことが主に下記の3つです。

1. 画像サイズの使い分けによる「切り替え」の設計
2. 見やすい(読みやすい)文章レイアウト・テキスト量の設計
3. 料理工程にgifアニメーションを導入–ビジュアルコミュニケーションによる設計

1.画像サイズの使い分けによる「切り替え」の設計

f:id:oitech:20170714145218j:plain

大中小、またはサムネ各サイズの画像を使い分けることによって、切り替えしをおこし、単調にならないページランニングを意識しています。これにより長いページでも読み進めてもらう効果を狙っています。

2.見やすい(読みやすい)文章レイアウト・テキスト量の設計

f:id:oitech:20170714145323j:plain f:id:oitech:20170714145344j:plain

「余白の効果」を使い、情報のまとまりをはっきりさせ、長いページのなかでも視認性・可読性を高めています。

f:id:oitech:20170714145414j:plain

また、テキスト量については事前にレイアウトを設計の上、文字数を最初から決めて、それにしたがって訴求のテキストを書いています。

3.料理工程にgifアニメーションを導入–ビジュアルコミュニケーションによる設計

見ていて「おっ!」と驚きのあるビジュアルコミュニケーションが取れるようなアニメーションもページの途中に入れつつ、飽きさせない工夫にもチャレンジしています。

f:id:oitech:20170714145433g:plain

検討段階では、動画やシネマグラフも検討しましたが、ページ表示速度の関係上、gifアニメーションが最も適当であると判断しました。導入後、ヒートマップでアニメーションの確認をした結果、見られているときもあれば、ほとんど見られていないときもあり、このあたりは物の売れ方の動向をみつつ、まだまだ試行錯誤が必要だと感じています。

結果から見えてきた課題・仮説

以上、3つの施策をおこなったことにより、リニューアルリリース後の過去1年前後のデータをもっとも変化した数字でみると、ページの「平均ページ滞在時間」が全体で30%UP、また主要なナビに限って再計算しても26%UPとなりました。

「見せる」ためにレイアウトを再設計し、ページ全体での滞在時間が以前よりも伸びた結果、リニューアル後のCVRの上昇や、思わず売上が上がる商品の出現、定性的なお客様の声などを見ても、「平均ページ滞在時間」の伸びは、明らかにポジティブな結果を生み出していると捉えてよさそうです。

とはいえ、お客さま個々の買い物に費やす時間を考えると、効率的にお買い物が出来、その中で楽しんでいただくことが大切なので、ただ「見せて」買っていただくだけでなく、購入前~購入時~購入後と、お客さまの生活シーンをより具体的にイメージしながら、サービス全体の中で、お客さまの課題を解いていく必要があります。

デザイナーとして、そういったサービス全体の設計に関わっていける機会があることが魅力だと感じており、今後も試行錯誤を重ねていきたいと思います。

ビジュアル訴求を高めたら商品の売れ行きが変わった―Oisix旬ページリニューアルの事例

はじめまして。オイシックスでデザイナーをやっている新卒3年目の出口です。 リアル媒体(冊子やチラシ、イベント時のダンボールなど)や、写真撮影のディレクションを担当しています。

今回は「ビジュアル訴求の高め方」をテーマに、オイシックスのデザイナーとして実際に行った取り組みについて書きたいと思います。

Oisixの原点、野菜・果物を集めた旬ページをリニューアル

2016年、Oisixでは旬ページのリニューアルを行いました。

f:id:oitech:20170613092344j:plain

旬ページとは名前の通り、旬の野菜や果物を集めたページです。

2016(016=オイシックス)の年、Oisixの原点である新鮮でおいしい野菜・果物で、「お客さまの食卓を豊かにしたい」「どのようにしたらOisixの野菜・果物の魅力を伝えることができるだろうか」 、 企画・デザイナー・エンジニアが一体になってプロジェクトを進めました。

Oisixのお客さまのご利用デバイスの主流は パソコンからスマートフォンへ移行しつつあります。 スマートフォンは移動中や合間時間で使用されることが多く、じっくり読まれる機会は多くありません。

そこでページデザインの方向性は、「読ませる」より「見せる」に決めました。

ビジュアルの訴求を高める

私たちが真っ先に取り組んだ課題は「写真」です。

写真は文章よりもダイレクトに商品の魅力や特長を伝えてくれる役目を果たします。

旬ページで取り上げるものは「野菜・果物」なので、 青果そのものの

  • 鮮度感
  • 生の状態でのシズル感

を伝えることを、最も大切に考えました。

f:id:oitech:20170613092555j:plain

さらに、実際にお客さまの元へ届いたときの状態をイメージしてもらいやすいよう、 お客さまのご自宅をイメージした

  • キッチンらしさ
  • 食卓らしさ

をそこに加えることにしました。

f:id:oitech:20170613092822j:plain

おいしそう!な写真を撮るために

旬ページで扱う商品の写真は、写真素材を購入するのではなく、Oisixで撮影したものを使用しています。

デザイナーは撮影にディレクションから関わり、

  • 企画者と一緒に撮影ラフを考え、
  • 撮影に立ち合い、
  • あがってきた写真のクオリティチェック

などを行います。


今では定着したフローも、最初は模索の繰り返しでした。


例えば、生の「新さつまいも」の撮影ラフを作成したときのことです。

最初の課題は、青果そのものの鮮度感、生の状態でのシズル感を、どう演出するかです。

調査から始めました。「おいしそう!」と感じられる生のさつまいもは、一般的にどう撮られているかを調べ、ビジュアルの共通点をまとめます。 カットして白い実を見せるとおいしそうに見えるのかも!、どうカットするのがベストなのかな?など、 青果そのものの見せ方を探ります。

実際撮影したものがこちらです。

f:id:oitech:20170613102031j:plain

さつまいもをあえて縦にカットし、きめの細かい材質の布を背景に置きました。


次の課題は、お客さまのご自宅をイメージしたキッチンらしさ、食卓らしさの演出です。

商品の特長を視覚化するにあたり、より引き立ててくれるスタイリングとは何かを探ります。

新さつまいもの場合は「上品な甘み」に焦点をあてました。

ポイントは、絵作りをするときに見せる要素に優先順位をつけることです。

実際の写真では、さつまいもの断面が絵の主役になるよう、白みを際立たせ、次にわき役となるナイフや布が目に入るようにしています。

f:id:oitech:20170613101034j:plain

撮影にも立ち合います。スタイリスト・カメラマンと優先ポイントをすりあわせながら絵を仕上げていきます。

f:id:oitech:20170613100722j:plain

リニューアルによる売れ行きの変化

通年夏ごろに販売される「新さつまいも」は、ねっとり濃厚な冬物とは異なり、ホクホク食感で上品な甘みが特長で(でんぷんが糖化していないためらしいです)、品種で言うと「紅はるか」の初物にあたります。

炒め物などの調理に使いやすい、おいしいさつまいもなのですが、 青果単体として脚光を浴びる機会は、これまでほとんどありませんでした。

ところがリニューアル後の旬ページでとりあげたところ、お買い上げいただいたお客さまから立て続けにおいしいとのお声をいただくようになりました!

その他にも旬ページで取り上げた結果、お客さまからおいしい!というお声が届くようになったお野菜たちがたくさんいます。

さわやかな甘み・ほんのりかおる塩味がポイントの有機塩セロリも、脚光を浴びるようになった野菜の一つです。

f:id:oitech:20170613120149j:plain

試行錯誤を繰り返して前に進む

日本において、インターネットでの食品宅配サービスというのは、まだまだマイナーな存在です。 しかし、Oisixは、170万人以上のお客さまに利用されており(今年4月時点)、サービスとしては決して小さな規模ではありません。

前例が少ないため、旬ページのリニューアルをして1年経過した今なお試行錯誤の繰り返しですが、お客さまの目においしい・楽しい、季節を感じさせるページとなるよう、日々邁進中です!


本年秋には、同じく食品宅配事業大地を守る会との合併による経営統合を予定しています。 www.oisix.co.jp


オイシックスでは現在UIデザイナーを募集しています。 少しでもご興味を持った方は、ぜひ下記から応募してみてください。recruit.oisix.co.jp

Oisix Creator's Blogを始めます。

こんにちは。オイシックス株式会社でAndroidアプリ開発を担当しています、 id:shanonim です。弊社のエンジニア・デザイナーでクリエイターズブログを始めることになりました。

f:id:oitech:20170530160750p:plain

オイシックスは、2000年に創業した食品ECの会社です。有機・無農薬食材を中心とした「美味しくて健康になれる食品」をインターネットで購入できる事業を展開しています。インターネット上の食品専門スーパー「Oisix.com」の利用者数は、今年の4月時点で170万人を突破しました。🎉
また先日、同じ食品宅配事業を展開する株式会社大地を守る会と経営統合し、「オイシックスドット大地株式会社」となることが発表されました。

prtimes.jp

会社も事業も多くの変化がありますが、それとともにエンジニア・デザイナーの現場も常に変化し続けています。「Oisix Creator’s Blog」では、そんな日々の中で生まれる多くの技術的挑戦や創意工夫を発信していきたいと思っています。

1回目のご挨拶記事ですので、まずは会社に関する様々なリンクをご紹介したいと思います。

OIsix.com

www.oisix.com

オイシックスのサービスサイトです。初めてオイシックスを利用する場合は「おためしセット」をオーダーすることができます。

f:id:oitech:20170530153138j:plain

時期によって内容は異なりますが、色々な野菜や加工品がひとつの箱になったサンプルセットです。1,980円(税込・送料無料)で注文できます。
ほんとうにお得なので、まだ頼んだことのないひとはぜひオーダーしてみてください。あと食べてみて美味しかったらぜひ「美味しい!!!」ってツイートしてください。😉

一人暮らし用にはやや多い量の食べ物が届くので、消費スピードに注意してくださいね。

Oisixdotdaichi..co.jp

https://www.oisixdotdaichi.co.jp/www.oisixdotdaichi.co.jp

オイシックスのコーポレートサイトです。つい先月リニューアルしました。自社で取り扱っている食材や料理の写真を前面に推したデザインとなっています。

Qiita Organization

qiita.com

オイシックスに在籍するエンジニアのQiitaエントリがまとまっています。

OiStudy

oi-study.connpass.com

オイシックスの主催する勉強会のConnpassグループです。iOS/Android/機械学習の勉強会を定期的に開催しています。いますぐジョイナス🍅

Wantedly

www.wantedly.com

人事の更新するブログや社員のインタビュー、募集中の職種を見ることができます。

まとめ

技術的な話やデザインのあれこれを中心に発信する予定ではありますが、時々ご飯や野菜について熱く語りだすエントリが飛び出すかもしれません。ゆるくたのしく読んで頂けると幸いです。
これからどうぞよろしくお願いいたします!

Oisix.daichi Creator's Blogはオイシックスドット大地株式会社のエンジニア・デザイナーが執筆している公式ブログです。

オイシックスドット大地株式会社では一緒に働く仲間を募集しています