こんにちは、買物事業部のデザイナー兼エンジニアの長野です。 現在買物事業部では、クックパッドマートという新規サービスの開発を進めています。この夏にいよいよリリースを予定しており、先日 プレスリリース を発表しました。 クックパッドマートは、今年の1月に私を含めて3名の小さなチームでサービスづくりを開始しました（8/13現在：10名）。チーム発足から半年をかけて様々な検証を行い、サービスを形にしてきたので、本記事ではそのプロセスの一部を下記の流れでご紹介したいと思います。 クックパッドマートとは サービスが解決したい課題 サービスが提供する価値 価値仮説に至るまでのプロセス 1. クックパッドマートとは クックパッドマートは、料理が楽しみになるような食材を、スマホアプリから簡単に注文することができる、生鮮食品のECサービスです。 地域の精肉店や鮮魚店、野菜農家、ベーカリーなどの「こだわり食材

モバイルファースト室の @slightair です。 クックパッドの iOS/Android アプリは、少し前のバージョンからWebP形式の画像をサーバから取得して表示するようにしています。 この記事では、なぜ画像形式をWebPに切り替えたのか、また切り替える上で注意した点などを説明します。 Cookpad アプリと画像 クックパッドのアプリはユーザさんに投稿していただいたレシピを表示するアプリケーションです。その性質上、レシピ画像や調理手順、検索画面のサムネイルなどたくさんの画像をサーバから取得して表示する必要があります。 画像の数が増えたりサイズが大きくなればなるほど通信量が増えます。最近はスマートフォンの画面サイズがどんどん大きくなっているので、それに合わせて取得する画像を大きくしていくとさらにファイルサイズが増え、通信量も増えていってしまいます。 サーバとやりとりするデータが多くな

検索事業部のデザイナー倉光です。 今回は、開発現場でアイデア発散フェーズにやっていることの一例を紹介したいと思います。UIデザインの手法として比較的知名度は高く、デザイナー以外でも学びたいという要望も多い「ペーパープロトタイピング」についてです。 前提として プロトタイピングにはフェーズと目的に応じて 様々な手法がありますが、今回は「小規模チームでアイデアをぽんぽん出し、伝え合うためのプロトタイピング」の話です。ユーザーに実際に評価してもらうためのプロトタイプの作り方についてはこの記事では割愛させていただきます。 また非デザイナーの方は「いやいや、デザイナーじゃないと画面なんてうまく書けないよ…」と躊躇してしまうかもしれませんが、本記事では社内のディレクター/エンジニア/インターン生が書いた成果物も掲載していますので、そちらも参考になると思います。 目次 目次 1.ペーパープロトタイピング

こんにちは、株式会社ビットジャーニーに出向中の出口 (@dex1t) です。ビットジャーニーでは、社内情報共有ツール Kibela*1のサービス設計やプロダクトマネジメントに責任を持ちつつ、エンジニアとして開発全般に携わっています。 今回は、新サービスの立ち上げ時にどのような考えで重要指標*2を設計し、それを実際の開発のなかでどう使っていくかという話をします。 なぜ検証をするのか そもそもなぜ新サービス立ち上げ時に、重要指標や検証といった考えが必要になるのでしょうか。それを考えるにあたって、クックパッド的なサービス開発の流れを改めて整理してみます。 企画と検証は表裏一体 サービス開発といえば、企画・開発・検証をぐるぐる回すというのが一般的だと思います。指標は検証段階で活用する道具です。企画で考えたことを確かめるのが検証段階であり、企画と検証は表裏一体です。 したがって、指標の設計をするにあ

こんにちは。デザイナーの池田（id:tikeda）です。6月末までユーザーファースト推進室というデザイナーを中心としたユーザー体験について横断的に責任をもっている室の室長を勤めていました。7月からこのユーザーファースト推進室をなくし役割を各部室に分散させる体制変更を行いました。 ユーザーファースト推進室については、過去のインタビューやブログのエントリーをご覧ください。 はじめに サービス開発では、デザイナー・エンジニアといった職種毎に部を構成し各プロジェクトに派遣するようなスタイル（A）、ディレクター・デザイナー・エンジニアといった役割の異なる職種で部を構成するスタイル（B）、またこの2つを組み合わせたハイブリットのような組織が存在しており、弊社だけでなく開発の現場ではよりよい開発が行われるよう試行錯誤が行われていると感じています。 クックパッドではここ数年、アプリケーションエンジニアは各

ユーザーファースト推進室 デザイナーの橋本（＠hashcc）です。 クックパッドでは、安定した品質のモバイルアプリケーションをユーザーさんに届けるために、デザインリリースマネージャ という試みを2015年秋頃から始めました。 今回はこの試みについて発端や成果などをお話しします。 「あれ、なんでこんなデザインになってるの・・？」 クックパッドには日々多くのコード変更が加わっています。そうした中でも品質を安定させる（クラッシュや機能破壊を起こさない）ために、テストエンジニアなどが取り組んでいます。 関連： クックパッドモバイルアプリの開発体制とリリースフロー 安定したリリースを継続するためのテストとテストレベルの話 デザイナーも「デザイン変更が伴う修正は必ずデザイナーがチェックする」というルールを作り、デザイン品質の安定化に努めていました。 にも関わらず、リリース直前/直後になって「あれ、なん

こんにちは！ユーザーファースト推進室のデザイナー木村と申します。 今回はクックパッドニュース編集部で取り組み始めた、数値改善のお話をご紹介したいと思います。 すでに数値改善をバリバリやってるサービス開発者の方には退屈な内容かもしれませんが、普段あまり数値に触れる機会のないデザイナーをはじめとするサービス開発に携わっている方を想定読者として、おおまかな流れについてお話したいと思います。 クックパッドニュースとは クックパッドニュースは「読むとお腹がすくニュース」をコンセプトに、クックパッド内外で流行っている食にまつわるトレンドをはじめとした食の情報発信しており、「冷凍卵」「ジャーサラダ」「おにぎらず」など多くのトレンドを生み出しているメディアサイトです。 「体験」や「ストーリー」を数値に落としこむ わたしがはじめて編集部とMTGした際に持ち上がったのは「クックパッドニュースのスマートフォンサ

クックパッドで広告領域の企画や実装などを担当している大野です。 2015年期から広告領域ががふたつの事業部に分かれ、私は「新規広告開発部」に所属しています。この事業部は、新しい顧客や販路から収益を上げることと、既存を含む広告の配信を技術的に最適化して収益効率を向上させること、のふたつの目的から新設されました。 事業部に所属するメンバーは、営業やエンジニアといった職種に関わらず、それぞれ収益に対してコミットしています。そして、収益源やビジネスモデルはそれぞれ異なっています。 今回は、特にエンジニアがこうした環境において、やることおよびその優先度をどのように議論して決定しているかを紹介します。やりたいことやアイディアをどう出していくかについては本稿では議論しません。 ちょうど25日に公開された成田による議論 が参考になります。 優先度 = 回収可能額 * 必要投資規模 いきなり結論めいた話です

インフラストラクチャー部の成田（@mirakui）です。インフラストラクチャー部は、クックパッドで扱っている全サービスのサーバを設計・構築し、運用しているチームです。2015年3月現在、6人のメンバーで運用をしています。 さて、この運用というのは外から見ていると保守的な仕事に思えるかもしれませんが、その実、とてもクリエイティブな仕事です。クックパッドのサービスは一日平均で10回以上デプロイされており、アクセスも日々増え続け、状況は刻一刻と変化しています。今日動いているサーバ構成が、一年後に通用するとは限らないわけです。そんな変化に追従するためには、サーバを常に改善していかなければなりませんし、チームにも柔軟な発想が求められます。 「さあブレストしよう」→アイデア出ない問題 さあ業務を改善しよう、と意気込んでブレインストーミングを開いても、なかなか十分なアイデアが出きらないのはよくある話です

こんにちは。ユーザーファースト推進室の元山です。 みなさんはスマートフォンアプリケーションやWebサービスの開発・改善をするときにどのようなプロセスで行っているでしょうか？アジャイルやリーンなどの最近では一般的なよくある開発プロセスの中で、今やプロトタイピングは当たり前に行うものとなっていると思います。プロトタイピングを支援するアプリやWebサービスも数多くありますが、ただ闇雲にプロトタイプを作ればいいわけではありませんし、プロトタイプモックを作ること自体が目的化されては意味がありません。 クックパッドでもプロトタイピングを取り入れた開発プロセスを行っていますが、開発のフェーズであったり、または目的によってどのようなアウトプットとしてプロトタイピングするのかは変わってくると思います。今回はクックパッドで実際に行っているプロトタイピングについてフェーズや目的ごとにご紹介しようと思います。 コ

自己紹介 会員事業部*1 森田です。昨年はプレミアムサービス(以下PS)*2の訴求改善を担当しました。その中で抜きん出て効果の高かった施策を紹介します。具体的な数値を書くことは出来ないものの、この施策一つで前期に私がおこなった他の施策効果の合計を上回ります。 施策内容 紹介する施策は検索結果に関係するものです。今までは検索結果の下に控えめに表示していた人気順検索*3以外のPSコンテンツの訴求を、検索結果の間に追加しました。 殿堂入りレシピ*4 (人気順検索以外のPSコンテンツ)の訴求 予期せぬ効果 実はこの施策は会員事業部によるものではなく、別部署による検索ページへの大きなデザイン変更施策*5の一部として行われました。そのため検索結果の間でPSコンテンツを紹介することも私が考えたわけではなく、効果も深く考えていませんでした。当時私が気にしていた事は、今までも存在していた人気順検索の訴求効果

こんにちは。投稿推進部の清水(@pachirel)です。 2009年にクックパッドに入社してから、インフラ周り、クックパッドの人事周り（採用・評価）や広告周りのシステム開発を担当していました。 2014年4月頃から、2〜3名の小さなチームで新規サービスのプロトタイピングをいくつか行っています。 企画の詳細は省きますが、私がこの10ヶ月ほどで学んだことをまとめました。アジャイル開発やLean startupの考えに共感しているので、そこから得た内容に私の体験を付け加えたものになっています。 今回はプログラミングに関する技術的な内容は含まれていません。 なぜ作るか スタートアップが失敗する原因で一番多いのは「人が必要としていないものを作ってしまった」というものです。 The Top 20 Reasons Startups Fail 社内の新規サービス開発でも同じ傾向があるのではないでしょうか。

こんにちは、ユーザファースト推進部デザイングループの元山です。 デザイナーの皆さんはWebやアプリなどをデザインする上でフォントを作った事があるでしょうか？ ずいぶんと前から「これからはWebフォントの時代だ」なんて言われながらも、現実は中々使うのが難しいなぁと感じている方は多いかもしれません。 今回はクックパッドで実際に作ったオリジナルフォントを使ったWebやアプリのデザインについて事例を交えながら紹介してみたいと思います。 クックパッドでの事例 印象と機能を向上させるデザインのためのフォント ブラウザやアプリの標準のフォントではない特殊なフォントを使う理由として真っ先にあげられるのは、やはり文字の雰囲気や見た目でデザイン的な印象や見え方を向上することができる点だと思います。最近ではAppleのWebサイトもオリジナルのWebFontを使ったデザインに変わりましたね。 クックパッドでは特

モバイルファースト室の @slightair です。 先ほど、デザインをリニューアルしたクックパッドiOSアプリ 6.0.0 をリリースしました。 https://itunes.apple.com/jp/app/kukkupaddo-no.1reshipi-jian/id340368403?mt=8 この記事では、どのようにして新しいデザインをiOSアプリに適用していったのかを紹介したいと思います。 新しいアプリの画面 スクリーンショットを見ていただければわかるように、全体的にフラットな印象を与える画面に変わりました。 トップ レシピ詳細画面 サイドメニュー この記事で全ての画面を紹介することはできませんが、ぜひダウンロードしてお手持ちのiOS端末で触ってみてください。 新デザインの適用 基本的には、画面デザイン案をもらい、既存のアプリを修正して少しずつ適用していく形で進めていきました。

モバイルファースト室の @rejasupotaro です。 今年のGoogle I/OではAndroid One、Android L、Material Design、Android Ware、Android Auto、Android TV、Google Cloud Platform、Google Fitなどの発表がありました。弊社からは私と @sys1yagi と @__gfx__ が参加したので、何回かに分けてGoogle I/Oの発表の内容を紹介します。 今回のテーマはMaterial Designです。内容は公式ドキュメントやセッション動画の要約や参考リンクからの引用を含みますが、筆者の考察や主観も含まれます。 Material Designとは Material Designとは、Googleが発表したビジュアル、モーション、インタラクションのプラットフォームやデバイス間の包括的な