kintone Style Book

kintone Style Book キントーンスタイルブック ver. 1.0.3 Copyright © Cybozu,
Inc.

Index 目次 01 02 03 Introduction はじめに 02 kintone Style
Book とは？ 03 kintone Lookとは？ 22 kintoneの存在意義 04 カラー 23 フォント 28 写真 30 イラストレーション 32 kintoneサークル 35 デザインパーツ 36 kintone Mind kintoneの価値観 05 kintone Mindとは？ 06 kintone Style kintoneの振る舞い 04 kintone Look kintoneのデザインエレメント 21 15 05 kintone Styleとは？ 16 Warm Smart（ぬくもりスマート） 17 デザイントーン 18 展開例 19 Voice & Tone kintoneのテキストコミュニケーションボイス&トーン更新履歴 Copyright © Cybozu, Inc. 37 38 40 01

01 Introduction kintone Style Book とは？ kintone Style Book とは？
“ 「kintone Style Book」は、「Mind (価値観)」、「Style (振る舞い)」、「Look (見た目)」という 3つの柱で構成されています。これらは、関わるすべての人が、キントーンへの理解を深め、同じ世界観を共有するためのものです。ここにあるのは、表面的な演出のルールではありません。キントーンの本質がどのように形となるかを示す、「キントーンらしさ」そのものです。このStyle Bookを源として、みなさんの自由な発想と創造力で、キントーンの世界が無限に広がっていくことを願っています。 Copyright © Cybozu, Inc. 03

01 Introduction kintoneの存在意義 kintoneの存在意義 “ 社会には、企業や官公庁、教育や医療など、規模も役割もさまざまなチームが存在します。それぞれが大切な使命を担い、理想の未来を追い求め奮闘しており、その原動力にチームワークは不可欠です。私たちは「誰もが自分らしく活躍し、立場やスキルに関わらず互いに尊重し合いながら、理想に向けて進んでいける」そんなチームワークあふれる社会を目指しています。
その実現を後押しする「kintone（キントーン）」は、  プログラミング知識不要で始められるノーコード・ローコードツール。  現場のアイデアをスピーディーかつ低コストにかたちにすることで、  主体的な業務改善への挑戦を支え続けます。さらに、パートナーやユーザーとの連携が、  チームの可能性を無限に広げ、理想に向けた歩みを加速させます。あらゆるチームが、あふれるチームワークで鮮やかな未来を創造することを信じて。  キントーンは、世界中のチームをサポートし続けます。 Copyright © Cybozu, Inc. 04

02 kintone Mind kintone Mindとは？ kintone Mindとは？ “ kintone Mindとは、キントーンを一人の人間とした時、
どのような信念を持つか定義したもの。それは、どのような状況下でも変わることのない「その人らしさ」であり、核となる不変の価値観です。キントーンは、このMindを大切にしながら、あらゆるコミュニケーションを展開します。 Copyright © Cybozu, Inc. 06

02 kintone Mind 01 kintone Mind 02 03 Inclusion &
Empowerment Flexible & Responsible 柔軟性と責任感オープンと前向き一人ひとりの個性や経験を尊重します。そして、開かれた視点から、誰もがチームの中で能力を最大限発揮できる環境づくりをサポートします。チームの理想を実現するために、変化を柔軟に受け入れ、積極的に成長しようと努力します。そして、自分の役割で最大限貢献しつつ、仲間の力を結集し、チーム全体での目標達成を目指します。自身の知識やスキルを気軽に共有し、いつでも力になりたいという思いがあり「いいね！やってみよう！」が口癖です。チームで理想を実現することに前向きで、仲間と共に壁を乗り越えていくことに喜びを感じます。受容と促進 Copyright © Cybozu, Inc. Open & Positive 07

02 kintone Mind 0 kintone Mind 1 Inclusion & Empowerment
受容と促進一人ひとりの個性や経験を尊重します。そして、開かれた視点から、誰もがチームの中で能力を最大限発揮できる環境づくりをサポートします。 “ 一人ひとりの個性や経験を尊重します。所属部署のような表面的な属性に留まらず、一人ひとりの持つ背景、能力、考え方、価値観など、内面的な多様性を重視します。そして、その個性に対して敬意を払い、尊重したいという意志を持っています。開かれた視点から、一部分に偏らず、全体を視野に入れた、公平な視点です。誰もがチームの中で能力を最大限発揮できる環境づくりをサポートします。誰もが自分の能力を活かし、チームの中で最高のパフォーマンスを発揮できるような環境を目指している。また、その環境は一人でつくるのではなく、仲間と協力しながら構築したいと考えています。 Copyright © Cybozu, Inc. 08

02 kintone Mind kintone Mind 01 「Inclusion & Empowerment」とつながる、プロダクトの価値 Inclusion
& Empowerment キントーンは、プログラミングの知識がなくても、誰もが業務にフィットするアプリを自分たちでつくれるノーコードツール。受容と促進開発工数とコストを大幅に削減できるのも大きな特長です。業務を担う一人ひとりが、一人ひとりの個性や経験を尊重します。そして、開かれた視点から、誰もがチーム自分たちのチームの課題に合わせてシステムを自らすばやく構築・改善していけるため、より専門的な領域にリソースを集中できます。の中で能力を最大限発揮できる環境づくりさらに、キントーン単体の機能にとどまらず、プラグインや外部サービス、パートナーをサポートします。企業の専門的な支援、ユーザーコミュニティといった「エコシステム」を柔軟に組み合わせることで、複雑な課題にもスピーディーに対応し、最適なシステムへと拡張し続けることができます。 Copyright © Cybozu, Inc. 09

02 kintone Mind 02 kintone Mind Fl exible & Responsible
柔軟性と責任感チームの理想を実現するために、変化を柔軟に受け入れ、積極的に成長しようと努力します。そして、自分の役割で最大限貢献しつつ、仲間の力を結集し、チーム全体での目標達成を目指します。 “ チームの理想を実現するために、変化を柔軟に受け入れ、積極的に成長しようと努力します。チームの目標を達成したいという強い意志があります。そのためなら、新たな課題や環境変化を受け入れる柔軟性を持ち、自己成長にも積極的に励みます。自分の担当領域で最大限貢献しつつ、チームの中での自身の役割をしっかりと理解し、その範囲内で最高のパフォーマンスを発揮することで、チームに貢献したいという責任感を持っています。仲間の力を結集し、チーム全体での目標達成を目指します。自分のスキルでは対応が難しいと感じた場合は、一人で抱え込むのではなく、仲間に協力を仰ぎます。それは、一人でやり切ることよりも、チームで目標を達成することを重視するためです。 Copyright © Cybozu, Inc. 10

02 kintone Mind kintone Mind 02 Flexible & Responsible 柔軟性と責任感
チームの理想を実現するために、変化を柔軟に受け入れ、積極的に成長しようと努力します。そして、自分の役割で最大限貢献しつつ、仲間の力を結集し、チーム全体での目標達成を目指します。「Flexible & Responsible」とつながる、プロダクトの価値キントーンは、チームのニーズにちょうどよくフィットする「これが欲しかった」が手に入るシステム。業務の特性や使う人に合わせて必要な機能を組み合わせ、環境やニーズの変化に応じて柔軟に形を変え続けられます。それにより、業務を担う一人ひとりが主体となり、状況に合わせたシステムのアップデートをいつでも自分たちの手で行えるようになります。また、きめ細かいアクセス権限や運用ルールを保つための管理機能も備わっているため、自由度とガバナンスの両立を実現。導入から運用までを支える手厚いサポート体制によって、チームが安心して使い続けられる基盤をつくります。 Copyright © Cybozu, Inc. 11

02 kintone Mind 03 kintone Mind Open & Positive オープンと前向き
自身の知識やスキルを気軽に共有し、いつでも力になりたいという思いがあり「いいね！やってみよう！」が口癖です。チームで理想を実現することに前向きで、仲間と共に壁を乗り越えていくことに喜びを感じます。 “ 自身の知識やスキルを気軽に共有し、いつでも力になりたいという思いがあり「いいね！やってみよう！」が口癖です。自身の知識や情報を出し惜しみせず、共有することで信頼を深め、気軽に協力し合える関係をつくりたいと思っています。困った時には、すぐに力を貸すフットワークの軽さを持ち合わせています。チームで理想を実現することに前向きで、仲間と共に壁を乗り越えていくことに喜びを感じます。個人の力だけでは難しいことも、チームで力を合わせれば乗り越えられると信じています。そのため、個人プレーではなく、チームで協力して目標を達成することにやりがいと喜び感じます。 Copyright © Cybozu, Inc. 12

02 kintone Mind kintone Mind 03 Open & Positive オープンと前向き
自身の知識やスキルを気軽に共有し、いつでも力になりたいという思いがあり「いいね！やってみよう！」が口癖です。チームで理想を実現することに前向きで、仲間と共に壁を乗り越えていくことに喜びを感じます。「Open & Positive」とつながる、プロダクトの価値キントーンは、日々の業務を通じてチームの知見が自然と一箇所に集まり、組織全体で活かされる業務改善プラットフォーム。   部門をまたいだ異なる種類の業務データも一つの場所で統合・管理できるため、情報の分断が解消されます。そうして集まったデータは、単なるチームの記録にとどまらず、AI活用の土台へ。業務の中で積み上げられた情報が、分析や自動化の精度を高め、チームの意思決定をより確かなものへと導きます。   情報がオープンになり、ある現場で生まれた気づきがチーム全体に届くことで、蓄積された知見をもとに新たなアイデアが生まれ、組織全体で前向きな業務改善のサイクルが回りはじめます。 Copyright © Cybozu, Inc. 13

02 kintone Mind kintone Mindとプロダクトのつながり誰を／何を受け入れるか kintone Mind Mindとつながる、プロダクトの価値
どう動くかどう関わるか 01 Inclusion & Empowerment 02 Flexible & Responsible 03 Open & Positive 多様な個性を尊重し、生かし合うことでチームは強くなるチームの目標達成のために変化を追い風にしながら、役割に責任をもって主体的に動く知識や情報をオープンにし、仲間と共に前向きに挑戦する多様なリテラシーへの適応・現場主導のアプリ作成・現場とIT部門の共生・エコシステム柔軟な機能拡張・現場主体のアップデート・自由とガバナンスの両立・安心のサポート基盤受容と促進柔軟性と責任感 Copyright © Cybozu, Inc. オープンと前向き知見の蓄積と共有・意思決定を支えるAI・前向きな組織文化の醸成 14

03 kintone Style kintone Styleとは？ kintone Style kintone Styleとは？ “
Warm Smart” 例 xxxx kintone Styleは、「Mind」から自然とにじみ出る、キントーンならではの振る舞いのことです。これは、キントーンの世界観を守るための根幹となります。しかし、私たちがTPOに合わせて服装を選ぶように、 Warm Smart XXXX 例テレビCM 電車広告 Warm Smart Mind BRIGHT 例 xxxx キントーンもターゲットや状況に応じて、その表現を Warm Smart 柔軟に変化させます。 COOL ※それぞれのStyleはあくまで一例です。ここで定義するStyleは、確かな軸を持ちながら、最適な表現を創造するためのベースとしての役割を kintone Styleは、ターゲットやシチュエーションで柔軟に変化します。果たします。本スタイルブックではベースとなる「Warm Smart」のあり方を説明しています。 Copyright © Cybozu, Inc. 16

kintone Style Warm Smart（ぬくもりスマート） “Warm Smart” （ぬくもりスマート） ” 03 ノーコードの
キントーンが選ばれる理由 “Warm Smart”は、キントーンがコミュニケーションをとる上での基本的な振る舞いです。ここでの「Smart」は、単に高スペックな機能を備えていることを指しているのではありません。課題の本質を捉えて解決に導いたり、複雑な情報を誰にでもわかりやすく伝えたりする、洗練された姿勢を意味します。  そして、その根底には、さまざまな人を受け入れ、寄り添いたいという人間的なぬくもり（＝「Warm」）があります。 kin one キンンは、業務アプリがつれるサイボウズのノコドツル。専門的なキルや知識がなて、業務をよ知っている自分たちで、自社の業務にぴったフィッした業務アプリをつれます。 t （トー）くースくーーもくりトキントーンの本質からにじみ出る“Warm Smart”な振る舞いは、関わる人に心地良さやく安心感を与え、理想達成に向けたポジティブなモチベーションを生み出します。〇〇〇〇〇〇〇〇今までやたかったことが、ようや実現します。りくこのスタイルは表面的な演出ではなく、キントーンらしさが表出するとどうなるかを定義したものです。表現の認識を共通化し、キントーンの世界観を守ることを目的としています。 Copyright © Cybozu, Inc. 17

03 kintone Style デザイントーン “Warm Smart" デザイントーン “Warm Smart”は、キントーンが持つポジティブで明るい雰囲気をあらわすため、イエローを基調にしたメリハリのある印象のデザイントーンになっています。
モチーフや文字には、柔らかく丸みを帯びたかたちのものを使用することで人間的なぬくもりをあらわし、それらの強弱と余白をしっかり持たせることで、洗練された姿勢の表現にもつなげます。キワドーポジティブー明るいぬくもり洗練安心感楽しさ ” ノーコードのキントーンが選ばれる理由 kintone（キ）は、業務アプリがつくれるサボウズのノコドツル。専門的なスキルや知識がなくても、業務をよく知っている自分たちで、自社の業務にぴったりフィッした業務アプリをつくれます。ントーンイーーート大小それぞれの円が広がり重なりあう様子は、までやりたったが、チームワークの輪を表現します。よやくします。キントーンによって生まれ、育まれていく要素適切ャプ率高間にジン設けタな余白をを、本の快イトルと文める表現は、キントーンの明洗練された印象へ繋がります。さと前向きに仕事へ取り組む中で生まれる、明るく自然な笑顔のビジュアルは、人間的なぬくもりや安心感へと繋がります。 Copyright © Cybozu, Inc. キントーンを使うことで生まれる様コミニケショラス色味ュイトのー々なベションやワクワクするモチショやアテンーンを、ン表現で表しています。 18

展開例表現のバリエーション例 ” キントーンが選ばれる理由 kintone（キントーン）は、業務アプリがつくれるサイボウズのノーコードツール。専門的なスキルや知識がなくても、業務をよく知っている自分たちで、自社の業務にぴったりフィットした業務アプリをつくれます。
〇〇〇〇〇〇〇〇今までやりたかったことが、ようやく実現します。英字のあしらいがある場合 Why choose kintone of No code? ノーコードの “Warm Smart”を表現しているイメージボードの一例です。 ” kintone Style ” 03 ノーコードのノーコードのキントーンがキントーンが選ばれる理由選ばれる理由 kintone（キントーン）は、 kintone（キントーン）は、業務アプリがつくれるサイボウズのノーコードツール。業務アプリがつくれるサイボウズのノーコードツール。専門的なスキルや知識がなくても、専門的なスキルや知識がなくても、業務をよく知っている自分たちで、業務をよく知っている自分たちで、自社の業務にぴったりフィットした業務アプリをつくれます。自社の業務にぴったりフィットした業務アプリをつくれます。〇〇〇〇〇〇〇〇〇〇〇〇今までやりたかったことが、ようやく実現します。別のイラストを使用する場合 Copyright © Cybozu, Inc. 〇〇〇〇今までやりたかったことが、ようやく実現します。キャラクターを使用する場合 19

kintone Style 展開例表現のバリエーション例 “Warm Smart”を表現しているイメージボードの一例です。 ” ” ” 03
ノーコードのノーコードのノーコードのキントーンがキントーンがキントーンが選ばれる理由選ばれる理由選ばれる理由 kintone（キントーン）は、 kintone（キントーン）は、 kintone（キントーン）は、業務アプリがつくれるサイボウズのノーコードツール。業務アプリがつくれるサイボウズのノーコードツール。業務アプリがつくれるサイボウズのノーコードツール。専門的なスキルや知識がなくても、専門的なスキルや知識がなくても、専門的なスキルや知識がなくても、業務をよく知っている自分たちで、業務をよく知っている自分たちで、業務をよく知っている自分たちで、自社の業務にぴったりフィットした業務アプリをつくれます。自社の業務にぴったりフィットした業務アプリをつくれます。自社の業務にぴったりフィットした業務アプリをつくれます。〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇今までやりたかったことが、今までやりたかったことが、ようやく実現します。ようやく実現します。製品画面を使用する場合製品アイコンをランダムに配置する場合 Copyright © Cybozu, Inc. 今までやりたかったことが、ようやく実現します。製品アイコンを整列配置する場合 20

04 kintone Look kintone Lookとは？ kintone Lookとは？ “ kintone Lookとは、キントーンの核である「Mind」と、
そこからにじみ出る「Style」を、具体的なデザイン要素として定義し、視覚的に体系化するものです。 Lookは、カラー、フォント、写真といった複数の要素で構成されます。それら一つ一つが、キントーンらしさを視覚的に伝え、見る人に一貫した印象を与えることで、キントーンの世界観を確固たるものにします。 Copyright © Cybozu, Inc. 22

04 kintone Look カラーコアカラー kintone Yellow CMYK 0 /
20 / 100 / 0 コアカラーとして、右記の「kintone Yellow」を定めました。 RGB 255 / 191 / 0 この色は、キントーンの視覚的な一貫性を担保し、 HEX FFBF00 「Warm Smart」という振る舞いを明確に伝えるための基軸となります。   「kintone Yellow」が持つ「ぬくもり」や「親しみやすさ」基本のカラーパレットは、常にチームやお客様に寄り添い、その前進を力強くサポートするキントーンの「Warm」な心を象徴しています。 CMYK 0 / 55 / 95 / 0 RGB 255 / 143 / 0 HEX FF8F00 CMYK 5 / 25 / 85 / 0 RGB 255 / 203 / 49 HEX FFCB31 CMYK 5 / 7 / 77 / 0 RGB 255 / 232 / 79 HEX FFE84F CMYK 5 / 3 / 35 / 0 RGB 255 / 248 / 181 HEX FFF8B5 CMYK 5 / 15 / 80 / 0 RGB 255 / 219 / 79 HEX FFDB4F また、「ひらめき」や「明快さ」も想起させ、課題の本質を見抜き、解決策を素早く見出す「Smart」なアプローチを視覚的に表現します。 Copyright © Cybozu, Inc. 23

04 kintone Look カラーサポートカラー CMYK 0 / 90 /
65 / 0 RGB 255 / 73 / 73 HEX FF4949 CMYK 72 / 0 / 60 / 0 RGB 9 / 205 / 150 HEX 09CD96 CMYK 87 / 72 / 0 / 0 RGB 49 / 57 / 232 HEX 3139E8 CMYK 15 / 85 / 0 / 0 RGB 226 / 58 / 154 HEX E23A9A CMYK 50 / 0 / 85 / 0 RGB 149 / 213 / 66 HEX 95D542 CMYK 65 / 0 / 25 / 0 RGB 38 / 209 / 219 HEX 26D1DB CMYK 0 / 0 / 0 / 68 RGB 119 / 119 / 119 HEX 777777 CMYK 25 / 15 / 13 / 0 RGB 197 / 207 / 214 HEX C5CFD6 サポートカラーは、色相環全体から幅広い色を取り入れています。これは、多様な個性や価値観を持つ一人ひとりを尊重し、寄り添いたいという、キントーンの「Warm」な心を体現しています。 Color Circle インフォグラフィック、イラスト、グラフなどは、複数の色を組み合わせてわかりやすく表現してください。その際、コアカラーとサポートカラー、およびそれらの濃淡を活用することで、全体のトーン＆マナーを揃え、コミュニケーションに統一感を持たせることができます。 Copyright © Cybozu, Inc. 24

04 kintone Look カラーカラー使用例・NG例ノーコードのキントーンが選ばれる理由ノーコードのキントーンが
選ばれる理由コアカラーの面積を広めにし、明度・彩度が高いビビッドな色をイラストのアクセントとして組み合わせることで、イエローの明るい印象をより際立たせる配色になります。ノーコードのキントーンが選ばれる理由コアカラーの面積が極端に少なくなったり、サポートカラーが主役に見えるような配色は避けてください。コアカラーを中心とした配色を心がけてください。 Copyright © Cybozu, Inc. コアカラーの明度・彩度を調整した色を使用する場合、全体が極端に暗く沈んだ印象にならないよう注意してください。キントーンのイメージを損なわないようにしてください。 25

04 kintone Look カラーシリーズ展開時のカラー使用特例基本は前ページの「使用例」に準じます。ただし、正しく適用されたデザインを基点としたシリーズ展開については、許容範囲としています。 Copyright © Cybozu, Inc.
26

04 kintone Look カラーアクセシビリティ黄色は光の三原色の中で最も明度が高く、要素同士のコントラスト比が低くなる傾向があります。視覚に困難のある方にとって判別しにくくなる可能性がありますので、アクセシビリティの観点から十分な注意が必要です。 text
text text text コントラストについては、WCAG2.2の達成基準1.4.3に準拠するようにしてください。コアカラーを使用する際は、背景色と文字色のコントラストに留意してください。 Copyright © Cybozu, Inc. 27

04 kintone Look フォントフォントフォントは、デザイン上の世界観に統一感を持たせるために重要な役割を果たします。キントーンでは、この考えに基づき、下記のゴシック体を推奨フォントとして採用しました。  ゴシック体が持つ安定感は、キントーンの「Warm」な心がもたらす、安心感や信頼感を感じさせます。 
さらに、その優れた視認性と可読性は、誰にでも分かりやすノーコードのキントーンが選ばれる理由 Noto Sans JP（ウェイト中〜太）ノーコードのキントーンが選ばれる理由 Mplus 1p Bold く伝える「Smart」なコミュニケーションを体現します。和文：Noto Sans JP 視認性・可読性に優れたシンプルでモダンなゴシック体。和文：Mplus 1p かな文字は丸みを帯びており、親しみやすさやかわいらしさ、温かみを感じさせるゴシック体。英文：Roboto 直線的な形と柔らかいカーブを組み合わせた、可読性の優れたゴシック体。 Why choose kintone of No code? R Re la oboto gu r Why ch oose kintone of No code? R B ld oboto o Copyright © Cybozu, Inc. 28

04 kintone Look フォント文字の強弱フォントの種類 ” ” ノーコードのキントーンが
選ばれる理由ノーコードのキントーンが選ばれる理由 kintone（キントーン）は、業務アプリがつくれるサイボウズのノーコードツール。専門的なスキルや知識がなくても、業務をよく知っている自分たちで、自社の業務にぴったりフィットした業務アプリをつくれます。 kintone（キントーン）は、業務アプリがつくれるサイボウズのノーコードツール。専門的なスキルや知識がなくても、業務をよく知っている自分たちで、自社の業務にぴったりフィットした業務アプリをつくれます。〇〇〇〇〇〇〇〇タイトルや大見出しと本文のジャンプ率は高めに設定し、メリハリがあり、前向きで明快な印象になるようにしてください。タイトルや大見出しは本文よりも大きく設定してください。サイズが近すぎると情報の優先順位が曖昧になり、伝わりにくくなるため避けてください。〇〇〇〇今までやりたかったことが、ようやく実現します。広告など、媒体や目的によってはブランドフォント以外の使用も可能です。その場合は、ビジュアル要素の印象に合ったフォントを選んでください。 Copyright © Cybozu, Inc. 〇〇〇〇今までやりたかったことが、ようやく実現します。全体の印象と比べて、過度に洗練された印象を与えたり、線が細すぎたりするなど、バランスを崩すようなフォントは使用しないでください。 29

04 kintone Look 写真親しみ堅実写真写真で伝えたいことは、チームに寄り添うキントーンの「Warm」な心と、「Smart」なアプローチが人や環境にもたらす成果です。以下の観点から、写真を選択することを推奨します。
堅実チームワーク堅実信頼感・誠実自然な構図とライティングで業務の様子を丁寧に表すことによって、見る人に信頼感や誠実さを感じさせ、「Smart」な提供価値を印象付けたい時に適しています。親しみ安心感・共感やわらかな表情や自然なコミュニケーションの様子で、見る人にな安心感や共感を与え、チームワーク「Warm」なチーム環境や人間関係を連想させたい時に適しています。チームワーク一体感複数の人物の自然なやりとりを通じて連携や一体感を視覚的に伝えることで、「Smart」な成果や「Warm」な連帯感を表現したい場合に適しています。 ※イメージはサンプルになります。 ※いずれの場合も、落ち着いた色味と自然な表情の写真を選定し、作為的な演出や過度な加工は避けてください。 Copyright © Cybozu, Inc. 30

04 kintone Look 写真雰囲気その人らしさが伝わる自然なポーズや表情の写真を使用してください。自然光を活用するなど、全体としてニュートラルで落ち着いた印象になるよう配慮してください。
シーン業務やコミュニケーションの中で生まれる自然な笑顔をとらえた、適度にフォーカス感のある画像を選んでください。照明やコントラストが強すぎる画像は使用しないでください。自然で落ち着いた印象を重視してください。 Copyright © Cybozu, Inc. 表情がはっきり見えない画像を使用する場合は、自然で親しみやすい雰囲気を重視してください。 31

04 kintone Look イラストレーションレションイラストーは、シンプルな線と形で構成することで、  複雑な情報を簡潔に伝達する「Smart」な明快さと、特定の感性に偏らず誰もが
受け入れやすい「Warm」な親しみやすさを感じさせます。  「kintone yellow」と調和するビビットな色や、適度に躍動感のあるポーズを用いることで、キントーンによって育まれるチームワークの楽しさや、ポジティブなモチベーションを表現しています。  また、キントーンによって生まれるコミュニケーションやイノベーション・ひらめきをイラストのアイコンで表現します。イラストイラストで使用しているカラーレッド  #FF4949 ピンク  #E23A9A グリーン  #95D542 エメラルドグリーン  #09CD96 ターコイズブルー  #26D1DB ブルー  #3139E8 イエロー #FFEA63 ブラウン  #B28B67 ベージュ  #F0BBB3 ブルーグレー  #C5CFD6 ブラック  #333333 Copyright © Cybozu, Inc. 32

04 kintone Look イラストレーションキャラクターの使用についてキントーンのキャラクター「キントン」と「コキントン」は、初心者に対してわかりやすく、親しみやすく伝達するガイド役として誕生しました。キントーン導入初期のユーザーや、これから関心を持ってもらいたい層に向けたコンテンツに適しています。使用する際は、場面に合わせて適切に
使い分けてください。キャラクターがはっきりと分かる背景色の使用を推奨します。 Copyright © Cybozu, Inc. 同じような濃度の黄色の上に配置しないでください。 34

04 kintone Look kintone サークル kintone サークル大小それぞれの円は、キントーンによって育まれていくチームワークの輪。その輪が重なったり、広がったりしていく様子を表現しています。キントーンのロゴにある、筋斗雲を模したアイコンもまた、
大小の円の重なりでできていることから、円はキントーンの世界観を表現するもっともコアなモチーフとなります。 Copyright © Cybozu, Inc. 35

04 kintone Look デザインパーツデザインパーツ Logo UI image Photography Pattern
Illustration Product Icon 〇〇〇〇〇〇〇〇 Font ” ノーコードのキントーンが選ばれる理由 kintone（キントーン）は、業務アプリがつくれるサイボウズのノーコードツール。専門的なスキルや知識がなくても、業務をよく知っている自分たちで、自社の業務にぴったりフィットした業務アプリをつくれます。今までやりたかったことが、ようやく実現します。 Copyright © Cybozu, Inc. 36

05 Voice & Tone ボイス&トーンボイ &トンス
ー言葉遣い親しみやすくオープンな語り口で、さまざまな人をフォーマルチームの一員として歓迎する気持ちを表現します。カジュアル文体楽しい長く説明的シリアス短く簡潔誰にでも理解しやすい言葉・簡潔な構成で、専門用語の頻度本質を的確に伝え、信頼感を醸成します。カジュアルフォーマル多い難解な専門用語は避け、やむを得ず使う際も丁寧平易な表現を心がけます。少ない姿勢製品ユーザーファースト熱狂的希望や可能性を感じる明るい言葉で、チームの前進をポジティブに後押しします。ネガする方うな一主張的なファースト事実に基づく情報抽象的強要よティブな言葉、リラックス具体的は避けます。 Copyright © Cybozu, Inc. 38

05 Voice & Tone ボイス&トーン使用例・NG例カスタム業務アプリケーションの迅速な開発基盤自分たちで業務アプリがつくれる本製品は、ノンプログラマブル・インターフェースを採用した
キントーンは、プログラミングの知識がなくても、クラウドネイティブな業務アプリケーション開発プラットノーコードで業務のシステム化や効率化を実現するフォームであり、ローコード/ノーコードによるアジャイルなアプリがつくれるクラウドサービスです。開発アプローチを通じて、既存業務プロセスのDX推進に貢献します。端的な見出しで、情報をひと目で伝達。本文内でも難しい言葉は使わずに、わかりやすく伝えることを徹底します。ユーザーの課題解決をスマートに支援しつつ、その過程であたたかく寄り添い、安心感と自信を与えるコミュニケーションです。専門用語が多く、限られた人しか理解できない文章。寄り添う姿勢が欠けており、ユーザーに「難しそう」「自分には関係なさそう」といった印象を与え、心地よさや安心感、ポジティブなモチベーションは生み出しません。 Copyright © Cybozu, Inc. 39

Update 更新履歴 2026.09.00 【ver.1.0.3】存在意義更新、プロダクトの価値などを追加 2026.02.20 【ver.1.0.2】カラーパレット更新、シリーズ展開時のカラー使用特例追加、英語版リリース 2025.11.12 【ver.1.0.1】
kintone Style図の更新  2025.10.08 【ver.1.0.0】テキスト、イラスト、写真などを更新、カラーパレットを追加  2025.06.12 【ver.0.9.0】初版リリース Copyright © Cybozu, Inc. 40

kintone Style Book

kintone Style Book

More Decks by kintone

Other Decks in Design

Featured

Transcript