全体のイメージ
構成：
①メインビジュアル、②コンセプト、③メニュー、
④ギャラリー、⑤店舗情報、⑥お問合せ、⑦フッター
【PC版】
【SP版】
制作期間
2022年6月〜7月
事業内容
おやこのための隠れ家 - okaeri coffee & bake
→「わたしたちを解放する、おやこのための隠れ家」をコンセプトに、いつも頑張っているけど今ひとつ周りを気にせず落ち着ける場所が見つけられない親子向けに、もうひとつの実家のような場所を提供することを目的としている。
"おしゃれ × 大人も子供も安心して過ごせる" 空間を作るため、木の温もりを感じる温かみのある雰囲気でありながら、キッズスペースを作ったり離乳食や子供用メニューも用意。
メニューはベーグルとパンケーキ、ドリンク、キッズメニューのみとあえてシンプルでこだわり感を強みにした。
自分自身の子育てで感じた孤独感、母であっても癒されるおしゃれなカフェに行きたいという思いからサービス内容を考えた。
制作概要
①目的
・カフェのコンセプトや世界観を伝え、共感してもらうため
・snsで興味を持ってくださった方をより惹きつけるため
②ターゲット
・子育て世代の20~40代男女（特に女性）
・子連れでカフェに入りたい気持ちがあるが、抵抗がある方
・温かみのあるこだわりのドリンクやフードを求めている方
・snsで興味を持ちより詳しい情報を求めている方
・ネットで「子連れカフェ」などで検索し探している方
③ペルソナ
・子育てや仕事に追われている 、癒しや休息を求めている
・大阪在住、27歳の女性
・夫、2歳の娘と暮らす
・デパートの販売員としてフルタイムで働く
・Instagramでカフェ情報を頻繁にチェックする
・子供と気兼ねなく過ごせる、家以外の場所が欲しい
・疲れた時にふと思い出して帰りたくなるような、安心できる場所が欲しい
④デザインイメージ
・メインカラー：ベージュ
サブカラー：グリーン
アクセントカラー：オレンジ
・どこか懐かしさを感じる温かみのあるサイト
→おしゃれで最先端というより、唯一無二の安心感を与える
・「木漏れ日」「木のぬくもり」「北欧」
・短時間でどんなところなのかを伝えられるシンプルなサイト
こだわりポイント
1.メニュー（最も見てほしいセクション）
①雑誌風に切り抜き写真を使用した。画質が荒く見えないよう工夫した。
②淡いオレンジはメニューのボタンとあしらいのみ使用。
③左右の線画でナチュラルな雰囲気を壊さない、かつカフェの雰囲気を体感してもらいやすいようなデザインにした。
2.メインビジュアル
①ロゴ：丸みがあり柔らかいフォントを選んだ。
②グローバルナビゲーションはPCの場合も表示させず、ハンバーガーメニューをクリックする仕様にして、写真を目立たせた。
③コンセプトでもある、木漏れ日溢れるこぢんまりとしたカフェに近い写真を選んだ。離脱されないよう思わずスクロールしたくなるような世界観を意識した。
3.セクションの区切り
①丸みを帯びた区切りでサイト全体の温かみのある世界観を統一。
4.フォント
①見出しは太めのマーカー風、本文はゴシック体の中でも上品で癖のないフォントにし、コントラストをつけた。また、ここでも雑誌に近い雰囲気を意識した。
5.レスポンシブ対応
①段落をそれぞれに合わせて変化させた。
②SP版は文章を短くするなど、読み進めやすいよう工夫した。
学んだこと
・ブランディングで根本からコンセプト作り⇨それをデザインに落とし込むことの楽しさ、難しさを感じた。両思いになりたい相手に伝えたいイメージをサイトの世界観として形にすることで初めて「見てもらえる」サイトになるということを学んだ。
・余白の取り方、フォント選び、写真選び、レイアウトなど時間をかけて一から模索し、基礎知識がついた。
・コーディングを自分でしない場合でも、デザイナーとしてコーディングの知識を持っていないとコーダーの方にお任せする際に困惑させてしまうのではと感じる場面が多々あった。
※HTML/CSS/jQueryで実装後改めて追記いたします。