はじめまして、よしこ ＠K2_yoshiko です。
今回は、レシピ検索サービスNadiaのUIトレースを行ったので、その感想や気付きをまとめました。
Nadiaとは
レシピサイトNadia(ナディア)はプロの料理家・料理研究家・フードコーディネーターなどのレシピやお料理に関する記事が見られるお料理サイト。
引用：https://oceans-nadia.com/special_sites/about_nadia
女性向け情報サービスLOCARIのランキングではまとめ記事が上位によく上がっていたり、Twitterでもレシピがよくバズっていたりしています。
Nadiaではレシピ投稿者のことをアーティストと呼んでいますが、一般人ではなく料理家やフードコーディネーターとして活動しているプロがアーティストとして登録していますので、レシピの質と信頼性が高いという特徴があります。
UIトレースをするにあたって
Nadiaは、プロのレシピが見れるという体験を訴求していますので、料理に関する情報を提供することと同時に、アーティストの魅力を如何に伝えるか／演出するかが大切になります。
これは、他のレシピ検索サービス（クックパッド等）にはない特徴なので、アーティストの魅せ方をUIUXとしてどう実現しているのかをトレースする中で探っていきたいと思います。
今回のトレースは、ホーム画面・レシピ画面・アーティスト画面の3つを行います。
アプリは、Adobe XDを使用します。
成果と気付いた点
成果物
まず、UIトレースを終えてみての全体的な所感ですが、
Nadiaは、レシピ検索サービスというよりも、SNSとしての側面が大きいなと感じました。
その感じた理由は、以下の2点です。
- ホーム画面に配置してあるレシピへのリンクに、アーティスト画像＋名前がほぼ配置されている
- イイね機能の「おいしそう」やフォルダー機能の「お気に入り」の数が、ホーム画面のリンクに可視化されていたり、レシピ画面のファーストビューで目立つように配置されている
このことから察するに、料理コンテンツを中心としたSNS的な体験に重きを置いているのではないでしょうか。
実際に使用している人から話を聞いたところ、アーティスト本人に対して固定ファンが付くこともあるそうです。
その他、UIトレース中に気になったところは、各画面のデザインにかなり差があったところです。
例えば、セーフエリア（画面左右端の余白）がそれぞれの画面で違いまして、
- ホーム画面：7px
- レシピ：10px
- ユーザ：20px
となっていました。
ちなみに、Apple社ガイドライン（HIG）では左右サーフエリアは少なくとも16pxを推奨していますので、その基準を満たしているのはアーティスト画面のみでした。
テキストカラーについても、ホーム画面は#666666のグレーだったのに対して、アーティスト画面では#583407の濃茶色になっていましたし、画面毎で細かい差異がいくつかありました。
良い・真似したい点
3画面の中でもアーティスト画面の視認性がよく、ファーストビューから下までざっと流し見していても、流れてくるコンテンツが何なのかが大体把握できる作りになっていました。
その理由は、以下のように分析しました。
- 十分な余白を要素間に確保した（近接の効果）
- テキストを始めとした各要素のサイズに十分な差を作った（コントラスト効果）
- デザインに罫線や箱などの装飾を少なくし、相対的に他の装飾を目立たせた（コントラスト効果）
- 読んでもらいたいテキストは16px以上を使い、14px以下のテキストはメタ情報などのみに限定した。（可読性）
- できる限り左寄せの配置にして、左側に視線を集中させた（整列の効果）
トレース中に私が気付けたのはこのくらいでしたが、工夫はまだまだありそうでした。
改善できる点
- 各画面のデザインを、統一化させる。
- デザインの統一感は、サービス体験に大きな影響があるので統一したほうがいいと思いました。
- 個人的な好みで言えば、アーティスト画面のデザインがいい感じです。
- ホーム画面のレシピ一覧のナビはテーブル型で縦に並べるのではなく、カード型で左右に移動できるナビにする。
- レシピ画像を大きくできるので訴求力を高めることができる上に、レシピ数を増やせるので一度で二度美味しい。
- 全体的に余白をもっと大きく取る。
- 特にホーム画面がそうですが、余白が少なく画面いっぱいに表示されているので、デザインに慣れるまで時間がかかりました。
- もし余白を確保することでページが縦長になりすぎるなら、コンテンツの表示方法を変えるか、そもそもコンテンツの整理を行うことが望ましいのではないでしょうか。
今回のトレースで学んだこと・得たこと
一定の地位を築きつつあるサービスであっても、デザインが統一されていないこともあるということに気付きました。
逆に言えば、デザインを最適化できたら、そのサービス体験はどれほどの掛け算になるんだろうとワクワクもしました。
実際のトレース作業については、作業の初期段階からXDのアセット機能をフル活用しつつ進めましたが、狙い通りすごく効率が上がったので、もっとXDやプラグインの機能を活用して作業効率を高めたいです。
しかし、アセットの命名がどんどん散らかってくるので、他の人の命名規則を参考にしつつ自分の命名規則を作る必要が出てきました。
これは、今後の課題となりました。
終わりに
UIトレースは、UIUXデザイナー初心者によくオススメされる勉強手法ですが、「なんでこのサービスをトレースするのか」といった目的意識はすごく大事だと感じました。
もし目的を見失うと、ただトレースするだけの作業になってしまうので、すごく無駄な時間を過ごしてしまいそうです。
UIトレースでは得られるものが多いので、今後も続けていきたいと思います。
長文になりましたが、最後までお読みいただきましてありがとうございました！