こんにちは、よしこ ＠K2_yoshiko です。
（前投稿）NadiaのUIトレースに引き続き、レシピ検索サービス大手 クックパッド（Web版）のUIをトレースしましたので、その感想と気付きをまとめました。
クックパッドとは
料理レシピの投稿・検索サービスを中心に、献立や料理動画といった毎日の料理を楽しみにするサービスを運営しています。プレミアムサービスでは、人気レシピが分かる人気順検索、毎日の献立や専門家が厳選するテーマ別のレシピ提案などの機能を提供しています。
引用： https://info.cookpad.com/service_product/japan
言わずと知れた料理レシピ検索の大手サービスです。
最近でこそ、レシピ動画サービス（クラシル・デリッシュキッチン）や競合サービス（楽天レシピ・Nadia）に利用者を奪われつつあるようですが（※参考）、その存在感の大きさは未だ健在です。
※ 参考：クックパッド、なぜ利用者数1千万人減少の凋落…「肉じゃが」だけでレシピ数1万超がアダ
UIトレースをするにあたって
国内の一ジャンルで大手となったサービスのUIを探りたいと思います。
3画面のトレースは時間がかかったので、今回はホーム画面とレシピ画面の2つをトレースします。
着目する観点は、以下の3点です。
- デザイン性（近接・整列・反復・コントラスト）
- UIで訴求していること
- 2画面の差異
前回の気付きとして同じサービスであっても画面毎でデザイン的な差異があるということを知ったので、
クックパッドでも同じ状況かも知れないという仮説を立て、注意して確認していきたいと思います。
アプリはAdobe XDを使って行います。
成果と気付いた点
仮説通り、ホーム画面とレシピ画面ではデザインが異なっていました。
正確には、「ホーム画面のデザインはアップデートされたが、レシピ画面はまだだった」という印象を受けました。
その理由2つあります。
まず1つ目の理由は、ボタンです。
ホーム画面に配置されているボタンのデザインにはフラットなデザインが適用されている一方で、
レシピ画面では、グラデーションがかかった立体感を出したデザインが適用されていました。
クックパッド全体でみても、グラデーションを使ったデザインは、レシピ画面内の3ヶ所でしか適用されていませんでした（影効果は除く）。
なお、その3つはいずれもボタンでした。
グラデーションで立体感を出すデザインが若干古いことや、
このデザインがレシピ画面以外で適用されていないことが、1つ目の理由です。
2つ目の理由は、メニューリストのデザインが違ったところです。
例えば、双方の画面の「おすすめ特集」というセクションのデザインを比較すると、
ホーム画面「おすすめ特集」
レシピ画面「おすすめ特集」
同じメニューリストを表示するはずなのに、デザインに差があることをお分かりいただけると思います。
ホーム画面のデザインのほうが、カード型でモダンな印象を受けます。
以上、2つの理由を踏まえて、レシピ画面のデザインがアップデートされていないのではないかと推測しました。
良い・真似したい点
ホーム画面のデザインがとてもシンプルで、見やすく設計されている印象を受けました。
私がホーム画面のデザインについてこだわっていると感じた例に、リストメニューのデザインがあります。
ホーム画面のリストメニューは、セクション毎に分かれてカード型で表示されており、このカードには影が適用されています。
一方で、カード外枠の左右と下のボーダーが適用されておらず、これらのボーダーはカードの影によって演出されていました。
おそらく、ボーダーをできる限り少なくすることによって、
画面の印象をスッキリさせることと同時に、視認性の向上も狙った工夫なのではないでしょうか。
この例の他にも、ホーム画面のデザインは文字の大きさや太さ・色によって組み立ててあることが多く、
できる限り装飾を少なくする工夫が施してあると、トレースをしながら感じました。
またその工夫がとても勉強になったので、今後私がデザインする上でも是非活用していきたいです。
改善できる点
レシピ画面のデザインを、他の画面と同等レベルにする必要を感じました。
ただし、これは人を始めとする様々なリソース的問題と、リターンの話が絡んでくると思うので、優先順位が高いかは微妙なところです。
他の改善点は、細かい点になりますがボーダーの配色を少なくするということです。
個人的な愚痴も含まれますが、ボーダーの色が2画面内で6種類もあったので、ものすごいトレースしづらかったです。
せめて2種類とかに減らしてください（切実）
配色の話はボーダーだけではなく、
テキストカラーが8種類、
背景色が8種類（グラデーション含む）あったので、
全体的に色の管理が大変そうだなと感じました。
ただ、テキストカラーや背景色については、多ければ悪いという類のものではないとも思いますので、改善の必要性は低いと考えます。
今回のトレースで学んだこと・得たこと
Web版クックパッドの目的について、
最初は「料理の材料や手順を見るサービス」と考えていたのですが、トレース後半にはこの目的は誤りなのではないかと考えました。
じゃあ、何が目的なのかという話ですが、それは「今日作る料理を決めるサービス」ではないでしょうか。
つまり、クックパッドに求められているものは、レシピの内容を知るということよりも、
作る料理を決定するということの方が、ユーザ体験として求められているということです。
おそらく、運営側もそれを理解した上でレシピ画面の優先度を下げており、
結果としてレシピ画面のデザインだけがアップデートされていない状況になった、
ということで説明が付きます。
終わりに
前回の反省点で、アセットの命名がバラバラでどれが何のアセットなのかが、アセット名だけでは推測しづらいという点が上がりました。
その反省点を踏まえて、今回は試験的に命名規則を統一化してみました。
結果は、アセット選択（今回は特に配色）の効率が上がったので割と良好でした。
それでもまだ完全にまとまりきっていないので、もう少しツメてみたいと思います。
最終的には、命名規則を記事にして投稿できるくらいにまでまとめられればいいな…
ということで、今回も長文になりましたが、最後までお読みいただきましてありがとうございました！