UI観察 #009 料理動画アプリの使い勝手を観察する

こんにちは。matsumotoo(@matsumotoo988)です。

今回は料理動画アプリを観察してみようと思います。
ただ調べてみると沢山あったので、いくつかに絞って観察してみました。

■観察するアプリ
dely株式会社の「クラシル
株式会社エブリーの「DELISH KITCHEN
株式会社リクルートの「ゼクシィキッチン
クックパッド株式会社の「クックパッド
※クックパッドは一部のみ動画ですが、比較のため含めています

今回は個人的に気になった「ナビゲーション」と主要な画面の「ホーム画面、お気に入り/クリップ機能、詳細画面」を対象に調べてました

ナビゲーションについて

大カテゴリ・小カテゴリがある場合(クラシルなど)と小カテゴリがない場合(DELISH KITCHEN)がありました。
小カテゴリの有無については、ユーザーの使い勝手の向上 or 有料会員への導線強化施策なのか?が判断がつかなかったが、個人的にはどちらにも貢献しそうと感じた。(以下のコンテンツ一覧を参考)

またDELISH KITCHENだけが他サービスだと有料会員しか見えないランキングを無料で閲覧できるようになっているなど、サービスごとにコンテンツの考え方が違っていたりしていた。


UI面については、クックパッドの小カテゴリ部分(タブUI)が気になりました。Yahoo!ニュースと同じようにタブの背景色が変更になるようになっており、ユーザーに対する適切なフィードバック値が他サービスと異なっている可能性を感じました。

■クラシル・ゼクシィキッチン
・画面下部に大カテゴリ、画面上部に検索窓・小カテゴリを配置
・画面上部の検索窓・小カテゴリが、クラシルよりゼクシィキッチンの方が少し高さが抑えられている
└ 微量な差であるが、コンテンツ領域を大きく見せられるので、良さそう。


■DELISH KITCHEN
・他アプリとは異なり、画面上部に小カテゴリなし
・カテゴリ分けした方が情報は整理されるが、明確な理由が推定できず(ユーザーの使い勝手を考慮しているかも?)


■クックパッド
・クラシルなどと構成は似ているが、検索項目が小カテゴリにかかっている
└ 他サービス比べ、検索機能に独自機能あり(詳しくは後述)
・小カテゴリがyahoo!ニュースと似たようなタブ形式。
└ タブ背景の色が変わるので、カテゴリ変更が明確にわかりやすい
└ 他アプリより、ユーザーのアプリのリテラシー想定が低い可能性があり


※面白いナビゲーションのUIがあったので、参考まで。

■日経電子版(参考)
・ナビゲーションが他アプリと比較して独特である。
└ 大カテゴリと小カテゴリの距離が小さいため、関連性が直感的にわかる
└ 大カテゴリ数が多いアプリが同様のデザインにすると、がちゃがちゃして認識性 or 操作性が低下しそう。


ホーム画面

全体としては、クラシル・DELISH KITCHENは、起動直後におすすめの動画が自動再生されるようになっている。ただ、ゼクシィキッチンも同じコンテンツが表示されるが、自動再生させていない。こちらはGoogle Chromeの事例もあるので、意図しての可能性も十分ありそう。

また全体的に写真の高品質化が進んでおり、CGMのクックパッドだと、なかなか勝てない感じがしました。(特にクラシル・ゼクシィキッチンは構図などのレベルも相当高いように思いました..。)

■クラシル
・アプリ起動後に表示されるおすすめタブ > 最上部カセットにて、動画が自動再生されるようになっている
・他サービスよりカセットの種類が少ないため、全体の要素が統一されており閲覧しやすかった。
└ 画像内でテキストが皿と若干被っていものの、視認性は悪いと感じない


■DELISH KITCHEN
・アプリ起動後に表示される画面にて、動画が自動再生される
└ 横スライドで切り替えができる。
└ またスライドできることがわかるようにスライド枚数や横のスライドが一部見えている。
・ファーストビューの1/4程度に広告が含まれており、いい印象を抱けなかった
・カセットのサイズはメリハリがあるが、各々のカセット内で情報量が多くごちゃついた印象を受ける。目線の流れの設計に不自然さを感じた


■ゼクシィキッチン
・小カテゴリ内でもテーマごとに料理をまとめていたり、情報のまとめ方に編集観点が入っていた。
・カセットのサイズがコンパクトだが、機能性が高そう。
└ 詳細画面に遷移しなくても、クリップ機能が使える
└ テキストの視認性を高めるために、下部に薄くシャドウを引いている
・Pick Upの大きいカセットのみ動画再生機能がある。
└ 動画を一度でも再生した状態で、画面から見切れた場合、動画再生前に戻る仕様だった。
・広告が入っていないので、閲覧に集中できた。


■クックパッド
・他アプリと比べ、全体的にカセット内の要素数が多く、サイズが大きいものが多い
・画面左下に「最近みたレシピ」を表示するボタンが存在している
・投稿されているコンテンツ(画像・テキスト)などで、投稿者により良し悪しが目立つ
└ ゼクシイキッチンも投稿されたコンテンツが存在するが、全体に占める内容量をコントロールしている


検索画面

大きなパターンとしては、全体のレシピから検索できる「クックパット以外のサービス」と小カテゴリごとにのみ検索できる「クックパッド」に分けられそうです。

クックパッド以外の検索の特徴としては、カテゴリ検索はタップ動作でドリルダウン検索で絞っていく傾向があり、複数項目のフィルタリングは避けられているようでした。また検索結果画面遷移後の絞り込みについては、クラシル・ゼクシィキッチンが使いやすそうなUIを実装していました。

またキーワード検索にて予測・サジェスト機能などサポートはどのサービスにも実装されていました。

■クラシル
・画面下部の検索タブを押下すると、「たべれぽ」一覧が表示される
・検索方法は以下の2パターンがある。検索窓を押下→カテゴリ検索の遷移は珍しい仕様だが、使い方がわからないほど混乱はしなかった。
└ (1)キーワード検索(検索窓よりキーワードを入力)
└ (2)カテゴリ検索(検索窓を押下後にカテゴリを選択)
 - 検索該当数が多いため、カテゴリ検索はドリルダウン検索を1〜数回する仕様になっており、検索結果画面からでも再絞り込みができる


■DELISH KITCHEN
・キーワード検索の場合、人気順 or 新着順の順序変更ができるが、カテゴリ検索だとできない仕様になっている
・画面下部の検索タブを押下すると、「カテゴリー・シーン目的」ベースの絞り込みができる
└ 項目により1〜3階層のドリルダウン形式になっており、数十〜数百ぐらいのレシピに絞り込まれるようになっている
└ カテゴリ検索ではリアルタイムで該当レシピ数が表示されている


■ゼクシィキッチン
・キーワード or カテゴリ or 最近みたレシピ の3つの検索方法がある
└ カテゴリ検索では、食材・ジャンル・料理人から選択でき、ドリルダウン検索する仕様
 - どの項目も2階層のドリルダウン形式になっている。もし1階層だと、数百〜数千レシピととても多いため、複数回絞り込む方がよさそう。
・検索結果画面の並び替えが有料会員にならないと使えない項目がある。


■クックパッド
他サービスと異なり、画面下部に検索タブは存在しておらず、ホーム画面 > 各小カテゴリに検索機能が設置されている
└ 該当するキーワードだけでなく、含まれないキーワードの指定ができる
└ 検索後に別の小カテゴリに遷移した場合でも、別小カテゴリの検索条件が受け継がれる
 - 他アプリとは異なり、明確に家族分の料理レシピを提供する意図があるため、このような仕様と思われる


お気に入り/クリップ機能一覧画面

クックパッド以外の全アプリで、画面下部のナビゲーションに導線が配置されている画面ですが、登録されたレシピの整理方法が課題としてあるようです。

個人的には、クラシルのUIが「お気に入りボタン押下→登録」「お気に入り画面内での整理」のどちらのフェーズでも作業しやすいようにUIが整理され、タップ数が少なくできるので良さそうな印象を受けました。

■クラシル
・詳細画面の共通部 > 一番優先度が高い位置に「お気に入り」ボタンが設置されている
・「お気に入り」ボタン押下後に、お気に入りの中でもユーザーがフォルダ作成→選んだ料理を整理できる
・画面下部 > お気に入り押下後、整理したフォルダを見る場合は、初期設定で隠れた状態で表示されるので、少し手間である
└ ただ、レシピの閲覧 > レシピの整理しやすさの優先順位のため、現状のUIになっている可能性も十分にありそう。


■DELISH KITCHEN
・詳細画面の共通部に目立つように「レシピをお気に入りに追加」ボタンが設置されている
・お気に入りに登録された後、画面下部のお気に入りタブからフォルダ作成→ユーザーが整理できる(お気に入り登録時はできない)
・画面下部 > お気に入りを押下すると、整理したフォルダが表示される。


■ゼクシィキッチン
・カセットの上部に「クリップする」ボタンが設置されている
・他アプリのようにクリップしたレシピを整理する機能はなし
・クリップのカセットには、料理人・カロリー・調理時間と他アプリでは含まれていない要素を表出させている


■クックパッド
・カセットの説明文の量次第では、ファーストビューに含まれない位置に「レシピを保存」ボタンが設置されている
・保存したレシピは画面下部 > メニューの下の方に導線が設置されており、他アプリよりアクセスしにくい位置に存在している
 └ クックパッドがCGMということもあり、他アプリより機能が多いためと思われる


詳細画面

基本的な画面の構成は同じであるが、サービスによって独自の情報や機能が存在していました。

共通している動画機能についても、画面全体で動画を見せる「DELISH KITCHEN」や動画を区分けで閲覧できる「ゼクシィキッチン」などあり、サービスによって動画の見せ方に大きく差異がありました。

動画機能以外の差分としては、クラシルのコメント機能やゼクシィキッチンのタイマー機能であったり、レシピの材料を登録する「買い物リスト」などがありました。

■クラシル
・ファーストビューの大部分を動画用エリアに割り当てている
 └ 動画が終わると、再生 or 「よく似たレシピを見る」が選択できる
・コメント・たべれぽ投稿ができるようになっている
 └ コメントについては、サービス側が質問に丁寧かつ適時コメントしており、非常にホスピタリティ溢れている。


■DELISH KITCHEN
・動画が画面いっぱいのエリア表示されるようになっている
└ 動画再生中にタイムバーがあるが、正確な時間表示がなかった
・「買い物リスト」という材料をリストに保存できる機能がある
・調理手順ごとに動画があり、途中から繰り返し見れる
・画面下部のレコメンドが50レシピほどあり、クラシルの28レシピと比べてとても多く配置されていた


■ゼクシィキッチン
・動画用のエリアは小さいが、画面をスクロールした状態でも閲覧できるようになっている
└ 分割された状態で動画をみれるので、作業しながら見やすい
・調理で一定時間茹でたりする場合、タイマー機能が設置されている
・DELISH KITCHENと同様に買い物リストの機能があるが、必要なものだけ登録できるので、使いやすかった。
・レコメンドが複数軸あり、1軸あたり10レシピ表示されていた


■クックパッド
・動画は位置が他サービスと異なる位置に設置しており、エリアも狭い。
└ 作り方の一番上に設置されており、画面の2/5ぐらいの縦幅。
└ 画面をスクロールしても上部固定で表示されるが、ゼクシィキッチンのように動画をしまうことができない
・レコメンドは設置されていないため、他レシピを閲覧するためには戻る必要がある。
└ その他の導線は、つくれぽ or 投稿者の個人ページのみ


まとめ:観察して思ったこと

今回の観察では、ユーザーへのレシピ見つけてもらいやすい方法と見つけたレシピをどう使ってもらうが?が各サービスでとても興味深く感じました。

個人的には、特にクラシルとゼクシィキッチンの比較が面白いと感じていました。調べると、クラシルは『70億人に1日3回の幸せを届ける』、ゼクシィキッチンは『「きゅんさせゴハン」を、あの人へ。』(=“大切な誰か”ができた時に、料理が上手になりたい)というコンセプトのため、同じ料理動画アプリでもやりたいことの方向性が違うのもありそうです。

つまり、クラシルは大きくは「レシピ軸」のみですが、ゼクシィキッチンの方は「レシピ軸&料理人軸」の2軸があるため、検索方法やレシピの管理方法が違ってきていると思われます。

また有料会員になった場合に受けれることもサービスによって異なります。
どのサービスもレシピ閲覧と機能制限の解除ができるようですが、クラシルだとコメントの優先返信など機能以外の優待などもあったりするようです。

あと料理アプリ内にたくさんのレシピがあっても、ユーザーが見つけることのできるアプリは限りがあると思いますので、検索以外でもどのように出会う仕組みを作るか?もサービス上重量な課題なのかもしれません。これは非常に難しそうですが、同時に面白さもあるように思います。

他にも気になる部分や使い勝手に関わる部分がありますが、今回はここまでとさせてください。

今回のUI観察はいかがでしたでしょうか...?
今回も自分なりに解説して見ましたが、もし何かの参考になりましたら、幸いです!

お読みいただき、ありがとうございました。

Twitterアカウントはこちら

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

いただいたサポートは、noteでいいなって感じた記事のサポートに使います🎉🎉🎉

明日も頑張って書きます!
5

観察メモ

気になったサービスを観察。 Web/APPなどのUIに重心をおきつつ、UX・マーケなどもまとめていく予定
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。