キユーピー レンジでかんたん！肉巻きサラダ

今やマヨネーズだけではないキユーピーさんの「レンジでかんたん！肉巻きサラダ」のサイトです。旬の野菜とお肉をたっぷり楽しむレシピをご紹介してくれています。一ページで簡潔されたサイトで、次階層へのページリンクがありません。このページ内でリンク遷移しています。

ただアンカーリンクなどで遷移させるんじゃなくて、JavaScriptによって動きのある、楽しめるサイトとなっています。フラッシュは一切使ってないのに、このスムーズでわかりやすい動き。すごいです！

まず1つ目のギミックとして、右上にある「肉巻きサラダの作り方」をクリックすると、こんな↑感じで基礎の作り方が表示されます。この表示のされ方もキレイでスムーズなんですよね。本当に簡単に作れてしまう気がします。

5つほど簡単メニューが表示されていて、それぞれがアコーディオンメニューのようになっています。そのうちの「2.レンジでかんたん！セロリの豚肉巻きサラダ」をクリックすると、こんな↑感じで拡がってレシピへのリンクが表示されます。この動きもJavaScriptで制御されていてスムーズなんですよね。

そして「レシピを見る」をクリックすると、右から左へ画像がスライドし、こんな↑レシピが表示されます。わかりやすくて良いですよね。写真やテキストなどは、すべて1枚の画像として加工されているので、これをテキストでもできるはず。試してみたいですね。

とにかく、これほど簡潔でわかりやすいユーザー導線はないでしょう。素敵です。フラッシュでも簡単に対応できるとは思いますが、JavaScriptなら特別な環境がなくても、新しくメニューが追加されたら、かなり簡単に対応できるのではないでしょうか。

写真もキレイですし、動きも面白い。言うことがないですね。SEOの点から見れば、テキスト量がかなり少ないので、できればテキストで紹介する部分はテキストで対応したほうが良いのかもしれませんが、ドメイン自体にパワーがあるので、この場合はあまり関係ないでしょう。この色々と組み合わされたJavaScriptの動き、参考にさせてもらいます。