キッチハイクらしさを表現する、デザインのトーン&マナー / KitchHike Design

by KitchHike Official

Slide 1

Slide 1 text

キッチハイクらしさを表現するトーン&マナー株式会社キッチハイクデザイン戦略部

Slide 2

Slide 2 text

トーン&マナーとは？プロダクトの「らしさ」が伝わるためのお約束ごとユーザーさんに「これ、キッチハイクっぽいね！」って感じてもらえるのがゴール

Slide 3

Slide 3 text

チームのゴール「デザインで何を表現するか」をしっかり認識する ✕ 全員で同じゴールをイメージし続けるレビューのたびにデザインの方向性が変わる ◯

Slide 4

Slide 4 text

なぜやるのか食と交流の体験を広める必要なつのこと 4

Slide 5

Slide 5 text

コミュニケーション共感し、応援に導く補助線 Pop-Upの現場体験できる店舗タッチポイント - オンライン・オフライン触れられる場所理念・ブランド・クリエイティブ・UI すぐれた世界観世界観と補助線を  実現するための土台作り

Slide 6

Slide 6 text

プロダクト広告 How ビジュアライズの特徴をサービスキッチハイクっぽい人格・行動 What

Slide 7

Slide 7 text

ブランド・パーソナリティ

Slide 8

Slide 8 text

ブランド・パーソナリティとは？ブランドとして「こうありたい」「こう語られたい」を人格化

Slide 9

Slide 9 text

キッチハイクって、こんな人！好奇心旺盛で、新しい発見や出会いにワクワクする親しみやすさとポジティブなマインドで、みんなを安心させる食べることが大好き

Slide 10

Slide 10 text

キッチハイクっぽさを 3つの要素にわけるマインドふるまい見た目

Slide 11

Slide 11 text

マインド根にもたない相手をほめる抱え込まない引きずらない相手を受け入れる相手にあたえる搾取しない押し付けない

Slide 12

Slide 12 text

ふるまいあいさつは自分からみんなを安心させるフットワーク軽め不機嫌になって困らせない相手に気を遣わせないサブ垢で吐き出さない食いしんぼう

Slide 13

Slide 13 text

見た目カジュアル清潔感があって自然体地味でも派手でもない天真爛漫なかわいさ

Slide 14

Slide 14 text

どっちがキッチハイクっぽい？

Slide 15

Slide 15 text

犬猫受け入れる自分から近づく気軽に誘う守る対象の子犬は心地良い場所を自分でさがせる誰にも縛られない

Slide 16

Slide 16 text

春秋あたたかさはじまり夢や希望

Slide 17

Slide 17 text

海山 (季節感を楽しめる) 新緑達成感 1人で行ける気軽さ険しい山は高尾山くらい

Slide 18

Slide 18 text

太陽月自ら照らすやりたいを応援するぽかぽかする真夏の太陽ギラギラ世の中にワクワクと希望を与える

Slide 19

Slide 19 text

花木生命力自然体観葉植物で癒やし

Slide 20

Slide 20 text

ビジュアル・ガイドライン

Slide 21

Slide 21 text

ロゴ

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

https://support.kitchhike.com/hc/ja/articles/360002594494 キッチハイクロゴデータはクリエイティブ・コモンズ表示 - 非営利 4.0 国際ライセンス（以下「本ライセンス」といいます。）の下に提供されています。株式会社キッチハイクは、本ライセンス8.c.の規定にしたがい、本ライセンス3.a.に規定する【表示】に関する条件または権利を明示的に放棄いたします。したがいまして、ユーザーは本ライセンスが求める権利者名や作品名、URLなどの表示を行わないでも、ロゴデータを利用できます。 https://creativecommons.org/licenses/by-nc/4.0/deed.ja

Slide 26

Slide 26 text

タイポグラフィフォント

Slide 27

Slide 27 text

1 プロダクト用フォント

Slide 28

Slide 28 text

https://www.google.com/get/noto/#sans-jpan メッセージより仕組み化今の改善より未来のプロトタイプ Session Future User First Be Lazy 常識の比較より逆説のアイデア

Slide 29

Slide 29 text

freely available to all. support all languages with a harmonious look and feel no to Google has been developing a font family called Noto, which aims to . Noto is Google’s answer to tofu. The name noto is to convey the idea that Google’s goal is to see “ more fu” . Noto has multiple styles and weights, and is 各言語の書体デザインが統一されており、同じような印象を保てるオープンソースで誰でも利用できる受け入れ言語の多様性に対する

Slide 30

Slide 30 text

2 クリエイティブ作成向け代替フォント

Slide 31

Slide 31 text

タイポグラフィ代替フォントカジュアルさ・フレンドリーさを表現するときに推奨するフォント

Slide 32

Slide 32 text

タイポグラフィ代替フォント 20代女性が書いたような文字カジュアルだけどキレイめな表現をするときに推奨するフォント 30代女性が書いたような文字

Slide 33

Slide 33 text

タイポグラフィ代替フォントフォーマルめな表現をするときに推奨するフォント

Slide 34

Slide 34 text

タイポグラフィ代替フォント若さ・活発さ・元気な表現をするときに推奨するフォント

Slide 35

Slide 35 text

タイポグラフィ代替フォントおしゃれさ・旅感の表現をするときに推奨するフォント

Slide 36

Slide 36 text

フォーマルカジュアルキレイフレンドリー

Slide 37

Slide 37 text

カラースキーム

Slide 38

Slide 38 text

0 10 0 100 K Y M C PANTONE 639C 0 100 100 0 K Y M C PANTONE 485C #0099cc HikerBlue #ff0000 CookRed Brand Colors キッチハイクのブランドカラー

Slide 39

Slide 39 text

Accent Colors プロダクト内で採用するキーカラーアクション可能な要素や特に強調したい要素に使用。他の色と競合しないよう、要素の独立性や優先度が保たれるような配色にします。 #ff5533 OrangeyRed

Slide 40

Slide 40 text

Text Colors プロダクト内で採用するテキストカラー本文や見出しなどの、テキスト要素に使用。情報の優先度と見た目のコントラストが一致するように配色します。情報の優先度に応じて、透明度を70% / 50% / 30%に調整します。 #3d0a00 SoilBrown

Slide 41

Slide 41 text

Supplement Colors プロダクト内で採用する補助色認知補助のために使われる区切り線や背景色に使います。コンテンツを引き立てるためのものなので、本文などのテキスト要素と競合しないようにしてください。 #fcf8f5 Beige #f2eeeb BaseGrey #e7e2e0 LightGrey #c4c0bE PinkishGrey

Slide 42

Slide 42 text

Color Ratio 配色の割合写真

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

写真

Slide 45

Slide 45 text

食卓を 3つの要素にわける料理人場

Slide 46

Slide 46 text

見た人にどう感じてもらいたい？おいしそう…これ食べたい！素敵だな…この人に会いたい！楽しそうな雰囲気…ここ行きたい！

Slide 47

Slide 47 text

ゴール写真でキッチハイク参加のきっかけをつくる料理・人・場ユーザーがいずれかに行きたいきっかけを見つける

Slide 48

Slide 48 text

1 五感に訴えるものが感じられる

Slide 49

Slide 49 text

が聞こえる音を感じる匂いを感じる温度お店のBGM・グツグツ・カリッ・ジュワ～料理のおいしそうな匂い料理の温度・人の体温・盛り上がりや熱量

Slide 50

Slide 50 text

2 人の笑顔のシーンを切り取る

Slide 51

Slide 51 text

瞬間ふとした上がり目口角楽しそう常にお店の人の「真剣だけど仕事を楽しんでいる」顔微笑みや穏やかな笑顔何かに注目している・食べている瞬間キッチハイク中は自然と笑顔になる

Slide 52

Slide 52 text

3 これはNG！なチェックポイント

Slide 53

Slide 53 text

無理な笑顔実際に起こらない求人サイトの「明るい会社です！」みたいな嘘臭さタレントの食レポみたいな嘘臭さイベント中はありえない孤食シーン周りに何もない・別撮り・スタジオ撮影っぽい一般的には良しとされるもの、「きれい」な写真であっても、キッチハイクの基準に合っていなければNGになります

Slide 54

Slide 54 text

意識していること作り手にも食べ手にも、嘘がなく・誠実で・等身大の存在でありたい

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

もぐもぐ・ガイドライン

Slide 58

Slide 58 text

公式キャラクター生みの親は @marchen_kumiko もぐもぐ

Slide 59

Slide 59 text

1人称年齢「ぼく」 7さい「もぐ。」「もぐ〜！」キッチハイクの胃袋外交大臣韓国料理世界中のみんなをごはんでつなげて笑顔にすること語尾すきな料理おしごと夢

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

もぐもぐが言うこともぐもぐが言わないことポジティブな情報発信感情や主張の押し付け

Slide 62

Slide 62 text

「参加して」とは言わない今こんなキャンペーンがあるもぐ。気になったらイベントページを見てみてもぐ〜。

Slide 63

Slide 63 text

を体現「みんなを安心させる」ユーザーに寄り添い

Slide 64

Slide 64 text

コミュニケーションガイドライン

Slide 65

Slide 65 text

マインドふるまい見た目どんな口調？どんな言葉づかい？どんな伝え方？？

Slide 66

Slide 66 text

1 リフレーミングを使ってポジティブな表現を考える

Slide 67

Slide 67 text

キャンセルフィーを支払うと次の予約ができます。キャンセルフィーを支払わないと次の予約ができません。

Slide 68

Slide 68 text

ネガティブは人を不安にさせるポジティブは人を安心させる

Slide 69

Slide 69 text

実際に人と会うサービス適切な距離感を考える 2

Slide 70

Slide 70 text

テンションちょい高めに！楽しくいこうくださいねください申し込む！申し込む完了しました完了しました。物腰やわらかく