測り終えたので、次はどういう見た目にするかを決める段階です。デザイナーがいないので、LLM に相談しながら進めました。ここで最初にぶつかったのが、AI が出してくる案には決まった型があるという問題でした。
今回は Claude のデザイン用の指示書を使ったのですが、その中に「避けるべき定番」が名指しで書かれていました。読んで、思い当たりました。
| 型 | 特徴 |
|---|---|
| クリーム地 × セリフ見出し × テラコッタ | 背景が #F4F1EA 前後、明朝系の大見出し、差し色は赤茶 |
| 黒地 × 蛍光の差し色1色 | ほぼ黒の背景に、蛍光グリーンか朱色を1色だけ |
| 新聞レイアウト | 極細の罫線、角丸ゼロ、密度の高い多段組み |
どれも単体では良いデザインです。問題は、題材と関係なく出てくることです。データ基盤の会社でも、パン屋でも、同じ見た目の案が出る。指示書の言葉を借りれば「選択ではなく初期値」ということになります。
1つ目の型に、危うく落ちるところだった
とくに危なかったのが1つ目です。既存のブランド色が橙で、テラコッタに近い。ここにクリーム色の背景と明朝の見出しを合わせると、狙わずとも最頻出パターンに着地します。
しかも、そうすると「上質そう」に見えます。だから止める理由が見つけにくい。良く見えるからこそ、みんな同じ答えに行き着くわけです。
案を見て良さそうだと感じたとき、同じ条件で他社のサイトを作っても同じ案が出るかを考えてみてください。出るなら、それは自社のための選択ではありません。
題材から決める
指示書には「題材の世界にあるもの、素材や道具や言い回しから引く」とも書かれていました。型を避けるには、自分たちの題材から引っ張ってくるしかありません。の見直しは後の回に回し、まずは見た目の方向だけを決めます。そこでロゴマークを見直しました。丸い顔に、目が2つ、両脇に耳、頭に巻きひげ。「ふくふく」という名前どおり、丸くて膨らんだ形です。
ところがサイトの見出しは、角を立てて字間を詰めた造形でした。マークとタイポグラフィが真逆を向いていたわけです。ここを合わせる、という方針が最初の手がかりになりました。
書体もここから決めました。丸いマークに合う、懐の広い書体を選び、の段階（大きさと太さ）も揃えました。もう一つは、会社の実態です。28年現場にいた実装者が、詰まったところを書き残している。498記事はその蓄積です。だから「計器と手記」という方向にしました。よく整備された計器盤に、余白へ書き込みが入っているという体裁です。
決めた内容は、として1か所にまとめました。色に名前を付けて変数にしておけば、値を差し替えるだけでサイト全体が変わります。ここを唯一の出典にして、部品側には生の色コードを書かない、というルールにしました。
:root { /* 地。長文を読ませる面なので白のまま */ --background: #ffffff; --ink: #14161a; --muted: #4b5157;
/* ロゴマーク由来の橙。主アクセント */ --brand: #e8542b; /* 白地の小さい文字用（コントラスト 5.11:1） */ --brand-deep: #c04519;
/* ロゴにあったのに、サイトで一度も使われていなかった黄 */ --accent: #f6ad3c;
--line: #e3e5e8;}色を決めたら、を計算してから採用しました。見た目で判断すると、薄い色を選びがちになります。の目安では、本文は 4.5:1 以上、大きい文字や図形は 3:1 以上です。
def srgb(c: float) -> float: c = c / 255 return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
def luminance(hex_color: str) -> float: h = hex_color.lstrip("#") r, g, b = (int(h[i:i + 2], 16) for i in (0, 2, 4)) return 0.2126 * srgb(r) + 0.7152 * srgb(g) + 0.0722 * srgb(b)
def contrast(a: str, b: str) -> float: la, lb = luminance(a), luminance(b) hi, lo = max(la, lb), min(la, lb) return (hi + 0.05) / (lo + 0.05)
# 白地の本文に使えるかprint(f"{contrast('#4b5157', '#ffffff'):.2f}") # 8.03 → 使えるprint(f"{contrast('#f6ad3c', '#ffffff'):.2f}") # 1.92 → 白地の文字には使えない実際、黄を白地の文字に使うと 1.92:1 で読めません。暗い地の上か、面の色として使うという制約が、計算して初めて分かりました。この制約はルール文書にも書いて、後から誤って使われないようにしています。
背景は白のままにした
冒険したくなる場面ですが、背景は白から変えませんでした。理由は2つです。クリーム地は避けたい型そのものであること。そして498記事の長文を読ませる媒体では、白が最も読みやすく速いこと。
指示書には「大胆さは1か所に集中させ、周りは静かに保つ」とも書かれていました。背景で冒険すると、全ページに影響します。冒険する場所を1つ選び、そこ以外は抑えるほうが、結果として印象に残ります。
却下した案を記録する
決めたことより、却下したことを残すほうが後で効きます。半年後に「クリーム地にしたらどうか」と誰かが言い出したとき、一度検討して外した理由が残っていれば、同じ議論を繰り返さずに済みます。
- クリーム地 × 明朝見出し × テラコッタ — 最頻出。既存の橙が近く、狙わずとも落ちる
- 黒地 × 蛍光の差し色 — 既存のヒーローが黒地×橙。方向として後退する
- 新聞レイアウト — 498記事の一覧に合いそうだが、これも定番。密度は罫線ではなく階層で作る
却下した理由まで含めて、デザイントークンと一緒にルール文書へ書きました。この3つは、後で見返せるように確認用のページとしてサイト内に残しました。次回は、実際に書体を入れたときに起きたことを書きます。入れた直後に、転送量が 2.9 MB 増えました。
この記事の感想を教えてください
あなたの 1 クリックで、本当にこの記事は更新されます。「もっと詳しく」「続編希望」が一定数集まった記事は、 ふくふくが 実際に内容を拡充したり続編記事を公開 します。 送信したリアクションはお使いのブラウザに記録され、再カウントされません。