やまだ食堂

架空の和食カフェ風レストラン「やまだ食堂」のホームページを作成しました。
デザインファイル・ソースコード↓
https://github.com/mgmgshake/yamada-dining_website

作ろうと思ったきっかけ

7月からダイエットのためにパーソナルジムに通い始めました。
そこでPFCバランス（タンパク質・脂質・炭水化物）を意識した食事について教えていただいたのですが、いざ実践しようとすると有名チェーン店ですらかなり調べないとPFCバランスを把握することができないことに気がつきました。
そこで、お洒落で気軽に入れるけれど、しっかりとPFCバランスを意識して食事ができる食堂にいきたいと思い、この「やまだ食堂」のホームページを作成することにしました。

やまだ食堂のコンセプト

• 健康が可視化されている
• ダイエット中の方でも安心して食べられる
• 有名ダイエットアプリと連携しているので、カロリーなどの入力が省ける
• 健康を気にかけているが、食事の見た目も重視したい20代の女性向け
• カップルでも入れるようなシンプルな内装
• 日頃の疲れを食事で癒したいOL

脳内クライアント（注：つまり自分）と対話して、やまだ食堂がどんなお客様向けのレストランなのかを整理していきました。

UX やまだ食堂のカスタマージャーニー

やまだ食堂のターゲットは20代の女性だということがわかったので、ターゲットのお客様がどのようにやまだ食堂と出会い、訪問していただけるかを脳内クライアントと議論しました。

• 健康的なランチを食べたい女性が、ネットで「ランチ　ヘルシー」と検索
• 和食ランチにたどり着く
• サイトを見ると、美味しそうで健康的なメニューが並んでいる
• マップをみて、アクセスもよく土日に訪問できるとわかる
• インスタグラムに飛び、ハッシュタグからどんな人が訪れているのか確認する
• 自分と同年代で趣味が合いそうなユーザが多数訪問していることがわかる
• 実際に店舗に訪れることにする

やまだ食堂ができるまで

コンセプトを決定したので、具体的に形を作って行くまでの過程や考えたことをまとめます。

イメージボードを作成

クライアントの中でのサイトイメージと、私の思い浮かべるサイトイメージを既存のサイトを用いてすり合わせていきます。
双方に素敵！と思うデザインを持ち寄り、素敵ポイントを整理しながら取り入れたい部分をまとめます。

ワイヤーフレームの作成

コンセプトやカスタマージャーニーを元に、必要なコンテンツやページの雰囲気を整理していきます。
やまだ食堂は若者向けに健康を意識した和食を提供するので、テーマカラーは和の雰囲気を持ちつつ、若者向けの活発な色も取り入れています。

デザイン

Photoshopにてデザインを進めました。
まずSP版から作成し、完成後にはFigmaのプレビュー機能にてはめ込みで確認を行いました。

コーディング

HTML+CSS（SASS）＋jQueryでコーディングしました。

苦労した点

• メニュー写真上部の円形パスにそった文字は、SVGのpathTextを使って書く予定でしたが、SP版のchromeブラウザで崩れたりレスポンシブ対応が難しかったりしたので、泣く泣く画像にしました。機会があったら円形ではなく波線などシンプルなSVGでリベンジしたいです。
• CSS設計は、実務でBEMメインなので違うものを使ってみたいと思いFLOCSSを試みましたが、結局BEMっぽいものになりました。ここも引き続き勉強していきたいです…。

制作を通しての所感

趣味でのページ制作は初めてだったので、本業の隙を見てやり切れたのは非常に達成感がありました。本業はある程度制約がある中でデザインやコーディングをしているので、今回のように自分で制約を設けてできる自由さに戸惑うことはあったのですが、普段は扱わないようなデザインを模索するきっかけになったと思います。引き続き作りたいテーマを決めて続けていきたいです。