料理体験をサポートするモバイル用webサイト
レシピを見ながら料理をすることに視点を向けた料理サポートレシピサイト
ブログサイトなどで発展してきたレシピコンテンツにおいては、今やWebサイト、SNSなどの発達によりあらゆるユーザーが気軽に情報発信、受信ができる社会になった。 中でもスマートフォンを活用したレシピサイトは増加しているが、既存サイトの多くは単純なテキストと画像の羅列にとどまっており、調理中の「見やすさ」「操作性」「機能性」には改善の余地がある。
そこで、料理中の使いやすさを重視した画面構成、視認性を向上させるデザイン、調理をサポートするツール機能を追加し、ユーザーをサポートするレシピサイトを制作する。レシピサイト利用におけるより実用的な表示方法を生み出すことを目的とする。
料理中にスマートフォンの画面を触る場合の接触型、画面を触らない場合の接触型の２つの面でアプローチを行う。情報を１画面に構成する。
 |  |
ハード
ソフト
今回、スマートフォンを料理中に触ることへの抵抗感に関する意見から、『非接触型』『接触型』と極端な分類を行った。画面構成の追求のため、Instagramにみられる『続きを読む』形式を取り入れ、画像レシピ形式をタップ操作による手順確認に、またタイマーなどの機能を用いたことで、各方面の要素を取り入れた新たな構成のレシピサイトを作成できた。掲載コンテンツに対して工程数を要したが、実験的なサイトに出来上がったと感じる。また、サイトを長期的に運用するためにはコード記述の整理と最適化が必要になる。柔軟に対応できる汎用性の高い構成を追求していきたい。
(中間報告)
このサイトではテキストに仮のレシピを用いているが、コンセプトの一つである料理をしたいユーザーに向けたものにはなっておらず、大元が破綻しているように感じられた。実際に機能を実装した使えるレシピを掲載し、ソースコードを添える形にブラッシュアップする。
レシピ利用のタイミング
～マルハニチロ「料理レシピに関する調査 2020」～
構成の参考
Instagramのレシピ投稿
 |  |
参照元の投稿＞
moaiskitchen
１画面で情報を得られやすい例としてSNSを調査した。
画像付きレシピに付随してテキスト情報が格納されているフォーマットが多くあった。
分量計算
📎レシピの全材料を同じ割合で計算
📎お菓子作りのレシピの分量の変更を自動計算
📎分量計算ツール
📎分量変換 食品の質量の違いによる分量の変換ができる
📎動くwebデザインアイディア帳
多種多様の動的なデザインが細かくタグで分類されています。またHowToを予定していた時のレイアウトはこちらを参考にしていました。
（書籍を購入すると閲覧できます）
📎sinpe-Blog
プログレスバーのサンプルとして円グラフ・ドーナツグラフを作成するときに閲覧しました。
StarFree(スターフリー)サーバー開設〜データアップロードまで。/Qiita
カウントダウンを繰り返すタイマーを作った話【JavaScript】
調査から、ユーザーは料理の準備段階や実際の調理過程において、手軽さや効率性を重視する傾向にあり、調理時間短縮や献立決めに関するニーズがあることががわかった。
衛生面への意見から、料理中にスマートフォンを触らずにレシピを閲覧できる『非接触型』、触って操作をする『接触型』の2つの面でアプローチを行うことにした。
文字だけで見るページのcssを構成しました。
材料の個数は前ページのデータを保存し、引き継げるようになっています。
タイマーのリセットボタンに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で「はい」「いいえ」のダイアログを出す
<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"(秒)をキッチンタイマーのような分単位表記にするための処理です。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);でも同様の動作をしました。
 |  |  |  |
CSSを、XDで作成したデザインに近づけました。
indexページの背景の波線はインラインSVGを使用しました。
【WEBデザイン】コンテンツ区切りのウェーブを作る方法まとめ
 |  |
 |  |  |
AdobeXDで作成しました。
サイトのディレクトリを変更してデザイン通りに作り替えています。
白を基調としたシンプルなデザインと色構成にしています。
楽しく親しみやすい印象のオレンジをベースとし、健康やサポート的な意味を込めてアクセントにグリーンを配色しました。
1汁3菜を想定していましたが、調査で多かった1汁2菜に変更しました。
献立を１つ決定し、写真撮影をしました。
あたらしいレシピサイトをつくりたい
中途半端ですが確認のためにアップします。
※ハンバーガーメニューの献立にもどるを２度選択すると手順のページに飛べます。
気付き
☑️11/15の学科サイト更新
☑️手順間のマージンを設定
☑️webサーバを取得
☑️タイマーリセットボタン実装
html, css, javascript
 |  |
見やすさの観点から変更を行いました。
旧→新
 |  |
 |  |
AdobeXDで新たにレシピサイトの枠組みを作成しました。
HowToサイトにするより、純粋に多機能な動的レシピサイトとして制作したらどうか
改善点
📎OneDrive
AdobeXDで作成
サンプル③タイマー
各手順に対応したタイマー機能を作成
📎OneDrive
コードの編集
 |  |
サンプル②チェックボックス
チェックしながら進める機能を作成
📎OneDrive
サンプル①分量調節
分量を任意の人数分に調節できる機能を作成
📎OneDrive
https://sites.google.com/view/rererererererererer
wordで作成
姉と近い境遇の人の意見も参考にするため、職員さんからの提案もあって姉の通う福祉施設でアンケートを実施することになった。施設ではよく紙アンケートが実施されているらしく、それにならい紙でのアンケートを行うことにした。紙アンケートにGoogleのアンケートフォームのQRコードを掲載し、自宅などでもwebから回答ができるようにした。
 |  |
←仮で印刷したプリント 編集し直したプリント→
Illustratorで作成
単調にならないよう、ブロック分けを意識したレイアウトにした。
フリーボードで現段階でのコンセプトや仕様の案を書き出した。
※実現性については未検討
word...学び,Web,学生
(作品投稿、掲示板、サークル機能、個人やチーム制作のコンペみたいなのがあると楽しそう)<-規模が大きく実現は難しい?