レシピサイトを自作するに当たってポイントを整理してみました。
前提として運営・コンテンツ制作は個人。クックパッドのような投稿型ではありません。
この記事は料理レシピサイト制作の平準化的なことではなく、自分でも見返すための覚書として書きました。
なお私は料理レシピサイト制作は門外漢です。ただ自分個人でレシピサイトを運営したいと思って制作してみたので、その時に自分なりに考えてポイントを整理したものです。つまり初心者の完全自己流です。レシピサイト制作に詳しい人が見たら見当違いな点もあるかもしれません。あまり内容を鵜呑みにせず参考程度にお読みください。
この記事の内容。
- レシピ制作で最重要な4点
- 次点で重要な3点
- その他チェックしておきたい3点
重要な順に3段階にしましたが全部で10点です。なお記事はサイト制作経験がある方向けになっているので各用語の説明などは省きます。
レシピサイトで最重要なこと4点
自分の使用経験をもとに考えてみると、レシピサイトで重要な3大キーワードは「写真（リッチリザルトの）」「サイト内検索」「スマホ」と思います。おそらくこの3つのうちのどれを欠いてもユーザーを集めてリピーターになってもらうことはできないと思います。
そしてつけ加えるなら運営者側の運用管理のしやすさ。
というわけでレシピサイト構築でマストだと思ったのは以下4点。
- 写真表示、つまりGoogleリッチリザルト対応
- サイト内検索（主にキーワード検索）
- スマホ優先、PCはおまけ程度
- 更新と管理のしやすさ→CMS…やはりWordPress
1.リッチリザルト（リッチスニペット）
Googleリッチリザルト。なにはなくともまずはこれ。
Googleで料理名などで検索すると画像付きで出てくるあれです。
Googleのサポートは30種類以上あるようですが、レシピもその一つで構造化データにできます。
https://developers.google.com/search/docs/advanced/structured-data/recipe?hl=ja
レシピを検索結果のカルーセルまたはグリッドに表示する重要性については言うまでもないです。特にリピートしているサイトやアプリがない場合ほとんどここからクリックしそうです。
よくリッチリザルトの効果として挙げられることの一つに競合との差別化があります。ただレシピサイトの場合COOKPADや調味料メーカーなどは必ず対応しているのでもはや必須です。むしろ対応していないと検索結果の土俵に上がっていないのとほぼ同じです。
※レシピのリッチリザルトのプロパティのうちどれをどう実装するかは別記事でまとめました。以下リンクからどうぞ。
2.サイト内検索（主にキーワード検索）
レシピサイトでは検索は大事だと思います。
Google検索やSNSからの流入がスタートとなりますが、個人サイトはその後ファン化してもらうことを目指します。外部からの流入のあとサイト内を巡回してもらうにはサイト内検索は当然重要です。また書籍よりも柔軟な検索ができるというのがWebの利点とも思います。
というわけでこの検索機能を最重要事項の一つとしました。
具体的には以下。直感で重要だと思った順ですが実際は違うかもしれません。
- キーワード検索…もっとも発見されやすく、手軽に使いやすくかつ邪魔にならない。当然料理名に対応。
- 食材検索…特定食材の大量消費など、食材名で調べたい方が多い。
- 目的検索…簡単、さっぱりなど目的別。
- その他検索…献立ジャンル（ご飯もの、汁物など）、調理法（煮、揚など）等。
料理を調べる際に大事なのは料理名と食材、というわけでこれがワンツー。
そしてまずは1.のキーワード。料理名は並べて書いておくには無理がありますしフリーキーワードなら料理名以外にも対応できます。というわけでキーワード検索窓を一番使いやすくする必要を感じます。実際COOKPADなどは重視しているように感じます。
注意点としてはコンテンツ量が少ないと検索結果が0や少ない件数になり、がっかりされそうなことです。実装は普通に検索窓をつければいいですが、設置場所は吟味する必要がありそうです。また表現や漢字・ひらがな表記が異なるために適切な結果にならない、といった問題も対応するのが理想です。
次に2.の食材。これは食材名で調べられている方が多いからです。「2.食材×1.料理名」「2.食材×3.目的」というパターンが多くみられます。
3.の目的についてはサイトのコンセプトによるでしょう。ただ先述した大量消費などは需要が高いようですし、どんなテーマのサイトでも考慮して損はなさそうです。
4.の献立や調理法はそのサイトのコンセプトやカラーによりますし場合によっては不要。むしろこの分類のために振ったタグは関連表示や提案で使う場面のほうが多そうです。
3．料理レシピはほとんどスマホで見られる
料理レシピといえばスマホです。もう2022年なのでモバイル優先は料理レシピに限った話ではないです。ただ料理レシピに関して言えばモバイル特化くらいの意識のほうがいいと思います。
乱暴に言い換えるとほぼPC無視です。
最低でも8割、場合によっては9割以上がモバイルです。6人中5人がスマホから来る感じです。
私は自治体サイトの制作などが多い制作会社にいたので基本PC画面を中心にデザインやコーディングをしてきましたが、今回はさすがに切り替えました。
スマホ優先というよりほぼスマホオンリーにするわけですが、別にPC表示にマイナスが出るほどにはならないです。
むしろこんなメリットがあります。
- デザイン時点でスマホのみを書けばよい（PC時は2カラムでサイドはバナー等を置くのみ）
- コーディング時点でレスポンシブ対応がラク（メディアクエリをほぼ書かないで済む）
- 運用面でもPCとスマホそれぞれで更新・確認したりは発生しない
デメリットはPC時のトップページが小ぢんまりするためおしゃれ感やインパクトは出しづらいこと、PC用サイト定番のヘッダーにメニューを並べておくパターンは使えないことぐらいでした。
なお”スマホでの料理レシピ”は通常とは異なる条件を考えないといけません。つまり料理中に見るというパターンです。濡れた手やキッチンという環境は通常のスマホ使用とは異なります。
例えば以下頭に浮かびました。
- 料理中に見るならあまり触りたくない→スクロールやクリックとの関係
- 濡らしたくないのでキッチンの隅のほうに置いて覗き込む→可読性等
- 材料欄だけを見たい→表示範囲等
この項は長くなったので別記事に分割しました。
4.更新と管理のしやすさ→CMS…やはりWordPress
レシピサイトは静的なHTMLだと企業HPや日記ブログなどよりも管理と運用にかかる労力が多そうです。例えば各レシピにタグをつけて表示をコントロールするなどは省力化したいですし、情報の有機的な連携は多いです。ページが増えるほど管理者側のUIも大事になってきます。
というわけでCMS化はほぼ必須です。
また機能は既存プラグインなどを活用して車輪の再発明的な余分な労力を避け、コアとなるレシピの演出に最大限注力する→となるとやはりWordPress。
もっとも私はWordPress以外のCMSはほとんど知らないのでほぼ一択だったのですが、肌感覚としてもWordPressの仕組みとレシピサイトの相性はかなりよさそうと思っています。WPの基本的な設計もそうですが、特にGutenbergエディタ―が基本になった（ブロックで組める&それをパターン化）ことが意外と大きいと思っています。
Gutenbergエディタ―によってカスタムフィールドから解放されました。定番のパターンは「材料」「作り方」などを登録しておいて呼び出せる形にしました。
カスタムフィールド脱却のメリットは他にもあります。レシピの場合絶対に材料欄が無ければならないなどの縛りは不要ですし、逆に自由に付け加えたい見出しなども出てきそうです。Gutenbergエディターはまさにレシピページのようなページを作るためのエディターだと感じています。
レシピサイトで次に重要なこと3つ
先の項では最重要だと思った4つを書きましたが、ここからはその次くらいに重要そうなことです。
5.こうもり問題防止。カテゴリーではなくタグを使う
HPやブログサイトの場合は運営者側で記事をカテゴリー分けすることが多いですが、レシピでは基本NGだと思っています。
内部的にカテゴライズするのはいいですが、特にURL（パーマリンク）にカテゴリを挟むのは×です。つまりサイト名/カテゴリー名/レシピ名は×。
これはいわゆるこうもり問題を避けるためです。こうもり問題とはAとBの両方の性質を持つものをどちらに分類すればいいのか？的なことです。料理レシピ群というのはこうもり問題の例としては最適と言えそうなくらいです。
ただ独創的なコンセプトで運営したい場合はその限りではないかもしれません。ただしのちのち方向性が変わったり検索機能を充実させたりしたくなった場合も考えるとやはりカテゴリ―分けを避けておいた方がよさそうです。少なくともパーマリンクには入れないこと。
この辺は受注でサイト設計するといった場合には、しっかり話し合って合意しておくことが大事かなと思います。
パーマリンクは基本的にサイト名／レシピ名（※アーカイブ等は除く）
WordPressの場合カテゴリーという機能を使わず、タグやカスタムタクソノミーを使う形で検索に対応できるよう柔軟につなげていく形になります。
ちなみにレシピサイトの場合パンくずリストは不要と思って外しました（異論はあると思いますが、今回の私の場合は）。
6.関連レシピ表示
関連レシピ表示はブログサイトでいう関連記事に当たるものなので当然かなり重要です。
レシピ末尾に食材、料理名、テーマなどの切り口でタグ付けした関連レシピを表示します。
あるいは「このレシピを見た人が見たレシピ」などです。一応レシピ上部にも関連アイコン（食材タグなど）を置くようにしています。
ブログなどは関連記事という形でこちらから提案していくのは重要だと思いますが、レシピの場合もその重要性は同じかそれ以上です。
それ以上というのは、サイト訪問の最終目的として「購入」「成約」などがない以上、滞在時間をのぞけば他ページに導くことくらいしかないからです（調味料メーカーのレシピサイトなどは別）。マネタイズ面でアフィリエイトなどで収益化することはあまりないと思うので、アドセンス広告等がメインになるかと思います。
UXやブランディングの面では2度目以降の訪問につながるか（ファン化してもらえるか）どうかの点でも関連表示は重要そうです。
また関連レシピ以外の提案の形としては季節やサイトのコンセプトに応じた特集を作ることです。例：「冬に食べたいあったか料理」など。今回こういったものはトップページのカルーセルに設置しました。また対象レシピページにアイコン表示しています。
7.SNS・動画などの連携対応
上記まで基本的にGoogle検索からの自然流入を中心に考えてきました。基本設計はやはりそこに軸足があったほうがいいと思いますがSNSももちろん重要です。
SNSの運用や戦略はまた別の話なのでカットしますが、サイト制作側としては以下要チェックです。
- SNSでリンクを貼ってもらえた際の表示
- SNSシェアボタンなど
- サイト運営者が発信用の専用アカウントを持っている場合の紹介
またYouTubeとの連携も考えておく必要があります。レシピによっては動画リンクや埋め込みを冒頭に配置するパターンなどもありかもしれません。
チェックしたいその他3つの点
残りの3つは当たり前すぎることから未解決の問題まで含めた自分用覚書です。
8.作り方の過程写真と動画の関連性
レシピサイト最低限の項目は…完成写真、材料、作り方。そしてできればレシピ作者。
各ページは上からこの順（今回改めてこの定番の順番を入れ替えることも検討してみましたが、その必要性はなさそうです）。
- 完成写真
- 材料
- 作り方
- レシピの作者（個人サイトの場合1か所にまとめて表示でも可）
2.～4.のすべての項目において画像使用の可能性がある、という点は大事です。（レシピ本によっては材料の写真も載せていることがあるので。）そしてレシピサイトの命は写真です。
3.作り方の画像について運営面からもう少し考えたいと思います。
問題は作り方について写真を載せるかです。載せる場合気になるのはクオリティと作業的コストの問題です。完成写真の場合スタイリングや光源などをしっかり整えやすいですが各工程の写真をそれなりのクオリティで撮るのはなかなかの労力です（普通のキッチンの場合）。あまりにも質の悪い写真だと逆効果かもしれません。
そして今の時代は作り方を動画で見ることのほうが多いのではないかと思っています。つまり「写真がないとわからない」という方は動画に行くのではないか、という問題です。
こう考えていくとそもそもレシピサイトをやっていくなら動画コンテンツも並行してつくるほうがよい、という結論にもなりそうです。アクセス数・UXの向上面でもそうですが、制作者の作業効率的な面からもです。つまり固定カメラで手元を映し続けるほうが料理途中の湿った手をぬぐいながら撮影ボタンを押すよりラクかもしれない、ということです。
9.差別化とUXを高めること～レシピの目的は料理情報提供だけとは限らない
これだけレシピ情報が氾濫している時代にあって選ばれることは大変なことだと思います。コンテンツの質や切り口ももちろん大切ですが、ここではデザイン面からの差別化を考えます。
今回私が心がけた（製作途中ですが）のは以下です。
- 個人運営なので企業っぽさを消し手作り感を出すこと。
- マイクロインタラクションなどの体験を重視すること。
手作り感について具体的にはフォントとイラストです。今回私は見出しに手書き風フォントをチョイスしました（Webフォントはなかったのでimg）。また本文その他にはWebフォントを使いました。食材などのイラストアイコンはすべてイラレでマウス描きしました。イラストアイコンにすることでおしゃれ感や手作り感も演出できます。
レシピサイトでもう一つ重要かなと思ったのがマイクロインタラクションです。クリックしたときのちょっとしたリズミカルな動きなどです。
大手サイトはわかりやすくまとまっていますが、こういった部分はあまり実装されていないです。大手は情報量に焦点を当てていると思うのでこれでいいですが、個人の場合はもう少し考える余地があります。
実は料理レシピの需要・目的は料理を作るための情報提供だけではありません。
例えば寝る前にレシピ本を眺めるという趣味があるそうです。そのために特に写真がきれいなレシピ本を買う人がいるほど。
またYouTubeの普及で「自分では料理をしないけれど料理動画を眺めて楽しむ」という人も増えています。ということは個人料理レシピサイトもこの層をターゲットにできるのかもしれません。例えば通勤中や勤務中のスキマ時間にレシピサイトを眺めたいあるいは読みたい、というような人。スキマ時間にゲームをするのと同じような感覚だとすると、マイクロインタラクションの充実などは侮れないのではないかと考えています。
手作り感やマイクロインタラクションはあくまで一例ですが、大手の大量情報サイトとは差別化する意識は必要と思います。
10.HTMLマークアップ
HTMLのタグ付けをどうするかはSEO的にはあまり重要ではないです。今回大手レシピサイトなどを調べてみましたがCOOKPADはdivだらけでしたし。
ただ一応せっかくレシピサイトを作るのでしっかり行なおうと思って改めて考えました。
詳細は別記事（下のリンク）でまとめましたが主に検討したのは以下です。
- 材料の表はdlかulか、あるいはtableか。
- 作り方はolかhか（簡潔ならolだが画像複数や詳細なポイントを含む場合もある）
受注制作の場合運用者側の方針を確認しておくことでより適切なマークアップになるかもしれないという話です。
注意点としては、各レシピページの完成イメージについて固定概念を持たないようにすべきかと思います。
例えば材料欄。材料と分量の組みあわせは一行（簡潔な単語の一対）とは限りません。例えば運営者が「自然派」や「無農薬」などのコンセプトを持っている場合、材料に詳細な情報を付け加えたい場合もあるかもしれません。
また作り方もレシピによっては料理教室に通って教わっているかのようなかなり詳細な書き方をするかもしれませんし、途中で別パターンに分岐などもあるかもしれません。
こういった使われ方をする可能性も含めてしっかり確認をとっておくことは大切です。
まとめ
長い記事を読んでいただきありがとうございました。個人的な考えなのであまり鵜呑みにしないでください。
レシピサイト制作の確認ポイント10点まとめ。
- Googleリッチリザルト
- 検索機能の充実
- ほぼスマホで見られる
- 更新と管理のしやすさ→WordPressは〇
- こうもり問題防止（特にパーマリンク）
- 関連レシピ表示
- SNS・動画などの連携対応
- 作り方の過程写真と動画の関連性
- 差別化とUXを高めること
- HTMLマークアップ
制作・設計の面についていろいろ書いてきましたが、最終的にはコンテンツの質と濃さが大事です。初心者でもわかるような丁寧さもそうですし、写真の質もそうです。
とにかく検索で上位をとることと検索結果から選ばれること（その主な要因はコンテンツ）、これができていればサイト内が使いにくかろうがなんだろうが価値が高いわけです。
というわけであまり設計のことを考えすぎるよりは、一つ一つのコンテンツを徹底的に考え抜いて作りこむほうがはるかに大切ということを忘れないようにしようと思っています。
コメント