UI設計が素晴らしい、苦手な食材を除いた料理レシピの検索サイト -Foodily

かっこいいサイトを見つけても紹介するのはTwitterばかりなので、たまにはブログでもご紹介。

サイトのキャプチャ

Find recipes online | Foodily | Food, I love you

[ad#ad-2]

パッと見のデザインも素敵なのですが、UIやコンテンツもかなり好みのサイトです。

大きい写真画像を背景に半透明のパネルをのせ、レシピ検索サイトにふさわしく検索のエレメントが中央に大きく配置されています。
右上の小さい動画アイコンも隙がない設計です。

サイトのキャプチャ

動画を表示したキャプチャ

[ad#ad-2]

コンテンツの主となるレシピ検索もすばらしいです。
試しに「potato salad no mayo」で検索してみます。ポテトサラダのマヨネーズ抜きですね。

サイトのキャプチャ

「potato salad no mayo」の検索結果のキャプチャ

おいしそうなレシピがたくさんでてきました。
数多く表示される検索結果は、上部のバーや左右のアローでページを送ります。

また、さらに苦手な材料を追加して検索したり、似たような料理のレシピも表示されます。
レシピ内の各材料のアイコンをフォーカスすると、それを除いたレシピ一覧が表示されます。

料理の作り方は、「Details」をクリックするとパネルがスライドして表示されます。

サイトのキャプチャ

料理の作り方のキャプチャ

Twitter(@colisscom)では、他にもいろいろ紹介してますよ。

サイトのキャプチャ

MTA.ME
ニューヨークの地下鉄を「弦」にみたてたプロモーションサイト。

sponsors

top of page

©2018 coliss