UIトレース#3　クラシル　色やパーツに親しみとあたたかさを感じる

こんにちは、マスダです。

UIトレースも3回目です。今回取り組んだのはクラシルのUIトレース。

お弁当のおかずを考えるのに、クラシルにはたくさんお世話になっています。写真が大きくて、食べたいと思うものを選択できるUIが個人的にはとても気に入っています。

トレースしたものがこちら。
（左がスクショ画像、右がUIトレース）

所要時間：約2時間

使われている色・フォント・パーツについて

フォントは特筆すべき、特徴はあまりないかも？と思います。
見出しが太字ではないのは、あまり見ないな（自分が知らないだけ？）と思いましたが、うーん。

font-familyの指定はMac、Windowsそれぞれを想定したような書き方になっているようです。-apple-system, BlinkMacSystemFont, Hiragino Sans, Hiragino Kaku Gothic ProNがMac用のフォント、Segoe UI, MeiryoがWindows用のフォントといったところでしょうか。

メインカラーは彩度・明度ともに高くない色で、ナチュラルで落ち着く印象です。アクセントカラーはWebアプリだとあまり使われていないですが、明るいオレンジで、ワクワク感や人の温かみをプラスするような効果があるのではと思います。

家庭で作るレシピサービスなので、気取らないけど、作るのが楽しみになるようなそんな配色にしているのかなーなんて思います。

そういえば、同じレシピサービスのクックパッドも似たような配色ですね。クックパッドの方はレシピ投稿サイトでもあるので、色数が多くクラシルよりも賑やかな印象があります。

パーツについては写真やタグ、ボタンの縁が丸くなっているのが印象的でした。カクカクスタイリッシュではなく、丸みをつけることで柔らかい印象になります。料理を作るという行動に親しみを感じやすくなる効果があるかもしれないですね。

感想

クラシルのプロダクト紹介には下記のように書いてあります。

クラシルは「きちんとおいしく作れる」をコンセプトに、毎日使いやすい、人のあたたかさが伝わるサービスを目指しています。

今回UIトレースをした中での気づきとして、色やパーツは「毎日使いやすい」や「人のあたたかさ」という部分を表現しているのではないかなと思いました。
毎日見ていても飽きないメインカラー、あたたかさをプラスするオレンジのアクセントカラー。そして、親しみを感じるパーツの丸み。

自分なりの考察ですが、使いやすさやあたたかさの表現に気づくことができたのはよかったのではないかと思います。

UIトレースと関係ないですが、最近クラシルに献立機能が追加されたことを友人に教えてもらい、これめっちゃ便利やん！と感動してました。
みなさんもぜひ使ってみてください！
ウィンドウショッピングみたいにレシピを探せるクラシルが私は好きです。これからもクラシルにはお世話になります〜😋

おまけ：ちょっとここが気になった

個人的に気になる部分を見つけたので、ここに書いておきます。
「人気キーワードのレシピ」というセクションタイトルではじまるところには「きゅうり」や「鶏肉」などの食材のキーワードでレシピが並んでいます。けれど、途中から同じようなスタイルで「新着レシピ」のセクションが始まります。

これだと、食材のキーワードが並んでいたはずなのに、いつの間にか違う場所にいるぞ、あれっ？と思ってしまうかもなーと。

なので、「人気キーワードのレシピ」のセクションタイトルと同じスタイルの方がいいのじゃないかなと思いました。