伊藤みらの/卒業研究 をテンプレートにして作成

開始行:
*あたらしいレシピサイトをつくりたい 料理体験をサポートするモバイル用webサイト ~ #IMAGE(logo.png) -''伊藤 みらの'' -'''Keywords：Web Design , recipe site , UX Design , Java... -http://newresipe.starfree.jp/ (モバイル向けWEBサイト) ~ ~ '''もくじ''' [[成果物>#seika]] [[調査>#tyousa]] [[''進捗記録''>#kiroku]] [[仕様について]] **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 　レシピを見ながら料理をすることに視点を向けた料理サポー... ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; ブログサイトなどで発展してきたレシピコンテンツにおいては... 　そこで、料理中の使いやすさを重視した画面構成、視認性を... ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など} -料理中に見るレシピサイト //料理中にスマートフォンの画面を触る場合の接触型、画面を... ~ &aname(seika); ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -Webサイト(モバイル向け) http://newresipe.starfree.jp/ -デザイン(AdobeXD) |#IMAGE(index.png,50%)|#IMAGE(main.png,50%)|#IMAGE(list.p... -サイトマップ・ディレクトリ |#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... ~ ***まとめ 今回、スマートフォンを料理中に触ることへの抵抗感に関する... ~ (中間報告) このサイトではテキストに仮のレシピを用いているが、コンセ... ~ ~ &aname(tyousa); **調査 ~ ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問... ''レシピ利用のタイミング'' [[～マルハニチロ「料理レシピに関する調査 2020」～ >https:... -食材を買う前(6割) -１「料理開始直前」、２「くつろいでいる時」、３「料理中」 ~ ~ ''懸念点'' [[レシピサイト・アプリを見ながら料理をする時のことについ... -衛生面から料理中にスマートフォンを触ることへの抵抗感が多... ~ ~ ''ユーザーの重視する傾向'' [[【レシピサイトNadia】夕食作りに関するアンケート調査>htt... -夕食作りに30分以上かかる(78.3%) -おかずは3品以上作る(70.1%) -最も面倒だと感じる工程は献立決め(70.6%) -夕食作りで重視するのは「簡単」「食材の使い切り」「時短」 ~ //(学術資料) //[[食品群別摂取量/厚生労働省>https://www.mhlw.go.jp/buny... //[[健康の維持・増進に必要とされる栄養バランスの確保から... //[[栄養バランスを考慮した料理レシピ検索>https://www.anlp... ~ ***先行事例 ''構成の参考'' Instagramのレシピ投稿 |#IMAGE(IMG_7567.jpg)|#IMAGE(IMG_7568.jpg)| 参照元の投稿＞ [[moaiskitchen>https://www.instagram.com/p/DA0MCOcTeV2/?i... １画面で情報を得られやすい例としてSNSを調査した。 画像付きレシピに付随してテキスト情報が格納されているフォ... ~ ''分量計算'' 📎[[レシピの全材料を同じ割合で計算>https://www.benricho.or... 📎[[お菓子作りのレシピの分量の変更を自動計算>https://cake1... 📎[[分量計算ツール>http://kiryu-corp.co.jp/lunch_box/calcu... 📎[[分量変換>https://www.easykeisan.com/bunryou/]]　'''食... ~ -個別に食品名と元の分量を入力する必要がある -１つの食品で使いたい分量→全体を求めるツールもある -大さじ変換は調味料などの質量によって計算式が異なる ~ ~ ''その他事例'' 📎[[クラシル>https://www.kurashiru.com/]] '''モバイル版でレシピを閲覧すると、手順の見出しの上に自動... ~ 📎[[音声ナビによる料理サポートアプリFamCook>https://fam-ti... 📎[[だれにでも伝わるレシピの書き方/オレンジページ>https://... ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関す... [[📎動くwebデザインアイディア帳>https://ugokuweb.coco-fact... 多種多様の動的なデザインが細かくタグで分類されています。... （書籍を購入すると閲覧できます） [[📎sinpe-Blog>https://sinpe-pgm.com/]] プログレスバーのサンプルとして[[円グラフ・ドーナツグラフ>... [[StarFree(スターフリー)サーバー開設〜データアップロード... [[カウントダウンを繰り返すタイマーを作った話【JavaScript... ~ ~ **プロジェクト管理 //***スケジュール //&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-t... 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 ***タイマーのコード改善 -リセットボタンを追加しました。 -サイト内のタイマーにそれぞれにカスタムデータ属性を割り当... '''HTML''' <div class="timer" data-time="600"> <button class="play-button" id="play-button">... <div class="timer-display" id="timer-display"... <button class="reset-button" id="reset-button... </div> 与えた値"600"(秒)をキッチンタイマーのような分単位表記にす... '''JavaScript''' function updateTimerDisplay(time) { let minutes = parseInt(time / 60, 10); let seconds = parseInt(time % 60, 10); timerDisplay.textContent = `${minutes}:${seconds < 10... timeRemaining = time; } let minutesの箇所は const minutes = Math.floor(time / 60); でも同様の動作をしました。 ~ 参考：タイマー https://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript/Ti... [[カウントダウンを繰り返すタイマーを作った話【JavaScript... ~ ~ **2024.11.27 |#IMAGE(11.27-1.png)|#IMAGE(11.27-2.png)|#IMAGE(11.27-3.p... CSSを、XDで作成したデザインに近づけました。 indexページの背景の波線はインラインSVGを使用しました。 [[【WEBデザイン】コンテンツ区切りのウェーブを作る方法まと... ~ ~ **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.sta... ~ 中途半端ですが確認のためにアップします。 ※ハンバーガーメニューの献立にもどるを２度選択すると手順の... ~ 気付き -横画面のサポートがない▶︎必要かどうか調査 -材料から手順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/EQIqFDv2... -字面の混同を避けるため前へ・次へをもどる・すすむ表記に -ボタンの位置を上下から左右に -各ステップごとにスペースを設ける ~ ~ **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!Al9SzFhcmqOia5z8GuW5NPahw... AdobeXDで作成 ~ ~ **2024.10.18 サンプル③タイマー #IMAGE(timer-1.jpg) 各手順に対応したタイマー機能を作成 [[📎OneDrive>https://github.com/Mirano-Ito/recipe-sss/tree... -利点 --タイマーをアプリや家庭のキッチンタイマーでセットする必... --バックグラウンドでも動作する --タブにアラートが表示される -問題点 --アラートに気付きにくい可能性がある --リセットとストップ機能がない ~ ~ **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... -利点 --一つ一つの手順をクリアしながら調理ができる -問題点 --全体の見通しが立たない --前の手順が累積されてしまう ~ ~ **2024.9.27 サンプル①分量調節 #IMAGE(quantity-0.jpg) 分量を任意の人数分に調節できる機能を作成 [[📎OneDrive>https://github.com/Mirano-Ito/recipe-sss/tree... -利点 --任意の人数分に切り替えられる -問題点 --煮物など味付けに変化が出る料理もある ~ ~ **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 ***紙アンケート制作 姉と近い境遇の人の意見も参考にするため、職員さんからの提... |#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ノートアプリ作成'' - ~ ~ ~

終了行:
*あたらしいレシピサイトをつくりたい 料理体験をサポートするモバイル用webサイト ~ #IMAGE(logo.png) -''伊藤 みらの'' -'''Keywords：Web Design , recipe site , UX Design , Java... -http://newresipe.starfree.jp/ (モバイル向けWEBサイト) ~ ~ '''もくじ''' [[成果物>#seika]] [[調査>#tyousa]] [[''進捗記録''>#kiroku]] [[仕様について]] **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 　レシピを見ながら料理をすることに視点を向けた料理サポー... ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; ブログサイトなどで発展してきたレシピコンテンツにおいては... 　そこで、料理中の使いやすさを重視した画面構成、視認性を... ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など} -料理中に見るレシピサイト //料理中にスマートフォンの画面を触る場合の接触型、画面を... ~ &aname(seika); ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -Webサイト(モバイル向け) http://newresipe.starfree.jp/ -デザイン(AdobeXD) |#IMAGE(index.png,50%)|#IMAGE(main.png,50%)|#IMAGE(list.p... -サイトマップ・ディレクトリ |#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... ~ ***まとめ 今回、スマートフォンを料理中に触ることへの抵抗感に関する... ~ (中間報告) このサイトではテキストに仮のレシピを用いているが、コンセ... ~ ~ &aname(tyousa); **調査 ~ ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問... ''レシピ利用のタイミング'' [[～マルハニチロ「料理レシピに関する調査 2020」～ >https:... -食材を買う前(6割) -１「料理開始直前」、２「くつろいでいる時」、３「料理中」 ~ ~ ''懸念点'' [[レシピサイト・アプリを見ながら料理をする時のことについ... -衛生面から料理中にスマートフォンを触ることへの抵抗感が多... ~ ~ ''ユーザーの重視する傾向'' [[【レシピサイトNadia】夕食作りに関するアンケート調査>htt... -夕食作りに30分以上かかる(78.3%) -おかずは3品以上作る(70.1%) -最も面倒だと感じる工程は献立決め(70.6%) -夕食作りで重視するのは「簡単」「食材の使い切り」「時短」 ~ //(学術資料) //[[食品群別摂取量/厚生労働省>https://www.mhlw.go.jp/buny... //[[健康の維持・増進に必要とされる栄養バランスの確保から... //[[栄養バランスを考慮した料理レシピ検索>https://www.anlp... ~ ***先行事例 ''構成の参考'' Instagramのレシピ投稿 |#IMAGE(IMG_7567.jpg)|#IMAGE(IMG_7568.jpg)| 参照元の投稿＞ [[moaiskitchen>https://www.instagram.com/p/DA0MCOcTeV2/?i... １画面で情報を得られやすい例としてSNSを調査した。 画像付きレシピに付随してテキスト情報が格納されているフォ... ~ ''分量計算'' 📎[[レシピの全材料を同じ割合で計算>https://www.benricho.or... 📎[[お菓子作りのレシピの分量の変更を自動計算>https://cake1... 📎[[分量計算ツール>http://kiryu-corp.co.jp/lunch_box/calcu... 📎[[分量変換>https://www.easykeisan.com/bunryou/]]　'''食... ~ -個別に食品名と元の分量を入力する必要がある -１つの食品で使いたい分量→全体を求めるツールもある -大さじ変換は調味料などの質量によって計算式が異なる ~ ~ ''その他事例'' 📎[[クラシル>https://www.kurashiru.com/]] '''モバイル版でレシピを閲覧すると、手順の見出しの上に自動... ~ 📎[[音声ナビによる料理サポートアプリFamCook>https://fam-ti... 📎[[だれにでも伝わるレシピの書き方/オレンジページ>https://... ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関す... [[📎動くwebデザインアイディア帳>https://ugokuweb.coco-fact... 多種多様の動的なデザインが細かくタグで分類されています。... （書籍を購入すると閲覧できます） [[📎sinpe-Blog>https://sinpe-pgm.com/]] プログレスバーのサンプルとして[[円グラフ・ドーナツグラフ>... [[StarFree(スターフリー)サーバー開設〜データアップロード... [[カウントダウンを繰り返すタイマーを作った話【JavaScript... ~ ~ **プロジェクト管理 //***スケジュール //&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-t... 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 ***タイマーのコード改善 -リセットボタンを追加しました。 -サイト内のタイマーにそれぞれにカスタムデータ属性を割り当... '''HTML''' <div class="timer" data-time="600"> <button class="play-button" id="play-button">... <div class="timer-display" id="timer-display"... <button class="reset-button" id="reset-button... </div> 与えた値"600"(秒)をキッチンタイマーのような分単位表記にす... '''JavaScript''' function updateTimerDisplay(time) { let minutes = parseInt(time / 60, 10); let seconds = parseInt(time % 60, 10); timerDisplay.textContent = `${minutes}:${seconds < 10... timeRemaining = time; } let minutesの箇所は const minutes = Math.floor(time / 60); でも同様の動作をしました。 ~ 参考：タイマー https://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript/Ti... [[カウントダウンを繰り返すタイマーを作った話【JavaScript... ~ ~ **2024.11.27 |#IMAGE(11.27-1.png)|#IMAGE(11.27-2.png)|#IMAGE(11.27-3.p... CSSを、XDで作成したデザインに近づけました。 indexページの背景の波線はインラインSVGを使用しました。 [[【WEBデザイン】コンテンツ区切りのウェーブを作る方法まと... ~ ~ **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.sta... ~ 中途半端ですが確認のためにアップします。 ※ハンバーガーメニューの献立にもどるを２度選択すると手順の... ~ 気付き -横画面のサポートがない▶︎必要かどうか調査 -材料から手順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/EQIqFDv2... -字面の混同を避けるため前へ・次へをもどる・すすむ表記に -ボタンの位置を上下から左右に -各ステップごとにスペースを設ける ~ ~ **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!Al9SzFhcmqOia5z8GuW5NPahw... AdobeXDで作成 ~ ~ **2024.10.18 サンプル③タイマー #IMAGE(timer-1.jpg) 各手順に対応したタイマー機能を作成 [[📎OneDrive>https://github.com/Mirano-Ito/recipe-sss/tree... -利点 --タイマーをアプリや家庭のキッチンタイマーでセットする必... --バックグラウンドでも動作する --タブにアラートが表示される -問題点 --アラートに気付きにくい可能性がある --リセットとストップ機能がない ~ ~ **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... -利点 --一つ一つの手順をクリアしながら調理ができる -問題点 --全体の見通しが立たない --前の手順が累積されてしまう ~ ~ **2024.9.27 サンプル①分量調節 #IMAGE(quantity-0.jpg) 分量を任意の人数分に調節できる機能を作成 [[📎OneDrive>https://github.com/Mirano-Ito/recipe-sss/tree... -利点 --任意の人数分に切り替えられる -問題点 --煮物など味付けに変化が出る料理もある ~ ~ **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 ***紙アンケート制作 姉と近い境遇の人の意見も参考にするため、職員さんからの提... |#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ノートアプリ作成'' - ~ ~ ~

ページ名: