採用情報
MENU

私たちよーじやが目指すのは、
暮らす人も、創る人も、働く人も、訪れる人も、
すべての人が喜びを感じられる京都です。

みんなが喜ぶ京都にする
COLORS
01 / Colors

黒を使わない。温かい茶とベージュとサンゴ

Sumi Brown
#5f5046
本文・見出し・ナビ・ボタン文字すべて。CSS 186 回でサイト最多
Yojiya Coral
#dc878c
アクセント。英字ラベル・ずらし影。CSS 48 回
Kyo Beige
#ebe6dc
面色。採用情報ボタン・フッター CTA・セクションの地。CSS 29 回
Sakura Pink
#e1b9b4
大きな面。フッターの CTA カード・代表あいさつブロック。CSS 10 回
Beni Red
#af2e29
ハンバーガーアイコンの 9×9px × 2 のみ。面にも文字にも使わない
Border
#beb9af
アウトラインボタン・チップの枠
Sub Text
#8a7c70
ニュース一覧の日付
Base
#ffffff
ページ背景（html/body ともに塗り指定なし ＝ UA 既定キャンバス）
customProperties を色の出典にしないこと
WordPress のブロックエディタが --wp--preset--color--* を 11 色、グラデーションを 12 種類注入しているが、1 つも画面に出てこない。--wp-admin-theme-color: #007cba は管理画面の色。
TYPE
02 / Typography — 実測値

和文と欧文で書体を分ける

実サイトは Adobe Fonts の dnp-shuei-gothic-gin-std（DNP 秀英角ゴシック銀）＋ proxima-nova。ドメインライセンスのためローカルでは表示できないので、この preview では Zen Kaku Gothic New と Montserrat を代替に使っている。

Hero Copy（縦）
44px / 500 / lh 1.1
ls 0.074em
みんなが喜ぶ京都にする
Statement H2
40px / 700 / lh 1.4
ls 0.1em
みんなが喜ぶ京都にする
Statement H2（英）
Montserrat 36px / 700
lh 1.4 / ls 0.06em
VISION / MISSION
MVV Text
38px / 700 / lh 1.5
ls 0.16em（サイト最大）
京都にする
Page H2
34px / 700 / lh 1.4
ls 0.06em
代表あいさつ
H3
24px / 700 / lh 1.0
ls 0.04em
京都府
Body
16px / 400 / lh 2.0
ls 0.06em
「よーじや」という名前は創業当初の明治時代、歯を清潔に保つための房楊枝を扱っていたことに由来します。楊枝屋がいつしか「よーじや」と呼ばれるようになりました。
Body（長文）
16px / 400 / lh 2.25
ls 0.06em
会社案内の沿革や説明文では行間をさらに広げ、2.25 に設定しています。行間と字間はセットで使うもので、どちらか片方だけでは間延びしただけに見えてしまいます。
Body（強）
16px / 700 / lh 2.0
ls 0.04em
京都 祇園店
Nav
16px / 700 / lh 1.56
ls 0.0625em
トップページ
Nav（サブ）
14px / 300 / lh 2.0
ls 0.06em
ステートメント
Footer CTA（英）
Montserrat 45px / 300
lh 1.1 / ls 0.067em
OUR SHOP
Footer CTA（和）
17px / 500 / lh 1.4
ls 0.118em
店舗一覧
Label（英・小）
Montserrat 14px / 700
lh 1.0 / ls 0.14em
MESSAGE
Date
Montserrat 13px / 500
ls 0.1em / #8a7c70
2026.08.26
Copyright
Montserrat 11px / 400
lh 1.4
COPYRIGHT(C). All rights reserved.

難読漢字だけ font-family を差し替える：店舗一覧の「祇園」は font-family: "Hiragino Sans", "Yu Gothic", sans-serif に切り替えて、示す偏の字形を出している。font-feature-settings の宣言は 0 個で、palt は使わない（字間は letter-spacing: 0.06em に吸収させる）。

NEWS
03 / Article — 組版サンプル

縦組みのラベルと、横組みの一覧

2026.08.26
店舗情報
よーじやカフェ 三条店 リニューアルオープンのお知らせ
2026.08.12
商品情報
あぶらとり紙 限定パッケージ「夏の京」を発売します
2026.07.30
店舗情報
夏季の営業時間について
お知らせ一覧

創業からの百二十年

明治三十七年、京都に生まれた小さな楊枝屋が「よーじや」の始まりです。あぶらとり紙は、もともと金箔を打つ工程で使われていた和紙から生まれました。

本文は line-height: 2.0 と letter-spacing: 0.06em をセットで使います。長文セクションでは行間を 2.25 まで広げ、読み進める速度をゆるめています。

回遊カード — 4 枚それぞれ border-radius: 50px の当たる角が違う。見出しは縦書き。

事業紹介BUSINESS 会社案内COMPANY よーじやの歴史HISTORY 京都のための取り組みFOR KYOTO
BUTTON
04 / Buttons

すべてピル。ただし半径はそろえない

お知らせ一覧 採用情報
一般のお客さま 企業さま よーじや 10 そば 店舗情報
ずらした影（0 8px 0 #5f5046）

要素の高さに合わせて 20px → 30px → 60px → 999px を選ぶ。すべて 9999px に統一しない。半径のばらつきが設計の一部。

CARD
05 / Cards

角丸を 1 枚ずつずらす

あぶらとり紙
金箔打ちの和紙から生まれた、京都みやげの定番。
よーじやカフェ
町家を生かした空間で、抹茶と甘味を。
よーじやの化粧品
肌にやさしい素材でつくる基礎化粧品。
OUR SHOP
FORM
06 / Forms

入力欄もピル

デフォルト状態
フォーカス状態（実サイトは box-shadow: 0 0 0 2pt #185abc）
電話番号を正しく入力してください

フォーカスリングだけブランド外の青（#185abc）を使っているのが実装の実態。

DEPTH
07 / Elevation

影はぼかさない

Level 0 — 既定box-shadow: none;
Level 1 — ずらし（サンゴ）12px 12px 0 0 #dc878c
Level 2 — ずらし（茶）0 8px 0 #5f5046
Level 3 — ぼかし0 0 4px 1px rgba(0,0,0,.08)

rgba(0,0,0,.2) のような一般的なドロップシャドウを足さないこと。ブランドの色面をずらして重ねるのがこのサイトの奥行き表現。

LAYOUT
08 / Layout

コンテンツ幅 1000px

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

Radius Scale

値CSS 出現用途
50%32 回アイコン・矢印の丸
30px10 回チップ・1 行入力
999px8 回一覧ボタン
20px6 回小ボタン・テキストエリア
60px4 回採用情報ボタン
0 50px 0 50px ほか20 回超非対称。カードごとに当たる角をずらす

Breakpoints（PC ファースト）

NameWidth宣言回数
Mobile≤ 767px70（主分岐。縦書きを横書きへ）
Small Desktop≤ 1100px16
Tablet≤ 1000px7
Mobile S≤ 480px3