料理体験をサポートするモバイル用webサイト
レシピを見ながら料理をすることに視点を向けた料理サポートレシピサイト
ブログサイトなどで発展してきたレシピコンテンツにおいては、今やWebサイト、SNSなどの発達によりあらゆるユーザーが気軽に情報発信、受信ができる社会になった。 中でもスマートフォンを活用したレシピサイトは増加しているが、既存サイトの多くは単純なテキストと画像の羅列にとどまっており、調理中の「見やすさ」「操作性」「機能性」には改善の余地がある。
そこで、料理中の使いやすさを重視した画面構成、視認性を向上させるデザイン、調理をサポートするツール機能を追加し、ユーザーをサポートするレシピサイトを制作する。レシピサイト利用におけるより実用的な表示方法を生み出すことを目的とする。
また、汎用性やシェア率の高いJavascriptを用いる。
 |  |
 |  |  |
 |  |
機能
ハード
ソフト
今回、スマートフォンを料理中に触ることへの抵抗感に関する意見から、『非接触型』『接触型』と極端な分類を行った。画面構成の追求のため、Instagramにみられる『続きを読む』形式を取り入れ、画像レシピ形式をタップ操作による手順確認に、またタイマーなどの機能を用いたことで、各方面の要素を取り入れた新たな構成のレシピサイトを作成できた。掲載コンテンツに対して工程数を要したが、実験的なサイトに出来上がったと感じる。また、サイトを長期的に運用するためにはコード記述の整理と最適化が必要になる。柔軟に対応できる汎用性の高い構成を追求していきたい。
<!-- 料理名 --><div class="ingredient" data-unit="単位" data-base="1.0">
<label for="piecesInput">材料</label>
<input type="number" class="ingredient-input" name="en単位" value="初期値" step="any">
<span class="unit">単位</span>(中間報告)
このサイトではテキストに仮のレシピを用いているが、コンセプトの一つである料理をしたいユーザーに向けたものにはなっておらず、大元が破綻しているように感じられた。実際に機能を実装した使えるレシピを掲載し、ソースコードを添える形にブラッシュアップする。
レシピ利用のタイミング
～マルハニチロ「料理レシピに関する調査 2020」～
懸念点
レシピサイト・アプリを見ながら料理をする時のことについて教えてください(ミルトーク)
ユーザーの重視する傾向
【レシピサイトNadia】夕食作りに関するアンケート調査
構成の参考
Instagramのレシピ投稿
 |  |
参照元の投稿＞
moaiskitchen
１画面で情報を得られやすい例としてSNSを調査した。
画像付きレシピに付随してテキスト情報が格納されているフォーマットが多くあった。
分量計算
📎レシピの全材料を同じ割合で計算
📎お菓子作りのレシピの分量の変更を自動計算
📎分量計算ツール
📎分量変換 食品の質量の違いによる分量の変換ができる
献立検索
📎献立ポン
献立タイプ・ジャンル・使いたい食材にチェックを入れると複数のメニューが提案されるWebサイト。サイト内にレシピ記事はなく、出力されたメニュー名は検索リンクとなっており、クリックするとサーチエンジンに遷移する。
📎AJINOMOTO PARK/献立・メニュー
すべて:12625件のレシピ数を保有する味の素公式レシピサイトの献立カテゴリ。1週間ごとに7日間1汁1菜の献立が組まれ、1汁3菜や中華料理など多様なカテゴリから選択することもできる。献立のメニューを選択すると個別のサイト内レシピへ遷移する。
キッチンタイマー
タイマー機能のあるレシピサイトが見つからなかったため、タイマーのツールサイトを参照する。
キッチンタイマー/ソフトのがらくた箱
オンラインで使えるキッチンタイマー/ラッコツールズ
いずれもスタート/ストップ/リセット機能、アラーム機能がある。
その他事例
📎クラシル
モバイル版でレシピを閲覧すると、手順の見出しの上に自動ロックがオフにされる料理モード機能がある
📎音声ナビによる料理サポートアプリFamCook
📎だれにでも伝わるレシピの書き方/オレンジページ
📎動くwebデザインアイディア帳
多種多様の動的なデザインが細かくタグで分類されています。またHowToを予定していた時のレイアウトはこちらを参考にしていました。
（書籍を購入すると閲覧できます）
📎sinpe-Blog
プログレスバーのサンプルとして円グラフ・ドーナツグラフを作成するときに閲覧しました。
StarFree(スターフリー)サーバー開設〜データアップロードまで。/Qiita
カウントダウンを繰り返すタイマーを作った話【JavaScript】
📎調査から、ユーザーは料理の準備段階や実際の調理過程において、手軽さや効率性を重視する傾向にあり、調理時間短縮や献立決めに関するニーズがあることががわかった。
衛生面への意見から、料理中にスマートフォンを触らずにレシピを閲覧できる『非接触型』、触って操作をする『接触型』の2つの面でアプローチを行うことにした。
タイマーのリセットボタンに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サーバを取得
☑️タイマーリセットボタン実装
 |  |
見やすさの観点から変更を行いました。
旧→新
 |  |
 |  |
AdobeXDで新たにレシピサイトの枠組みを作成しました。
HowToサイトにするより、純粋に多機能な動的レシピサイトとして制作したらどうか
改善点
📎OneDrive
AdobeXDで作成
サンプル③タイマー
各手順に対応したタイマー機能を作成
📎OneDrive
コードの編集
 |  |
サンプル②チェックボックス
チェックしながら進める機能を作成
📎OneDrive
サンプル①分量調節
分量を任意の人数分に調節できる機能を作成
📎OneDrive
https://sites.google.com/view/rererererererererer
wordで作成
姉と近い境遇の人の意見も参考にするため、職員さんからの提案もあって姉の通う福祉施設でアンケートを実施することになった。施設ではよく紙アンケートが実施されているらしく、それにならい紙でのアンケートを行うことにした。紙アンケートにGoogleのアンケートフォームのQRコードを掲載し、自宅などでもwebから回答ができるようにした。
 |  |
←仮で印刷したプリント 編集し直したプリント→
Illustratorで作成
単調にならないよう、ブロック分けを意識したレイアウトにした。
フリーボードで現段階でのコンセプトや仕様の案を書き出した。
※実現性については未検討
word...学び,Web,学生
(作品投稿、掲示板、サークル機能、個人やチーム制作のコンペみたいなのがあると楽しそう)<-規模が大きく実現は難しい?