#author("2024-12-20T14:38:01+09:00;2024-12-13T14:54:27+09:00","default:member","member") #author("2024-12-20T16:36:30+09:00;2024-12-13T14:54:27+09:00","default:member","member") *あたらしいレシピサイトをつくりたい 料理体験をサポートするモバイル用webサイト ~ #IMAGE(logo.png) -''伊藤 みらの'' -'''Keywords：Web Design , recipe site , UX Design , JavaScript ''' -http://newresipe.starfree.jp/ (モバイル向けWEBサイト) ~ ~ '''もくじ''' [[成果物>#seika]] [[調査>#tyousa]] [[''進捗記録''>#kiroku]] [[仕様について]] **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; レシピを見ながら料理をすることに視点を向けた料理サポートレシピサイト ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; ブログサイトなどで発展してきたレシピコンテンツにおいては、今やWebサイト、SNSなどの発達によりあらゆるユーザーが気軽に情報発信、受信ができる社会になった。 中でもスマートフォンを活用したレシピサイトは増加しているが、既存サイトの多くは単純なテキストと画像の羅列にとどまっており、調理中の「見やすさ」「操作性」「機能性」にはまだ改善の余地がある。 そこで、料理中の使いやすさを重視した画面構成、視認性を向上させるデザイン、調理をサポートするツール機能を追加し、ユーザーをサポートするレシピサイトを制作する。レシピサイト利用におけるより実用的な表示方法を生み出すことを目的とする。 ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など} -料理中に見るレシピサイト //料理中にスマートフォンの画面を触る場合の接触型、画面を触らない場合の接触型の２つの面でアプローチを行う。情報を１画面に構成する。 ~ &aname(seika); ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -Webサイト(モバイル向け) http://newresipe.starfree.jp/ -デザイン(AdobeXD) |#IMAGE(index.png,50%)|#IMAGE(main.png,50%)|#IMAGE(list.png,50%)|#IMAGE(Listin.png,50%)|#IMAGE(menu.png,50%)| -サイトマップ・ディレクトリ |#IMAGE(サイトマップ.png)|#IMAGE(ディレクトリ.png)| [[仕様について]] ~ ''機能'' -分量調整 #IMAGE(zairyou1.png,50%) -すすむ、もどるのタップ操作 -タイマー -進捗バー -文字だけで見る機能 #IMAGE(12.13.png,50%) ~ ~ ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; ハード -MacbookAir -iPhone13(手順の写真撮影) ソフト -Visual Studio Code -Adobe XD(ワイヤーフレーム・デザイン) -Adobe Illustlator(アイコン作成) -Adobe Photoshop(写真加工) ~ //***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; ~ ***まとめ 今回、スマートフォンを料理中に触ることへの抵抗感に関する意見から、『非接触型』『接触型』と極端な分類を行った。画面構成の追求のため、Instagramにみられる『続きを読む』形式を取り入れ、画像レシピ形式をタップ操作による手順確認に、またタイマーなどの機能を用いたことで、各方面の要素を取り入れた新たな構成のレシピサイトを作成できた。掲載コンテンツに対して工程数を要したが、実験的なサイトに出来上がったと感じる。また、サイトを長期的に運用するためにはコード記述の整理と最適化が必要になる。柔軟に対応できる汎用性の高い構成を追求していきたい。 ~ (中間報告) このサイトではテキストに仮のレシピを用いているが、コンセプトの一つである料理をしたいユーザーに向けたものにはなっておらず、大元が破綻しているように感じられた。実際に機能を実装した使えるレシピを掲載し、ソースコードを添える形にブラッシュアップする。 ~ ~ &aname(tyousa); **調査 ~ ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; ''レシピ利用のタイミング'' [[～マルハニチロ「料理レシピに関する調査 2020」～ >https://www.maruha-nichiro.co.jp/corporate/news_center/news_topics/20200818_research_recipe2020_1.pdf]] -食材を買う前(6割) -１「料理開始直前」、２「くつろいでいる時」、３「料理中」 ~ ~ ''懸念点'' [[レシピサイト・アプリを見ながら料理をする時のことについて教えてください(ミルトーク)>https://milltalk.jp/boards/86398]] -衛生面から料理中にスマートフォンを触ることへの抵抗感が多く挙げられ、その点から仕方なく開始前に手順を覚えているといった意見もあった。 ~ ~ ''ユーザーの重視する傾向'' [[【レシピサイトNadia】夕食作りに関するアンケート調査>https://prtimes.jp/main/html/rd/p/000000141.000041268.html]] -夕食作りに30分以上かかる(78.3%) -おかずは3品以上作る(70.1%) -最も面倒だと感じる工程は献立決め(70.6%) -夕食作りで重視するのは「簡単」「食材の使い切り」「時短」 ~ //(学術資料) //[[食品群別摂取量/厚生労働省>https://www.mhlw.go.jp/bunya/kenkou/eiyou-chosa2-01/pdf/03b.pdf]] //[[健康の維持・増進に必要とされる栄養バランスの確保からみた「健康な食事」の基準についての検討>https://www.mhlw.go.jp/file/05-Shingikai-10901000-Kenkoukyoku-Soumuka/0000053371.pdf]] //[[栄養バランスを考慮した料理レシピ検索>https://www.anlp.jp/proceedings/annual_meeting/2008/pdf_dir/D1-8.pdf]] ~ ***先行事例 ''構成の参考'' Instagramのレシピ投稿 |#IMAGE(IMG_7567.jpg)|#IMAGE(IMG_7568.jpg)| 参照元の投稿＞ [[moaiskitchen>https://www.instagram.com/p/DA0MCOcTeV2/?img_index=1]] １画面で情報を得られやすい例としてSNSを調査した。 画像付きレシピに付随してテキスト情報が格納されているフォーマットが多くあった。 ~ ''分量計算'' 📎[[レシピの全材料を同じ割合で計算>https://www.benricho.org/doryoko_cup_spoon/conv03.html]] 📎[[お菓子作りのレシピの分量の変更を自動計算>https://cake100.net/henkan.php]] 📎[[分量計算ツール>http://kiryu-corp.co.jp/lunch_box/calculation_tool.html]] 📎[[分量変換>https://www.easykeisan.com/bunryou/]] '''食品の質量の違いによる分量の変換ができる''' ~ -個別に食品名と元の分量を入力する必要がある -１つの食品で使いたい分量→全体を求めるツールもある -大さじ変換は調味料などの質量によって計算式が異なる ~ ~ ''その他事例'' 📎[[クラシル>https://www.kurashiru.com/]] '''モバイル版でレシピを閲覧すると、手順の見出しの上に自動ロックがオフにされる''料理モード''機能がある''' ~ 📎[[音声ナビによる料理サポートアプリFamCook>https://fam-time.com/services/famcook/]] 📎[[だれにでも伝わるレシピの書き方/オレンジページ>https://school.orangepage.net/articles/10922/]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; [[📎動くwebデザインアイディア帳>https://ugokuweb.coco-factory.jp/ugokuweb/]] 多種多様の動的なデザインが細かくタグで分類されています。またHowToを予定していた時のレイアウトはこちらを参考にしていました。 （書籍を購入すると閲覧できます） [[📎sinpe-Blog>https://sinpe-pgm.com/]] プログレスバーのサンプルとして[[円グラフ・ドーナツグラフ>https://sinpe-pgm.com/circle-conic-gradient/]]を作成するときに閲覧しました。 [[StarFree(スターフリー)サーバー開設〜データアップロードまで。/Qiita>https://qiita.com/YJ2222/items/e532321152119df00b74]] [[カウントダウンを繰り返すタイマーを作った話【JavaScript】>https://qiita.com/tutiame/items/4827b7b0ff99de26e172]] ~ ~ **プロジェクト管理 //***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -%%掲載するコンテンツの数を決める%% -%%メインビジュアルを作成する%% -%%Webサイト制作に取り掛かる%% -%%サーバを取得%% -%%サーバにサイトを上げる%% -%%掲載文章を全て用意する%% -%%作品概要の大枠を作成する%% -%%作品概要を完成させる%% -%%トップページ追加%% -%%メインページ追加%% -%%料理の写真撮影%% -%%写真加工処理%% -コンテンツを全て掲載 -%%「文字だけで見る」ページのCSS%% -%%「文字だけで見る」ページのjs%% ~ ~ &aname(kiroku); #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2024.12.13 ***最終報告 ''料理中の操作性について'' -ハンバーガーメニューなど、画面遷移の配慮が足りない -タップ範囲が狭く、料理中の操作に適しているといえない ''研究タイトルについて'' -成果物を俯瞰して、どういう提供の仕方をするのか -改めて看板を付け替える ~ ~ **2024.12.12 #IMAGE(12.13.png,50%) 文字だけで見るページのcssを構成しました。 材料の個数は前ページのデータを保存し、引き継げるようになっています。 -spanタグが反映できない問題 ~ ~ **2024.12.08 まとめ、ブラッシュアップかじょうがき 18*18 300dpi うめこみ.qrはパス パネルの上部分装飾グレーよりくらい階調はng **2024.12.04 #IMAGE(IMG_8052.jpeg,50%) タイマーのリセットボタンに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で「はい」「いいえ」のダイアログを出す>https://www.sejuku.net/blog/258392]] ~ ~ **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】>https://qiita.com/tutiame/items/4827b7b0ff99de26e172]] ~ ~ **2024.11.27 |#IMAGE(11.27-1.png)|#IMAGE(11.27-2.png)|#IMAGE(11.27-3.png)|#IMAGE(11.27-4.png)| CSSを、XDで作成したデザインに近づけました。 indexページの背景の波線はインラインSVGを使用しました。 [[【WEBデザイン】コンテンツ区切りのウェーブを作る方法まとめ>https://devlog.neton.co.jp/develop/html/design_wave/]] ~ ~ **2024.11.25 ***サイトデザイン |#IMAGE(index.png)|#IMAGE(main.png)| |#IMAGE(list.png)|#IMAGE(Listin.png)|#IMAGE(menu.png)| AdobeXDで作成しました。 サイトのディレクトリを変更してデザイン通りに作り替えています。 白を基調としたシンプルなデザインと色構成にしています。 楽しく親しみやすい印象のオレンジをベースとし、健康やサポート的な意味を込めてアクセントにグリーンを配色しました。 ~ ~ **2024.11.24 1汁3菜を想定していましたが、調査で多かった1汁2菜に変更しました。 献立を１つ決定し、写真撮影をしました。 ~ ~ **2024.11.21 ***サーバーにアップロード [[あたらしいレシピサイトをつくりたい>http://newresipe.starfree.jp/]] ~ 中途半端ですが確認のためにアップします。 ※ハンバーガーメニューの献立にもどるを２度選択すると手順のページに飛べます。 ~ 気付き -横画面のサポートがない▶︎必要かどうか調査 -材料から手順1にスムーズに行けない -ハンバーガーメニューがやや下にある ~ **2024.11.19 ☑️11/15の学科サイト更新 ☑️手順間のマージンを設定 ☑️webサーバを取得 ☑️タイマーリセットボタン実装 -プログレスバーの見直し ☑️サイトの大まかなデザイン ☑️作品概要の大枠完成 ~ **2024.11.15 ***現時点の制作物 html, css, javascript |#IMAGE(11.15.png)|#IMAGE(11.15.2.png)| CENTER:←レシピページ スクリプトの実装箇所→ --個数が可変する --プログレスバーがスクロール箇所に連動して動く --タイマーが動く --Jsで写真が拡大される ~ ''気付き'' -試作段階でスクリプトをhtml内に書いていたためコピペに手間がかからなかった ~ ''課題'' -レシピカードは画像のため、画面の向きや幅に自由に対応できない可能性がある -タイマーがリセットされない #IMAGE(11.15.3.png) CENTER:(図) -プログレスバーの範囲を全体でなく手順項目に合わせたい -手順間の間隔をあける -レシピカードを構成してみる -デザインを決める **2024.11.10 ***ワイヤーフレーム変更点 見やすさの観点から変更を行いました。 旧→新 #IMAGE(prot-1.png) [[📎onedrive>https://1drv.ms/i/c/a2a39a5c58cc525f/EQIqFDv2Pm9KmKzWSGSno5kB1_1VUYGowc7vix6FoZlsuA?e=JDG2fx]] -字面の混同を避けるため前へ・次へをもどる・すすむ表記に -ボタンの位置を上下から左右に -各ステップごとにスペースを設ける ~ ~ **2024.11.09 -アイコン一部作成(Illustlator) |#IMAGE(left-icon.png)|#IMAGE(right-icon.png)| ~ ~ **2024.11.08 |#IMAGE(main.jpg)|#IMAGE(list-p2.png)| AdobeXDで新たにレシピサイトの枠組みを作成しました。 ~ ~ **2024.11.01 ***中間報告 HowToサイトにするより、純粋に多機能な動的レシピサイトとして制作したらどうか ~ ~ **2024.10.28 #IMAGE(prot.jpg) 改善点 -サブページで特徴、利点を述べる -読みづらいのでテキストの左右幅を狭める -サブのサンプルのcssを統一する ~ ~ **2024.10.25 ***Webサイトのワイヤーフレームの作成 [[📎OneDrive>https://1drv.ms/i/s!Al9SzFhcmqOia5z8GuW5NPahwl0?e=oIFpdi]] AdobeXDで作成 ~ ~ **2024.10.18 サンプル③タイマー #IMAGE(timer-1.jpg) 各手順に対応したタイマー機能を作成 [[📎OneDrive>https://github.com/Mirano-Ito/recipe-sss/tree/main/timer]] -利点 --タイマーをアプリや家庭のキッチンタイマーでセットする必要が無く、サイトのみで完結する --バックグラウンドでも動作する --タブにアラートが表示される -問題点 --アラートに気付きにくい可能性がある --リセットとストップ機能がない ~ ~ **2024.10.11 コードの編集 -チェックリストのスクリプトを修正して、順繰りに展開できるようにした -分量可変に余った卵の使用法が表示されるようにした ▶︎0.5余った時にだけ表示できるようにしたい |#IMAGE(checklist-2.jpg)|#IMAGE(quantity-1.jpg )| ~ ~ **2024.10.4 サンプル②チェックボックス #IMAGE(checklist-1.jpg) チェックしながら進める機能を作成 [[📎OneDrive>https://github.com/Mirano-Ito/recipe-sss/tree/main/timer]] -利点 --一つ一つの手順をクリアしながら調理ができる -問題点 --全体の見通しが立たない --前の手順が累積されてしまう ~ ~ **2024.9.27 サンプル①分量調節 #IMAGE(quantity-0.jpg) 分量を任意の人数分に調節できる機能を作成 [[📎OneDrive>https://github.com/Mirano-Ito/recipe-sss/tree/main/%E5%80%8B%E6%95%B0]] -利点 --任意の人数分に切り替えられる -問題点 --煮物など味付けに変化が出る料理もある ~ ~ **2024.9.20 https://sites.google.com/view/rererererererererer ~ ~ **2024.9.13 **2024.07.12 #IMAGE(wod.jpg) wordで作成 **2024.06.14 [[レシピ表示研究]] **2024.06.07 ***紙アンケート制作 姉と近い境遇の人の意見も参考にするため、職員さんからの提案もあって姉の通う福祉施設でアンケートを実施することになった。施設ではよく紙アンケートが実施されているらしく、それにならい紙でのアンケートを行うことにした。紙アンケートにGoogleのアンケートフォームのQRコードを掲載し、自宅などでもwebから回答ができるようにした。 |#IMAGE(pl-q.jpg)|#IMAGE(q.jpg)| ←仮で印刷したプリント 編集し直したプリント→ Illustratorで作成 単調にならないよう、ブロック分けを意識したレイアウトにした。 #IMAGE(q1.jpg) ***中間報告のフィードバック -アンケートを行う際は、とりあえず実施するのでなく、一発で欲しいデータが獲得できるよう問いを洗い出す。 -レイアウトのみならず情報の構成にも視点を向ける。 -ターゲットについて **2024.05.31 ***テーマ案変更 -レシピのレイアウト、表示方法の研究 **2024.05.24 ***テーマ案変更 -自家製ピザレシピサイト 趣味である料理、好きでよく焼いていて応用も効くピザを選択 #IMAGE(piz.jpg) **2024.05.17 **2024.05.10 **2024.05.03 **2024.04.26 ***進捗 -ワイヤーフレーム -Xserver申込 **2024.04.19 ***案出し #IMAGE(FREE.jpg) フリーボードで現段階でのコンセプトや仕様の案を書き出した。 ※実現性については未検討 **2024.04.12 ***研究テーマ word...学び,Web,学生 ~ -''クリエイティブな学生のためのオープンなコミュニティサイト'' (作品投稿、掲示板、サークル機能、個人やチーム制作のコンペみたいなのがあると楽しそう)<-規模が大きく実現は難しい? ~ -''ノートサイトorノートアプリ作成'' - ~ ~ ~