レシピをHTMLページにする良さ
レシピは材料リスト、分量、手順、できあがり写真といった要素が決まっているため、HTMLとCSSで作ると見やすく整理できます。チェックボックス付きの材料リストや、工程ごとの写真を並べたレイアウトなど、紙やメッセージでは難しい表現も自由です。
料理教室の配布資料、家庭の定番レシピの共有、イベントでの試食メニュー紹介など、用途はさまざまです。1ページにまとめておけば、同じレシピを何度でも同じURLで案内できます。
レシピHTMLを共有URLにする手順
作ったレシピページは、共有URLにすることで相手のスマホやPCから開いてもらえます。台所でスマホ片手に見る場面が多いので、URLとQRコードの両方を用意しておくと便利です。
- 材料と手順、写真を含むレシピのHTMLファイルを用意する
- ギガサイト便のトップページにそのHTMLをドロップする
- 発行された 〇〇.giga-site.com 形式の共有URLを確認する
- レシピ名に合わせてカスタムスラッグを設定する
- URLまたはQRコードを家族や生徒、フォロワーに送る
共有前チェックリスト
レシピHTMLを共有は、共有する中身によって確認観点が変わります。見た目、操作、個人情報、外部送信、スマホ表示のどれが重要かを先に決めてからURL化します。
チェックリスト化しておくと、毎回同じ品質で共有できます。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 見た目: PC/スマホ、余白、画像、フォント、折り返しを確認する
- 操作: ボタン、リンク、フォーム、遷移先を確認する
- 情報: 顧客名、社内URL、価格、未公開文言が残っていないか見る
- 共有: 認証、期限、差し替え、レビュー依頼文をセットで決める
料理写真を含むレシピはZIPでまとめる
工程写真やできあがり写真を多く使ったレシピは、HTML単体だと画像が表示されないことがあります。HTMLとCSS/JS/画像をまとめてZIPにしてドロップすれば、相対パスを保ったまま公開でき、写真もそろった完成版を見てもらえます。
公開URLはHTTPSが自動で付き、CDNのエッジ配信で表示が速いので、写真が多いレシピでもスマホでサクサク開けます。台所で待たされずに手順を確認できるのは、実用上ありがたいポイントです。
教室やイベントで配るときのQRコード
料理教室やイベントでは、参加者にQRコードを読み取ってもらえば、その場でレシピページを開いてもらえます。配布プリントの代わりにQRコードを掲示しておけば、紙の印刷も持ち帰りも不要です。
アクセスログを見れば、配ったレシピが実際にどれくらい開かれたかが分かります。人気のレシピを把握して次回の企画に活かす、といった使い方もできます。
レシピを修正したときの再共有と限定公開
分量を調整したり手順を改善したりしたときも、ギガサイト便では同じURLのままファイルを差し替えられます。すでに配ったQRコードやリンクはそのままに、中身だけ最新のレシピに更新できます。
教室の有料コンテンツや、限られたメンバーだけに渡したいオリジナルレシピなら、認証を併用しましょう。一時公開ページにはnoindexが付いて検索結果には出ませんが、noindexはアクセス制御ではないので、限定公開にしたい場合はパスワードやメール認証を設定してください。公開期限を設定すれば、イベント終了後に自動で閲覧できなくなります（無料プランの公開期限は最長7日）。
よくある質問
レシピHTMLを共有するのにアカウントは要りますか？
会員登録なしでも公開できます。レシピのHTMLファイルをドロップするだけで共有URLが発行されるので、思い立ったときにすぐ共有できます。
工程写真が表示されないときはどうすればよいですか？
HTML単体だと画像の参照が切れることがあります。HTMLと写真・CSSをまとめてZIPにしてドロップすると、相対パスを保ったまま公開でき、写真も表示されます。
教室で配るレシピを有料コンテンツとして限定公開できますか？
認証方式をパスワードやメール認証にすれば、URLを知っているだけでは開けないように制限できます。一時公開ページのnoindexはアクセス制御ではないため、限定公開には認証の併用が必要です。
レシピを更新したら配ったQRコードを作り直す必要がありますか？
必要ありません。同じURLのままファイルを差し替えられるので、QRコードやリンクはそのままに、表示されるレシピだけを最新版に更新できます。
改善後の記事では何を確認できますか？
共有前の確認点、認証と期限の考え方、差し替えやレビュー回収の流れを、実務でそのまま使える形で確認できます。