ONLINE
SHOP
お問い合わせ

「こころ」のある「色」を通じて

教育・文化・環境に貢献します。

01 / Colors

白地に赤 1 色 + 画材の色

Sakura Red
#ff0302
NEW バッジ・カテゴリ見出し・行頭の丸ポチ。CSS 18 回
Deep Red
#cb0201
主 CTA の面色。CSS 9 回
Band Red
#d90000
全幅の赤い帯
Chip Surface
#ffe4e4
ニュースのカテゴリチップ。トップのユニーク背景色 1 位(57 回)
Outline
#ff8080
アウトラインボタンの枠。黒やグレーの枠は使わない
Ink
#000000
body の既定色。このサイトは純黒を使う
Ink 3
#54544c
商品名・記事タイトル。わずかに緑を含む墨色。CSS 11 回
Crimson
#9a0816
メガメニュー内のリンク文字。CSS 4 回
⚠️ 赤が 5 種類混在している
主因は CSS キーワード red を 82 箇所(うち background-color:red 10 回)使っていること。新規実装では #ff0302(ブランド/バッジ)と #cb0201(押せる面)の 2 色に整理する。
色出所使われている場所
#ff0302CSS 18 回NEW バッジ(56px の正円)・カテゴリ見出し
#cb0201CSS 9 回主 CTA(radius 8px + 影)
#fe0000CSS 10 回タブの選択状態「ALL」
red (#ff0000)キーワード 82 回ヘッダーの「お問い合わせ」・ONLINE SHOP の枠
#d90000CSS 1 回全幅の赤い帯

画材の色(カテゴリ・タグ・メガメニュー)

観る 体験 知る
#補充できる #手帳向け #イラスト #水彩 #幼児
教職員の皆さま#feffb2
企業情報#366d91
採用情報#7dd78f

分類のための色であって、押せることを示す色ではない。UI の骨格(ボタン・見出し)には赤しか使わない。

Web フォントを読み込まず、OS のフォントに任せる

Section Title
32px / 700 / lh 1.5
ls 0.05em
おすすめ商品
Section Title(英)
32px / 700 / lh 1.5
ls 0.15em
SAKURA PRESS
Hero Title
32px / 700 / lh 1.3
ls 0.1em
「こころ」のある「色」
Page Title
26px / 700 / lh 1.3
ls 0.1em
ピックアップ商品
Mega Menu Title
26px / 700 / lh 1.5
教職員の皆さま
Category Title
20px / 700 / lh 1.0
#ff0302 + 丸アイコン
カテゴリから探す
CTA / Badge
18px / 700
もっと見る
H3
18px / 700 / lh 1.5
#333333
幼稚園・保育園の先生方へ
H3(商品名)
16px / 700 / lh 1.5
#54544c
SAKURA craft_lab 010
Body
16px / 400 / lh 1.5
ls normal
クレパスは 1925 年、クレヨンとパステルの長所をあわせ持つ描画材として生まれました。伸びのよさと重ね塗りのしやすさを両立し、子どもから画家まで使われています。
Body(記事本文)
16px / 400 / lh 1.8125
行長の長い記事本文では、実サイトも行間を 1.8125 まで上げています。日本語本文の 1.5 は下限に近いので、読ませるブロックでは広げてください。
Nav / Link
16px / 700 / lh 1.5
商品を探す
Tag
14px / 400
#補充できる
Chip
12px / 700
お知らせ

⚠️ Windows の游ゴシック問題:"Yu Gothic Medium" は font-weight: 700 で合成太字になる環境がある。このサイトは見出しの多くが 700 なので、Windows では想定より太く潰れて見える可能性がある。
⚠️ palt は CSS に 106 箇所あるが効いていない。宣言先はすべて採用・スタッフ紹介系のコンポーネントで、トップ・商品ページの computed は全要素 normal。

03 / Product — 組版サンプル

NEW バッジは 56px の正円

NEW
ボールサイン プリズム
NEW
インタリオシャープ05 限定セット
SAKURA craft_lab 010
クーピーペンシル 12 色

SAKURA PRESS

もっと見る

クレパスという発明

クレヨンは硬く、パステルは粉が落ちる。その両方を解決するために、1925 年にクレパスは生まれました。以来 100 年、日本の図画工作の時間はこの描画材とともにあります。

本文の行間は 1.5、字間は normal。字間を入れるのは見出しだけで、和文見出しは 0.05em、英字見出しは 0.15em まで開けます。

押せる面は浮かせる

タブ — 選択状態だけ面を塗る(radius 20px)

主 CTA は #cb0201 / radius 8px / box-shadow: 0 5px 10px 0 rgba(0,0,0,.1)。アウトラインの枠は淡い赤 #ff8080。ハッシュタグだけ角丸を持たない(radius 0)。

05 / Cards

カードの影は 0 10px 10px -6px

2026.08.06
紙粘土「きまるねんど」で手作りクイズ
2024.07.04
子どもの絵の発達について
2026.03.23
ピグマで描く、月間ダイアリーひとマス絵日記

0 10px 10px -6px rgba(0,0,0,.25) は CSS 出現 96 回でサイト最多。カードの角丸は 8〜16px。

入力欄の角丸は 8px

デフォルト状態
フォーカス状態(outline 2px solid #ff0302)
電話番号を正しく入力してください
07 / Elevation

影で階層を作る

Level 0 — フラットbox-shadow: none;
Level 1 — ボタン(72 回)0 5px 10px 0 rgba(0,0,0,.1)
Level 2 — カード(96 回)0 10px 10px -6px rgba(0,0,0,.25)
Level 3 — ヘッダー(18 回)0 2px 15px 0 rgba(0,0,0,.1)
Level 4 — モーダル(20 回)0 5px 10px 3px rgba(0,0,0,.3)

SAKURA CRAFT_LAB

全幅の赤い帯(#d90000)で場面を切り替える

08 / Layout

コンテンツ幅 1152px

max-width: 1152px
1 / 4
2 / 4
3 / 4
4 / 4

Radius Scale

値CSS 出現用途
8px85 回主 CTA・入力欄
16px64 回カード
10px59 回ヒーロー・スウォッチ
50%58 回NEW バッジ・行頭の丸ポチ
20px53 回チップ・タブ
30px / 9999px14 回アウトラインピル
08 回ハッシュタグ

Breakpoints(PC ファースト)

NameWidth宣言回数
Mobile≤ 767px1028(主分岐)
Tablet≥ 768px457
Desktop≤ 1279px193
Wide≥ 1600px6