見出し画像

DailyCocoda! #004_料理アプリの検索画面

こんにちは、駆け出しwebデザイナー(2年目)のつついです。

今日も参りましょう!

お題

料理アプリの検索画面


前提

料理アプリを見比べた上で、レシピ検索画面について考えてみます


リサーチ

タベリー


クックパッド


クラシル


3つともそこそこ似てます。
装飾も要素も限りなくシンプルにして、
検索ワードの入力に集中させる作戦でしょうか。


アウトプット

今回はクラシルのUIを元に少し変えてみました。


考えたこと

iPhone8のサイズではあまり感じないのですが、iPhoneXのモックにはめ込んでみると画面の縦幅がとっても長く、入力欄とキーボードが遠すぎてしまいややストレスに感じました。

なので下に移動してみました。
入力欄はあと一回り大きくして気づかれやすくした方が良かったかなあ

もう1つ、既存の料理アプリは検索欄に画像0を貫いているようですが、検索し始めてからやっぱりもう一度どんなレシピがあるか考えたい、フラットにブレストしたいと思うことも多いと思います。(少なくともぼくはよくあります)

なので、ヘッダーのタイトル背景やカテゴリー検索の下に、少しぐらいイメージが膨らむ画像があってもいいかなあと思い差し込んでみました。

googleっぽい検索UIから
ヤフーっぽい検索UIに寄せている
と表現するとわかりやすいでしょうか。

Google

Yahoo! Japan


おしまい

おしまいです。



サポートいただいたら フェレットの東風(こち)くんにおやつを買ってあげて、 おやつをあげているところは動画でupします。