伊藤みらの/卒業研究

あたらしいレシピサイトをつくりたい

料理体験をサポートするモバイル用webサイト

• 伊藤 みらの
• Keywords：Web Design , recipe site , UX Design , JavaScript
• WEBサイトリンク(モバイル向け)
  
  
  
  
  もくじ
  成果物
  調査
  進捗記録
  仕様について

概要

これは何？

　レシピを見ながら料理をすることに視点を向けた料理サポートレシピサイト

背景と目的

ブログサイトなどで発展してきたレシピコンテンツにおいては、今やWebサイト、SNSなどの発達によりあらゆるユーザーが気軽に情報発信、受信ができる社会になった。 中でもスマートフォンを活用したレシピサイトは増加しているが、既存サイトの多くは単純なテキストと画像の羅列にとどまっており、調理中の「見やすさ」「操作性」「機能性」には改善の余地がある。
　そこで、料理中の使いやすさを重視した画面構成、視認性を向上させるデザイン、調理をサポートするツール機能を追加し、ユーザーをサポートするレシピサイトを制作する。レシピサイト利用におけるより実用的な表示方法を生み出すことを目的とする。
　また、汎用性やシェア率の高いJavascriptを用いる。

コンセプト

• レシピサイトを見ながらの料理、もしくは料理そのもののハードルを下げる
• 年齢層にかかわらず、料理をしたいユーザーがもっと楽しくなる
• レシピサイトを作りたい人の新しいアイデアのもとになる

成果物の仕様

• Webサイト(モバイル向け)
  あたらしいレシピサイトをつくりたい
• サイトマップ・ディレクトリ

機能

• 分量調整
• すすむ、もどるのタップ操作
• タイマー
• 進捗バー
• 文字だけで見る機能
  
  
  コンテンツ
• 📎サイトに使用した写真(OneDriveリンク)
• レシピ
  
  
  
  

制作ツール

ハード

• MacbookAir

ソフト

• Visual Studio Code(コーディング)
• Adobe XD(ワイヤーフレーム・デザイン)
• Adobe Illustlator(アイコン作成)
• Adobe Photoshop(写真加工)
  
  

プロジェクトの期間

まとめ

今回、スマートフォンを料理中に触ることへの抵抗感に関する意見から、『非接触型』『接触型』と極端な分類を行った。画面構成の追求のため、Instagramにみられる『続きを読む』形式を取り入れ、画像レシピ形式をタップ操作による手順確認に、またタイマーなどの機能を用いたことで、各方面の要素を取り入れた新たな構成のレシピサイトを作成できた。掲載コンテンツに対して工程数を要したが、実験的なサイトに出来上がったと感じる。また、サイトを長期的に運用するためにはコード記述の整理と最適化が必要になる。柔軟に対応できる汎用性の高い構成を追求していきたい。

• キッチンが狭くても接写して背景をトリミングすれば手順写真はまあ見れるものにはなる
  参考...１口コンロ&作業スペースなし iPhone13 1人で撮影

(中間報告)
このサイトではテキストに仮のレシピを用いているが、コンセプトの一つである料理をしたいユーザーに向けたものにはなっておらず、大元が破綻しているように感じられた。実際に機能を実装した使えるレシピを掲載し、ソースコードを添える形にブラッシュアップする。

調査

現状調査

レシピ利用のタイミング
～マルハニチロ「料理レシピに関する調査 2020」～

• 食材を買う前(6割)
• １「料理開始直前」、２「くつろいでいる時」、３「料理中」

懸念点
レシピサイト・アプリを見ながら料理をする時のことについて教えてください(ミルトーク)

• 衛生面から料理中にスマートフォンを触ることへの抵抗感が多く挙げられ、その点から仕方なく開始前に手順を覚えているといった意見もあった。

ユーザーの重視する傾向
【レシピサイトNadia】夕食作りに関するアンケート調査

• 夕食作りに30分以上かかる(78.3%)
• おかずは3品以上作る(70.1%)
• 最も面倒だと感じる工程は献立決め(70.6%)
• 夕食作りで重視するのは「簡単」「食材の使い切り」「時短」
  
  
  
  

先行事例

構成の参考
Instagramのレシピ投稿

参照元の投稿＞
moaiskitchen
１画面で情報を得られやすい例としてSNSを調査した。
画像付きレシピに付随してテキスト情報が格納されているフォーマットが多くあった。


分量計算

📎レシピの全材料を同じ割合で計算
📎お菓子作りのレシピの分量の変更を自動計算
📎分量計算ツール
📎分量変換　食品の質量の違いによる分量の変換ができる

• 個別に食品名と元の分量を入力する必要がある
• １つの食品で使いたい分量→全体を求めるツールもある
• 大さじ変換は調味料などの質量によって計算式が異なる
  
  

献立検索

📎献立ポン
献立タイプ・ジャンル・使いたい食材にチェックを入れると複数のメニューが提案されるWebサイト。サイト内にレシピ記事はなく、出力されたメニュー名は検索リンクとなっており、クリックするとサーチエンジンに遷移する。

📎AJINOMOTO PARK/献立・メニュー
すべて:12625件のレシピ数を保有する味の素公式レシピサイトの献立カテゴリ。1週間ごとに7日間1汁1菜の献立が組まれ、1汁3菜や中華料理など多様なカテゴリから選択することもできる。献立のメニューを選択すると個別のサイト内レシピへ遷移する。


キッチンタイマー
タイマー機能のあるレシピサイトが見つからなかったため、タイマーのツールサイトを参照する。
キッチンタイマー/ソフトのがらくた箱
オンラインで使えるキッチンタイマー/ラッコツールズ
いずれもスタート/ストップ/リセット機能、アラーム機能がある。


その他事例
📎クラシル
モバイル版でレシピを閲覧すると、手順の見出しの上に自動ロックがオフにされる料理モード機能がある


📎音声ナビによる料理サポートアプリFamCook
📎だれにでも伝わるレシピの書き方/オレンジページ

技法・技術情報

📎動くwebデザインアイディア帳
多種多様の動的なデザインが細かくタグで分類されています。またHowToを予定していた時のレイアウトはこちらを参考にしていました。
（書籍を購入すると閲覧できます）
📎sinpe-Blog
プログレスバーのサンプルとして円グラフ・ドーナツグラフを作成するときに閲覧しました。
StarFree(スターフリー)サーバー開設〜データアップロードまで。/Qiita
カウントダウンを繰り返すタイマーを作った話【JavaScript】

調査を受けて

📎調査から、ユーザーは料理の準備段階や実際の調理過程において、手軽さや効率性を重視する傾向にあり、調理時間短縮や献立決めに関するニーズがあることががわかった。
　衛生面への意見から、料理中にスマートフォンを触らずにレシピを閲覧できる『非接触型』、触って操作をする『接触型』の2つの面でアプローチを行うことにした。

プロジェクト管理

ToDo

• 掲載するコンテンツの数を決める
• メインビジュアルを作成する
• Webサイト制作に取り掛かる
• サーバを取得
• サーバにサイトを上げる
• 掲載文章を全て用意する
• 作品概要の大枠を作成する
• 作品概要を完成させる
• トップページ追加
• メインページ追加
• 料理の写真撮影
• 写真加工処理
• コンテンツを全て掲載
• 「文字だけで見る」ページのCSS
• 「文字だけで見る」ページのjs
  
  
  
  

2024.12.04

タイマーのリセットボタンにconfirmを用いてダイアログボックスを設けました。

    // リセットボタン
   resetButton.addEventListener("click", () => {
     let check = window.confirm('リセットしますか？');
     if(check) {
     clearInterval(countdown);
     timeRemaining = parseInt(timer.getAttribute('data-time'), 10);
     updateTimerDisplay(timeRemaining);
     playButton.innerHTML = "タイマーを<br>スタート";
     playButton.classList.remove("stop-b");//css用
     playButton.classList.add("start-b");//css用
     isTimerRunning = false;}
     else{
       console.log();
     }});

【JavaScript入門】confirmで「はい」「いいえ」のダイアログを出す

2024.12.03

• サイト内文用意
• 写真加工
• htmlに入れる
  
  
  
  

2024.11.29

タイマーのコード改善

• リセットボタンを追加しました。
• サイト内のタイマーにそれぞれにカスタムデータ属性を割り当て(data-time)違う秒数のものでも動かせるようにしました。
  HTML

   <div class="timer" data-time="600">
             <button class="play-button" id="play-button">タイマーを<br>スタート</button>
             <div class="timer-display" id="timer-display">10:00</div>
             <button class="reset-button" id="reset-button">リセット</button>
         </div>

  与えた値"600"(秒)をキッチンタイマーのような分単位表記にするための処理です。
  JavaScript

  function updateTimerDisplay(time) {
     let minutes = parseInt(time / 60, 10); 
     let seconds = parseInt(time % 60, 10);
     timerDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
     timeRemaining = time;
   }

  let minutesの箇所は

  const minutes = Math.floor(time / 60);

  でも同様の動作をしました。
  
  
  参考：タイマー
  https://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript/Timer
  カウントダウンを繰り返すタイマーを作った話【JavaScript】
  
  
  
  

2024.11.27

CSSを、XDで作成したデザインに近づけました。
indexページの背景の波線はインラインSVGを使用しました。
【WEBデザイン】コンテンツ区切りのウェーブを作る方法まとめ

2024.11.25

サイトデザイン

AdobeXDで作成しました。
サイトのディレクトリを変更してデザイン通りに作り替えています。

白を基調としたシンプルなデザインと色構成にしています。
楽しく親しみやすい印象のオレンジをベースとし、健康やサポート的な意味を込めてアクセントにグリーンを配色しました。

2024.11.24

1汁3菜を想定していましたが、調査で多かった1汁2菜に変更しました。
献立を１つ決定し、写真撮影をしました。

2024.11.21

サーバーにアップロード

あたらしいレシピサイトをつくりたい


中途半端ですが確認のためにアップします。
※ハンバーガーメニューの献立にもどるを２度選択すると手順のページに飛べます。


気付き

• 横画面のサポートがない▶︎必要かどうか調査
• 材料から手順1にスムーズに行けない
• ハンバーガーメニューがやや下にある
  
  

2024.11.19

☑️11/15の学科サイト更新
☑️手順間のマージンを設定
☑️webサーバを取得
☑️タイマーリセットボタン実装

• プログレスバーの見直し
  ☑️サイトの大まかなデザイン
  ☑️作品概要の大枠完成
  
  

2024.11.15

現時点の制作物

html, css, javascript

• 個数が可変する
• プログレスバーがスクロール箇所に連動して動く
• タイマーが動く
• Jsで写真が拡大される
  
  
  気付き

• 試作段階でスクリプトをhtml内に書いていたためコピペに手間がかからなかった
  
  
  課題
• レシピカードは画像のため、画面の向きや幅に自由に対応できない可能性がある
• タイマーがリセットされない
  
  (図)
• プログレスバーの範囲を全体でなく手順項目に合わせたい
• 手順間の間隔をあける
• レシピカードを構成してみる
• デザインを決める

2024.11.10

ワイヤーフレーム変更点

見やすさの観点から変更を行いました。
旧→新

📎onedrive

• 字面の混同を避けるため前へ・次へをもどる・すすむ表記に
• ボタンの位置を上下から左右に
• 各ステップごとにスペースを設ける
  
  
  
  

2024.11.09

• アイコン一部作成(Illustlator)
  
  
  
  

2024.11.08

AdobeXDで新たにレシピサイトの枠組みを作成しました。

2024.11.01

中間報告

HowToサイトにするより、純粋に多機能な動的レシピサイトとして制作したらどうか

2024.10.28

改善点

• サブページで特徴、利点を述べる
• 読みづらいのでテキストの左右幅を狭める
• サブのサンプルのcssを統一する
  
  
  
  

2024.10.25

Webサイトのワイヤーフレームの作成

📎OneDrive
AdobeXDで作成

2024.10.18

サンプル③タイマー

各手順に対応したタイマー機能を作成
📎OneDrive

• 利点
  • タイマーをアプリや家庭のキッチンタイマーでセットする必要が無く、サイトのみで完結する
  • バックグラウンドでも動作する
  • タブにアラートが表示される
• 問題点
  • アラートに気付きにくい可能性がある
  • リセットとストップ機能がない
    
    
    
    

2024.10.11

コードの編集

• チェックリストのスクリプトを修正して、順繰りに展開できるようにした
• 分量可変に余った卵の使用法が表示されるようにした
  ▶︎0.5余った時にだけ表示できるようにしたい
  
  
  
  

2024.10.4

サンプル②チェックボックス

チェックしながら進める機能を作成
📎OneDrive

• 利点
  • 一つ一つの手順をクリアしながら調理ができる
• 問題点
  • 全体の見通しが立たない
  • 前の手順が累積されてしまう
    
    
    
    

2024.9.27

サンプル①分量調節

分量を任意の人数分に調節できる機能を作成
📎OneDrive

• 利点
  • 任意の人数分に切り替えられる
• 問題点
  • 煮物など味付けに変化が出る料理もある
    
    
    
    

2024.9.20

https://sites.google.com/view/rererererererererer

2024.9.13

2024.07.12

wordで作成

2024.06.14

レシピ表示研究

2024.06.07

紙アンケート制作

姉と近い境遇の人の意見も参考にするため、職員さんからの提案もあって姉の通う福祉施設でアンケートを実施することになった。施設ではよく紙アンケートが実施されているらしく、それにならい紙でのアンケートを行うことにした。紙アンケートにGoogleのアンケートフォームのQRコードを掲載し、自宅などでもwebから回答ができるようにした。

←仮で印刷したプリント　編集し直したプリント→
Illustratorで作成
単調にならないよう、ブロック分けを意識したレイアウトにした。

中間報告のフィードバック

• アンケートを行う際は、とりあえず実施するのでなく、一発で欲しいデータが獲得できるよう問いを洗い出す。
• レイアウトのみならず情報の構成にも視点を向ける。
• ターゲットについて

2024.05.31

テーマ案変更

• レシピのレイアウト、表示方法の研究

2024.05.24

テーマ案変更

• 自家製ピザレシピサイト
  趣味である料理、好きでよく焼いていて応用も効くピザを選択
  

2024.05.17

2024.05.10

2024.05.03

2024.04.26

進捗

• ワイヤーフレーム
• Xserver申込

2024.04.19

案出し

フリーボードで現段階でのコンセプトや仕様の案を書き出した。
※実現性については未検討

2024.04.12

研究テーマ

word...学び,Web,学生

• クリエイティブな学生のためのオープンなコミュニティサイト

(作品投稿、掲示板、サークル機能、個人やチーム制作のコンペみたいなのがあると楽しそう)<-規模が大きく実現は難しい?

• ノートサイトorノートアプリ作成