伊藤みらの/卒業研究

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

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

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

概要

これは何？

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

背景と目的

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

コンセプト

• 料理中に見るレシピサイト

成果物の仕様

• Webサイト(モバイル向け)
  http://newresipe.starfree.jp/
• デザイン(AdobeXD)
• サイトマップ・ディレクトリ
  仕様について
  
  
  機能
• 分量調整
  
• すすむ、もどるのタップ操作
• タイマー
• 進捗バー
• 文字だけで見る機能
  
  
  
  
  
  
  

メンバー

1人
(写真撮影も1人で行いました)

制作ツール

ハード

• MacbookAir
• iPhone13(手順の写真撮影)

ソフト

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

まとめ

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


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

調査

現状調査

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

• 食材を買う前(6割)
• １「料理開始直前」、２「くつろいでいる時」、３「料理中」
  
  
  
  
  懸念点
  レシピサイト・アプリを見ながら料理をする時のことについて教えてください(ミルトーク)
• 衛生面から料理中にスマートフォンを触ることへの抵抗感が多く挙げられ、その点から仕方なく開始前に手順を覚えているといった意見もあった。
  
  
  
  
  ユーザーの重視する傾向
  【レシピサイトNadia】夕食作りに関するアンケート調査
• 夕食作りに30分以上かかる(78.3%)
• おかずは3品以上作る(70.1%)
• 最も面倒だと感じる工程は献立決め(70.6%)
• 夕食作りで重視するのは「簡単」「食材の使い切り」「時短」
  
  
  
  

先行事例

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

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


分量計算

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

• 個別に食品名と元の分量を入力する必要がある
• １つの食品で使いたい分量→全体を求めるツールもある
• 大さじ変換は調味料などの質量によって計算式が異なる
  
  
  
  
  その他事例
  📎クラシル
  モバイル版でレシピを閲覧すると、手順の見出しの上に自動ロックがオフにされる料理モード機能がある
  
  
  📎音声ナビによる料理サポートアプリFamCook
  📎だれにでも伝わるレシピの書き方/オレンジページ
  
  

技法・技術情報

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

プロジェクト管理

ToDo

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

2024.01.08

ブラッシュアップ

• タップ範囲を拡大
  
• ハンバーガーメニューの中身の再構成
  
  
  
  

2024.12.13

最終報告

料理中の操作性について

• ハンバーガーメニューなど、画面遷移の配慮が足りない
• タップ範囲が狭く、料理中の操作に適しているといえない
  研究タイトルについて
• 成果物を俯瞰して、どういう提供の仕方をするのか
• 改めて看板を付け替える
  
  
  
  

2024.12.12

文字だけで見るページのcssを構成しました。
材料の個数は前ページのデータを保存し、引き継げるようになっています。

• spanタグが反映できない問題
  
  
  
  

2024.12.08

まとめ、ブラッシュアップかじょうがき
18*18 300dpi
うめこみ.qrはパス
パネルの上部分装飾グレーよりくらい階調はng

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ノートアプリ作成