作品概要
内容：架空の飲食店「onigiri cafe Cheerful」のWebサイト（自主制作）
制作期間：1ヶ月
担当箇所：企画/デザイン/コーディング
使用ツール：Photoshop/Illustrator/XD/DreamWeaver
使用言語：HTML/CSS/JavaScript
ターゲット・狙い
- 仕事をしている20〜30代女性。
- オフィス街が近いため、仕事で忙しい方でも手軽にリラックスしたご飯の時間がとれることをアピールする狙い。
- おしゃれなカフェのようなおにぎり屋さんがコンセプト。今時らしさを取り入れて差別化を図る。
- サイトまで訪れた際に「行きたい！」と思えるようなサイトに。
ペルソナ設定
清水 満奈（シミズ ミツナ）
・24歳 女性 OL
・新卒で採用され、営業事務をしている。
・趣味でドライブをしたり、登山をしたりアクティブ。ショッピングよりも、人が少ないところに行って自然を感じることが好き。
・仕事に慣れてきて、テキパキ動くことができるようになってきた分、できない人を見て少々イライラもしやすくなってきた。
・性格はツッコミタイプでしっかりしたイメージを持たれやすいが、器用ではない。喜怒哀楽がはっきりしており、感受性豊か。
・仕事にストレスを感じているが、車で自分を知っている人がいないような遠いところまで行ったり、自然に触れることで癒されている。
・アクティブだが、1人行動も多い。あまり大人数でつるむのは苦手。
・職場は家から近いため徒歩通勤。徒歩15分ほど。
・家事が苦手で、特に料理が苦手。
・社会人になって初めて一人暮らしを始めた。実家は車で1時間ほどなのでそこまで離れてはいないが、月に1度帰るか帰らないかの頻度。
・お米が好きで、朝ごはんを食べたいが、自分で作る時間もないため、たまにコンビニやスーパーでおにぎりを買って朝ごはんにする。
・紅茶も好きで、最近通勤途中にできたカフェが気になっている。
・実家に母と父と2つ年上の姉がいる。姉がたまに家に泊まりに来たり、一緒にドライブに行ったりすることも。
・昼ごはんも外食の時が多いが、最近アップルウォッチを買ったばかりで少し節約中。
・朝ごはんや昼ごはんにできるお店を探し中。また、ドライブの時にも持っていけるものを希望。
他サイト調査
・外国人も多くなっているため、メニューや新商品ポスターに英語も取り入れている
・こだわりの米やのりはマスト（あとは水や塩）
・ちょっとダサいH Pか、オシャレなところはちょっとトップページが長い気が…
・写真がないメニューのところもあるけどあったがいい。食べログとかの方が見られると思うでの、メニューの写真が全部あった方が訪れた満足度が高そう
・トップにどういうおにぎりがあるか軽くでもメニューがあった方が良い
・おむすび米囃子←これくらいがいいかも
・おむすぎカフェ（代官山、渋谷）←これも可愛い
デザインについて
ターゲットが若い女性なのでかわいらしさとおしゃれな雰囲気を意識し、忙しい合間にもサクッと見れるシンプルな構造・デザインにしています。
飲食店は口コミサイトで閲覧することも多いため、そこでは伝わりづらいメニューの詳細や店内の雰囲気が分かりやすいような写真を使うよう意識しました。サイトに訪れたら「今すぐ食べたい！」という気持ちになるようおにぎりの写真をたくさん使っています。また、テイクアウトができるかどうか等ユーザーが知りたい情報も分かりやすいようにトップページに記載しています。
落ち着いた雰囲気と優しく包み込んでくれる印象を与えるため、色合いは白と淡いオレンジをメインに使い、アクセントカラーも彩度を抑えたものを使用。暖色を使うことで若い女性も親しみやすくしています。
お店のロゴに関しては、おにぎり屋さんであることがやすいようにおにぎりのモチーフを使用していますが、他店を研究した際に同じようにおにぎりのモチーフを使っている店舗が多くありました。そこで差別化を図るためにおにぎりの縁を「onigiri cafe」で覆い印象に残りやすくし、おにぎりに海苔を巻いているモチーフを使用している店舗が多かったため、三角の中に丸を作り梅干しおにぎりのような形にすることで他店と違うスタイルのロゴになるよう作りました。▼
また、Menuのおにぎりの写真は自分で撮影したものです。実際に商品の写真編集もしたかったため、自分で作成しました。具材が入った中身は通常の提供の形では海苔に隠れて見えないため、具材が入った様子を上から撮影し分かりやすくしています。具材がたっぷり入っている様子と珍しい商品の撮り方で実際に店舗に行って食べたくなる気持ちが増すようにしました。
反省点・課題点
シンプルすぎてあまり個性がないため、雰囲気にあった装飾を入れたり、動きをもっとつけたほうが印象に残るサイトになると思います。
Menuのおにぎりの写真の撮り方は、「こうやって提供されるのではないか」という誤解を生む可能性もあるので、提供スタイルの写真も用いて誤解を招かないようにする工夫が必要だと考えます。
