タイプスケールで仕立てるブロックテーマ
shitate（したて）は、株式会社weblley が開発している WordPress のブロックテーマです。フルサイト編集を前提に設計し、2026年9月に WordPress 公式テーマディレクトリに掲載されました。もちろん無料で使えます。
この記事では、なぜこのテーマを作ったのか、何を解決したかったのか、そしてどこへ向かおうとしているのかを書いておきます。
shitate を開発した経緯
僕は大阪の制作会社で、コーポレートサイトや事業サイトを日常的に作っています。初めてWordPressを触った頃からで10年ほど、いろいろなテーマを使ってきましたが、案件が増えるほど、その管理の仕方や納品フローに課題を感じていました。
テーマには、あらかじめ文字サイズや余白が細かく決められています。それ自体は親切なのですが、クライアントの要望や自分たちの設計に合わせようとすると、CSS で一つずつ上書きすることになります。見出しの大きさを変えたら余白のバランスが崩れ、余白を直したらモバイルで詰まりすぎる。上書きが上書きを呼び、詳細度の勝負になり、最終的に「なんかチグハグなデザイン」が出来上がる。そんな経験を何度も繰り返しました。
WordPress のサイトエディターが実用的になってきたとき、ここで一度、発想を変えてみようと思いました。細かい値を先に決めるのではなく、「比率」だけを決めて、文字も余白もそこから導くテーマにする。昨今のディスプレイのサイズにも幅が出た現場で、文字や余白に値をつけるのではなく、比率を設定することでデザインのルールを仕立て、そこから先はコンテンツに集中できるようにする。それが shitate の出発点です。
shitate で解決したい課題
文字と余白が別々に決まっている
多くのテーマでは、文字サイズの段階と余白の段階は無関係に定義されています。だから見出しを大きくしたとき、その上の余白は手で合わせ直すことになります。
shitate では、タイプスケール（typescale.com のような等比の文字サイズ体系）を基準に、余白も同じ比率・同じ名前で定義しています。文字サイズが XS から XXXL の 8 段なら、余白も XS から XXXL の 8 段。どちらも本文サイズと比率から計算されるので、比率を変えれば文字と余白が一緒に動きます。見出しの上の余白は固定値ではなく、周囲の間隔に連動します。
比率は 8 種類から選べます。短2度（1.067）のような控えめなものから、黄金比（1.618）のような大胆なものまで。音楽の音程を中心になぞらえた名前にしたのは、僕自身も音楽を嗜む人間であるというのと「なんか新しいというかかっこいい」という一身上の都合です。
ブレイクポイントで余白を管理したくない
「PC では 80px、スマホでは 40px」と画面幅ごとに余白を書くやり方は、管理する数が倍になり、その中間の幅で破綻しがちです。
shitate の大きな余白は clamp() で流体化していて、画面が狭くなるとリズム全体が自然に締まります。テーマの CSS にはメディアクエリがありません。画面幅ではなく、比率と流体値で解決するという方針です。利用者の好みで動きを減らす設定（prefers-reduced-motion）だけは例外として尊重しています。
色を変えると、派生色の面倒が待っている
ブランド色を変えたとき、ホバー色、薄い背景色、罫線の色、控えめな文字色も一緒に変えたい。けれど普通はそれぞれ手で設定し直すことになります。
shitate のパレットは、源になる 4 色（背景、文字、ブランド色、アクセント）と、そこから導かれる 5 色（薄い背景、罫線、控えめな文字、ホバーなど）に分かれています。サイトエディターで源の色を変えると、派生色が自動で追従します。もちろん派生色を個別に決めたい場合は、その設定が優先されます。
CSS カスタムプロパティを設定の入り口にする
shitate のすべての値は、--st-* という名前の CSS カスタムプロパティに集約しています。比率、本文サイズ、文字と余白の各段、角丸、コンテンツ幅、色。テーマの中身はこれらを参照しているだけなので、変数をひとつ上書きすればサイト全体が変わります。
これは制作者向けの「API」のつもりで設計しました。テーマの都合に合わせて CSS を書くのではなく、変数という約束事を通じてテーマと会話する。上書きの連鎖や詳細度の勝負を、最初から起こさない構造にしています。
一方で、コードを書かない人のためにカスタマイザーも用意しています。比率と本文サイズを選ぶだけで、ライブプレビューを見ながらサイト全体の調子を変えられます。
shitate で目指すこと
制作会社が使うテーマと、引き渡し後にクライアント自身が運用するテーマは、往々にして別物になります。制作者には自由度が足りず、運用者には難しすぎる。
shitate が目指しているのは、その両方の手に馴染むテーマです。制作時には変数と比率で素早く土台を仕立て、引き渡し後はサイトエディターだけで安全に更新できる。そのために、機能は最小限に絞っています。Web フォントは同梱せず、独自ブロックも持たず、JavaScript はモバイルメニューのための小さなものだけ。余計なものがないから、アップデートに追われず、長く静かに運営できます。
シンプルなものを長く使うこと。それがこのテーマの一番の価値だと考えています。
どんなサイトに向いているか
shitate は、会社やお店、事務所の「本体のサイト」を想定して作っています。たとえば、小売店やメーカーの会社案内、建設・工務店の施工事例サイト、税理士や社労士といった士業の事務所サイト。制作会社が受託で作るサイトと、その引き渡し後にお客様自身が更新していくサイトの、どちらも同じテーマで通せることを目標にしています。
含まれているテンプレートは 7 種類（トップ、固定ページ、全幅の固定ページ、投稿、一覧、検索結果、404）です。この組み合わせで、たとえば次のようなページを組み立てられます。
- 会社概要・事務所概要（代表挨拶、沿革、アクセス）
- 事業内容・サービス紹介（全幅テンプレートで 1 ページずつ）
- 施工事例・実績・制作物の一覧と詳細
- スタッフ紹介、お客様の声
- お知らせ・ブログ・採用情報
- お問い合わせへの導線
同梱のパターンは 4 つ（全幅のヒーロー、画像カード 3 列、4 列グリッド、ボタン 2 つの CTA）。これを並べ替えるところから始めて、あとは比率と色を選べば全体の調子が決まります。配色はスタイルバリエーション 4 種（Dark / Cream / Mist / Mono）から選べます。
逆に、ショップの決済機能や会員機能、予約システムのように、それ自体が仕組みを必要とするサイトは、テーマではなく専用のプラグインの領分です。shitate はそこには踏み込まず、設計と土台に専念しています。
拡張プラグイン shitate pro blocks
テーマは設計に専念させ、表現のためのブロックは有料プラグイン shitate pro blocks に分けています。吹き出し、目次、アコーディオン、モーダル、条件分岐表示、レイアウト系のブロックなどを収録し、テーマの変数を参照して動くので、比率を変えればブロックの余白も一緒に整います。
テーマは GPL で無料、プラグインは更新とサポートを含めた有料販売という形にしています。テーマだけでも十分に使えますし、必要になったときに足せる構成です。
使ってみる
WordPress 管理画面の「外観 → テーマ → 新規追加」で shitate と検索すればインストールできます。使ってみて分かりにくいところや、こうなっていたら助かるという点があれば、ぜひ教えてください。制作の現場で生まれたテーマなので、現場の声で育てていきたいと思っています。