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

食べるのが好き！で集まるグルメアプリ「キッチハイク」を運営する、株式会社キッチハイクのデザインガイドラインです。

わたしたちは「食と交流の体験を広める」をサービスミッションに掲げています。

◎ サービスとしてどのような世界観であるべき？
◎ 何をどのように表現すればいいの？

メンバーが同じ方向を向いてデザインできるように、チームで「キッチハイクっぽさ」を考えて資料化しました。

Transcript

1. キッチハイクらしさを表現する トーン&マナー 株式会社キッチハイク デザイン戦略部
2. トーン&マナーとは？ プロダクトの 「らしさ」 が 伝わるためのお約束ごと ユーザーさんに「これ、 キッチハイクっぽいね！」 って感じてもらえるのがゴール
3. チームのゴール 「デザインで何を表現するか」 をしっかり認識する ✕ 全員で同じゴールをイメージし続ける レビューのたびにデザインの方向性が変わる ◯
4. なぜやるのか 食と交流の体験を広める 必要な つのこと 4
5. コミュニケーション 共感し、 応援に導く補助線 Pop-Upの現場 体験できる店舗 タッチポイント - オンライン・オフライン 触れられる場所 理念・ブランド・クリエイティブ・UI すぐれた世界観 世界観と補助線を
 実現するための 土台作り
6. プロダクト 広告 How ビジュアライズ の特徴を サービス キッチハイク っぽい人格・行動 What
7. ブランド・パーソナリティ
8. ブランド・パーソナリティとは？ ブランドとして「こうありたい」 「こう語られたい」 を人格化
9. キッチハイクって、 こんな人！ 好奇心旺盛で、新しい発見や出会いに ワクワクする 親しみやすさとポジティブなマインドで、 みんなを安心させる 食べることが大好き
10. キッチハイクっぽさを 3つの要素にわける マインド ふるまい 見た目
11. マインド 根にもたない 相手をほめる 抱え込まない 引きずらない 相手を受け入れる 相手にあたえる 搾取しない 押し付けない
12. ふるまい あいさつは自分から みんなを安心させる フットワーク軽め 不機嫌になって困らせない 相手に気を遣わせない サブ垢で吐き出さない 食いしんぼう
13. 見た目 カジュアル 清潔感があって自然体 地味でも派手でもない 天真爛漫なかわいさ
14. どっちが キッチハイクっぽい？
15. 犬 猫 受け入れる 自分から近づく 気軽に誘う 守る対象の 子犬は 心地良い場所を 自分でさがせる 誰にも縛られない
16. 春 秋 あたたかさ はじまり 夢や希望
17. 海 山 (季節感を楽しめる) 新緑 達成感 1人で行ける気軽さ 険しい山は 高尾山くらい
18. 太陽 月 自ら照らす やりたいを応援する ぽかぽかする 真夏の太陽 ギラギラ 世の中に ワクワクと 希望を与える
19. 花 木 生命力 自然体 観葉植物で癒やし
20. ビジュアル・ガイドライン
21. ロゴ
25. 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
26. タイポグラフィ フォント
27. 1 プロダクト用フォント
28. https://www.google.com/get/noto/#sans-jpan メッセージより仕組み化 今の改善より未来のプロトタイプ Session Future User First Be Lazy 常識の比較より逆説のアイデア
29. 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 各言語の書体デザインが統一されており、 同じような印象を保てる オープンソースで誰でも利用できる 受け入れ 言語の多様性に対する
30. 2 クリエイティブ作成向け 代替フォント
31. タイポグラフィ 代替フォント カジュアルさ・フレンドリーさを 表現するときに推奨するフォント
32. タイポグラフィ 代替フォント 20代女性が 書いたような文字 カジュアルだけどキレイめな 表現をするときに推奨するフォント 30代女性が書いたような文字
33. タイポグラフィ 代替フォント フォーマルめな 表現をするときに推奨するフォント
34. タイポグラフィ 代替フォント 若さ・活発さ・元気な 表現をするときに推奨するフォント
35. タイポグラフィ 代替フォント おしゃれさ・旅感の 表現をするときに推奨するフォント
36. フォーマル カジュアル キレイ フレンドリー
37. カラースキーム
38. 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 キッチハイクのブランドカラー
39. Accent Colors プロダクト内で採用するキーカラー アクション可能な要素や特に強調したい要素に使用。 他の色と競合しないよう、要素の独立性や優先度が保たれ るような配色にします。 #ff5533 OrangeyRed
40. Text Colors プロダクト内で採用するテキストカラー 本文や見出しなどの、テキスト要素に使用。 情報の優先度と見た目のコントラストが一致するように配 色します。 情報の優先度に応じて、透明度を70% / 50% / 30%に調整 します。 #3d0a00 SoilBrown
41. Supplement Colors プロダクト内で採用する補助色 認知補助のために使われる区切り線や背景色に使 います。コンテンツを引き立てるためのものなの で、本文などのテキスト要素と競合しないように してください。 #fcf8f5 Beige #f2eeeb BaseGrey #e7e2e0 LightGrey #c4c0bE PinkishGrey
42. Color Ratio 配色の割合 写真
44. 写真
45. 食卓を 3つの要素にわける 料理 人 場
46. 見た人にどう感じてもらいたい？ おいしそう…これ食べたい！ 素敵だな…この人に会いたい！ 楽しそうな雰囲気…ここ行きたい！
47. ゴール 写真でキッチハイク参加の きっかけをつくる 料理・人・場 ユーザーが いずれかに 行きたいきっかけを見つける
48. 1 五感に訴えるものが 感じられる
49. が聞こえる 音 を感じる 匂い を感じる 温度 お店のBGM・グツグツ・カリッ・ジュワ～ 料理のおいしそうな匂い 料理の温度・人の体温・盛り上がりや熱量
50. 2 人の笑顔のシーンを 切り取る
51. 瞬間 ふとした 上がり目 口角 楽しそう 常に お店の人の 「真剣だけど仕事を楽しんでいる」顔 微笑みや穏やかな笑顔 何かに注目している・食べている瞬間 キッチハイク中は自然と笑顔になる
52. 3 これはNG！な チェックポイント
53. 無理な笑顔 実際に起こらない 求人サイトの「明るい会社です！」みたいな嘘臭さ タレントの食レポみたいな嘘臭さ イベント中はありえない孤食シーン 周りに何もない・別撮り・スタジオ撮影っぽい 一般的には良しとされるもの、 「きれい」な 写真であっても、キッチハイクの基準に合って いなければNGになります
54. 意識していること 作り手にも食べ手にも、 嘘がなく・誠実で・等身大の 存在でありたい
57. もぐもぐ・ガイドライン
58. 公式キャラクター 生みの親は @marchen_kumiko もぐもぐ
59. 1人称 年齢 「ぼく」 7さい 「もぐ。 」 「もぐ〜！」 キッチハイクの胃袋外交大臣 韓国料理 世界中のみんなをごはんで つなげて笑顔にすること 語尾 すきな料理 おしごと 夢
61. もぐもぐが言うこと もぐもぐが言わないこと ポジティブな情報発信 感情や主張の押し付け
62. 「参加して」 とは言わない 今こんなキャンペーンがあるもぐ。 気になったらイベントページを 見てみてもぐ〜。
63. を体現 「みんなを安心させる」 ユーザーに寄り添い
64. コミュニケーション ガイドライン
65. マインド ふるまい 見た目 どんな口調？ どんな言葉づかい？ どんな伝え方？ ？
66. 1 リフレーミングを使って ポジティブな表現を考える
67. キャンセルフィーを 支払うと 次の予約ができます。 キャンセルフィーを 支払わないと 次の予約ができません。
68. ネガティブは人を不安にさせる ポジティブは人を安心させる
69. 実際に人と会うサービス 適切な距離感を考える 2
70. テンション ちょい高めに！ 楽しくいこう くださいね ください 申し込む！ 申し込む 完了しました 完了しました。 物腰やわらかく
71. ビジュアルデザイン事例