Hyphen Technologies
Step 02 · Design Philosophy Selection

日本の美からタペストリーを選ぶ

Cursor / Apple のような洗練されたミニマリズムを土台に、日本の美意識から「内なる軸」を一つ選び、デザインシステムの背後に通底させる。本ページは7候補と視覚イメージ、そして「そもそも哲学は必要か」を辛口で評価する。

そもそも哲学は必要か？

結論を最初に言う。

VERDICT

必要。ただし「対外ナラティブ」ではなく「内部コンパス」として。

プロダクト LP に「我々の哲学は…」と書くのは恥ずかしい。だが社内のデザイン判断に「これは 間 を尊重しているか？」という問いが効く。Apple は 間 を50年使い続けて、誰にも明言していない。我々もそうする。

哲学を持たない場合のリスク: ad-hoc な装飾追加、ブランドの一貫性低下、デザイナー（外注含む）への指示が「Cursor 風で」のような曖昧な言語に依存。
哲学を持つメリット: 「これは HT らしいか」の問いが具体化、長期一貫性、外注への共有資料が design-tokens.json + philosophy.md の2点で済む。
"We have always considered ourselves to be at the intersection of technology and the liberal arts."
— Steve Jobs, 2010 keynote. 後年 Walter Isaacson が、Jobs の禅・侘び寂び傾倒を伝記で記録。

候補 7 つ

それぞれ「概念」「視覚イメージ（CSS で再現）」「UI への翻訳」「HT との適合度」を提示する。

Candidate 01
間
MA · negative space, the meaningful interval

「ある」と「ない」の間にある時空。日本建築・能・茶道・俳句すべての通底概念。Apple が無言で実装してきた美。

UI 翻訳: 過剰な装飾を排し、要素間の余白それ自体を情報として扱う。padding/margin スケールを 4/8/12/16/24/40/64px と 意図的に粗く、隣接距離が文法になる。
視覚親和性★★★★★ 概念深度★★★ 差別化★★
Candidate 02
幽玄
YŪGEN · profound depth, the suggested unseen

能楽・連歌の核心。表層に出さず、奥に湛える美。「見えないものの気配」。AI/ML プロダクトの「表に出ない知性」と最も呼応する。

UI 翻訳: 多層的な dark gradient、subtle inner shadow、hover で初めて現れる contextual hint。CTA はあえて控えめに、本質的アクションのみを強調。loading skeleton も「気配」として描く。
視覚親和性★★★★ 概念深度★★★★★ 差別化★★★★
Candidate 03
金継ぎ
KINTSUGI · golden repair, beauty in mended fractures

割れた器を金で継ぎ、傷を歴史として誇る美学。SCAS（コンテンツを段階的に磨く）、Notion 廃止からの再構築、HT の起業ストーリー全てに呼応。

UI 翻訳: 修正履歴・diff・改善提案の UI で 金色のアクセント (#c9a961) を一点投入。普段は完全無彩色だが、変化・修復・進化を示す瞬間にだけ金が走る。
視覚親和性★★★ 概念深度★★★★★ 差別化★★★★★
Candidate 04
粋
IKI · refined chic, calculated restraint

江戸の町人文化が生んだ「気っ風」と「色気」。派手にせず、しかし決して凡庸でない。九鬼周造『「いき」の構造』が哲学的定義。B2B SaaS の控えめな勝負感に最も近い。

UI 翻訳: monochrome を基調、ただし1箇所だけ 意図的な色気 を仕込む（強調 CTA の hover、または focus ring）。ロゴも装飾を削ぎ落とし、線一本の緊張感で勝負。
視覚親和性★★★★ 概念深度★★★★ 差別化★★★
Candidate 05
侘び寂び
WABI-SABI · transient imperfection

最も有名な日本美意識。Jobs が私的に傾倒した。ただし欧米マーケで使い古されすぎており、HT が選ぶと "another wabi-sabi tech brand" になる懸念。

UI 翻訳: 軽微な非対称、subtle texture（ノイズフィルタ）、温度ある neutral palette（純黒ではなく #0c0a08）。アニメーションは僅かに ease-out で「余韻」を作る。
視覚親和性★★★ 概念深度★★★ 差別化★
Candidate 06
不均整
FUKINSEI · deliberate asymmetry

禅七哲の一つ。完璧な対称を avoid し、緊張感のある non-balance を作る。日本庭園・生け花の根幹。

UI 翻訳: 12-grid を採用しつつ、メインコンテンツは敢えて 7:5 の non-symmetric 分割。ヒーロー画像は中央でなく "rule of thirds" 寄せ。dashboard カードのサイズも 1:1:2 等の non-uniform。
視覚親和性★★★★ 概念深度★★★ 差別化★★★
Candidate 07
枯山水
KARESANSUI · dry rock garden, abstraction of landscape

水を使わず水を表現する庭園。最少の要素で最大の宇宙を喚起。情報密度の高い B2B ダッシュボードに 意外なほど適合。

UI 翻訳: 大量のデータを抽象化された stone（KPI カード）と sand pattern（背景の subtle line grid）で表現。情報を増やすのではなく、配置と関係性で意味を作る。
視覚親和性★★★★ 概念深度★★★★ 差別化★★★★

比較マトリクス

星は5段階。HT の「AI/ML × B2B SaaS × 2人スタートアップ」前提での評価。

候補視覚親和性概念深度差別化陳腐化リスク翻訳しやすさ合計
間 Ma★★★★★★★★★★★★★★★★★★★★★★★★★17
幽玄 Yūgen★★★★★★★★★★★★★★★★★★★★★★★★★21
金継ぎ Kintsugi★★★★★★★★★★★★★★★★★★★★★★★★★20
粋 Iki★★★★★★★★★★★★★★★★★★★★★★★★★19
侘び寂び★★★★★★★★★★★★★★★★★★★★★★★★★12
不均整 Fukinsei★★★★★★★★★★★★★★★★★★★★★★★★★17
枯山水 Karesansui★★★★★★★★★★★★★★★★★★★★★★★★★20

推奨と次の打ち手

辛口判定。1 つに絞る。

★ FIRST CHOICE

幽玄（YŪGEN）— 表に出さず、奥に湛える

AI/ML スタートアップが扱う「目に見えない知性」と最も整合。CTA を控えめにし、奥行き（dark gradient × subtle elevation）で価値を示すスタイルは Cursor の質感にも自然に乗る。陳腐化リスクが低く、欧米テックで未踏。差別化と深度の両立。

SECONDARY · ACCENT LAYER

金継ぎ（KINTSUGI）— 金一色をアクセントとして併用

基底美意識は幽玄、その上に金継ぎを「変化の瞬間にだけ走る金色」として乗せる。普段は無彩色、diff・履歴・改善 UI でだけ #c9a961 が一閃。SCAS の "コンテンツを磨いていく" 物語と完全に一致。HT 起業ストーリー（Notion 解約→ GitHub 集約への "再構築"）にも呼応。

外す候補: 侘び寂び（陳腐化）、間（既に Apple/Cursor の専売特許に近く差別化薄）、不均整（哲学として弱い）、粋（江戸文脈が B2B SaaS で説明難）、枯山水（dashboard 適性高いが「最初の1つ」としては抽象度が高すぎる）。
採用ルール: 哲学を社外に明言しない。ロゴガイドラインと design-tokens.json の commit メッセージにだけ「yūgen / kintsugi」と記録する。

次の打ち手（Step 02 確定後）

1. 本ページの推奨に Niki さん承認 → 別案あれば差し戻し
2. Claude Design GUI に Prompt 1 を投入（index.html 参照、ただし philosophy: "yūgen with kintsugi accent" を加筆）
3. ~/src/ht/brand/design-system/ に export（tokens.json, tailwind.preset.ts, components/）
4. hyphen-portal が brand/design-system を import して再ビルド
5. Cursor の質感比較スナップショットを index.html に追記して可視確認
幽玄の余白に、金継ぎの一閃。
静けさに、進化の証を残す。
— Hyphen Technologies, design north star (internal only)