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

Kurashiru Brand Guideline

dely
November 30, 2022

Kurashiru Brand Guideline

dely

November 30, 2022
Tweet

More Decks by dely

Other Decks in Design

Transcript

  1. Brand Guideline

    View Slide

  2. Introduction
    本ドキュメントでは、Kurashiruのミッションやバリュヌ、ならび
    にそれらをどのようなデザむンずしおナヌザや私たちのステヌク
    ホルダヌに提瀺すべきかを瀺したす。


    アプリのUX/UI、販促物、パヌトナヌずの協働など、Kurashiruの
    ブランドが珟れるあらゆる堎面で本ドキュメントで瀺されおいる
    指針に則ったデザむンをほどこすこずで、Kurashiruのブランド資
    産圢成に貢献したす。
    This document outlines Kurashiru's mission and values, and
    how they should be presented to our users and
    stakeholders.


    We will contribute to Kurashiru's brand assets by applying
    the design guidelines outlined in this document to every
    touchpoint in which the Kurashiru brand appears - including
    the service app, promotional materials, and collaboration
    with partners.
    Logo Colors
    Brand
    Pattern
    Photography
    Typography
    Brand Core
    Design System
    Application
    Values
    Mission

    View Slide

  3. Index
    p. 1 - Brand Core

    p. 6 - Brand Logo

    p. 24 - Colors

    p. 31 - Brand Pattern

    p. 39 - Brand Typography

    p. 46 - Icon

    p. 48 - Photographic Expression

    p. 52 - Application Sample
    p. 6 - Brand Logo
    p. 1 - Brand Core
    p. 39 - Brand Typography
    p. 48 - Photographic Expression p. 52 - Application Sample
    Understanding
    Actionable Moving
    p. 24 - Colors
    p. 31 - Brand Pattern
    AaBbCc123
    あア愛氞
    p. 46 - Icon

    View Slide

  4. p. 1 Brand Core
    Kurashiruのミッションは「80億人に1日3回の幞せを届ける」こ
    ず。私たちはKurashiruずいうブランドで、食ずいうあらゆる人に
    ずっお欠かせない領域を぀うじ、人々に毎日毎食幞せを届けるこ
    ずを目指しおいたす。

    そのために私たちが倧切にしおいるのは、Understanding・
    Moving・Actionableずいう3぀のバリュヌです。これらのバ
    リュヌは独立で存圚しおいるのではなく、それぞれがお互いに぀
    ながっお存圚しおいたす。


    私たちはこれらのバリュヌをただ蚀葉で語るのではなく、
    Kurashiruのあらゆるサヌビスやメッセヌゞにおいお䜓珟するこず
    を目指したす。
    Kurashiru's mission is to deliver happiness three times a day
    to 8 billion people. We aim to bring happiness to people
    with every meal and every day through food, an element in
    life that is indispensable to all people.

    To achieve this goal, we hold three values: Understanding,
    Moving, and Actionable. Furthermore, these values do not
    exist independently, but are interconnected with each other.


    At Kurashiru, we don’t just talk about these values in words,
    but aim to embody them in all of Kurashiru's services and
    messages.
    MISSION
    80億人幞せの
    レシピを届ける
    VALUES
    Understanding
    Kurashiruは自分のこずを‚
    深く理解しおいる
    Actionable
    Kurashiruのレシピは‚
    ぀くりやすくお安心
    Mo
    vin
    g
    Kurashiruを
    䜿っおいるず
    、‚
    自分
    も料理がしたくなる
    USE
    R
    USE
    R
    USE
    R
    USE
    R
    実際においしい料理ができる
    ため、‚
    さらにいろんなレシピを
    ぀くりたくなる
    興味を
    持った料理が‚
    実際に自分で぀くれる
    自分の
    奜みにもずづき、‚
    ぀くりたくなるレシピ
    が‚
    提瀺される
    自分が想像もしおいなかった‚
    レシピ
    が芋぀かり、‚
    奜きが広がる
    自分に合わせ
    お぀くれる‚
    レシピを
    提瀺しおくれる
    レシピを
    ぀くる
    こずで、‚
    Kurashi
    ruが自分の
    こずを‚
    さらに理解しおくれる

    View Slide

  5. p. 2 Brand Story
    → Understanding
    → Moving
    → Actionable
    料理をする、‚
    それは「おいしい」を想うこず。

    Kurashiruは、䞀人ひずりの暮らしに寄り添った‚
    食の楜しみ方に出䌚える堎所。

    あなたに合わせおパヌ゜ナラむズされたレシピは、‚
    シンプルでおいしい。

    日々新しいレシピを教えおくれるKurashiru Matesは、‚
    やさしくお情熱的。

    だから、食べたくなる、぀くりたくなる。

    ごはんも料理も、もっずおいしく、もっず楜しく。

    Kurashiru

    View Slide

  6. p. 3 Understanding
    Kurashiruはナヌザを深く理解するこずで、䞀人ひずりの䜓質や嗜
    奜にあったレシピやコンテンツを提䟛したす。


    Understandingのバリュヌを䜓珟するにあたっおは、たずえば以
    䞋のような芳点でサヌビスやプロダクトのデザむンを考えるこず
    が倧切で8
    ! ナヌザに耳を傟け•
    ! さたざたな角床からナヌザに぀いお理解しようずす•
    ! すでにナヌザが教えおくれおいるこずをきちんずアクションや
    コンテンツに反映する
    Kurashiru provides recipes and content tailored to each
    individual's predisposition and preferences through a deep
    understanding of the user.


    T
    o embody “Understanding,” it is important to think about
    the design of services and products from the following
    perspectivesx
    w Listen to the use‡
    w Try to understand the user from multiple perspective–
    w Respond and reflect on what users have already taught
    us to our actions and content
    Design Keywords: Soft, Interactive, Warm

    View Slide

  7. p. 4 Actionable
    Kurashiruはリアルな食を倧切にし、ただ芋お楜しむのではなく、
    実際に぀くるこずのできるレシピやツヌルを提䟛したす。


    Actionableのバリュヌを䜓珟するにあたっおは、たずえば以䞋の
    ような芳点でサヌビスやデザむンを考えるこずが倧切で1
    r 誰にずっおも分かりやすい説明やビゞュアg
    r ナヌザの状況やスキルに即したサゞェスチョンや情報提瀺
    Kurashiru values real food and provides recipes and tools
    that allow people to make food rather than for visual
    pleasure.


    To embody “Actionable,” it is important to think about
    service and design from the following perspectivest
    w Explanations and visuals that are easy for everyone to
    understand
    w Suggestions and information that are relevant to the
    user's situation and skills
    Design Keywords: Logical, Simple, Clear

    View Slide

  8. たずえば写真であれば、最終的な料理を家族や友達ず囲み、
    みんなが衚情豊かになっおいる情景や、おいしい料理に心動
    いおいるシヌンなどが適切でしょう。
    p. 5 Moving
    Kurashiruは食を幞せのための倧事な芁玠ずしお考え、すこしでも
    楜しく料理をできるよう、心が動く、぀くりたくなるレシピやコ
    ンテンツを提䟛したす。


    Movingのバリュヌを䜓珟するにあたっおは、たずえば以䞋のよう
    な芳点でサヌビスやプロダクトのデザむンを考えるこずが倧切で
    Œ
    t 分かりやすさだけでなく、楜しさや驚きなどで情緒に働きかけ
    るコンテンツや仕掛けを意識す±
    t 料理を぀くりたくなるモチベヌション自䜓をさたざたな圢で生
    み出Œ
    t 料理だけでなく、実際にその料理を楜しんでいるナヌザたでを
    も想像する
    Kurashiru considers food a fundamental factor of happiness
    and provides recipes and content that inspire and motivate
    people to enjoy cooking.


    To embody “Moving,” it is important to think about service
    and design from the following perspectives¶
    µ Be considerate of content and mechanisms that are easy
    to understand, as well as fun and surprising, to speak to
    the users' emotions¿
    µ Trigger motivation to cook in various ways¿
    µ Imagine not only the food but also the user enjoying the
    food. たずえば写真であれば、最終的な料理を家族や友達ず囲み、
    みんなが衚情豊かになっおいる情景や、おいしい料理に心動
    いおいるシヌンなどが適切でしょう。
    Design Keywords: Emotional, Vibrant, Surprising

    View Slide

  9. p. 6 Brand Logo
    ブランドロゎであるKurashiruロゎはKurashiruのブランドを芖芚
    的に象城する存圚です。


    そのため、ブランドロゎを構成する各芁玠や䜙癜は緻密に怜蚎さ
    れおいたす: ロゎマヌクはブランドの独自性を発揮できるような配
    色がなされ、ブランドの展開性の広さを象城するゞオメトリカル
    さを掻かしお描かれおいたす。

    䞊蚘を螏たえ、本ブランドガむドラむンに蚘茉されおいないよう
    なブランドロゎの改倉は避けおください。


    ロゎマヌクずロゎタむプが暪䞊べになっおいるバヌゞョンがもっ
    ずも基本的なブランドロゎになりたす。
    The Kurashiru logo is a visual representation of our brand,
    and therefore regardless of where it meets the eyes of our
    audiences, our Logo must truly convey the Kurashiru brand.


    The relationship between each element of our visual
    identity has been carefully considered: the letters have been
    specially drawn to convey the geometrical feel consistent in
    the brand identity, and colors have been chosen to create a
    unique, distinctive mark. The relative size and position of the
    elements is fixed and should not be changed.


    The Horizontal is our primary lockup, to be used in most
    cases. When the format is too narrow, you can use the
    Vertical lockup as a fallback.
    Logo Mark
    Brand Logo
    Logo Type

    View Slide

  10. p. 7 Brand Logo Variations
    ロゎマヌク、ロゎタむプ、ブランドロゎをどのように䜿い分ける
    のかに぀いおは右の衚を参照しおください詳现な色の䜿い分け
    などは陀きたす。


    1→4ず順番に優先床が高いロゎずなっおいたす。基本的には1ず2
    を䜿甚し、3ず4は挙げられおいるような特定の条件でのみ䜿甚す
    るようにしおください。
    Refer to the chart on the right on when to use which logo
    mark, logo type, or brand logo.


    The younger number are more preferable to older numbers.
    For most cases, use variation 1 and 2, and use 3 and 4 for the
    explained occasions.
    Combining with brand patterns
    ブランドパタヌンず組み合わせる堎合
    Medium is vertical and has low brand recognition
    展開先が瞊長のメディアでブランド認知が䜎い堎合
    Medium is video with very limited time (- 2sec) for logo
    展開先がビデオ、か぀ロゎの衚瀺時間が短い堎合~2sec
    ほず
    んどの堎合
    On most occasions
    1
    3
    2
    4
    Brand Logo
    Logo
    Mark
    Logo Type
    Logo
    Mark
    (Vertical
    )
    Brand Logo
    (JP)
    Logo Type
    (JP)

    View Slide

  11. p. 8 Logo Mark
    ロゎマヌクは4぀のシンプルな図圢が寄り添った構造をしおおり、
    Kurashiruの頭文字であるKを衚し぀぀、もっずも基本的な食材で
    あるりんごをモチヌフずしおいたす。

    これは、料理はあらゆる人に開かれおいるものであり、あらゆる
    人による、あらゆる人にあったレシピを提䟛するずいうKurashiru
    の態床を衚珟しおいたすUnderstanding & Actionable。


    たた、ロゎをモヌショングラフィックやアニメヌションさせる堎
    合は、ロゎを構成する4぀の図圢を他の図圢や色ぞず眮き換えるこ
    ずで、シンプルさの先に広がる料理の可胜性を衚珟するこずがで
    きたすMoving。
    The logo mark is composed of four simple geometries, that
    visualizing two motifs - the first letter of the Kurashiru brand
    and an apple, one of the most basic and universal food.

    This highlights Kurashiru's attitude towards cooking -
    cooking is open to anyone, and Kurashiru offers recipes that
    are for and by everyone and anyone (Understanding &
    Actionable).


    In addition to above, by replacing the four geometries with
    other shapes or colors when animating, we can also express
    the endless possibilities that awaits us beyond simplicity
    (Moving).

    View Slide

  12. 1x
    1x
    1x
    p. 9 Clear Space for Logo Mark
    ロゎマヌクを䜿う際に呚囲に蚭けるべき䜙癜。


    ロゎマヌクのグリッド1マス分の䜙癜をブランドロゎの呚囲に蚭け
    るようにしおください。

    䜙癜のスペヌス内にテキストや画像、図圢などを配眮するず、ロ
    ゎず干枉しおどこたでがロゎなのかが正しく認識できなくなっお
    したいたす。
    A clearspace equal to one grid size of logo mark in height
    and width must be around the Kurashiru logo mark in every
    application.‹
    No other visual element may intrude within this clearspace,
    as it mixes with the logo mark, making it difficult to
    recognize it properly.

    View Slide

  13. p. 10 Logo Type (English)
    ブランドロゎ内のロゎタむプはただのテキストではなく、ロゎ
    マヌクず同様に半円の図圢を䜿甚し぀぀、Kurashiruの3぀のバ
    リュヌを䜓珟したものです。
    The logo type is not just a simple text but expresses the
    three values of Kurashiru, just like the logo mark. The use of
    half circle also makes it coherent to the design language of
    logo mark, making it a perfect combination.

    View Slide

  14. 1x 1x
    1x
    2x
    1x
    1x
    p. 11 Clear Space for Logo Type
    ロゎタむプを䜿う際に呚囲に蚭けるべき䜙癜。


    ロゎマヌクで利甚しおいるグリッド1マス分の䜙癜をブランドロゎ
    の呚囲に蚭けるようにしおください。

    䜙癜のスペヌス内にテキストや画像、図圢などを配眮するず、ロ
    ゎず干枉しおどこたでがロゎなのかが正しく認識できなくなっお
    したいたす。
    A clearspace equal to one grid size logo mark in height and
    width must be around the Kurashiru logo type in every
    application.‹
    No other visual element may intrude within this clearspace,
    as it mixes with the logo type, making it difficult to
    recognize it properly.

    View Slide

  15. p. 12 Brand Logo
    ロゎマヌクずロゎタむプが暪䞊べになっおいる、ブランドロゎの
    なかでもっずもスタンダヌドなバリ゚ヌション。
    The most standard variation of the brand logo, with the
    brand symbol and brand name side by side.

    View Slide

  16. p. 13 Brand Logo (Two Tone)
    埌述するブランドパタヌン䞊、もしくはブランドカラヌを甚いた
    掲出物にロゎを掲茉する堎合、色の調和を取るため、背景色ずは
    異なるブランドカラヌを䞀色だけ甚いおロゎに配色するこずがで
    きたす。

    具䜓的な色の遞定に぀いおはブランドカラヌのペヌゞを参照しお
    ください。
    In order to avoid confusion and clutterness due to the
    variation in color schemes, in occasions where the lockup is
    used in marketing materials that follow the color scheme
    which will be introduced in the following pages, only use
    one color for the logomark instead of two colors. This rule
    applies despite the background color being light or dark.

    View Slide

  17. p. 14 Brand Logo (Grayscale)
    ブランドロゎをグレヌスケヌルで衚瀺したバヌゞョン。

    新聞広告など、グレヌスケヌルの衚瀺が必芁な堎合に利甚しおく
    ださい。


    背景が明るい堎合は黒いブランドロゎを、背景が暗い堎合は癜い
    ブランドロゎを䜿甚しおください。
    On a light background, use the black mark.

    On a dark background, use the white mark.

    View Slide

  18. 1x
    1x 1x 1x
    p. 15 Clear Space for Brand Logo
    ブランドロゎを䜿う際に呚囲に蚭けるべき䜙癜。


    ロゎマヌクずロゎタむプの間にはロゎマヌクのグリッド1マス分の
    䜙癜を蚭けおください。


    たた、同様の䜙癜をブランドロゎの呚囲に蚭けおください。

    䜙癜のスペヌス内にテキストや画像、図圢などを配眮するず、ロ
    ゎず干枉しおどこたでがロゎなのかが正しく認識できなくなっお
    したいたす。
    Place a spacing between the logo mark and logo type
    equivalent to one grid size of logo mark.


    Additionally, apply same clearspace in height and width
    around the Kurashiru logo in every application.‹
    No other visual element may intrude within this clearspace,
    as it mixes with the brand logo, making it difficult to
    recognize it properly.
    1x
    2x
    1x

    View Slide

  19. p. 16 Brand Logo (Vertical)
    ロゎマヌクずロゎタむプを瞊積みしたバヌゞョン。

    瞊長の掲出物、モバむル端末画面などにおいお、ロゎマヌクのサ
    むズを倧きく確保したいずきなどに利甚しおください。
    Brand logo variant that vertically stacks the logo mark and
    logo type. Use this version when applying brand logo to
    vertically long screens and medias.

    View Slide

  20. p. 17 Clear Space for Brand Logo
    瞊積みのブランドロゎを䜿う際に呚囲に蚭けるべき䜙癜。


    ロゎマヌクずロゎタむプの間にはロゎマヌクのグリッド0.5マス分
    の䜙癜を蚭けおください。


    たた、ロゎマヌクのグリッド1マス分の䜙癜をブランドロゎの呚囲
    に蚭けおください。

    䜙癜のスペヌス内にテキストや画像、図圢などを配眮するず、ロ
    ゎず干枉しおどこたでがロゎなのかが正しく認識できなくなっお
    したいたす。
    Place logo mark and logo type with spacing equivalent to
    half grid size of logo mark.


    The clearspace surrounding the lockup should equal to one
    grid size of logo mark.

    No other visual element may intrude within this clearspace,
    as it mixes with the brand logo, making it difficult to
    recognize it properly.
    1x 1x
    1x
    1x
    1x
    1x
    0.5x

    View Slide

  21. p. 18 Brand Logo (JP)
    カタカナのロゎタむプず組み合わせたバヌゞョン。


    グロヌバリれヌションの芳点から、原則ずしお英語ブランドロゎ
    タむプのバヌゞョンを䜿甚しおください。


    メディア掲出においお、掲茉時間が極端に短く、カタカナでない
    ずブランド名を読みきれない可胜性がある堎合、英語では読めな
    い可胜性のあるナヌザに察しおメッセヌゞを発信する堎合などに
    䜿うようにしおください目安ずしお、2sec未満。
    The Japanese logotype is designed based on the design
    principles used to construct the English logotype.


    However, considering from a globalization standpoint,
    regardless of what language / region the marketing asset
    are intended for, the English logo should be the primary
    logo to be used.


    The Japanase logo mockup should be treated as a
    secondary logo, solely used for occasions with a dire need
    to represent the brand identity in Japanese (e.g. when logo
    is only shown for less than 2sec or readers of that specific
    medium only recognizes English).

    View Slide

  22. p. 19 Clear Space for Brand Logo (JP)
    ブランドロゎを䜿う際に呚囲に蚭けるべき䜙癜。


    ロゎマヌクずロゎタむプの間にはロゎマヌクのグリッド1マス分の
    䜙癜を蚭けおください。


    たた、同様の䜙癜をブランドロゎの呚囲に蚭けおください。

    䜙癜のスペヌス内にテキストや画像、図圢などを配眮するず、ロ
    ゎず干枉しおどこたでがロゎなのかが正しく認識できなくなっお
    したいたす。
    Place a spacing between the logo mark and logo type
    equivalent to one grid size of logo mark.


    Additionally, apply same clearspace in height and width
    around the Kurashiru logo in every application.‹
    No other visual element may intrude within this clearspace,
    as it mixes with the brand logo, making it difficult to
    recognize it properly.
    1x
    1x 1x 1x
    1x
    1x

    View Slide

  23. p. 20 Brand Type (JP)
    ブランドロゎ内のロゎタむプはただのテキストではなく、ロゎ
    マヌクず同様に半円の図圢を䜿甚し぀぀、Kurashiruの3぀のバ
    リュヌを䜓珟したものです。英語同様、カタカナ衚蚘においおも
    このコンセプトは受け継がれおいたす。
    The logo type is not just a simple text but expresses the
    three values of Kurashiru, just like the logo mark. As seen in
    the English type, the use of half circle also makes it coherent
    to the design language of logo mark, making it a perfect
    combination.

    View Slide

  24. p. 21 Minimum Size for Brand Logo
    ロゎマヌク、ロゎタむプ、ブランドロゎを䜿甚する際は、右蚘の
    数字を䞋回るサむズで提瀺するこずを避けおください。

    ロゎの可読性が䜎くなっおしたうこずで、誀認を招く可胜性があ
    りたす。
    Avoid using logo mark, logo type and brand logo smaller
    than shown on the right.

    Small logos are prone to be misunderstood or misread.
    Digital
    Print
    >= 20px
    >= 4mm
    >= 20px
    >= 4mm
    >= 20px
    >= 4mm
    >= 50px
    >= 10mm

    View Slide

  25. p. 22 Best Practices
    ここたでの説明になかったようなロゎの䜿甚は避けおください。
    特に、右のような䜿甚は絶察に避けおください。
    Please avoid using logos in ways that are not described in
    the previous pages. Absolutely avoid logo uses such as seen
    on the right.
    Don’t use the old logo
    Don’t use with outlines
    Don’t mix in unspecified way
    Don’t stretch or squeeze it
    Don’t use shadows or gradients
    Don’t modify the logo type
    Don’t use unspecified colors
    Don’t use against low-contrast
    Don’t create your own version

    View Slide

  26. Kurashiru
    KURASHIRU
    kurashiru
    クラシル
    p. 23 Brand Name in T
    ext
    ブランド名をテキストで入力する堎合の衚蚘方法です。


    英文で入力した際にもきちんず固有名詞であるこずが分かるよ
    う、頭文字を倧文字ずし、それ以倖を小文字で衚蚘しおくださ
    い。たた、カタカナで衚蚘するのはその掲出先の読み手にずっお
    英語を読むこずが困難であったり、䞍慣れである堎合のみに止め
    るようにしおください。
    When inputting the brand name as a text, treat it as a
    proper noun and always capitalize the first letter. Also, avoid
    using the Japanese Katakana writing, unless the reader of
    that specific outlet has difficulty reading English.

    View Slide

  27. p. 24 Colors
    Kurashiruブランドの独創的か぀楜しい䞖界芳を䜓珟するにあた
    り、ここで提瀺されおいるカラヌパレットを甚いおください。


    カラヌパレットには、3぀の明床に絞った5぀の色盞があり、利甚
    する際は、目枬やカラヌピッカヌなどを䜿甚せず、必ずガむドラ
    むンに蚘茉されたカラヌ倀を䜿甚しおください。
    The Kurashiru brand used a multitude of different colors,
    reflecting the moving and engaging nature of the platform
    and its many users.


    The colors are divided into five hue-columns, with three
    brightness-rows. The colors should always be reproduced
    using the numerical values found on this page. Spicy Red

    HEX F05537

    R240 G85 B55

    C0 M80 Y75 K0

    Bright Red C
    Black

    HEX 2D2D2D

    R45 G45 B45

    C80 M75 Y75 K50
    Savory Orange

    HEX F07D2D

    R240 G125 B45

    C0 M65 Y85 K0
    Sour Yellow

    HEX F0B400

    R240 G180 B0

    C0 M35 Y90 K0
    Bitter Green

    HEX 32BE46

    R50 G190 B70

    C70 M0 Y90 K0
    Salty Blue

    HEX 5073F0

    R80 G115 B240

    C75 M55 Y0 K0
    Light

    Spicy Red

    HEX FFB4B4

    R255 G180 B180

    C0 M40 Y20 K0
    Light

    Savory Orange

    HEX FFBE96

    R255 G190 B150

    C0 M35 Y40 K0

    2015 C
    Light

    Sour Yellow

    HEX FFCD82

    R255 G205 B45

    C0 M25 Y55 K0
    Light

    Bitter Green

    HEX B9E1AA

    R185 G225 B170

    C35 M0 Y40 K0
    Light

    Salty Blue

    HEX B4CDFF

    R180 G205 B255

    C35 M15 Y0 K0
    Extra Light

    Salty Blue

    HEX E6F0FF

    R230 G240 B255

    C15 M5 Y0 K0
    Extra Light

    Savory Orange + Sour Yellow

    HEX FFF5E1

    R255 G245 B225

    C0 M5 Y15 K0

    9064 C
    White

    HEX FFFFFF

    R255 G255 B255

    C0 M0 Y0 K0
    Extra Light

    Bitter Green

    HEX EBFADC

    R235 G250 B220

    C10 M0 Y20 K0
    Extra Light

    Spicy Red

    HEX FFE6E6

    R255 G230 B230

    C0 M15 Y5 K0

    View Slide

  28. Monochromatic
    Related Value: Understanding
    Accented
    Related Value: Actionable
    Dynamic
    Related Value: Moving
    p. 25 Color Combinations
    パタヌンを甚いたグラフィックを䜜る際には、カラヌパレット内
    で、それぞれの明床Extra Light、Light ずオリゞナルから3぀
    のカラヌを䜿甚しお䜜るこずにより、ダむナミックなデザむン衚
    珟が可胜になりたす。


    色の組み合わせ方にはMonochromatic、Accented、Dynamic
    の3皮類があり、それぞれKurashiruの3぀のバリュヌず関係しおい
    たす。たずえば、MonochromaticはUnderstandingず近いメッ
    セヌゞやコンテンツを発信する際に甚いたす。


    次のペヌゞから、それぞれの䜿甚方法でどうカラヌを䜿うのか、
    たたどのような䜿甚甚途でこれらのカラヌコンビネヌションを䜿
    うのか、説明したす。
    When creating graphics, the Kurashiru brand combines
    three colors (original, light, and extra light) from the palette,
    allowing for dynamic and memorable expressions.


    The ways these colors are combined can be divided into
    three categories: Monochromatic, Accented and Mixed.


    The following pages will show you how these 3-color
    combinations are created and what they are used for.

    View Slide

  29. p. 26 Monochromatic Combinations
    Monochromaticでは、すべお色盞の同じ色を組み合わせたす。


    Monochromaticは、穏やかで、萜ち着いおいる印象を䞎えるこず
    から、Understandingのバリュヌを瀺すのに最適な色の組み合わ
    せになりたす。


    他にもブランドパタヌン自䜓に匷調させすぎたくないずき、たず
    えばテキストや画像をブランドパタヌンの䞊に配眮する堎合など
    はMonochromaticの組み合わせを䜿っおください。
    Monochromatic color combinations are created by using all
    three colors within the same hue-column.


    This makes for a soft and calm expression, reflecting the
    understanding nature of the Kurashiru brand.


    Monochromatic color combinations are used when there is
    a need for a softer tone. As the expression is calm, these
    color combinations work well as backgrounds or when they
    shouldn’t steal attention away from an image or key
    information.

    View Slide

  30. p. 27 Accented Combinations
    Accentedでは、明るい2色は同䞀の色盞から遞び぀぀、最も濃い1
    色を異なる色盞から遞びたす。


    Accentedは、ダむナミックではっきりずした印象を䜜り出すた
    め、Actionableのバリュヌを衚珟するのに最適です。


    他にも、明瞭で倧胆なメッセヌゞを発信する際、たずえばナヌザ
    にアクションを喚起する際や、広告、ナヌザずの䌚話の堎などで
    は、Accentedを䜿うこずが掚奚されたす。
    Accented color combinations are created by using the two
    brightest colors from one hue-column and adding a dark
    color from another hue-column.


    This makes for a dynamic and clear expression, reflecting
    the actionability of the Kurashiru brand.


    Accented color combinations are used when there is a need
    for clear and bold communication. As there is a guaranteed
    sense of contrast inherent to these combinations, they work
    well for advertising, user conversion and calls to action.

    View Slide

  31. p. 28 Dynamic Combinations
    Dynamicは、3色すべお異なる色盞の色を組み合わせたす。


    これにより、Dynamicは非垞に動的な印象を生み出し、
    Kurashiruが持぀Movingのバリュヌを瀺すのに向いおいたす。


    必ずしもコントラストが担保されないため、情報を䌝えるような
    目的ではなく、ブランドグッズやにぎやかしのためのスヌパヌグ
    ラフィックスなどに甚いるのがよいでしょう。
    Dynamic color combinations are created by using one‹
    color from each brightness-row, from three different hue-
    columns.


    This makes for a very dynamic expression, reflecting the
    moving quality of the Kurashiru brand.


    As many of the dynamic color combinations will not have a
    guaranteed strong sense of contrast, they are not used for
    information-heavy touchpoints requiring more legibility.
    They are mostly used for stand-alone graphic productions
    such as totebags or decorative supergraphics.

    View Slide

  32. p. 29 Combination Examples 1
    ここでは、実際の色の組み合わせ䟋をいく぀かご玹介したす。
    Here are some color combination examples to inspire you.

    View Slide

  33. p. 30 Combination Examples 2
    ここでは、実際の色の組み合わせ䟋をいく぀かご玹介したす。
    Here are some color combination examples to inspire you.

    View Slide

  34. p. 31 Brand Pattern
    Kurashiruブランドは、食材をモチヌフずしたゞオメトリカルなブ
    ランドパタヌンをもちいるこずで、料理をもっず手軜に、もっず
    楜しくできる、ずいうこずを衚珟しおいたす。


    これらは単䜓でスヌパヌグラフィックずしお䜿甚するこずも、組
    み合わせおブランドパタヌンずしお䜿甚するこずもできたす。


    ブランドパタヌンを甚いるこずで、ブランドのメッセヌゞに䞀貫
    性が産たれ、Kurashiruのポゞションが匷化されたす。
    The Kurashiru brand uses patterns composed of
    geometrically constructed ingredients, in order to show
    how easy and fun cooking can be.


    The single elements can be used individually as
    supergraphics or together as a pattern.


    Using the pattern creates a strong cohesion across the
    brand touchpoints and strengthen the position of Kurashiru.

    View Slide

  35. p. 32 Brand Pattern Construction
    パタヌンの個々の芁玠は、食材ず、それらを分けたり、組み合わ
    せたりしお、最終的には楜しむこずができる、食の可胜性を衚し
    おいたす。


    各芁玠は正方圢のグリッド䞊で、厳密なゞオメトリヌを甚いお描
    かれおいたす。これにより、あらゆるタッチポむントでKurashiru
    のブランドのアむデンティティを付䞎できる、印象的なビゞュア
    ルが完成したす。
    The individual elements of the pattern represents
    ingredients and the multitude of ways in which they may be
    combined, disassembled, experimented with and ultimately
    enjoyed.


    The elements are created using a square grid, and drawn
    using strict geometry. This makes for memorable and iconic
    visuals that add brand identity across touchpoints.

    View Slide

  36. 1:1 (Square)  12x12 grid
    16:9 (H)  32x18 grid 16:9 (V)  9x16 grid
    1:1 (Square)  9x9 grid
    p. 33 Grids for Integer Ratios
    グリッドは、そのフォヌマットのアスペクト比に合わせた数にし
    おください。たずえば、ワむドスクリヌン16x9向けのグリッ
    ドは32x18、もしくは16x9のグリッドずしおください右図を参
    照。

    なお、正方圢の堎合は䞡蟺ずもに同数であれば、どのようなグ
    リッドを぀くっおも構いたせん12x12・9x9など。


    现かいグリッドはブランドパタヌンをよりたくさん、粗いグリッ
    ドではより倧きなブランドパタヌンを配眮できたす。


    これらのグリッドはテキストや写真、マヌゞンなどの配眮にも関
    わっおきたす。
    When creating assets using formats such as widescreen
    (16:9), create a square grid that matches the aspect ratio of
    the format. In the given example on the right, a 32x18
    (double) or 16x9 grid is used.‹
    Any grid is possible for square formats, as long as there is an
    equal number of gridlines on each side of the format (e.g.
    12x12 or 9x9).
    ‹
    As a rule of thumb, grids with a larger number of squares
    will allow for more but smaller pattern elements whereas
    grids with a smaller number of squares will allow for fewer,
    larger pattern elements.‹

    The grid is used to place the pattern elements, photos, text
    and define the margins for the format.

    View Slide

  37. p. 34 Grids for Integer Ratios
    グリッドは、そのフォヌマットのアスペクト比に合わせた数にし
    おください。たずえば、ワむドスクリヌン16x9向けのグリッ
    ドは32x18、もしくは16x9のグリッドずしおください右図を参
    照。

    なお、正方圢の堎合は䞡蟺ずもに同数であれば、どのようなグ
    リッドを぀くっおも構いたせん12x12・9x9など。


    现かいグリッドはブランドパタヌンをよりたくさん、粗いグリッ
    ドではより倧きなブランドパタヌンを配眮できたす。


    これらのグリッドはテキストや写真、マヌゞンなどの配眮にも関
    わっおきたす。
    When creating assets using formats such as widescreen
    (16:9), create a square grid that matches the aspect ratio of
    the format. In the given example on the right, a 32x18
    (double) or 16x9 grid is used.‹
    Any grid is possible for square formats, as long as there is an
    equal number of gridlines on each side of the format (e.g.
    12x12 or 9x9).
    ‹
    As a rule of thumb, grids with a larger number of squares
    will allow for more but smaller pattern elements whereas
    grids with a smaller number of squares will allow for fewer,
    larger pattern elements.‹

    The grid is used to place the pattern elements, photos, text
    and define the margins for the format.

    View Slide

  38. A format (H)  8x12 grid (Right) A format (V)  12x8 grid (Bottom)
    p. 35 Grids for Non-Integer Ratios
    癜銀比1:1.41のように、アスペクト比が敎数で衚せない堎合、
    グリッドをフォヌマットの片偎に配眮できたす。この堎合、ブラ
    ンドパタヌンなどもグリッドが存圚する偎だけに配眮したす。‚

    䞀方で、グリッドが存圚しない偎に察しおもグリッドの箇所ず同
    様のマヌゞンを甚いるこずで、グリッドがない箇所においおも統
    䞀感を持ったビゞュアルずするこずができたす。
    When working with formats that do not have an aspect ratio
    composed of two integers such as an a format (approx.
    1:1.41), the grid can be placed in one side of the format, and
    the pattern will only be present in this side of the format.‹‹
    Gridlines may still inform the placement of elements and
    the size of margins, even in the part of the format that
    doesn't contain the square grid. This creates visual harmony
    between other elements and the geometric lines of the
    pattern.

    View Slide

  39. A format (V)  12x8 grid
    A format (H)  8x12 grid
    p. 36 Incorrect Grids
    敎数で構成されたアスペクト比を甚いおいるフォヌマットに察し
    お、党䜓をグリッドで埋めおはいけたせん。これはグリッド自䜓
    の圢が正方圢ではなくなっおしたい、ブランドの衚珟を損ねおし
    たうためです。
    A grid should never be stretched in order to fill out format
    that does not have an aspect ratio composed of two
    integers, as this will distort the pattern elements and
    ultimately the brand expression.

    View Slide

  40. x1
    x2
    p. 37 Scaling Elements
    パタヌン内の各芁玠は、正方圢のグリッドに配眮され、グリッド
    に合わせお拡倧・瞮小されたす。


    グリッドの1マスは各芁玠の最小サむズを衚しおおり、右の䟋の堎
    合ではブドりの房の円がグリッドの1マスず同じ倧きさになっおい
    たす。


    たた、各芁玠はグリッドに合わせお2倍や敎数倍に拡倧するこずが
    できたす。
    The individual elements of the pattern is placed and scaled
    using a square grid.


    The size of the grid defines the minimum size of the
    elements, this can be seen in the example on the right,
    where the circles of the grape cluster are the same size as
    the grid divisions.


    The elements may double or triple (any number of integer)
    in size in relation to the grid.

    View Slide

  41. x1
    x2
    p. 38 Incorrect Scaling
    グリッドに沿わないような図圢を配眮するずデザむンの䞀貫性が
    倱われ、ブランドのメッセヌゞが混乱しおしたうので避けおくだ
    さい。
    Please avoid creating elements that do not follow the girds,
    as they harm the design consistency of the brand, resulting
    in a disorganised and confusing brand expression that
    should be avoided.

    View Slide

  42. English
    English
    English
    Display + Text
    UI
    Alternative
    日本語
    日本語
    日本語
    Fellix
    Roboto
    SF Pro
    モ
    トダシヌダ Std
    Noto Sans
    ヒ
    ラギノ角ゎ Pro
    p. 39 Brand Typography
    ブランド曞䜓はブランドのサヌビスやプロダクト、広報物など、
    あらゆるタッチポむントにおいおKurashiruらしさを衚珟するため
    のものです。甚いる環境や状況によっお䜿える曞䜓が倉化したす
    ので、それぞれに合わせお適切なものを䜿甚しおください。
    Brand typographies are used in all touchpoints of Kurashiru
    to express the Kurashiru-ness. As availability of typefaces
    depend on the given environment, use typefaces that are
    available and suitable for your purpose.

    View Slide

  43. ABCDEFGHIJKLMNOPQRSTUVWXYZ

    abcdefghijklmnopqrstuvwxyz

    0123456789#/$&%*@()[]!?
    Fellix Regular
    https://displaay.net/typeface/fellix/
    ABCDEFGHIJKLMNOPQRSTUVWXYZ

    abcdefghijklmnopqrstuvwxyz

    0123456789#/$&%*@()[]!?
    Fellix SemiBold
    AaBbCc123

    Fellix
    p. 40 English Typeface
    英文のプラむマリヌブランド曞䜓はFellix
    です。ブランドのサヌビ
    スやコミュニケヌションにおける衚蚘で英語が含たれる堎合は可
    胜な限りこちらのタむプフェむスを䜿甚しおください。


    䜿甚するりェむトはFellix Regular
    、Fellix SemiBold
    の2
    ぀で、芋
    出しやコピヌにはFellix SemiBold
    を、本文などのテキストには
    Fellix Regular
    を䞻に䜿甚しおください。
    Fellix is the primary English brand typeface for Kurashiru
    .

    It is used for all display text and information for all
    communications
    .


    The most commonly used weight will be SemiBold
    , which
    will be as the headline font
    , and Fellix Regular
    , which will be
    used for text. The majority of our company
    communications
    , across campaigns and websites
    , will only
    use two primary weights of Fellix
    : Fellix Regular and Fellix
    Semibold.

    View Slide

  44. あいうえおかきくけこさしすせそたち぀おず

    アむり゚オカキクケコサシスセ゜タチツテト

    亜葵鯵絢按䜍惟移遺䞀員陰雚
    モトダシヌダ Std W3
    https://lets.fontworks.co.jp/fonts/784
    あいうえおかきくけこさしすせそたち぀おず

    アむり゚オカキクケコサシスセ゜タチツテト

    亜葵鯵絢按䜍惟移遺䞀員陰雚
    モトダシヌダ Std W5
    あア愛氞

    モトダシヌダ Std
    p. 41 Japanese Typeface
    和文のプラむマリヌブランド曞䜓はモトダシヌダ Stdです。ブラン
    ドのサヌビスやコミュニケヌションにおける衚蚘で日本語が含た
    れる堎合は可胜な限りこちらのタむプフェむスを䜿甚しおくださ
    い。


    䜿甚するりェむトはモトダシヌダ Std W3ずモトダシヌダ Std W5
    の2぀で、芋出しやコピヌにはモトダシヌダ Std W5を、本文など
    のテキストにはモトダシヌダ Std W3を䞻に䜿甚しおください。
    Motoya Cedar Std is the primary Japanese brand typeface
    for Kurashiru.

    It is used for all display text and information for all
    communications in Japanese.


    The most commonly used weight will be W5, which will be
    as the headline font, and W3, which will be used for text.
    The majority of our company communications, across
    campaigns and websites, will only use two primary weights
    of Motoya Cedar Std: Motoya Cedar Std W3 and Motoya
    Cedar Std W5.

    View Slide

  45. Better meals for those

    who you care about.
    EN Headline

    Fellix SemiBold

    1.0x pt / 1.0x Leading
    EN Text

    Fellix Regular

    0.4x pt / 0.5x Leading
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu
    auctor erat. Donec vestibulum ligula id massa porta pulvinar. Sed sed
    imperdiet nibh, at cursus dui. Proin eget gravida ipsum. Nullam nisi nunc,
    tincidunt maximus mi quis, dignissim mollis sem. Sed maximus risus.
    幞せを届ける矎味しい食事を、

    党おの人たちに。
    JP Headline

    Motoya Cedar Std W5

    0.8x pt / 1.0x Leading
    JP Text

    Motoya Cedar Std W3

    0.3x pt / 0.5x Leading
    あのむヌハトヌノォのすきずおった颚、倏でも底に冷たさをも぀青いそら、う぀
    くしい森で食られたモリヌオ垂、郊倖のぎらぎらひかる草の波。山路を登りなが
    ら、こう考えた。智に働けば角が立぀。情に棹させば流される。意地を通せば窮
    屈だ。ずかくに人の䞖は䜏みにくい。
    p. 42 Text Formatting
    ブランド曞䜓を䜿甚する際は、右のような曞䜓のりェむト・サむ
    ズ・行高の組み合わせ方を意識しおください。これらに則った組
    版を行うこずで、Kurashiruのブランドパタヌンに象城されるグ
    リッドを意識させ぀぀も、和英の調和が取れた読みやすい
    Understandingテキストを䜜り出すこずができたす。


    これらのテキストをブランドパタヌンず組み合わせる堎合、1.0xの
    単䜍はブランドパタヌンのグリッドサむズず揃えおください。
    Refer to the font size and leading on the right when using
    the brand typography. By formatting with these
    combinations, the text follows the grids as seen in the brand
    pattern, as well as harmonious across English and Japanese.


    When combining with the brand pattern, the 1.0x unit is
    equivalent to the smallest grid size of the pattern.

    View Slide

  46. Enjoy Cooking
    Enjoy Cooking
    デリシャスな䜓隓を
    デリシャスな䜓隓を
    Composite Font Pattern 1
    Composite Font Pattern 2
    Fellix SemiBold 120%

    Tracking: 0%
    Fellix Regular 120%

    Tracking: 0%
    Motoya Cedar Std W5 100%

    Tracking: 0%
    Motoya Cedar Std W3 100%

    Tracking: 0%
    p. 43 Composite Font
    ブランド曞䜓をふ぀うの打ち文字でも再珟するためには、合成
    フォントを䜜成するこずでより汎甚的にブランド曞䜓の再珟がで
    きるようになりたす。右のパラメヌタヌを指針に、合成フォント
    を䜜成しおください。
    Create composite fonts to use brand typography with non-
    design tools, making it available for more members across
    different platforms. Refer to the parameter on the right
    when creating composite fonts.

    View Slide

  47. p. 44 Composite Font / Composite Font Pattern 1
    Composite Font Pattern 1 の合成フォントを䜿甚される堎合は、
    右の画像の衚蚘に準じお合成フォントの制䜜を各自でお願いいた
    したす。
    When creating Composite Font Patttern 1, please create the
    composite fonts on your own device, based on the typeset
    rules shown in the right image.

    View Slide

  48. p. 45 Composite Font / Composite Font Pattern 2
    Composite Font Pattern 2 の合成フォントを䜿甚される堎合は、
    右の画像の衚蚘に準じお合成フォントの制䜜を各自でお願いいた
    したす。
    When creating Composite Font Patttern 2, please create the
    composite fonts on your own device, based on the typeset
    rules shown in the right image.

    View Slide

  49. p. 46 Icons

    Kurashiruのアむコンは、そのゞオメトリカルな芋た目が特城で
    す。しかし、アプリやりェブで甚いるアむコンには分かりやすさ
    が求められたす。そこで、アむコンはブランドパタヌンほど忠実
    に幟䜕孊的な぀くりにはしたせん。


    アむコンは20×20のマス目䞊で、マス目2぀分のストロヌクを持っ
    たアりトラむンで描きたす。
    Kurashiru icons are characterised by their geometric
    appearance. The icons, however, are not as stylized as the
    pattern elements, as they need to be clear in what they are
    illustrating and easily understood.


    The icons are drawn using a 20x20 square grid, with
    outlined eliments having a stroke corresponding to‹
    2 squares in the grid.

    View Slide

  50. p. 47 Icons

    Kurashiruのアむコンは、そのゞオメトリカルな芋た目が特城で
    す。しかし、アプリやりェブで甚いるアむコンには分かりやすさ
    が求められたす。そこで、アむコンはブランドパタヌンほど忠実
    に幟䜕孊的な぀くりにはしたせん。


    アむコンは20×20のマス目䞊で、マス目2぀分のストロヌクを持っ
    たアりトラむンで描きたす。
    Kurashiru icons are characterised by their geometric
    appearance. The icons, however, are not as stylized as the
    pattern elements, as they need to be clear in what they are
    illustrating and easily understood.


    The icons are drawn using a 20x20 square grid, with
    outlined eliments having a stroke corresponding to‹
    2 squares in the grid.

    View Slide

  51. p. 48 Photography
    サヌビスやコミュニケヌションにおいお写真を甚いる際は、
    ありの
    たたでナチュラル、
    か぀あたたかみのあるものを意識しおください。

    たずえば、写真内に人が登堎する堎合は調理や食べるこずに没入
    し぀぀、そのこずに満足そうであるこずが望たしいです。スタゞ
    オなどで敎然ず撮圱するよりも、自然光で実際の家で調理しおい
    るかのように感じられるようなセットアップがよいでしょう。背
    景や呚囲に家のむンテリアやキッチンりェアが自然に入り蟌むこ
    ずで、この印象をさらに匷めるこずができるでしょう。


    料理の写真は、できたおでおいしく芋えるこずが倧事です。ここ
    でも、可胜な限り自然光での撮圱を心がけおください
    The tone of the photography selected should feel authentic,
    candid, natural, and have a sense of warmth. People
    involved in the image should look engaged, content and
    happy through their interaction with food. Rather than stiff
    studio shots, the photography aims to feel as authentic as
    possible by capturing people in a natural light setting.
    Including hints of background interior or kitchenware which
    revolve around cooking is a good way to emphasize this
    brand core.


    Food photography should look fresh and appetizing as
    possible. Rather than studio shots, food represented in
    natural lighting will relate more to the brand core.

    View Slide

  52. p. 49 Expressing Understanding with Photography
    ブランドバリュヌのひず぀である「Understanding」を衚珟する
    ためには、Kurashiruが人々に寄り添っおいる、その衚情を芋぀め
    おいる、そういった態床を芋せるこずが重芁になりたす。

    そのため、人々が食べるずきの喜びや衚情が珟れおいる写真が望
    たしいでしょう。
    When representing the brand core “Understanding”
    through photography, it should represent peoples joy that
    comes from the interaction of people with food.

    View Slide

  53. p. 50 Expressing Actionable with Photography
    「Actionable」を衚珟するためには、完成品だけでなく、実際に
    料理をしおいる情景を芋せるこずが重芁になりたす。

    人々が調理をしたり、料理をよそっおいる情景などを䞭心に、調
    理噚具だけでなく人の手や衚情が入るような写真を心がけおくだ
    さい。
    When depicting “Actionable” through photography, it
    should represent people engaging in the act of any sort of
    action involved with food, such as cooking, eating, enjoying
    a meal etc.

    View Slide

  54. p. 51 Expressing Moving with Photography
    「Moving」のバリュヌを写真で象城する際に倧切なのは、食を぀
    うじた人々の感情や衚情の揺れ動きを捉えるこずです。

    たずえば、也杯のシヌン、味芋をしおいるシヌン、食べ物を分け
    合っおいるシヌンなどが代衚的なシヌンずなるでしょう。


    たた、被写䜓は個人でもグルヌプでも構いたせんが、Kurashiruが
    掲げおいる「80億人に1日3回の幞せを届ける」を螏たえるず、耇
    数人で料理を楜しんでいるこずが望たしいでしょう。
    When representing the brand core “Moving” through
    photography, it should represent the emotion and
    excitement that moves people from the interaction of food.


    The subject of the photo could either be single or a group,
    but it is more ideal to represent a group as this brand core
    aims to represent how food connects people.

    View Slide

  55. Advertisement (2:1)

    View Slide

  56. Advertisement (1:2)
    Advertisement (5:3)

    View Slide

  57. Advertisement (3:4) Advertisement (14:5)

    View Slide

  58. Advertisement (1:2)
    Advertisement (A1 Poster × 3)

    View Slide

  59. Advertisement (5:3)
    Advertisement (A1 Poster × 5)

    View Slide

  60. Advertisement (3:4) Advertisement (3:4)

    View Slide

  61. Instagram Stories
    Instagram Static Post

    View Slide

  62. Tote Bag Variation

    View Slide

  63. Cutlery Example
    Cup
    Wrap

    View Slide

  64. Pin Badge Paper Bag
    Delivery Box

    View Slide

  65. Food Truck

    View Slide

  66. Trophy Example

    View Slide

  67. Recipe Card

    View Slide