赤猫座の道具店の店先に並んでいる道具たちを眺めてみると、機能面での統一感は正直言って「皆無」です。モールス信号の変換機、複数タイマー、正規表現の検証ツール、和色パレット、LINE Botのテンプレート……。一般的なWebサービスのセオリーから見れば、まったく関連性のない雑多な道具が同じ屋根の下に同居しています。
しかし、当サイトを訪れた方の多くが「不思議とまとまりを感じる」とおっしゃってくださいます。その理由は、サイト全体を貫く「赤猫座」という濃密な世界観とデザインシステムを徹底して統一しているからです。
なぜ、どこにでもある無機質な「便利ツールまとめサイト」にせず、わざわざ「夜更けにひっそり開く不思議な道具屋」という舞台設定を作り込んだのか？ 今回は、個人開発における世界観デザインの重要性と、UI設計の裏側についてお話しします。
機能だけで勝負する無機質なツールサイトは、用が済んだら翌日には忘れ去られます。「ポータル部分は世界観で強烈に束ね、ツール内部は使いやすさを最優先する」という二層構造のデザイン戦略と、ダークモードを前提とした色彩・タイポグラフィ設計についてまとめました。
1. 無機質な「機能だけのツール集」は、明日には忘れ去られる
インターネット上には、便利なWebツールや変換スクリプトをまとめたサイトが星の数ほど存在します。しかし、その大半は「白い背景に青いリンク」「無機質な表とボタン」だけで構成されており、利用者の記憶には残りません。
ユーザーはその場での課題（文字数を数える、コードを整形するなど）を解決したら、サイト名すら見ずにタブを閉じ、二度と戻ってくることはありません。
「機能（Function）だけで勝負しようとすると、資本力のある大企業や巨大SaaSには絶対に勝てません。
しかし、『世界観と情緒（Atmosphere）』を纏わせた瞬間、その個人開発サイトは唯一無二の場所になります。」
「あの黒と金色の怪しい店」「猫の店主がいる道具屋」という強い認知（メンタルモデル）が脳内に刻まれることで、数ヶ月後に別の作業で困ったときにも「あ、あの赤猫座の店に行けば何かあるかも」と思い出してもらえる確率が跳ね上がります。
2. 赤猫座を形作る「3つのデザインシステム」
「赤猫座らしさ」を成立させるために、サイト全体で厳格にコントロールしている3つの要素があります。
① 色彩設計：墨色と金箔、そして朱赤（漆黒の闇に灯る明かり）
ベースカラーには、完全な黒（#000000）ではなく、わずかに温かみと深みを含んだ「墨色（#121214 や #1a1a1e）」を採用しています。そこにアクセントとして「鈍く光る金箔色（#b89b5e）」と「朱赤（#c94b4b）」を配置することで、怪しさと品格が同居する和モダンな夜の空気感を演出しています。
② タイポグラフィ：可読性のゴシック × 情緒の明朝体
本文やボタンなど「情報を正確に素早く読ませる場所」にはモダンなゴシック体（Noto Sans JP）を使いつつ、大見出し（H1/H2）やキャッチコピーには筆の払いが美しい明朝体（Zen Old Mincho）を組み合わせています。実用性を1ミリも損なわずに、文学的な質感を付与するハイブリッドな文字組です。
③ 言葉遣いとマイクロコピー（Voice & Tone）
画面上の表記も、一般的なWeb用語をそのまま使わず、道具屋の世界観に変換しています。
- 「トップページ」 → 「店先」
- 「ツール一覧」 → 「Web道具一覧」
- 「お問い合わせ」 → 「店主へ知らせる」
- 「ツール総数」 → 「十二品（漢数字スタンプ）」
3. 比較表：無機質な機能型サイト vs 世界観特化型サイト
| 比較項目 | 🐱 世界観特化型（赤猫座の道具店） | 🧰 一般的な機能型ツールサイト |
|---|---|---|
| 第一印象・情緒 | 物語や世界観に引き込まれる没入感 | 事務的・無機質で感情が動かない |
| 再訪時の想起率 | 「あの黒と金の店」と強烈に記憶に残る | サイト名もデザインも思い出せない |
| 雑多ツールの同居 | 「道具屋の品揃え」として自然に許容される | 「何のサイトか分からない」と散漫に見える |
| 開発モチベーション | 自分の城（空間）を作り込む楽しさがある | 機能の実装作業だけで飽きやすい |
| UXとの両立 | ポータルとツールの分離で実用性を死守 | 実用性重視だが差別化が難しい |
4. 最大の設計ルール「ポータルは濃密に、道具本体は自由に」
世界観を作り込む上で最も陥りがちな失敗が、「世界観を押し付けすぎて、ツールの使いやすさを破壊してしまうこと」です。巻物のような縦書きUIや、読みにくい草書体のフォントで計算結果を表示されたら、道具としては完全に失格です。
そのため、赤猫座では明確な「境界線」を引いています。
- ポータル層（店先・一覧・日誌・案内）：赤猫座の看板、墨色と金色の世界観、明朝体の装飾を100%適用し、世界観の統一を担う。
- 個別ツール層（各Web道具の画面）：道具ごとの機能美と操作性を最優先。モールス信号は電信技師風、SPLIT TIMERは無機質なダークネオン、色葉は洗練された和色パレットなど、道具の目的に応じて最適なUIを自由に設計する。
「外観は風情ある道具屋の町家だが、引き出しを開けると専門職人の研ぎ澄まされた器具が入っている」。このメリハリこそが、使いやすさと世界観を両立させる最大の秘訣です。
5. 「夜の道具屋」という舞台設定がもたらす実利
「夜更けから明け方まで営業する道具屋」というコンセプトは、単なるロマンだけでなく実用上の大きなメリットをもたらしてくれました。
現代のエンジニア、デザイナー、物書き、夜遅くまでレポートを書く学生たち。Webツールを最も切実に必要としているのは、往々にして「深夜の作業時間」です。
最初からダークモード（暗い背景）を標準とし、目に優しいコントラストで設計された画面は、夜間の作業に疲れたユーザーの目に負担をかけません。「夜の店」という設定があるからこそ、ダークテーマがギミックではなく「必然」として機能しています。
まとめ：個人開発だからこそ、道具に「魂」を宿らせたい
効率と合理性だけを追い求めるなら、シンプルなテンプレートを当てはめて終わりにするのが一番早いです。
しかし、個人開発の醍醐味は、誰の許可も取らず、自分の美学とこだわりを100%注ぎ込んだ「自分だけの空間」をインターネットの片隅に築き上げられる点にあります。
赤猫座の道具店はこれからも、機能としての便利さはもちろんのこと、訪れるだけでどこかワクワクする「夜更けの隠れ家のような道具屋」として、ひとつひとつの道具と空間を丁寧に磨き続けていきます。😽