Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

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

KitchHike Official

March 17, 2020
Tweet

More Decks by KitchHike Official

Other Decks in Design

Transcript

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

    View full-size slide

  2. トーン&マナーとは?
    プロダクトの
    「らしさ」


    伝わるためのお約束ごと
    ユーザーさんに「これ、
    キッチハイクっぽいね!」

    って感じてもらえるのがゴール

    View full-size slide

  3. チームのゴール
    「デザインで何を表現するか」

    をしっかり認識する

    全員で同じゴールをイメージし続ける

    レビューのたびにデザインの方向性が変わる

    View full-size slide

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

    View full-size slide

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

    実現するための

    土台作り

    View full-size slide

  6. プロダクト
    広告
    How
    ビジュアライズ
    の特徴を
    サービス
    キッチハイク

    っぽい人格・行動
    What

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. キッチハイクって、
    こんな人!
    好奇心旺盛で、新しい発見や出会いに

    ワクワクする
    親しみやすさとポジティブなマインドで、

    みんなを安心させる
    食べることが大好き

    View full-size slide

  10. キッチハイクっぽさを

    3つの要素にわける
    マインド ふるまい 見た目

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. どっちが

    キッチハイクっぽい?

    View full-size slide

  15. 犬 猫
    受け入れる
    自分から近づく
    気軽に誘う
    守る対象の

    子犬は
    心地良い場所を

    自分でさがせる
    誰にも縛られない

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 太陽 月
    自ら照らす
    やりたいを応援する
    ぽかぽかする
    真夏の太陽
    ギラギラ
    世の中に

    ワクワクと

    希望を与える

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 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

    View full-size slide

  22. タイポグラフィ
    フォント

    View full-size slide

  23. 1
    プロダクト用フォント

    View full-size slide

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

    View full-size slide

  25. 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
    各言語の書体デザインが統一されており、
    同じような印象を保てる

    オープンソースで誰でも利用できる
    受け入れ
    言語の多様性に対する

    View full-size slide

  26. 2
    クリエイティブ作成向け

    代替フォント

    View full-size slide

  27. タイポグラフィ
    代替フォント
    カジュアルさ・フレンドリーさを

    表現するときに推奨するフォント

    View full-size slide

  28. タイポグラフィ
    代替フォント
    20代女性が

    書いたような文字
    カジュアルだけどキレイめな

    表現をするときに推奨するフォント
    30代女性が書いたような文字

    View full-size slide

  29. タイポグラフィ
    代替フォント
    フォーマルめな

    表現をするときに推奨するフォント

    View full-size slide

  30. タイポグラフィ
    代替フォント
    若さ・活発さ・元気な

    表現をするときに推奨するフォント

    View full-size slide

  31. タイポグラフィ
    代替フォント
    おしゃれさ・旅感の

    表現をするときに推奨するフォント

    View full-size slide

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

    View full-size slide

  33. カラースキーム

    View full-size slide

  34. 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
    キッチハイクのブランドカラー

    View full-size slide

  35. Accent Colors
    プロダクト内で採用するキーカラー
    アクション可能な要素や特に強調したい要素に使用。

    他の色と競合しないよう、要素の独立性や優先度が保たれ
    るような配色にします。
    #ff5533
    OrangeyRed

    View full-size slide

  36. Text Colors
    プロダクト内で採用するテキストカラー
    本文や見出しなどの、テキスト要素に使用。

    情報の優先度と見た目のコントラストが一致するように配
    色します。


    情報の優先度に応じて、透明度を70% / 50% / 30%に調整
    します。
    #3d0a00
    SoilBrown

    View full-size slide

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

    View full-size slide

  38. Color Ratio
    配色の割合
    写真

    View full-size slide

  39. 食卓を

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

    View full-size slide

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

    View full-size slide

  41. ゴール
    写真でキッチハイク参加の

    きっかけをつくる
    料理・人・場
    ユーザーが いずれかに

    行きたいきっかけを見つける

    View full-size slide

  42. 1
    五感に訴えるものが

    感じられる

    View full-size slide

  43. が聞こえる

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

    View full-size slide

  44. 2
    人の笑顔のシーンを

    切り取る

    View full-size slide

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

    View full-size slide

  46. 3
    これはNG!な

    チェックポイント

    View full-size slide

  47. 無理な笑顔
    実際に起こらない
    求人サイトの「明るい会社です!」みたいな嘘臭さ
    タレントの食レポみたいな嘘臭さ
    イベント中はありえない孤食シーン
    周りに何もない・別撮り・スタジオ撮影っぽい
    一般的には良しとされるもの、
    「きれい」な

    写真であっても、キッチハイクの基準に合って
    いなければNGになります

    View full-size slide

  48. 意識していること
    作り手にも食べ手にも、

    嘘がなく・誠実で・等身大の

    存在でありたい

    View full-size slide

  49. もぐもぐ・ガイドライン

    View full-size slide

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

    View full-size slide

  51. 1人称
    年齢
    「ぼく」
    7さい
    「もぐ。

    「もぐ〜!」
    キッチハイクの胃袋外交大臣
    韓国料理
    世界中のみんなをごはんで

    つなげて笑顔にすること
    語尾
    すきな料理
    おしごと

    View full-size slide

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

    View full-size slide

  53. 「参加して」
    とは言わない
    今こんなキャンペーンがあるもぐ。

    気になったらイベントページを

    見てみてもぐ〜。

    View full-size slide

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

    View full-size slide

  55. コミュニケーション

    ガイドライン

    View full-size slide

  56. マインド
    ふるまい 見た目
    どんな口調?

    どんな言葉づかい?

    どんな伝え方?

    View full-size slide

  57. 1
    リフレーミングを使って

    ポジティブな表現を考える

    View full-size slide

  58. キャンセルフィーを

    支払うと

    次の予約ができます。
    キャンセルフィーを

    支払わないと

    次の予約ができません。

    View full-size slide

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

    View full-size slide

  60. 実際に人と会うサービス

    適切な距離感を考える
    2

    View full-size slide

  61. テンション

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

    View full-size slide

  62. ビジュアルデザイン事例

    View full-size slide