「キッチンが主役」のデザイン
こんにちは。クックパッドたのしいキッチン事業部でデザイナーをしております、辻(@cooktsuji)と申します。
今回は、2020年2月末にリリースした「たのしいキッチン不動産」を中心に、たのしいキッチン事業のデザイン方針「キッチンが主役」についてお話したいと思います。
前半は、デザイン方針が決まるまでの経緯と目的を。後半は、デザイン方針を実際の業務にどう反映させたかを、事例と共にお伝えします。
新規事業のデザインを始めるときや、サービスの思想を伝えていく手段を考えるときの参考になればと思います。
1.たのしいキッチンとは？
料理を楽しめるかどうかはキッチン環境と強く関係しています。良いキッチン環境がある住宅に住む人が増えると、毎日の料理が楽しみになるのではないか？そういった背景から、住宅のキッチン環境を良くするために開始した事業が「たのしいキッチン」です。
たのしいキッチン事業のサービス第一弾として、2月末に「たのしいキッチン不動産」という理想のキッチンが見つかる不動産情報サイトの提供を開始しました。
5月上旬に第二弾である毎日の料理が楽しみになる住宅開発事業「たのしいキッチン住宅」を開始しました。
2.デザイン方針を作ろうと思った背景
たのしいキッチン不動産の開発に着手したのが、2019年の夏頃で、そこから約半年程かけてたのしいキッチンのロゴや、たのしいキッチン不動産の管理画面、サービスUIのデザイン・実装を行いました。並行して中長期的な事業構想づくりも進められており、「たのしいキッチン住宅」を含めた複数の事業に関する議論・発散がされていました。
短い期間で複数サービスを提供することが決まったので、早々にサービスをどう展開していくのか考えたり、デザインの判断軸を決めないと「たのしいキッチン」として伝えたいことがサービスによってバラバラになってしまうのではという懸念を抱きました。
そこで、デザイン方針を立てようという考えに至ったのです。
3.「キッチンが主役」というデザイン方針が生まれるまで
たのしいキッチン不動産の初期リリース時のデザインを作る必要があったので、プロトタイプを作りながら、並行してデザイン方針を考えました。
はじめは、定石通りに情報設計から着手。次に、競合不動産サービスや、情報構造が似ている旅行・ホテル系サービスのリサーチをしながらいくつかプロトタイプを作成しました。
こうして出来上がったプロトタイプの一部が下記のものです。
(たのしいキッチン不動産の初期プロトタイプ)
競合サービスを参考に作ったこともあり、出来上がったプロトタイプを触ってみると、情報の見せ方であったり、物件を決めるまでの体験については特筆して悪い点は無いように思いました。
しかし、それでいいのか？という疑問が浮かびました。
なぜなら、たのしいキッチンは、料理を楽しみにするために“良いキッチン”環境を増やすことを目的としています。そのため、たのしいキッチン不動産では、物件を探せる・物件が見つかる体験をしっかりと作った上で「キッチンがメイン」であることを伝えなければならないのではないか。そう考えました。
こうして「キッチンが主役」というデザイン方針が決まりました。
4.「キッチンが主役」のデザイン展開事例
では、ここからは「キッチンが主役」という方針を実際のデザインにどう落とし込んでいったのかについて、①UIデザイン②テキストの2つに絞ってご紹介します。
4-① 「キッチン情報を魅せる」ための画面設計
まずは、たのしいキッチン不動産のUIデザインについて。「キッチンが主役」というデザイン方針を元に、キッチンを魅せるUI設計をしました。具体的には
1.キッチンの細かいところまで見えるように。
2.実際のキッチンを使ったときのイメージができるように。
3.物件毎のキッチンが比較しやすいように。
というのを意識して展開しています。では、いくつか事例を元に詳しくご紹介します。
①キッチンの細かいところまで見えるように
(物件詳細画面のキッチン設備詳細)
たのしいキッチン不動産の物件情報には、独自に計測をしたキッチンの細かいサイズや設備情報が記載されています。
これらの狙いは、物件内見に行かないとわからないような戸棚の形状や、キッチン設備がサイト上で分かるように、今まで見えていなかった部分を可視化してあげることです。
しかし、ただ寸法が書かれているだけではイメージしづらいので、サイズがイメージできるような補助テキストを添えています。一般的なまな板のサイズが30~40cmと書くことで、今見ている物件の調理スペースが広いのか狭いのかを認識することができます。
②実際のキッチンを使ったときのイメージができるように。
(物件詳細画面のキッチン写真）
自分の中でワクワクするようなキッチンかどうかの判断は、実際にキッチンを使うイメージができたときに起こります。
そこで様々な角度からのキッチン写真とテキストで、キッチンの使用感が妄想できるような工夫を作りました。
お皿を取り出すときの導線はどんな感じだろうか。切ったまな板をシンクに運んだり、食材を火にかける工程はどんな感じだろうか。魚焼きグリルを使ってどんな料理ができるだろうか。そういったことをイメージできるようなコメントをすべての物件に入れています。
③物件毎のキッチンが比較しやすいように。
(物件詳細画面のこだわりキッチン設備)
あると嬉しいキッチン設備やいくつかの項目については、物件間で比較がしやすいように有り/無しがすぐに分かる見せ方をしました。
ここに表示しているアイコンもゼロから作ったのですが、これらのアイコンにもたのしいキッチンとしての統一感をはかるための工夫をしています。今回は詳しく触れないですが、またどこかで機会があれば別途お話したいと思います。
4-② サービスの中で使うコトバ
次に、テキストについて。サービスの中には、見出しや、説明文、キャッチコピーなど様々なテキストが登場します。
テキストに含まれるひとつひとつのコトバにも「キッチンが主役」であることを込めたいと考え作りました。たのしいキッチン不動産だけでなく、たのしいキッチン住宅など、複数サービスを事例にあげてご紹介します。
①サービス意図を伝えるためのコトバ
現在、たのしいキッチン事業では以下3つのサービスを展開しています。
1. たのしいキッチン 不動産
2. たのしいキッチン スコア
3. たのしいキッチン 住宅(賃貸リノベ）
それぞれ、キッチン環境を良くするために。という目的は変わりませんが、アプローチが異なります。そこで、各サービスの意図が伝わるようサービス名とは別にコピーを添えています。
(たのしいキッチン不動産のサービスコピー)
1. たのしいキッチン 不動産
- 毎日の料理が楽しくなる「理想のキッチン」と出会おう
2. たのしいキッチン スコア
- 毎日の料理が楽しくなる、キッチンを見つけやすくするために
3. たのしいキッチン 住宅(賃貸リノベ）
- 料理体験を第一に。「キッチン中心設計」でリノベーション
見ての通り、すべてに「キッチン」というワードとそれぞれの目的や提供内容がセットになる構成で書いています。こうすることで、リノベーション事業を開始した。不動産事業を開始した。という認識ではなく、キッチンに関するリノベーション事業を開始した。キッチンに関する不動産事業を開始した。という認識ができるようになります。
②料理の楽しみや生活イメージを連想させるコトバ
もう少し細かいところもご紹介します。たのしいキッチン不動産のトップページでは、キッチン設備軸で物件を探せるように、キッチン設備毎にセクションを区切って見せています。このセクションタイトルでも、ひと工夫をしました。
(たのしいキッチン不動産トップページ)
なにも考えないと「ガスコンロ対応」「食洗機対応」「大型冷蔵庫対応」などと区切ってしまいますが、これでは機械的に物件を探しているような感覚になってしまい、物件を探しているときのワクワク感が減ってしまいます。
そこで、そのキッチン設備があるとどんな生活ができるのか、料理にどう影響を与えるのかなどが伝わるよう工夫しました。
例えば、大型冷蔵庫対応の場合、沢山の食材がストックできる。買い物に行く頻度が少なくなる。複数人で住める。などキッチン設備があることで生まれるメリットが伝わるようなワーディングを選びました。
5.おわりに
このように、たのしいキッチンでは「キッチンが主役」というデザイン方針に則って「キッチンを魅せる」「キッチンが映える」「キッチンを知れる」ように設計しています。
まだ事業は始まったばかりです。これからも「キッチンが主役」というデザイン方針を元に、どんどん改善を行っていきます。
クックパッドでは、UI/UXデザイナーだけではなく、アートディレクター、グラフィックデザイナーも募集しています！