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

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

子育て中のパパ&ママデザイナー向けMeetupを開催しました!

2人の娘がいるパパ社員の高橋です。
今回の記事では、11/25(土)、11/27(月)に開催した、美味しいサラダを食べつつOisixのパパ&ママデザイナーとお話しいただいた「子育て中のパパ&ママデザイナー向けMeetup」について紹介させていただきます。

f:id:oitech:20171213094205j:plain


目次

保育士さんと、本日の試食メニュー

パパ&ママ用のミートアップなので、小さいお子様がいても安心して参加いただけるように、保育士さんを配備しました。

f:id:oitech:20171213094845j:plain

ママの手から、保育士さんの手に渡った赤ちゃん。
はじめの大泣きも徐々に落ち着き、ママも一安心。
弊社のお話を聞いていただき、楽しく懇談していただきました。

またいつもは、Oisix自慢のお野菜をゆっくり召し上がっていただくのが通例なのですが、今回は赤ちゃんが待っていて長居できないパパ&ママに、サクッと食べれるOisixのサラダを店舗よりご用意しました。

f:id:oitech:20171213094923j:plain

当日の流れ

25日、27日それぞれ3名ずつ、計6名のパパ・ママデザイナーに参加いただき、以下のような流れで行いました。

  • 発表1「オイシックスドット大地株式会社の紹介」
  • 発表2「パパ&ママデザイナーの働き方紹介」
  • 懇談会

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

f:id:oitech:20171213095022j:plain

人材企画の三浦からは、オイシックスドット大地の会社概要の話から始まり、多様な働き方ができる会社の制度やカルチャーを紹介。復職率の高さ(96%!2017年12月現在)には、驚きの反応もありました。

発表2「パパ&ママデザイナーの働き方紹介」

オイシックスドット大地のデザイナーには3人のパパ、2人のママ社員が働いており、4月からは2名のママが復職予定です。

そのうちの一人、ママデザイナーの肉倉から、どんな働き方や生活をしているか、なぜ弊社で復職しているかを話しさせていただきました。

f:id:oitech:20171213095113j:plain

そして、パパ社員の私からは、その他のデザイナーの紹介や、インハウスデザイナーとしてのやりがいや、デザイナーが注力していること、求めている人材などをお話させていただきました。

f:id:oitech:20171213095132j:plain

懇談会

最後は懇談会。参加者の皆さん個々人が、育児をしながらの働き方で不安に思っていることや、こういう働き方はできるのか?など、ざっくばらんな質疑応答を終え、無事に会を終了しました。

f:id:oitech:20171213095200j:plain

弊社では、社員のパフォーマンスが上がり、与えられたミッションを達成し、事業に貢献することできるのであれば、多様な働き方を認めてくれるカルチャーがあります。育児のほか、介護、副業なども含め、個別に働き方を相談することができます。

制約があるが、「昔のように、思い切り働いて活躍したい!」と考えている方は、弊社までお話を聞きに来てください。

そして、早くもそのチャンス!12月25日のクリスマスは!


12/25開催「クリスマスの戦士へ」デザイナー向けスペシャルMeetupを開催します!(先の話の流れに反して、単身者向けの告知ですいません…!)

オイシックスドット大地の事業に関心をお持ちのデザイナーの皆さま、ご応募お待ちしてます!

おいしいブランドをつくる!インハウスデザイナーがブランドと仕事について語り合うイベントを開催しました

初めまして!オイシックスドット大地に来年4月より入社する、内定者の広沢です。
今回は、11月1日(水)に開催し、私も参加した、「インハウスデザイナーが大切にしている おいしいブランドをつくる3つのスパイス」についてご紹介をさせていただきます!
初めての投稿で緊張していますが、暖かく見守っていただけますと幸いです…

f:id:oitech:20171107134118j:plain f:id:oitech:20171109172037j:plain


目次

イベントの概要

このイベントは、「BAKE」「スープストックトーキョー」「オイシックスドット大地」、それぞれのブランドでインハウスデザイナーとして働く3名のデザイナーさんをお招きし、

  • 食×デザインの領域で働く楽しさ
  • ブランドをつくっていく上で大切にしていること
  • インハウスのデザイナーで働く魅力

など、日々試行錯誤している話を、おいしい食事とともにお届けするイベントです。

当日は、キッチンとスタジオがついたOisix.daichiの新しいイベントスペースで開催しました。

f:id:oitech:20171108191044j:plain

一般参加いただいたクリエイターの方々、関係者含めて約50名が3社の発表を真剣に聞き入り、各社グルメを囲った懇談会で、会場は熱気に包まれました。

当日の流れ

当日は、以下のような流れで行われました。

  • ゲストトーク①:BAKEデザイナー柿崎弓子さん
  • ゲストトーク②:オイシックスドット大地デザイナー福嶋智美さん
  • ゲストトーク③:スープストックトーキョーデザイナー上村貴之さん
  • 質疑応答
  • 懇談会

ゲストトーク①:BAKEデザイナー柿崎弓子さん

f:id:oitech:20171107134515j:plain

柿崎さんからは、「おいしいブランドを作る」というタイトルの元、

  1. 食×デザインの楽しさ
  2. 大切にしていること
  3. インハウスデザイナーの魅力

の三部構成でお話いただきました。
どうしても商品の魅力をたくさんお客様にお伝えしたいけれど、それを一つに絞って他を捨てる勇気が必要。それがブランドの強い礎になる!というお話が印象に残っています。

f:id:oitech:20171107134916j:plain f:id:oitech:20171107135313j:plain

自分たちの一番の強み・メッセージは何であるのか。
それを理解することがサービスを作る上での第一歩となるのですね。

ゲストトーク②:オイシックスドット大地デザイナー福嶋智美さん

f:id:oitech:20171107135518j:plain

福嶋さんからは、

  1. 結果にコミットし続ける
  2. 作る人(生産者)食べる人(お客様)を知る
  3. しずる

の三部構成でお話いただきました。
Oisixこだわりの「しずる」の紹介では熱が入ります。

f:id:oitech:20171107200903j:plain f:id:oitech:20171107195904j:plain

均一の世界観ではなく、等身大のしずるを見せること。それによりお客様が「自分ごとと捉える素敵さ」「食卓」を感じられるとのこと。
「ロジカルにエモーショナルを考える」という一言は、お客様と生産者様の「幸せ」という目に見えないコトに挑戦し続けてきたオイシックスドット大地を、まさに体現している言葉のように思えました。

ゲストトーク③:スープストックトーキョーデザイナー上村貴之さん

f:id:oitech:20171107135639j:plain

「スープストックトーキョーの始まりは、ある企画書から…」思わず引き込まれてしまう導入から上村さんのお話へ。
スープストックトーキョーは、この企画書に出てきた「ある女性」の理想を具現化したお店なのだとか。

f:id:oitech:20171107135643j:plain f:id:oitech:20171107171816j:plain

「我々はただのスープ屋じゃない。スープは自分たちと世の中を繋ぐハブでしかない。だからスープを介して、自分たちの想い・大切なことを伝えている」との言葉が大変印象に残っています。
普段はついモノを重視し、その売り上げだけを見てしまいがちです。
しかし、こうした数字には現れないけれども自分たちを構成する譲れない芯があるということは、絶対にブレない自信となるのだなと感じました。

質疑応答

f:id:oitech:20171107135646j:plain

三者(社)三様のこだわりをお聞きし、会場の熱気も上がってきたところで質疑応答へ。
「(普通デザイナーとしてあまりやらないような)ご法度に触れられるモチベーションはどこから来るのか」「上司から止められることはないのか」などの質問が。
参加者の皆さん同じ悩みや疑問をお持ちなのか、「うんうん」「あ~」と相槌を打っていらっしゃる方も。

懇談会

最後は皆さまお待ちかねの懇談会。

f:id:oitech:20171107135819j:plain

BAKEさんからはタルトやクッキーサンドなどのおいしいお菓子を。スープストックトーキョーさんからは温かいスープをいただき、オイシックスドット大地からは新鮮なお野菜や果物で乾杯!

f:id:oitech:20171109162709j:plain f:id:oitech:20171107141240j:plain f:id:oitech:20171107141146j:plain

登壇者の皆さまの『おいしいブランドをつくる3つのスパイス』を聞いた後、各社自慢の品々をいただきながら様々なバックグラウンドを持つ方たちとデザインについてお話しできる空間は、とても贅沢な時間でした。

まとめ - 内定者の私が感じたこと

ブランドに作るうえで大事にしていることは、各社様々ありましたが、インハウスのデザイナーという職業は、

  • デザインに関しては、クライアントを気にせずに、意思決定できる領域が広い
  • デザイン以外もなんでもやる(やれる裁量がある)
  • エンドユーザーの反応が、良く見える

というところに魅力があるのだということを共通して感じました。

私のような新卒予定者や、社会人2,3年目のクリエイターの方には、とても良い経験になると思います。
今後もオイシックスドット大地は「食×デザイン」の領域を盛り上げていくために様々な企業様と、このような催しを実施してまいりますので、ぜひ興味がある方はお気軽にご参加ください!

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

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