docata.jp のデザインを制作ノートに引き継いだ - 色と文字は EmDash のテーマ変数だけで

EmDash にデザインを引き継いだ記録

2026年10月11日、制作ノート（notes.docata.jp）の見た目を、コーポレートサイト［docata.jp］に寄せました。

docata.jp は、墨色を土台に、オレンジとスカイブルーを［ところどころ］に使うデザインで固まってきました。一方、制作ノートは、EmDash の標準のブログテンプレートが、ほぼそのままでした。同じ事業のサイトなのに、行き来すると別の会社のサイトにみえてしまいます。

この記事では、どう進めたか、何を変えたか、つまずいたところはどこかをまとめます。

先に結論です

• 色・フォント・文字組みは、テーマ用のファイル1つ（theme.css）の変数を上書きするだけで、docata.jp と揃えられました。
• ヘッダー・フッター・トップのヒーロー・ご相談の帯は、テンプレートのファイル（Base.astro と index.astro）を編集しました。
• 日本語のサイトでは、字間・行間・見出しの折り返しを直さないと、英語向けの初期値のままでは読みにくくなります。
• 一番大きなつまずきは、ダーク / ライトの切り替えボタンが、本番だけ効かないことでした。

docata.jp のデザインの決めごと

引き継ぐ前に、docata.jp 側の決めごとを書き出しました。

• 墨色（#231815）を文字色にします。ロゴと同じ色です。
• 差し色は オレンジ（#ff7300）と スカイブルー（#3fa9e0）の2色だけです。オレンジは［行動・注目］、スカイブルーは［構造・情報］に使います。
• 白い背景の上に文字として置くときは、コントラストが十分になる［濃いめの色］を使います。
• ダークモードは、黒ではなくネイビー（#030918）にします。
• 差し色は点・線・下線・ホバーなど、面積の小さいところに限ります。

この決めごとがあったので、［何を持ち込み、何を持ち込まないか。］を迷わずに決められました。持ち込まなかったものもあります。docata.jp のスクロールに合わせて現れる動きは、長い文章を読むサイトでは邪魔になるので、入れません。

EmDash のテーマの仕組み

EmDash のブログテンプレートは、色・文字・余白を 変数 で管理しています。初期値は tokens.css に、上書きは theme.css に書く決まりです。

• tokens.css：テンプレートの初期値。編集しません。
• theme.css：自分の値で上書きするためのファイル。最初は空です。

色は、ライトとダークの2つの値を1行で書く［light-dark( )］という書きかたになっています。たとえば、こう書き換えます。

:root {
  --color-bg: light-dark(#ffffff, #030918);
  --color-text: light-dark(#231815, #e8edf7);
  --color-brand: light-dark(#1a74a8, #6cc4f2);
  --color-brand-hover: light-dark(#b04800, #ff9a52);
}

テンプレートの説明によると、theme.css に書いた値は tokens.css より必ず優先されます。そのため、EmDash を更新しても上書きが消えない作りです。わたしは、この［触らない場所と触る場所が分かれている］ところが、安心して手を入れられる理由だと感じました。

変えたもの

theme.css だけで済んだもの

• 色：背景、文字、線、リンクを docata.jp と同じ値にしました。リンクはスカイブルー系の濃い色にして、ホバーのときだけオレンジにします。ダークはネイビーです。
• フォント：初期値の Inter は、日本語の文字を持っていません。そこで docata.jp と同じ、Verdana と BIZ UDPGothic の組み合わせにしました。Inter の読み込みを外せたので、外部から読み込むフォントも減りました。
• 文字組み：本文の行間を1.9、字間を少し広げました。見出しの字間は、初期値の［詰める］設定をやめました。
• 記事タイトルの大きさ：56px から 44px に下げました。日本語の太字は、同じ大きさの英語より大きく見えるためです。
• 左右の余白：docata.jp と同じ［画面幅に応じて 16px から 40px］の値を、変数にしました。

テンプレートのファイルを編集したもの

• ヘッダー：docata.jp と同じ横組みのロゴに、［notes.docata.jp］の文字を添えました。メニューの文字の大きさと字間、背景のぼかし、ご相談ボタン、ダーク／ライトのトグル（ダークは黄色い月）まで、docata.jp とそろえました。ヘッダーの下の線は、少しスクロールしたときに現れます。
• スクロールの進み具合：ヘッダーの最上部に、細いバーを足しました。読み進めた量に合わせて、スカイブルーからオレンジへ伸びていきます。長い記事のサイトなので、いちばん効くと考えた部分です。
• フッター：左にメニュー、中央に縦組みのロゴ、右に［About］を置く、3列の作りにしました。いちばん下に、［© 2026 docata.jp / Powered by EmDash］を中央寄せで置いています。管理画面にログインしているときだけ、末尾に［Admin］のリンクが出ます。
• ご相談の帯：フッターの上に、墨色（ダークはネイビー）の帯を置きました。大きな見出しとオレンジのボタンで、docata.jp のお問い合わせフォームへ誘導します。
• トップのヒーロー：方眼、大きな見出し、縦書き、［SCROLL］のリンクを、docata.jp のトップと同じ作りで置きました。
• トップの注目記事：画像を画面の左端まで飛び出させる古い配置をやめて、コンテナの中に収まるカードにしました。ヒーロー、注目記事、最新記事の背景は、地の色と、一段ずれた色が交互に切り替わります。
• このサイトについて：固定ページを1つ作り、メニューの［このサイトについて］から開けるようにしました。

つまずいたところと直しかた

ダーク／ライトのトグルが本番だけ効かなかった

ローカルでは動いていたトグルが、本番では押しても色が変わりません。調べると、ビルドのときに、色の書きかた［light-dark( )］が、OS の設定だけで切り替わる形に変換されていました。ボタンでクラスを付けかえても、色は変わりません。

変換後の色が使っている変数を、クラスに合わせて直接切り替えて直しました。

:root.light { --lightningcss-light: initial; --lightningcss-dark: ; }
:root.dark  { --lightningcss-light: ;        --lightningcss-dark: initial; }

これは EmDash のテンプレートの時点からあった不具合で、わたしは、ビルドしたものを動かして、はじめて気づきました。開発用のサーバーでは変換されないので、ローカルでは動いて見えていたのです。

見出しが語の途中で折り返された

記事タイトルが［記事を書いてみた］の途中で改行されて、読みにくくなりました。見出しに次の2つを指定して直しました。

h1, h2, h3 {
  text-wrap: balance;
  word-break: auto-phrase;
}

［auto-phrase］は、日本語を文節のまとまりで折り返す指定です。ただし、Chrome 系のブラウザでしか効きません。ほかのブラウザでは、通常の折り返しになります。

ダークでボタンの文字が読みにくくなる

ダークでは、ボタンなどの背景に使うリンク色が明るい色になります。その上に初期値の［白］を載せると、読みにくくなります。そこで、ダークのときだけ文字色を墨色にしました。

墨色のロゴがダークで背景に溶けた

ロゴは墨色なので、ネイビーの背景では見えなくなります。ダークのときだけ、ロゴの色を反転させて、明るく見えるようにしました。

ヘッダーのメニューの幅がページによってずれた

これは docata.jp 側で見つけたことですが、制作ノートにも同じ対策を入れました。本文のウェブフォントは、表示を止めないよう［間に合ったときだけ］使う設定にしています。ヘッダーまでそうすると、ページによって文字の幅が変わり、メニューがずれて見えます。ヘッダーだけは、システムフォントに固定しました。

検索欄が窮屈で最後は外した

ヘッダーの検索欄は、画面の幅が狭くなると、ロゴやメニューと重なりました。幅に応じて縮めたり、隠したりしてみましたが、結局［窮屈］なままだったので、ヘッダーからは外しました。検索は、フッターのリンクと、記事ページの右の欄から使えます。

左右の余白とブレイクポイントが揃っていなかった

docata.jp と見比べたところ、左右の余白がページごとにばらばらでした。ブレイクポイントも、docata.jp にない値が混ざっていました。そこで、余白を1つの変数にそろえ、ブレイクポイントを 1024px・767px・600px に整理しました。1023px 以下では、ヘッダーのメニューを隠して、ロゴ・ご相談・トグルの1行にしています。

アイキャッチが左右を切って表示された

注目記事のカードで、横長のアイキャッチ（1200×630）の左右が切れていました。カードの高さが文章に合わせて伸びて、画像がそれについて切り取られていたためです。画像は元の比率のまま高さを決めて、文章を縦中央に置く形に直しました。

確かめたこと

• 型チェックはエラー0件でした。
• ライトとダーク、パソコンとスマホ（375px）で表示を見ました。横にはみ出すこともありませんでした。
• ビルドしたものを動かして、トグルでライトとダークが切り替わることを確かめました。
• ヘッダーの文字の大きさと字間、左右の余白の実測値が、docata.jp と一致することを確かめました。
• 本番にデプロイしたあとも、ホーム・記事・固定ページ・検索・RSS・管理画面のログインが表示されることを確かめました。

注意したいところ

• コントラストの数値は、この記事では測っていません。docata.jp で決めた［文字用の濃い色］をそのまま使っています。気になるかたは、ご自分のサイトで測ってください。
• 見た目の確認は、ヘッドレスの Chrome とアプリ内のブラウザだけです。ほかのブラウザや実機では、確かめていません。
• ヘッダー・フッター・ヒーローなど、テンプレートのファイル（Base.astro と index.astro）を編集した部分は、将来テンプレートが更新されたときに、取り込みの手間が出る可能性があります。見た目は、できるだけ theme.css に寄せるのがおすすめです。
• トグルの補正は、ビルドの道具が内部で使う変数の名前に頼っています。道具が更新されたときは、トグルが効くかを、もう一度確かめてください。
• フッターの［About］は、以前は管理画面で編集できる部品でしたが、いまはサイト設定のキャッチをそのまま表示しています。

中小企業ではどう役立つか

会社のホームページとブログの見た目がそろっていると、どちらを見ても［同じ会社だ］と伝わります。名刺や看板の色と同じで、信頼感にもつながります。

色やフォントを変数でまとめておけば、のちにブランドの色を変えるときも、数行の修正で済みます。

ドカタ.jp では、EmDash を使ったサイト制作や、WordPress からの乗り換え、いまのサイトのデザインの整理のご相談もお受けしています。お気軽にお問い合わせください。

この記事は、作業の記録をもとに Claude Code が EmDash の MCP サーバー経由で下書きを作成し、筆者が確認・編集して公開します。