Kurashiru Brand Guideline

Brand Guideline

View Slide

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

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

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

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

Kurashiruは、一人ひとりの暮らしに寄り添った 
食の楽しみ方に出会える場所。

あなたに合わせてパーソナライズされたレシピは、 
シンプルでおいしい。

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

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

ごはんも料理も、もっとおいしく、もっと楽しく。

Kurashiru

View Slide

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

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

たとえば写真であれば、最終的な料理を家族や友達と囲み、
みんなが表情豊かになっている情景や、おいしい料理に心動
いているシーンなどが適切でしょう。
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

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

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

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

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

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

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. 
as it mixes with the logo type, making it difficult to

View Slide

p. 12 Brand Logo
ロゴマークとロゴタイプが横並べになっている、ブランドロゴの
なかでもっともスタンダードなバリエーション。
The most standard variation of the brand logo, with the
brand symbol and brand name side by side.

View Slide

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

p. 14 Brand Logo (Grayscale)
ブランドロゴをグレースケールで表示したバージョン。

新聞広告など、グレースケールの表示が必要な場合に利用してく
ださい。

背景が明るい場合は黒いブランドロゴを、背景が暗い場合は白い
ブランドロゴを使用してください。
On a light background, use the black mark.

On a dark background, use the white mark.

View Slide

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. 
as it mixes with the brand logo, making it difficult to
1x
2x
1x

View Slide

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

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.

1x 1x
1x
1x
1x
1x
0.5x

View Slide

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

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. 
1x
1x 1x 1x
1x
1x

View Slide

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

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

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

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

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

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

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

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

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

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

View Slide

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

View Slide

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

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

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

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

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

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

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

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

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

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

あいうえおかきくけこさしすせそたちつてと

アイウエオカキクケコサシスセソタチツテト

亜葵鯵絢按位惟移遺一員陰雨
モトヤシーダ 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

Better meals for those

who you care about.
EN Headline

Fellix SemiBold

1.0x pt / 1.0x Leading
EN Text

Fellix Regular

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

JP Text

Motoya Cedar Std W3

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつ
くしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。山路を登りなが
ら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮
屈だ。とかくに人の世は住みにくい。
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

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

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

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

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

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

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

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

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

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

Kurashiru Brand Guideline

Kurashiru Brand Guideline

dely

More Decks by dely

Other Decks in Design

Featured

Transcript