• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 伊藤みらの/卒業研究 へ行く。
  • 1 (2024-11-25 (月) 16:28:29)
  • 2 (2024-11-25 (月) 16:33:59)
  • 3 (2024-11-27 (水) 12:24:57)
  • 4 (2024-11-27 (水) 12:34:19)
  • 5 (2024-11-29 (金) 11:29:10)
  • 6 (2024-11-29 (金) 14:49:00)
  • 7 (2024-11-29 (金) 14:49:00)
  • 8 (2024-11-29 (金) 14:49:00)
  • 9 (2024-12-06 (金) 14:32:44)
  • 10 (2024-12-09 (月) 12:31:15)
  • 11 (2024-12-09 (月) 12:31:15)
  • 12 (2024-12-13 (金) 12:02:30)
  • 13 (2024-12-13 (金) 14:54:27)

---

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

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

#image(): File not found: "アートボード 1.png" at page "伊藤みらの/卒業研究"

• 伊藤 みらの
• Keywords：レシピ, Javascript, Webサイト, 料理
  
  
  
  
  成果物
  調査
  進捗記録

概要

これは何？

レシピを確認しながら料理をする際の手間を減らし、従来の料理体験よりも簡単に工程を理解できるように構成されたwebサイト。タイマーを組み込んだり、個数が可変する機能等を備えた仕様となっていて、ユーザーがより料理に集中できるようサポートするものとなっている。また、献立を一から考える手間を省くために、献立がベースとなって構成されている。

背景と目的

ブログサイトなどで発展してきたレシピコンテンツにおいては、今やWebサイト、SNSなどの発達によりあらゆるユーザーが気軽に情報発信、受信ができる社会になった。
ニーズが増加する中で、レシピサイト利用におけるより実用的でインタラクティブな表示方法を提案することを研究の目的とする。

コンセプト

• 少しの工夫でもっと便利に
• 年齢層にかかわらず、料理をしたいユーザーがもっと楽しくなる
• レシピサイトを作りたい人の新しいアイデアのもとになる
  
  
  

成果物の仕様

• Webサイト
• ワイヤーフレーム
  📎OneDrive
• 学科サイトでまとめる レシピ表示研究

GitHub
機能

• 個数
• チェックボックス
• タイマー
• 進捗グラフ()
  
  

制作ツール

ハード

• MacbookAir
  ソフト
• Visual Studio Code
• Adobe Illustlator
• Adobe XD
  
  

プロジェクトの期間

まとめ

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

調査

現状調査

～マルハニチロ「料理レシピに関する調査 2020」～

• 食材を買う前
  レシピサイト・アプリを見ながら料理をする時のことについて教えてください(ミルトーク)
  衛生面から料理中にスマートフォンを触ることへの抵抗感が多く挙げられ、その点から仕方なく開始前に手順を覚えているといった意見もあった。
  【レシピサイトNadia】夕食作りに関するアンケート調査
• 夕食作りに30分以上かかる(78.3%)
• おかずは3品以上作る(70.1%)
• 最も面倒だと感じる工程は献立決め(70.6%)
• 夕食作りで重視するのは「簡単」「食材の使い切り」「時短」
  (学術資料)
  食品群別摂取量/厚生労働省
  健康の維持・増進に必要とされる栄養バランスの確保からみた「健康な食事」の基準についての検討
  栄養バランスを考慮した料理レシピ検索

先行事例

分量計算

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

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

献立検索

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

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


キッチンタイマー
タイマー機能のあるレシピサイトが見つからなかったため、実際の売れ筋のキッチンタイマーとタイマーのツールサイトを参照する。
①物理商品
📎キッチンタイマー 人気売れ筋ランキング/価格.comを参照

• 抗菌でか見えタイマー TD-429/タニタ
• 大画面タイマー シャボン6 T-615WT/dretec
  
  
  ②webサイト
  キッチンタイマー/ソフトのがらくた箱
  オンラインで使えるキッチンタイマー/ラッコツールズ
  いずれもスタート/ストップ/リセット機能、アラーム機能がある。
  
  
  その他事例
  📎クラシル
  モバイル版でレシピを閲覧すると、手順の見出しの上に自動ロックがオフにされる料理モード機能がある
  
  
  📎音声ナビによる料理サポートアプリFamCook
  
  
  📎だれにでも伝わるレシピの書き方/オレンジページ
• 料理用語は使わずに、「〇cm角に切る」等表現方法を変える

技法・技術情報

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

プロジェクト管理

ToDo

• 掲載するコンテンツの数を決める
• メインビジュアルを作成する
• 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

現時点の制作物

• 個数が可変する
• プログレスバーがスクロール箇所に連動して動く
• タイマーが動く
• 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ノートアプリ作成
  

参考：タイマー
https://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript/Timer