美味しいを並べる無限スクロールWebデザイン

Webデザイン３つの良いとこ : 3 Good Point!

無限スクロール（infinite scroll)の参考になるWebデザイン。見ているだけでお腹がすいてきます。

このサイトは、各レシピサイトのキュレーションサービスのようなもの。今ソーシャルメディアで話題のレシピをまとめています。

まずそのサービスコンセプト自体が面白く便利なのですが、そのレシピの魅せ方が良いですよね。

いずれの写真も、掲載サイトからの引用となっていますが、その写真に軽いシャドウがかかっています。そしてレシピタイトルは写真下部に薄黒背景に白文字で表示。

この体裁にすることで、レシピの画像で直感的に料理の魅力を判断することを可能としています。また、小さくまとめているので、沢山のレシピを載せる一助となっていますよね。

レシピはカテゴライズされています。このカテゴリ機能から、簡単なフィルターをかけて表示を可能にしていますね。

そのカテゴライズの可愛いアイコンが印象的。このような目で小さいところだけど、見てわかるデザインを心がけたい。

punchfork-レシピ-写真-無限スクロール-参考-Webデザイン_004

そしてこのサイト、実は角丸が多様されています。レシピ写真も角丸ですし、ソート機能などにも、Rating表示や検索ボックスにも角丸がかかっており、ほとんどの要素が角丸に設定されています。

ですがこの角丸、実は使うのが難しい。このように沢山の角丸要素を並べているのに、自然と表現できているWebデザインは参考になるところが多いでしょう。

丸角については下記の記事がとても参考になります。

これらの記事を参考にしつつ、実際にWebデザインを行うときは、このサイトのように完成されている角丸が利用されたものを参考にすると良いですよね。勉強になりました。

今日参考にさせて頂いたサイト

Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください！