こんにちは、Webデザイナーのそいです。

レシピサイトといえば、Cookpadやクラシルなどレシピ専門のWEBメディアが主流ですが、実は食品や食材メーカーもレシピサイトを運営されていることが多いんです。

今回はそんな、食品メーカーが発信するサイトに焦点を当て【レシピページ】のセオリーを大調査！どんな情報が載っている？見せ方は？見やすさは？デザインに関する「学び」を今回も独自の視点で紹介していますのでぜひご覧ください。

レシピページの基本構成を見てみよう

今回の参考サイトにキユーピーのレシピページを挙げさせていただきます。

料理の作り方紹介ページになるので、極めてわかりやすく、シンプルな構成にしておくことがポイントですね。

❶メニュータイトル

❷メニュー画像

❸最近見たレシピ

閲覧履歴が見れるページに遷移するリンク・機能です。ブックマーク的な使い方ができて便利ですね。

❹レシピ印刷

レシピの印刷ができます。使うユーザーは少ないかもしれませんがあったら便利！という機能です。

❺調理時間

献立を決める時、調理時間は大事な要素ですのでわかりやすい位置に記載することがポイントですね。

❻栄養情報

レシピメディアではあまり見かけませんでしたが、食品メーカーのレシピページでは栄養情報が載っていることが多く見かけられました。

❼材料

調理に必要な材料が載っています。キユーピーでは食材と商品名にテキストリンクが設定されており、クリックすると各情報が見られるようになっています。詳しく情報が見られるのは嬉しいですね。

❽作り方

調理の手順やポイントが書かれています。

❾このレシピに使われている商品

商品情報のリンクが貼られているのも、食品メーカーのレシピページの大きな特徴です。

まとめ

上で紹介した9つがあって嬉しい・わかりやすい要素かな、と思います。

キユーピーにはこのほか、レシピページをメールやスマホに送れる機能や、会員登録をしたら使える「お気に入り機能」が搭載されていました。

あって嬉しいコンテンツ（＋α）をご紹介！

基本的な情報・機能のほか、ユーザーにとって便利だなと思ったコンテンツをピックアップしてみました。

比較的若い年齢層のユーザーにやさしいコンテンツ

Ghanaの手作りレシピ

❶難易度

バレンタインのギフトにピッタリ！ガーナのサイトならではお菓子作りの「難易度」表記があります。学生さんや子どもの調理補助が必要そうな年齢層の親世代を意識して「難易度」が記載されているのではないかなと思います。難易度にあわせてレシピを選べるのは嬉しいですね。

❷つくり方

つくり方には画像が載っています。レシピによっては動画も閲覧できるのでわかりやすいですね。

❸おいしく食べられる目安

自身で食べることはもちろん、人にあげることを想定して、おいしく食べられる目安が書かれていました。

おすすめレシピの導線設計

日清製粉ウェルナ

❶同じ食材を使ったレシピ

その名のとおり、同じ食材から関連するレシピの記事が載っています。食材が余った時の献立てを考えるのに便利ですね。

❷同じ商品を使ったレシピ

このページにも使用商品の紹介コンテンツがあります。その商品を使ったレシピの記事が紹介されています。商品にもよりますが、メインやおかず、おやつなどジャンルが豊富でワクワクしますね。

食育を意識したレシピページ

❶動画で作り方を見る

レシピ動画が見れるようになっています。レシピページは全年齢層に見やすく作られていることもあり、ボタンの文字が大きいのも良い点だと思いました。

❷レシピの読み方

クリックすると、レシピに書かれている分量や、このページの見方についてを詳しく解説した画面が表示されます。たとえば分量であれば、計量器具の容量が知りたければ別のサイトで調べる必要があるなど手間がかかります。ですが、このページにはヘルプ的な役割ですべて説明してくれるのでとても使い勝手が良く作られています。

まとめ

いかがでしょうか。

今回は食品メーカーが発信するレシピページをもとに、レイアウトのコツやアレンジポイントを調査してみました。基本的な要素はもちろん、見せ方やユーザーに合った役立つ機能などそれぞれのメーカーサイトで工夫されているところがわかりましたね。

今回もご一読いただき、ありがとうございました。