複雑さをゼロにすることはできますか？

できません。これがこの法則の肝です。どんなシステム（例えばメール送信）にも、「宛先を入力する」「送信ボタンを押す」といった最低限必要な手順（複雑さ）があり、それを誰か（ユーザーかシステムか）が負担しなければなりません。

開発コストとのバランスは？

システム側に複雑さを引き受けさせると、開発・保守コストは上がりますが、ユーザー体験（UX）は劇的に向上します。競合との差別化を図るなら、ユーザーが楽になる方にコストをかけるべきです。

複雑さを隠しすぎるとどうなる？

ユーザーは「裏で何が起きているか」を理解できなくなり、ブラックボックス化します。すると、エラーが起きた時に対処不能になったり、コントロール感を失って不安になったりします。

KISSの原則との矛盾は？

矛盾しません。KISS（Keep It Simple, Stupid）は「設計」をシンプルにすることを目指しますが、テスラーの法則は「ユーザーの負担」を減らすことを目指します。ユーザーにとってシンプルに見せるために、裏側の設計が複雑になることは許容されます。

どこまで自動化すべき？

「ユーザーが自分でコントロールしたい部分」以外はすべて自動化すべきです。例えば、航空券予約で「日付と行き先」はユーザーが決める必要がありますが、「運賃計算」や「空席確認」はシステムがやるべきです。

テスラーの法則 (Tesler's Law)

この記事の要点（UIXHERO視点） UIXHEROでは、テスラーの法則を「複雑性の押し付け合い、システムの献身」と捉える。本記事では、どんなプロセスにも消せない「核となる複雑さ」が存在することを認め、それをユーザーに負わせるか、開発者（システム）が汗をかいて引き受けるかという、UX設計の哲学的な分水嶺を整理する。

テスラーの法則とは？

1980年代、Xerox PARCやAppleで活躍したラリー・テスラーが提唱した 「複雑性保存の法則」 です。どのようなプロセスにも、取り除くことのできない 「核となる複雑さ（Core Complexity）」 が存在します。重要なのは、 「その複雑さを誰が処理するのか？」 という点です。

UIデザインのゴールは、プログラムやデザインの工夫によって、 ユーザーの肩から複雑さを取り除き、システム側に負担させる ことです。

UXデザインでの活用事例

1. 入力自動化

悪い例 : 住所を「都道府県」「市区町村」「番地」と全て手入力させる。（複雑さはユーザー負担）
良い例 : 郵便番号を入れるだけで、住所の大半が自動入力される。（複雑さはシステム側のAPI連携が負担）

2. デフォルト値の活用

ほとんどのユーザーが選ぶ設定をあらかじめ選択状態にしておくことで、ユーザーの「選ぶ・考える」という負担を減らします。

3. 文脈の予測

ECサイトで「以前購入した商品」から「次に必要になりそうなもの（消耗品の詰め替えなど）」を提案する機能も、探索の複雑さをシステムが肩代わりしています。

実装例: 複雑さの転嫁

住所入力を例に、ユーザーが全ての責任を負うパターンと、システムが複雑さを引き受けるパターンの比較デモです。

Interactive Example (Live)

const TeslersLawDemo = () => {
  const [zip, setZip] = useState('');
  const [address, setAddress] = useState('');
  const [isAutoMode, setIsAutoMode] = useState(true);
  const [loading, setLoading] = useState(false);

  // 擬似的な住所検索API
  const fetchAddress = (inputZip) => {
    if (inputZip.length === 7) {
      setLoading(true);
      setTimeout(() => {
        setAddress('東京都渋谷区神南1-2-3 (Auto-filled)');
        setLoading(false);
      }, 500);
    }
  };

  const handleZipChange = (e) => {
    const val = e.target.value;
    setZip(val);
    if (isAutoMode) {
      fetchAddress(val);
    }
  };

  return (
    <div className="p-8 bg-muted/30 rounded-xl">
      <div className="flex justify-center mb-8">
        <label className="flex items-center cursor-pointer">
          <span className={`mr-3 text-sm font-bold ${!isAutoMode ? 'text-primary' : 'text-muted-foreground'}`}>
            ユーザー負担 (Bad UX)
          </span>
          <div className="relative">
            <input 
              type="checkbox" 
              className="sr-only" 
              checked={isAutoMode} 
              onChange={() => {
                setIsAutoMode(!isAutoMode);
                setZip(''); 
                setAddress('');
              }} 
            />
            <div className="w-14 h-8 bg-gray-300 rounded-full shadow-inner"></div>
            <div className={`absolute left-1 top-1 w-6 h-6 bg-card rounded-full shadow transition-transform duration-300 ${isAutoMode ? 'translate-x-6 bg-primary/100' : ''}`}></div>
          </div>
          <span className={`ml-3 text-sm font-bold ${isAutoMode ? 'text-primary' : 'text-muted-foreground'}`}>
            システム負担 (Good UX)
          </span>
        </label>
      </div>

      <div className="bg-card p-6 rounded-lg shadow-sm max-w-sm mx-auto border border-border">
        <h3 className="font-bold border-b pb-2 mb-4">Shipping Address</h3>
        
        <div className="space-y-4">
          <div>
            <label className="block text-xs font-bold text-muted-foreground mb-1">Postal Code</label>
            <input 
              type="text" 
              value={zip}
              onChange={handleZipChange}
              placeholder="1234567"
              className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-200 outline-none"
              maxLength={7}
            />
            {isAutoMode && <p className="text-[10px] text-muted-foreground mt-1">Typing 7 digits triggers search...</p>}
          </div>

          <div>
            <label className="block text-xs font-bold text-muted-foreground mb-1">Address</label>
            <div className={`relative ${isAutoMode ? 'bg-primary/10' : ''}`}>
              <input 
                type="text" 
                value={address}
                onChange={(e) => setAddress(e.target.value)}
                placeholder={isAutoMode ? "Auto-filling..." : "Enter full address manualy"}
                disabled={isAutoMode && loading}
                className={`w-full p-2 border rounded transition-colors ${
                  isAutoMode ? 'bg-primary/10 text-blue-800 font-medium' : 'bg-card'
                }`}
              />
              {loading && (
                <div className="absolute right-2 top-2">
                  <div className="w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
                </div>
              )}
            </div>
            {!isAutoMode && (
              <p className="text-xs text-red-400 mt-1">ユーザーは住所を全て手入力しなければなりません。</p>
            )}
           {isAutoMode && address && (
              <p className="text-xs text-green-500 mt-1">✨ システムが複雑さ（住所検索）を肩代わりしました。</p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

render(<TeslersLawDemo />);

実践ガイドライン (Practical Guidelines)

実装チェックリスト

ユーザーが何度も同じ情報を入力させられていないか？

デフォルト値は、ユーザーの8割が選ぶであろう設定になっているか？

システム側で計算・推測できることを、ユーザーに質問していないか？

倫理的配慮 (Ethical Considerations)

複雑さの軽減は素晴らしいことですが、 「過度な抽象化」 には注意が必要です。システムがブラックボックスになりすぎて、ユーザーが「何が起きているか全く理解できない」状態になると、エラーが発生した時に誰も対処できなくなります。また、自動化によってユーザーの選択権やコントロール感を奪いすぎないバランス感覚も重要です。

参考文献

Tesler, L. (1981). "The Laws of Complexity." (Origin: Xerox PARC/Apple)
Saffer, D. (2009). Designing for Interaction: Creating Innovative Applications and Devices. Peachpit Press. Amazon

ページを読み込み中...