第三版・実践者の円環書

つくり、届ける。

デジタルプロダクトを通じて、
愛をかたちに、かたちを価値に変えるための、八つの臓器。

VOLUMEIII · 2026.04
STRUCTURE外環(Krebs Cycle)× 内環(8フロー)
SOURCESMIT Media Lab · RCA · CSM · IDEO · Pentagram · Wolff Olins · COLLINS · Stanford d.school · Stripe Press · a16z · Reforge · Long Now · Christensen Institute
FORつくり手であり、届け手である人へ

これは 円環 である。
線分ではない。

外環は、Neri Oxman の Krebs Cycle of Creativity。Art / Science / Engineering / Design の四象限が、Information / Knowledge / Utility / Behavior という出力を介して、互いに変換しあう。

内環は、デジタルプロダクトを成立させる八つの臓器。外環の四象限のそれぞれに、二つずつ配置される。

この書は、自分のプロダクトでもクライアントワークでも同じ一枚の上で考えるための道具である。つくることと届けることは対等であり、課題と解は不二である。

ART 表 現 SCIENCE 探 求 ENGINEERING 実 装 DESIGN 設 計 INFORMATION 情 報 KNOWLEDGE 知 識 UTILITY 有 用 BEHAVIOR 行 動 CULTURE NATURE CULTURE NATURE PERCEPTION PERCEPTION PRODUCTION PRODUCTION 愛を、 価値に。 🪪 IV 💬 VII 🎯 I 👥 II 🧩 III 📡 VIII 🎬 VI ✨ V
🎯
FLOW · I · STRATEGY

戦略 なぜ、この事業は存在に値するのか?

象限:SCIENCE 出力:KNOWLEDGE 罠:空虚なビジョン

デザインに見える事業課題のほとんどは、デザインの問題ではない。未解答の戦略的問いが、見た目の衣装を着ているだけである。

表層を磨く前に、まず確かめる必要がある:この事業には誰も主張できない存在理由があるか。自分は何ゲームをプレイしているか。それがなければ、いかに精緻な実装も救えない。

プロは「どの戦場で戦うか」を選ぶ。素人は戦場が見えないまま走り出す。

FW · 01 Strategyzer

ビジネスモデルキャンバス

Business Model Canvas — 9 blocks
事業の経済的論理を一枚にマッピングし、価値を生む構造と価値を捕える構造の整合を強制する。
  • 顧客セグメント / 価値提案 / チャネル
  • 顧客との関係 / 収益の流れ
  • 主要リソース / 活動 / パートナー
  • コスト構造
  • 九つの整合性で「事業の成立」を判定
❓探求の問い
  1. 九つのうち、空欄・架空・矛盾しているのはどれか
  2. 収益の論理は、コストの論理を本当に賄えているか
  3. 競合が七つを真似ても勝てない要素は何か
⚠️
よくある罠 BMC を "埋めただけ" で戦略の確認だと思う。本当に問うべきは「9マスの整合性」── 矛盾や空白の発見である。
FW · 02 Wolff Olins

北極星(Aspirational North Star)

Why exist · What's special · How it shows up
下流の判断すべての羅針盤となる、唯一・防衛可能な存在理由。リブランドの「前」に書くもの。
  • なぜ存在するか(四半期を超える大義)
  • 独自の資産(自分たちにしかないもの)
  • 志向する未来(自分たちが起こす変化)
  • 提案(具体的・検証可能な約束)
  • 「拒絶するもの」── これにはならないという線
❓探求の問い
  1. 明日この会社が消えたとき、本当に悲しむ人は誰か
  2. 「目的(Purpose)」より先に「提案(Proposition)」があるか
  3. 経営陣は資料を見ずに、自分の言葉で語れるか
⚠️
よくある罠 「Purpose を定めましょう」が先走ると空虚な美辞麗句になる。Wolff Olins は "Proposition first, Purpose later" と明言している。
FW · 03 Hamilton Helmer

7 Powers

Strategy = creating conditions for persistent differential returns
戦略を「持続的な差別化リターンを生む条件」と定義し、それを成立させる七つの力(Power)を体系化。Stripe Press 出版、ベンチャー界の必読書。
  • Scale Economies(規模の経済)
  • Network Economies(ネットワーク効果)
  • Counter-Positioning(逆張り立地)
  • Switching Costs(乗り換えコスト)
  • Branding · Cornered Resource · Process Power
❓探求の問い
  1. 七つのうち、自分の事業はどれを獲得しつつあるか
  2. その Power は「Benefit」と「Barrier」両方を持つか
  3. 競合が真似ようとして、できない仕組みがあるか
⚠️
よくある罠 「USP がある」と言うが、それは Benefit だけで Barrier がない場合が多い。Power = Benefit × Barrier。
R · 01 SEAN ELLIS · AMPLITUDE

North Star Metric

Single metric of customer-realized value
組織を一つの数値で揃える技。NSM は "成功の遅行指標" ではなく "価値の先行指標" であるべき。Airbnb は Nights Booked、Spotify は Time Spent Listening。売上は遅行指標なので NSM にしない。これを知ってる/知らないで組織の方向性が変わる。
R · 02 AMPLITUDE

Three Games

Attention · Transaction · Productivity
プロダクトはこの三つのゲームのいずれかを戦っている。自分が何ゲームをプレイしているかを誤認すると、指標も施策もすべて狂う。Netflix は注意、Amazon は取引、Notion は生産性。三つを跨ぐとき組織は分裂する。
R · 03 Andy Rachleff · WEALTHFRONT

Product / Market Fit

"You can feel it when you have it"
PMF の原典提唱者。PMF はマーケティングではなく、需要の引力で測る。"40% の顧客が "明日この製品が消えたら非常に困る" と答える" が定量基準(Sean Ellis)。これに達する前にスケールするのは、漏れたバケツに水を注ぐ行為。
R · 04 DAVE McCLURE · 500 STARTUPS

AARRR(海賊指標)+ Activation の質を診る

Acquisition · Activation · Retention · Referral · Revenue
プロダクト成長を5段の漏斗で診る。「どの段で漏れているか」を特定できなければ、施策はあてずっぽう。新規獲得しか見ない組織が大半だが、本当のレバレッジは Activation(初期体験) と Retention(継続) にある。Activation は "Aha Moment への到達率"、Retention は "Day 1/7/30 の戻り率"。
R · 05 STEVE BLANK

Mission Model Canvas

For non-profit, public sector, social ventures
BMC を「収益最大化」から「ミッション達成」に組み替える派生型。非営利・公共・社会的事業は BMC を直接使えない(収益が成功指標ではないため)。NPO・自治体相談で使うと一気に話が通る。
🔗 フロー間の本質的接続
  • 戦略 → 人と需要NSM の分子は必ず Flow II のジョブで定義される。"Nights Booked" の裏は「旅で居場所を得たい」というジョブ。
  • 戦略 → 言葉Aspirational North Star は Flow VII の Verbal Identity の Narrative そのもの。同じものに別の名前。
  • 戦略 → 流通Power(Helmer)を持たない事業は、Flow VIII でいくら GTM を磨いても穴の空いたバケツ。
  • 科学 ⇆ 芸術外環の対極(Science と Art)は、戦略層では「データ駆動の判断」と「直感的判断」として現れる。両方が要る。
🩺 よくある誤診

「リブランドが必要」と言う相談者は、たいてい戦略の空白を抱えている。原因(存在理由の不在)に手をつけず症状(見た目)だけを治療するのが、この章で最も高くつく失敗。まず上流に戻すこと。

⚡ 本フローの KO 技

三つの質問:「NSM は何か」「ジョブは何か」「拒絶するものは何か」。この三つに即答できなければ、戦略はまだ存在していない。

👥
FLOW · II · USER INSIGHT

人と需要 誰の、どんな "進歩" を助けるのか?

象限:SCIENCE 出力:KNOWLEDGE 罠:推測ペルソナ

人はプロダクトを「買う」のではない。自分の人生のある具体的な状況のなかで、何らかの進歩を遂げるために雇うのである。

デモグラフィックは「誰であるか」を語るが、ジョブは「何になろうとしているか」を語る。プロは状況とジョブを聞き、素人は属性を集める。

そして人が動くか動かないかは、四つの力の綱引きで決まる ── 押し、引き、不安、慣性。

FW · 04 Christensen Inst.

ジョブ理論(JTBD)

Hire / Fire — Progress, not products
プロダクトは入れ替わってもジョブは残る。本当の競合(同じジョブを片付けるあらゆる解)を可視化する。
  • どんな進歩を、どんな状況で求めているか
  • このプロダクトを雇う前、何を「解雇」したか
  • 機能 / 感情 / 社会 の三次元の引力
  • 四つの力:押し・引き・不安・慣性
  • ジョブは時を超えて安定する
❓探求の問い
  1. プロダクト名を使わずに、ジョブを20字以内で言えるか
  2. これを雇うために、ユーザーは何を解雇したか
  3. 支配的な力は「引力」か、ただの「押し」か
⚠️
よくある罠 機能だけのジョブ定義(「タスク管理を効率化したい」)は弱い。社会的次元(「できる人だと思われたい」)が抜けると、なぜ乗り換えるかが説明できない。
FW · 05 Strategyzer

バリュープロポジションキャンバス

Customer Profile ⇆ Value Map
BMC の一マス(価値提案と顧客)にズームイン。ジョブ/ペイン/ゲインと、ペインリリーバー/ゲインクリエイターの整合を一目で。
  • 顧客のジョブ ── 観察に基づく
  • ペイン ── 障害、リスク、摩擦
  • ゲイン ── 必須 / 嬉しい / 驚き
  • ペインリリーバー / ゲインクリエイター
  • 「Fit」を視覚的に判定
❓探求の問い
  1. もっとも深刻なペイン上位三つに、本当に応えているか
  2. 「ゲイン」の必須と嬉しさを区別できているか
  3. このフィットは、思い込みでなく根拠で確認されているか
⚠️
よくある罠 VPC を "埋める" ことに満足し、Fit の検証(顧客と話す)を省略する。VPC は仮説の整理であって、検証ではない。
FW · 06 RCA / IDEO

ジャーニーマップ & ステークホルダー

End-to-end experience & surrounding actors
体験を時間軸の連続として描き、舞台裏の人物・チャネル・感情の起伏を一枚に統合する。
  • 事前 / 本体 / 事後 の三段
  • 表舞台・舞台裏・サポートの関係者
  • 痛点 ── 機能だけでなく感情に注目
  • 感情の起伏曲線を描く
  • システムが自分自身に奉仕する箇所を見つける
❓探求の問い
  1. ユーザーが信頼を失う瞬間はどこか
  2. 気づかぬうちに体験を壊している関係者は誰か
  3. システムがユーザーよりも自分に奉仕している箇所は
⚠️
よくある罠 マップが綺麗すぎる時は、現場の混乱を捉えていない。本物のジャーニーマップは醜い・矛盾している・空白がある。
R · 06 BOB MOESTA

Switch Interview

Forces of Progress · Push / Pull / Anxiety / Habit
JTBD を「実証する」唯一の方法。"なぜ買ったか" ではなく "いつ・何があった日に買おうと思ったか" を聞く。タイムラインを再構成し、四つの力の綱引きを描き出す。デモグラ調査の100倍の解像度が出る。
R · 07 NIR EYAL

Hooked Model

Trigger → Action → Variable Reward → Investment
習慣化プロダクトの設計図。「変動報酬」が依存性を生む(Instagram, TikTok, Slack)。自社プロダクトで4要素のうち欠けているものを特定すると、リテンション施策が一気に焦点化する。
R · 08 BJ FOGG · STANFORD

Fogg Behavior Model

B = Motivation × Ability × Prompt
人が動かない時、原因はこの三要素のどれか。動機ではなく能力を上げる方が効率が高いのが Fogg の最大の知見。「動機を上げる」より「やりやすくする」。
R · 09 ROBERT CIALDINI

影響の6原理

Reciprocity · Commitment · Social Proof · Authority · Liking · Scarcity
人間の意思決定を駆動する6つのレバー。UI 上で意図的に使うと "ナッジ"、悪用すると "ダークパターン"。境界線を知らずに使うと、知らずに後者になっている。
R · 10 RCA SERVICE DESIGN MA

Ethnography & Diary Study

"Be there, not ask there"
RCA・IDEO が繰り返し教える、最も価値あるリサーチ手法。インタビューは嘘をつくが、観察は嘘をつけない。日記スタディは1週間ユーザーに記録させ、文脈を再構成する。サンプル5人で、サーベイ500人より深い洞察が出る。
R · 11 TOYOTA · SAKICHI TOYODA

5 Whys

Root cause excavation
「なぜ?」を5回繰り返して、症状から根本原因まで掘る。3回目あたりで景色が変わる。最初の答えはほぼ常に表層。これを習慣化していないチームは、永遠に表層を治療し続ける。
🔗 フロー間の本質的接続
  • JTBD = Hooked = Fogg = Forces全部「人が動く・動かないの構造」の言い換え。
  • 人と需要 → 言葉Schwartz の Awareness Stages(Flow VII)は、ジョブの認知段階を5段階で診る装置。
  • 人と需要 → 流通Cialdini の6原理は、Flow VIII の説得型 GTM 戦術の理論的源泉。
🩺 よくある誤診

「ペルソナを作りました」が28歳女性 PM で止まっている。属性ではなく状況とジョブで定義し直すまで、施策の精度は上がらない。

⚡ 本フローの KO 技

「最後にこのプロダクトを "雇った" 日、その朝に何が起きていましたか?」── これが Switch Interview の核心の問い。

🧩
FLOW · III · STRUCTURE

構造 解の構造はどう組み立てるか?

象限:ENGINEERING 出力:UTILITY 罠:画面の継ぎ接ぎ

プロダクトの最も多い失敗は、実装が悪いことではない。間違った問題に対する正しい解を作ってしまうこと、そして機能を並べただけで構造を持っていないこと。

プロは画面を作る前にオブジェクトを定義し、機能を並べる前に階層を引く。タスク指向のUIは汚くなる。オブジェクト指向のUIは美しくなる。

これは美意識ではなく、構造の問題である。

FW · 07 Design Council UK

ダブルダイヤモンド

Discover · Define · Develop · Deliver
第一の菱形で正しい問題を、第二の菱形で正しい解を見出す。どちらかを飛ばすと、確信に満ちた失敗が生まれる。
  • Discover ── 広げ、観察し、推測しない
  • Define ── 鋭い問題ステートメントに収束
  • Develop ── 解の空間を再び広げる
  • Deliver ── 収束、検証、出荷
  • 反復は許されるが、省略は許されない
❓探求の問い
  1. このチームはいまどちらの菱形の中にいるか
  2. Define は具体的な問題ステートメントを生んだか
  3. 発散の前に、もう作り始めていないか
⚠️
よくある罠 Discover を一週間に圧縮し、Develop に半年使うチーム。間違った問題が、そのままロードマップになる。
FW · 08 RCA Service Design

サービスブループリント

Front-stage · Back-stage · Support · Evidence
サービスを「見えるタッチポイント」と「見えない裏方の機械」の連続として、一本の時間軸に描き出す。
  • 顧客のアクション(動詞)
  • 表舞台のインタラクション
  • 舞台裏のアクション(不可視)
  • サポートプロセスとシステム
  • 三つの境界線:相互作用・可視性・内部
❓探求の問い
  1. 舞台裏の失敗が表舞台に染み出している箇所はどこか
  2. 担当者一人が抜けたら崩れるサポートプロセスはどれか
  3. ユーザーに残る「痕跡」はブランドと整合しているか
⚠️
よくある罠 UI(表舞台)だけ磨いて、舞台裏のオペレーションを設計しない。サービスは継ぎ目で死ぬ。
FW · 09 IDEO

三つのレンズ(プロダクト層)

Desirability · Viability · Feasibility
Flow I と同じレンズだが、プロダクト層で再適用。出荷後のプロダクトは、三つのうち一つでも欠けた瞬間に失敗する。
  • 欲しいか ── このバージョンを本当に欲しがるか
  • 続くか ── 規模化してもユニットエコノミクスが成立するか
  • 作れるか ── チームが作って運用できるか
  • 三つの緊張がデザインの核
  • プロトタイプは説得ではなく、学習のため
❓探求の問い
  1. 三つのうち、検証ではなく「演技」されているのはどれか
  2. 最も弱いレンズを潰す最も安い実験は何か
  3. プロトタイプは学ぶためか、既決事項を守るためか
⚠️
よくある罠 プロトタイプをステークホルダー説得用に作る。本来は不確実性を潰すための実験道具。
R · 12 L. TESLER · IBM CUA · S. VOYCHEHOVSKI

OOUI(オブジェクト指向 UI)

Object-Oriented UI · Noun-first, then verb
Apple Lisa や Smalltalk から続く、UI 設計の最重要原理。「タスク指向(動詞→名詞)」のUIは必ず汚くなる。「メールを書く」ではなく「メール」(名詞)を選んでから「書く / 返信 / 削除」を選ぶ。iOS の写真アプリ、Finder すべてがこの構造。独学だと永遠にタスク指向で組み続けてしまう。
R · 13 ROSENFELD · MORVILLE

Information Architecture 4要素

Polar Bear Book
Web サイトの情報構造を診る決定版。Organization / Labeling / Navigation / Search の4要素 + Context / Content / Users の三軸。サイトが分かりにくい時、どれが壊れているかを特定すれば、対処は明快。
R · 14 BRAD FROST

Atomic Design

Atoms · Molecules · Organisms · Templates · Pages
化学のアナロジーで作る、デザインシステムの階層論。Frost 本人が後年「ラベルは目的ではない、メンタルモデルだ」と明言している。重要なのは「小→大の入れ子で考える」こと。
R · 15 NORIAKI KANO

Kano Model

Must-be · Performance · Attractive · Indifferent · Reverse
機能優先度の決定版。機能は時を経て "魅力的→一元的→当たり前" へ降りていく。dark mode は2020年は驚き、いまや当たり前。これを意識せずロードマップを引くと、競合が当たり前を満たした瞬間に置き去りになる。
R · 16 JAKOB NIELSEN

Heuristic Evaluation 10原則

Visibility · Match · Control · Consistency · etc.
UI 評価の業界標準。3〜5人の評価者で全 UI をチェックすると、ユーザビリティ問題の85%を発見できる(Nielsen 実証)。ユーザーテストの前に必ず通すフィルター。
R · 17 CHRISTOPHER ALEXANDER

A Pattern Language

253 patterns · From towns to rooms
MIT 系建築学の聖典。パターン = "繰り返される問題と、その解の本質的構造"。デザインパターン(GoF)、UIパターン、すべての源流。Web の Atomic Design や Material Design はこの末裔。
🔗 フロー間の本質的接続
  • OOUI ⇆ Atomic DesignOOUI は概念モデル、Atomic Design はコンポーネント階層。同じ「小から大への入れ子」原理。
  • 構造 → 静のクラフトAtomic Design の "Atoms" は、Flow V の Design Tokens と同じものを指している。
  • 構造 → 流通Pattern Language の思想は Flow VIII の Bullseye Framework(チャネル選定)にも応用される。
🩺 よくある誤診

「画面が分かりにくい」と言われた時、ビジュアルを直すのは下手な治療。多くの場合、IA の命名(Labeling)か OOUI の構造が壊れている。

⚡ 本フローの KO 技

「主要なオブジェクト(名詞)を5つ挙げてください」── これに即答できないチームは、UI が必ず破綻している。

🪪
FLOW · IV · BRAND

ブランド 受け手の頭の中で、何を意味するか?

象限:ART 出力:INFORMATION 罠:原則のない装飾

ブランドはロゴではない。ひとつの名前が、受け手の頭の中で呼び起こす連想の総体である。

この層の診断は「美しいか」を問わない。「明確に識別され、整合し、成長に耐えるか」を問う。プロは "ブランドの人格" を Big Five 心理モデルで握り、ポートフォリオの構造を Aaker のスペクトラムで設計する。

素人は「カッコいいロゴ」から始めて、永遠に焦点を見失う。

FW · 10 Pentagram

ブランドシステムの論理

Principles before parts · Idea-led identity
「ブランドアイデア」(一文の防衛可能な思想)から、視覚・言語・行動のルールが演繹される。
  • ブランドアイデア(一文、検証可能)
  • 視覚的署名(マーク、書体、色、画像)
  • 言語的署名(声、命名、タグライン)
  • 行動的署名(語るのではなく振る舞う)
  • 弾性のルール(システムの育ち方)
❓探求の問い
  1. 各ビジュアルの判断は、ブランドアイデアまで遡れるか
  2. 「何を語るか」だけでなく「何をするか」が明確か
  3. 10倍の規模やカテゴリピボットでも、システムは生き残れるか
⚠️
よくある罠 「ロゴを新しくしたい」はほぼ常に「アイデアが欠けている」の言い換え。アイデア不在のままロゴ探索すると、美しくて死んだ仕事が生まれる。
FW · 11 Wolff Olins

ブランド × カルチャー × 体験

Three levers · Inside ⇆ Outside
外向きの整合は内向きの整合なしには成立しない。三つの梃子が互いを強化していなければ、ブランドは「演技」になる。
  • ブランド ── 志向する未来、提案、署名
  • カルチャー ── 儀式、行動様式、EVP
  • 体験 ── 象徴的瞬間とタッチポイント
  • 整合性テスト:顧客体験 ⇆ 従業員体験
  • 三つが揃って初めて "本物"
❓探求の問い
  1. 従業員の体験は、顧客に語る物語を裏付けているか
  2. 三つの梃子のうち、最も未発達なのはどれか
  3. "演じている" ブランドか、"そうである" ブランドか
⚠️
よくある罠 外向きのキャンペーンばかり磨き、社内文化が真逆。SNS 時代、矛盾は数日で露呈する。
FW · 12 COLLINS

親しみ × 意外性 × 文脈

Brian Collins · Three forces of memorability
ブランドが記憶に残るのは、認識可能・予期せぬ要素・文脈的妥当の三つが拮抗するとき。
  • 親しみやすさ ── 受け手が読み解ける
  • 意外性 ── カテゴリの常識から外れる
  • 文脈性 ── 文化的瞬間に応える
  • 本物性 ── 精査に耐える
  • 賛否を分けて構わない
❓探求の問い
  1. このブランドはどこで意外性を持ち、どこで凡庸に同調しているか
  2. このブランドが「拒否したカテゴリの常識」は何か
  3. 誰にも嫌われまいとして、結局誰の心も掴んでいないのではないか
⚠️
よくある罠 「業界の最新トレンド」を追うと、文脈には合うが意外性が消える。一つに偏れば陳腐・奇抜・流行追従に転落。
R · 18 JENNIFER AAKER · STANFORD GSB

Brand Personality 5次元

Sincerity · Excitement · Competence · Sophistication · Ruggedness
Big Five 人格モデルのブランド版。「あたたかい」「元気な」のような曖昧な語ではなく、5次元のスコアで人格を握る。Patagonia=Sincerity, Tesla=Excitement, IBM=Competence, Chanel=Sophistication, Jeep=Ruggedness。Stanford GSB の論文(1997)が原典。
R · 19 DAVID AAKER · JOACHIMSTHALER

Brand Architecture(Relationship Spectrum)

Branded House → Sub-brand → Endorsed → House of Brands
複数製品/事業を抱える時、どう束ねるかの体系。Apple(Branded House) / Marriott(Endorsed) / P&G(House of Brands) / Volkswagen(複合型)。「どの構造を採用すべきか」は事業のフェーズで決まる。
R · 20 MAILCHIMP

Tone of Voice 4軸マトリクス

Funny↔Serious · Formal↔Casual · etc.
ブランドの声を4本のスライダーで定量化する。「カジュアル」「親しみやすい」のような形容詞だけでは、ライターごとに解釈が割れる。スコアで握ると、AI にも人にも再現可能になる。
R · 21 VERBAL IDENTITY LTD

Voice 3層モデル

Narrative(10,000ft) · Tone(1,000ft) · Lexicon(Ground)
ブランドの言葉を3階層で握る。Narrative=世界観、Tone=態度、Lexicon=語彙。3層の整合が崩れると、上層の理念と下層の Slack メッセージが矛盾する。
🔗 フロー間の本質的接続
  • Aaker Personality ⇆ Tone of Voice 4軸同じ "人格を定量化する" 問題への異なる解。
  • ブランド ⇆ 言葉Wolff Olins の "Brand" 層 = Voice 3層の Narrative。同型構造。
  • ブランド → 静のクラフトブランドアイデアから視覚要素が演繹される。
🩺 よくある誤診

「ブランドガイドラインを作りたい」と言うクライアントの大半は、ブランドアイデア(一文)を持っていない。アイデアなしのガイドラインは規則の集合にすぎず、判断を導かない。

⚡ 本フローの KO 技

Aaker 5次元のスコアを 4-5-3-2-3 のように握る。これだけで、その後の視覚・言語・行動すべての判断が再現可能になる。

✨
FLOW · V · VISUAL CRAFT

静のクラフト どう見えるか、なぜそう見えるか?

象限:DESIGN 出力:BEHAVIOR 罠:目分量

美しさは天才の感覚ではない。計算可能なルールの集合である。「なぜか分からないけど汚い」UI には、必ず壊れているルールがある。

プロは目分量で組まない。8の倍数で間隔を取り、Perfect Fourth で字を組み、ゲシュタルトの法則で要素をまとめる。

素人はピクセルを目で揃え、永遠に違和感の正体に辿り着けない。この層こそ、独学と教育の差が最も残酷に出る場所である。

FW · 13 Visual ID

アトミックなビジュアルシステム

Logo · Color · Type · Grid · Imagery · Motion
整合的なアイデンティティとは、共有された数学的・美学的論理の上で、相互に強化し合うパーツの体系。
  • ロゴ ── 主/副/ロックアップ/余白
  • 色 ── 役割(主/強調/中性/警告)
  • 書体 ── スケール、階層、組み合わせ
  • グリッド ── 基本単位と間隔
  • 画像 ── 写真、イラスト、アイコン
❓探求の問い
  1. 基本単位は何か。すべてはその倍数になっているか
  2. アイコンはロゴと同じ幾何を共有しているか
  3. 色は「役割」で命名されているか「色相」で命名されているか
⚠️
よくある罠 不整合を「センスの問題」と片付ける。ほぼ常に「システムの問題」(基本単位や役割定義の不在)である。
FW · 14 Art Direction

コンセプト → ムード → 実装

Moodboard as a contract for execution
アートディレクションは、ブランドアイデアを視覚言語に翻訳する。ムードボードは契約書であり、雰囲気の提案ではない。
  • コンセプト ── 一文、ブランドアイデアから演繹
  • 二枚のボード:世界観と着想
  • 各リファレンスが特定の問いに答える
  • 視覚言語:色、書体、画像処理、構図
  • 注釈:「なぜ」このリファレンスか
❓探求の問い
  1. 各リファレンスは、それが答える問いに置き換えられるか
  2. これは「雰囲気」か、「実装の契約書」か
  3. このムードボードは、ブランドアイデアまで遡れるか
⚠️
よくある罠 Pinterest で集めた "気分" の羅列をムードボードと呼ぶ。本物は各画像に「これで何を答えるか」の注釈が付く。
FW · 15 NN/g · UI Craft

構図と階層の四原則

Grid · Hierarchy · Color · Consistency
使えて意図的なビジュアルデザインを成立させる、四つの還元不能な原則。
  • グリッド ── 目分量でなくシステムに揃える
  • 階層 ── 視線の最初の行き先が決まっているか
  • 色 ── 意図的か、装飾的か
  • 一貫性 ── 同じルールがどこでも適用されるか
  • 余白も構図の素材である
❓探求の問い
  1. 視線が最初に向かうのはどこか。意図的か、偶然か
  2. それぞれの色はその場所にいる理由を持っているか
  3. システムの継ぎ目が漏れている箇所はどこか
⚠️
よくある罠 「なんかダサい」UI は、ほぼ常に一貫性ルールの違反。修正はリデザインではなく、システムの静かな徹底。
R · 22 BRYN JACKSON · MATERIAL

8 Point Grid System

Everything is a multiple of 8 (or 4)
最も簡単で、最も効果のある "美しさの数学"。すべての高さ・幅・余白を8の倍数(8, 16, 24, 32, 40, 48...)で組む。これだけで UI は別物になる。Material Design / iOS / Atlassian / Intuit すべてこれ。
R · 23 TIM BROWN · MODULAR SCALE

Modular Type Scale

1.125 / 1.25 / 1.333 / 1.414 / 1.5 / 1.618
フォントサイズを "勘" で決めるな。音楽の和音と同じく、字の大きさは比率で組む。16pxを基準に1.25倍ずつ ── 16, 20, 25, 31, 39 ── と展開すると、その瞬間にエディトリアル品質になる。
R · 24 WERTHEIMER · KOFFKA · KÖHLER

ゲシュタルト七原則

Proximity · Similarity · Continuity · Closure · Figure/Ground · Common Region · Common Fate
人間の知覚の OS。UI が意図せぬ関係を示唆していないか、設計後に7原則を順番に当てて点検する(NN/g 推奨手順)。近接(Proximity)が最強。タイトルとボディの間隔より、ボディ間の間隔が広いと、タイトルとボディが分離して見える ── これが破綻の典型。
R · 25 SALESFORCE · MATERIAL YOU

Design Tokens(役割で命名)

color/primary, not blue-500
色や間隔を「色相」ではなく「役割」で命名する。color-primary であって color-blue-500 ではない。これによってブランドカラーが青→緑に変わっても、コードは破綻しない。
R · 26 MASSIMO VIGNELLI

Optical Alignment

数学的中央 ≠ 視覚的中央
三角形を矩形の中央に "数学的に" 配置すると、視覚的には左に寄って見える。プロは目で見て微調整する。再生ボタン、矢印、丸字の中身、すべて同じ。Figma の Auto Layout を盲信すると整わない。
R · 27 VIGNELLI CANON

制約原理(6書体だけ使え)

Discipline · Appropriateness · Ambiguity · Timelessness
Massimo Vignelli が遺した、Swiss Style 系の綱領。「6書体だけ使え。あとは生涯不要」と断言した(Helvetica, Garamond, Bodoni, Century, Futura, Times)。制約こそが品質の源泉。
🔗 フロー間の本質的接続
  • 静のクラフト → 構造Design Tokens は Atomic Design の "Atoms" の言い換え。
  • 静のクラフト → 動のクラフト8pt Grid はモーションの拍子も決める。空間と時間の単位を共有させる。
  • 静のクラフト → ブランド視覚要素はすべてブランドアイデア(IV)から演繹される。
🩺 よくある誤診

「センスがない」と自己診断する人の99%は、システム(基本単位、スケール、役割命名)を知らないだけ。センスは存在しない。規則の数だけ存在する。

⚡ 本フローの KO 技

「基本単位は何ですか?」── これに答えられないチームは、システムを持っていない。8pt Grid、Modular Scale、役割命名 ── この三つだけで品質の地肌が変わる。

🎬
FLOW · VI · MOTION CRAFT

動のクラフト どう動くか、何を伝えるか?

象限:DESIGN 出力:BEHAVIOR 罠:装飾的アニメ

モーションは装飾ではない。プロダクトの応答性そのものが、ブランドの人格を語っている。ボタンを押した瞬間の0.2秒の挙動が、信頼か違和感かを決める。

プロは Saffer の四要素(トリガー・規則・フィードバック・ループ)で設計し、Disney の12原則で人格を吹き込む。

素人は「とりあえずアニメーションつけてみた」で終わる。これは静のクラフトとは独立した、独自の臓器である。

FW · 16 Dan Saffer

マイクロインタラクションの四要素

Trigger · Rules · Feedback · Loops & Modes
「ミュートする」「いいねする」のような小さな機能の解剖学。Facebook の Like や Apple の Slide to Unlock は Signature Moment と呼ばれる。
  • Trigger ── ユーザー or システムによる起動
  • Rules ── 何が許され、何が許されないか
  • Feedback ── 視覚 / 聴覚 / 触覚で規則を伝える
  • Loops ── 繰り返し / 進捗 / 持続
  • Modes ── 例外的状態への切替
❓探求の問い
  1. このボタン、押した瞬間に「何が起きたか」が伝わるか
  2. 失敗時のフィードバックは、人間の言葉になっているか
  3. このマイクロインタラクションは、ブランドを表現できているか
⚠️
よくある罠 「アニメーション = 装飾」と考える。本来は応答性そのもので、ユーザーの信頼に直結する。
FW · 17 Material · Apple HIG

Easing Curves & Duration

Cubic-bezier · 200-400ms · Choreography
モーションには「正しい速度」と「正しい曲線」がある。線形は機械的、ease-out は親しみ、ease-in-out は重厚。
  • Standard ── 200-300ms / cubic-bezier(0.4, 0, 0.2, 1)
  • Emphasized ── 400ms / 強い加速減速
  • Decelerated(ease-out) ── 入場用
  • Accelerated(ease-in) ── 退場用
  • 50ms 以下は知覚できない / 1秒超は遅すぎ
❓探求の問い
  1. この遷移、速すぎないか・遅すぎないか
  2. 線形カーブを使っていないか(ほぼ常に間違い)
  3. 入場と退場の曲線は使い分けられているか
⚠️
よくある罠 すべての遷移を transition: all 0.3s ease で済ませる。これでは人格が表現できない。
FW · 18 Frost · A11y

状態とフィードバックの体系

Default · Hover · Active · Focus · Disabled · Loading · Error · Empty
UI 要素には常に8つの状態がある。Default しか考えないと、本番で破綻する。
  • Default / Hover / Active(押下中)
  • Focus(キーボード操作の必須要件)
  • Disabled(不可能な理由が伝わるか)
  • Loading(待機の理由と所要)
  • Error / Empty(救済への導線)
❓探求の問い
  1. 8状態すべてが定義されているか
  2. キーボードのみで全機能を操作できるか
  3. Empty State はユーザーを次の行動へ導いているか
⚠️
よくある罠 Empty State を「データなし」のまま放置。ここはオンボーディングの最大のチャンス。
R · 28 DISNEY · F. THOMAS & O. JOHNSTON

Disney 12 Principles of Animation

Squash · Anticipation · Staging · Follow-through · Slow-in/out · etc.
1981年の名著『The Illusion of Life』に収録。UI アニメーションのほとんどがこの12原則を意識せず作られているが、Apple・Google の一級 UI は確実に踏襲している。特に Slow-in/Slow-out(=ease-in-out)、Anticipation(動き出す前の溜め)、Follow-through(動き終わった後の余韻)。
R · 29 SAFFER · APPLE HIG

Signature Moment

Branded micro-moment
「マイクロインタラクションをブランドの一部にまで昇華させたもの」。Facebook の Like、Apple の Slide to Unlock、Pull-to-Refresh の引っ張り。プロダクトに最低ひとつあるべき、記憶に残る瞬間。
R · 30 MATERIAL DESIGN

Choreography(振付)

Sequenced motion telling a story
複数要素のアニメーションを「同時」ではなく「振付」する。画面遷移時に、ヘッダー → ボディ → アクションの順に時差で現れる。これだけで、画面が「組まれている」感覚が出る。Stagger Animation。
R · 31 UX ENGINEERING

Skeleton & Optimistic UI

Faster than fast: perceived performance
読み込み中に "Spinner" は旧世代。プロは Skeleton Screen で完成形の輪郭を見せる(Facebook, LinkedIn)、Optimistic UI で結果を先に表示し裏で送信する(Twitter, Slack)。体感速度が桁違いに速くなる。
🔗 フロー間の本質的接続
  • 動のクラフト ⇆ ブランドEasing Curve は Aaker Personality を時間軸で表現する。Sincerity は ease-out 多用、Excitement は spring 多用。
  • Saffer 4要素 ⇆ Hooked 4段階Trigger・Rules・Feedback・Loops と Trigger・Action・Reward・Investment。同型構造。
🩺 よくある誤診

「アニメーションを派手にしたい」と相談される時、本当に欲しいのは派手さではなく "応答性の人格"。Easing と Duration を変えるだけで品格は変わる。

⚡ 本フローの KO 技

「ボタンが押された瞬間、Disabled になるまでの何 ms に、何が起きていますか?」── これに即答できるチームは、もう素人ではない。

💬
FLOW · VII · VERBAL

言葉 どう動かすか、なぜ刺さるか?

象限:ART 出力:INFORMATION 罠:才能と思う

言葉の力は才能ではなく、技法である。LP・広告・ヒーローコピー、その精度は60年前に Eugene Schwartz が体系化し、いまも変わっていない。

プロは「読者がいま何を知っているか(Awareness)」を5段階で診て、段階に合わせた語彙を選ぶ。素人は自分が言いたいことを書く。だから刺さらない。

言葉は、戦略とジョブを、人を動かすエネルギーに変換する最後の機関である。

FW · 19 E. Schwartz · 1966

Awareness の5段階

Breakthrough Advertising
広告コピーすべての根本原理。読み手の認知段階に応じて、語彙・訴求・CTA を完全に切り替える。
  • Unaware ── 物語で問題を発見させる
  • Problem Aware ── 解決策の存在を示唆
  • Solution Aware ── 解の中での自社優位
  • Product Aware ── 機能・証拠・価格
  • Most Aware ── オファーと急かし
❓探求の問い
  1. この LP / 広告は、どの段階の読者を想定しているか
  2. 段階に合った語彙と訴求になっているか
  3. "Most Aware" 向けの言葉で "Unaware" を狙っていないか
⚠️
よくある罠 "刺さらない" 原因の8割は、Awareness 段階の取り違え。Unaware の読者に Product Aware 向けのコピーを当ててもスルーされる。
FW · 20 Verbal Identity · Mailchimp

Voice 3層 + Tone 4軸

Narrative · Tone · Lexicon × 4 sliders
ブランドの言葉を3階層×4軸で握る。Narrative(世界観)→ Tone(態度)→ Lexicon(語彙)。
  • Narrative ── 10,000ft の世界観
  • Tone ── 1,000ft の態度
  • Lexicon ── ground level の語彙
  • 4軸:Funny↔Serious / Formal↔Casual / etc.
  • 場面で軸の値が動く
❓探求の問い
  1. 3層は整合しているか(Narrative と Slack 文章は同人格か)
  2. 4軸のスコアは具体的に握られているか
  3. 場面ごとのトーンの揺れは設計されているか
⚠️
よくある罠 「フレンドリー」「親しみやすい」のような形容詞だけ。これは握っていないのと同じ。
FW · 21 Copywriting Canon

コピーフォーミュラ群

AIDA · PAS · BAB · FAB · PASTOR · 4U's
場面ごとに最適なコピー構造がある。"勘" で書くのではなく、構造を選ぶ。
  • AIDA(Attention/Interest/Desire/Action) ── LP・広告
  • PAS(Problem/Agitate/Solve) ── ペイン中心
  • BAB(Before/After/Bridge) ── 変容の物語
  • FAB(Features/Advantages/Benefits) ── 機能訴求
  • 4U's(Urgent/Unique/Useful/Ultra-specific) ── ヘッドライン
❓探求の問い
  1. このコピーはどの構造を採用しているか(無構造ではないか)
  2. Awareness 段階に合った構造か
  3. 「機能」を語る場面で「便益」を語っていないか、その逆も
⚠️
よくある罠 機能を並べて「これがいい」と言うだけの LP。FAB の "B" (Benefits) に翻訳されていない。
R · 32 DAVID OGILVY

ヘッドラインの法則

"5x more people read the headline"
広告界の伝説 Ogilvy:「ヘッドラインを書いた瞬間、80セントは使ったことになる」(全予算の8割)。LP でも First View で読まれるかが全てを決める。具体的数字、固有名詞、ベネフィットを含めるのが鉄則。
R · 33 JOANNA WIEBE · COPYHACKERS

Voice of Customer マイニング

Don't write copy. Steal it.
最強のコピーは、書くものではなく "集めるもの"。Amazon・App Store・SNS のレビュー、サポートチャット履歴から、顧客が実際に使った言葉を抜き出して構成する。コンバージョン格差は時に2-3倍。
R · 34 DONALD MILLER · STORYBRAND

ヒーローズ・ジャーニーの応用

Customer is the hero, you are the guide
ブランドが主人公の物語は失敗する。顧客が主人公、ブランドはガイド役(Yoda ポジション)。Apple "Think Different" は顧客を主役にしている。Joseph Campbell の神話学の応用。
R · 35 KRISTINA HALVORSON

Content Strategy の規律

Content Strategy for the Web
コピーの上流。「何を、なぜ、誰に、いつ語るか」を体系化する。Editorial Calendar、Content Audit、Voice Charter、Localization Strategy。コピーが上手くても戦略がないと、組織のコンテンツは矛盾し続ける。
R · 36 ROBERT McKEE · STORY SEMINAR

STORY 構造とギャップ理論

"Story = the gap between expectation and reality"
McKee の脚本論。物語は「期待と現実のギャップ」から生まれる。ピッチ、ヒーローコピー、プレゼン、すべてに使える。"Before(期待) → 衝突(ギャップ) → After(再構成)" の三幕構造。BAB(Before/After/Bridge)はこれの単純化版。Pixar も McKee の弟子筋から学んでいる。
🔗 フロー間の本質的接続
  • 言葉 → 戦略Aspirational North Star は Voice 3層の Narrative そのもの。
  • 言葉 ⇆ 人と需要Schwartz Awareness Stages は、JTBD のジョブの認知段階を5段に切ったもの。
  • BAB ⇆ STORYMcKee のギャップ理論を簡略化したのが BAB。「変容の物語」を構造化する技。
  • 言葉 → 流通Cold Outreach や LP の本体は、結局 Schwartz と Voice 3層の応用。
🩺 よくある誤診

「コピーを上手くしたい」と相談される時、本当の問題は (1) Awareness 段階の取り違え、(2) Voice の未定義、(3) 顧客の言葉ではなく自分の言葉、のいずれか。書く前にこの3点を直すと、コピーは別物になる。

⚡ 本フローの KO 技

"Read it aloud(声に出して読め)"。Schwartz も Mailchimp も Wolff Olins も全員これを言っている。書いた言葉を声に出した瞬間、ほとんどの違和感は露呈する。

📡
FLOW · VIII · DISTRIBUTION

流通 どう届け、どう続けるか?

象限:ENGINEERING 出力:UTILITY 罠:プロダクト至上主義

いいプロダクトさえあれば広まる、というのは美しい幻想である。価値の生産(I-VII)と、価値の伝達(VIII)は対等であって、上下ではない。

つくる側が届ける側を見下した瞬間、プロダクトは"作品"になり、誰にも届かない。逆に、つくらず届けることだけ磨いた者は、空虚な言葉の商人になる。

プロは「つくり、届ける」を一つの動作として捉える。価格・営業・チャネル・成長 ── これらは事業の代謝を司る、れっきとした臓器である。

FW · 22 G. Weinberg · Traction

Bullseye Framework

19 channels · Test cheap, then double down
獲得チャネルを19種類に分類し、外周→中盤→内周(Bullseye)へ絞り込む。"自社に最適なチャネルは2-3個しかない" という前提に立つ。
  • 19の候補チャネル(SEO, PR, SEM, Cold Email, Sales, Trade Show, Speaking など)
  • Outer:全候補をブレスト
  • Middle:有望3-5個を低予算で実験
  • Inner:勝ったチャネルにリソース集中
  • "全部試す" は失敗、"絞る前に決める" も失敗
❓探求の問い
  1. 19のうち、まだ試していないチャネルはどれか
  2. いまの主要チャネルは、本当に Bullseye か(惰性ではないか)
  3. 各チャネルの CAC と LTV は計測できているか
⚠️
よくある罠 「SNS で広告しよう」と一つに決め打ち。本来は5つを並列で実験して比較する。最初の直感は大抵間違っている。
FW · 23 Hermann Simon

価格戦略の三軸

Cost-based · Competition-based · Value-based
価格は心理学であって会計ではない。原価から積み上げるな、知覚価値から逆算しろ。Hermann Simon は世界最高の価格理論家。
  • Cost-based ── 原価+マージン(最も弱い)
  • Competition-based ── 市場相場(中庸)
  • Value-based ── 顧客が得る価値の何割か(最強)
  • Anchor pricing ── 高い参照価格を最初に見せる
  • Three-tier(松竹梅) ── 真ん中が選ばれる
❓探求の問い
  1. 顧客が得る価値を、金額で言えるか
  2. その価値の10〜30%を、価格として請求しているか
  3. 価格は事業のシグナル(=ブランド)になっているか
⚠️
よくある罠 安く設定すれば売れると思う。実際は「安すぎて信用できない」になる。価値ベースで握ると、価格は事業の信頼になる。
FW · 24 a16z · Reforge

GTM 戦略の選択

PLG · Sales-led · Hybrid · Land & Expand
プロダクトの性質と顧客サイズによって、最適な GTM は異なる。正解は一つではないが、自分のゲームに合わない GTM を選ぶと致命傷。
  • Product-Led Growth(PLG) ── Slack, Notion, Figma
  • Sales-Led ── Salesforce, Workday(エンタープライズ)
  • Hybrid ── PLG で個人 → セールスで企業展開
  • Land & Expand ── 一部署で導入し横展開
  • Bottom-up vs Top-down
❓探求の問い
  1. 顧客の意思決定者は、ユーザー本人か、上司か
  2. ACV(年間契約額)は何ドル?それが GTM を決める
  3. $1k 未満は PLG、$10k+ は Sales、その間は Hybrid
⚠️
よくある罠 SaaS なら全部 PLG だと思う。しかし高単価エンタープライズには Sales が必須。プロダクトの単価で GTM が決まる。
R · 37 PLAY BIGGER · AL RAMADAN

Category Design

"Category King wins ~76% of category economics"
シリコンバレーの最重要戦略。競合と戦うな、新しいカテゴリを作って王になれ。Salesforce は CRM ではなく "No Software" を、Tesla は EV ではなく "Sustainable Transport" を発明した。Play Bigger 三人組の研究では、新カテゴリを作った企業がそのカテゴリの経済価値の76%を獲得する。
R · 38 JUSTIN WELSH · SAM PARR

Cold Outreach の現代手法

Specificity over volume
"100通送って3通返ってくる" より "10通送って5通返ってくる"。テンプレ営業は死んだ。Personalization at scale ── LinkedIn 投稿への具体的言及、相手の事業課題への観察、Loom 動画の活用。Volume ではなく Signal。
R · 39 GEOFFREY MOORE

Bowling Pin Strategy

Crossing the Chasm の戦術版
最初の一本(ニッチセグメント)を倒すと、隣のピンが連鎖で倒れる。Facebook はハーバードから始め、Tesla はロードスター(超富裕層)から始めた。広く狙うと届かない、最初の一本を絞るほど連鎖が始まる。
R · 40 VAN WESTENDORP

Price Sensitivity Meter

4 questions, 1 chart
価格の最適点を顧客に直接聞く科学的手法。「いくらなら高すぎる/安すぎる/お得/普通」の4問を聞き、グラフ上の交点が "心理的な許容範囲"。新規プロダクトの初期価格設定で迷ったら、これ。
R · 41 SLACK · NOTION · FIGMA

Land & Expand の実装

Bottoms-up SaaS playbook
一人のユーザーが社内で布教する設計。無料で個人利用 → 同僚招待で価値増 → 部署全体導入 → 経営判断で全社契約。導入の意思決定者を、購買決定者から切り離す戦略。Slack はこれで企業向け売上を爆発させた。
R · 42 RAND FISHKIN · 1ST PRINCIPLES

Audience-First Marketing

Build the audience before the product
MOZ 創業者が辿り着いた、現代の真理。プロダクトを作る前に、特定セグメントの聴衆(ニュースレター読者、SNSフォロワー、コミュニティ)を築く。Substack 文化の本質。Cold Reach から Warm Reach への構造的優位。
R · 43 LENNY RACHITSKY · REFORGE

Retention の階層

Retention > Activation > Acquisition
現代成長戦略の最重要発見:Retention(継続率)が悪いプロダクトは、いくら新規獲得を増やしても穴の空いたバケツ。Day 1 / 7 / 30 / 90 のリテンションカーブを描き、フラットになる線(コア顧客の存在)が見えるかが PMF の客観基準。
🔗 フロー間の本質的接続
  • 流通 → 戦略NSM(Flow I)を増やす実装が、結局 Flow VIII。NSM なき流通は方向不明。
  • 流通 ⇆ 言葉Cold Outreach・LP・営業ピッチ、すべて Flow VII の Schwartz と Voice の応用。
  • 流通 → 人と需要Cialdini の6原理(Flow II)が、説得型 GTM の理論的源泉。
  • Category Design ⇆ Only-not-BestCollins(Flow IV)の「Onlyになれ」は、Category Design の言い換え。同じ思想。
  • Retention ⇆ HookedFlow II の Hooked Model が、Flow VIII の Retention 戦術の理論基盤。
🩺 よくある誤診

「マーケティングが弱い」と相談される時、原因はマーケティングではないことが多い。Retention が悪い(Flow II/VIII)か、PMF 未達(Flow I)か、Awareness 段階を取り違えている(Flow VII)。流通の前に上流に戻る。

⚡ 本フローの KO 技

「あなたの NSM は何で、Day 30 のリテンションは何%、CAC と LTV はそれぞれいくらですか?」── この4つの数字が即答できるチームは、流通を理解している。一つでも答えられないなら、まずそこから。

· · · · ·

八つの臓器を貫く、五つの原則

フロー I から VIII までを横断して現れる、根本的な規則。これらは特定の臓器に属さず、円環全体を貫いて作用する。

PRINCIPLE · I
🌀

収束する前に発散する

すべての層に問題空間と解空間がある。問題を広げ、観察し、再定義するまでは、解に収束してはならない。

PRINCIPLE · II
🌱

パーツより先に原則を

戦略・ブランド・クラフト、それぞれに根底のアイデアがある。そこから演繹できない判断 ── 反射や流行で決めたもの ── は構造的に弱い。

PRINCIPLE · III
🔢

感性は構造に翻訳できる

「なんとなく良い」ものには、必ず再現可能な規則が隠れている。8の倍数、Modular Scale、Aaker 5次元、Schwartz 5段階。プロは規則を学んでから感性を発揮する。

PRINCIPLE · IV
🪞

同じことを違う名前で語る

JTBD = Hooked = Fogg、Aspirational North Star = Narrative、Atomic Atoms = Design Tokens。語彙は違っても本質は同じ。フレームワーク疲れに惑わされない。

PRINCIPLE · V
⚖️

つくると届けるは対等

つくる側は届ける側を見下してはならず、届ける側もつくる側を空虚に磨いてはならない。両者は同じ円環の対極であり、補完し合う臓器である。

横断レイヤー ── 倫理・包摂・持続可能性

Ethics, Inclusion, Sustainability — Not optional in 2026. これら五つは、フローを問わずすべての判断の前提となる。

♿
E · 01

WCAG 2.2

Perceivable · Operable · Understandable · Robust

4原則、コントラスト比4.5:1以上、キーボード操作完備、スクリーンリーダー対応。EU の EAA 法施行(2025年)以降、義務化が進む。

🤝
E · 02

Inclusive Design

Microsoft · Helen Hamlyn at RCA

"Solve for one, extend to many"。極端な状況の人(片手しか使えない、母語が違う、騒音下)向けに設計すると、結果として誰にとっても使いやすくなる。

🚫
E · 03

Dark Patterns 回避

Harry Brignull · deceptive.design

Roach Motel(入会簡単・退会困難)、Confirmshaming(罪悪感CTA)、Hidden Costs。Cialdini の6原理を悪用した型。EU/US で法規制対象に。

🔒
E · 04

Privacy by Design

Ann Cavoukian · 7 principles

事後ではなく事前にプライバシーを織り込む。Default privacy、Full functionality、End-to-end security。GDPR 以降、世界の法的標準。

🌱
E · 05

Sustainable Web

Wholegrain Digital · Tom Greenwood

Web サイトの炭素排出量を測る(Website Carbon Calculator)。画像最適化、ダークモード、軽量フォント。デジタル製品もカーボンフットプリントを持つ。

この書の 使い方

How to use this in practice
  1. まず聴く。相談者は、あるいは自分自身は、円環のどこを指しているか。曖昧な言葉(「リブランド」「UX 改善」「LP 作りたい」「マーケが弱い」)は、たいてい層を取り違えている。
  2. 象限から始める。外環の Art / Science / Engineering / Design のどこに居るかを先に決める。診るレンズが変わる。
  3. 三角測量する。該当フローの正典3つ + 隠し技を当てる。探求の問いが本当の層を露わにする。
  4. 上流へ遡る。下流の症状が治療に抵抗するなら、原因は上流。クラフトの症状は構造の空白を、構造の症状は戦略の空白を露わにする。
  5. 同型構造を見抜く。「これは ○○ の言い換え」と気づいたら、最も明快な語彙でクライアントに語る。フレームワーク疲れを起こさせない。
  6. つくると届けるを共に問う。Flow I-VII のすべてに対して、Flow VIII でどう届けるかを並列で問う。これが PRINCIPLE V の実装。
  7. 倫理レイヤーを通す。すべての判断の最後に、E · 01-05 を当てる。これを怠ると、2026年の作り手として失格。

この書が 代替しないもの

What this is not
  1. 線形プロセスではない。I→VIII の順に進めるものではない。円環であって梯子ではない。Flow VIII から I に戻ることもある。
  2. メソッドではない。各フレームワークの実践には、それ自体の規律が要る。これは道具を吊るす作業場。
  3. 網羅していない。50超の器具は思考には足りるが、すべての専門に応えない。法務、税務、深い技術選定は別の専門書を。
  4. 中立ではない。意図的に上流側に偏っている。表層の不満のほとんどは、上流の不満が誤名された姿。
  5. 固定されない。5年後にはこの書の半分は古びる。フレームワークは更新可能、原則は普遍。
  6. 魔法ではない。これを持っていても、聴く力・問う力・観る力がなければ意味がない。器具は使い手のためにある。
  7. 「正解」を保証しない。道具は、判断を助けるが、判断を代替しない。最後に決めるのはつねに、つくり、届ける本人である。