テンプレートを破壊せよ
あなたは魅力的なものを作るように依頼され、今まさにドキュメント(見出し、段落、キャプション付きの図、繰り返し)を作ろうとしています。このスキルが存在するのは、その本能が非常に強力であり、あなた自身も気づかず、そしてこの種のリクエストに対してほとんどの場合間違っているからです。このスキルは、ある作者が自身のテンプレートから脱却するまでに4回のリジェクトを経た実際のセッションから抽出されたものです。以下の教訓が最終的に機能した方法です。
あなたが陥っている罠(最初にこれを読め)
テンプレート型の成果物を生み出す3つのバイアスがあり、それらは内部からはバイアスだと感じられません。
- 継承された構造は不動のように感じられる。 既存のページレイアウト、エッセイ形式、スライドデッキのグリッド——これらを物理法則のように扱っていますが、それらは単なる過去の決定に過ぎません。誰も散文のコラムを命じたわけではありません。
- 装飾は再想像と感じられる。 図にアニメーションを追加する、セクションにテーマを付ける、章を「トラック」と改名する——これらは皮膚を変える一方で、読者の体験(スクロール、段落を読む、ボックスを見る、繰り返す)は同一のままです。消費ループが変わっていなければ、あなたは何も変えていません。
- あなたは測定できる失敗に対して最適化する。 ビルドは大きな音を立てて壊れますが、凡庸さは無音です。そのため、あなたは安全で、有効で、忘れられるものへと収束します。「読者がこの部分のスクリーンショットを撮ることはないだろう」という状態をビルド失敗として扱ってください。
あなたが罠にはまっている兆候:あなたの計画は、観客が何をするかを説明する前に、セクションを説明している。
方法
1. あなたが従おうとしているテンプレートに名前を付ける
それを明示的に言いなさい:「デフォルトはセクション見出しのあるスクロール記事です」/「デフォルトは箇条書きの12枚のスライドデッキです」。使用している構造を認めなければ、それを破ることはできません。次にキルリストを書きなさい:再スタイリングではなく、削除する要素(例:「2文を超える段落はなし」「図のキャプションはなし」「セクション見出しはなし」)。キルリストが空なら、あなたは装飾をしているだけです。
偽の脱出に注意してください——それらはアニメーションするためクリエイティブに感じられますが、やはりテンプレートです:スクロールして読ませるチャプター、カウントアップ統計のあるヒーローセクション、カードグリッド、垂直タイムライン、タブ付きパネル。ベンチマーク比較では、これらはまさに有能なモデルがこのスキルなしで生成するものです。あなたの「新しい」構造がコンポーネントライブラリのホームページに表示されるなら、それは自信を持ったテンプレートです。
2. メディアのネイティブなスーパーパワーを見つける
問いかけなさい:このメディアは、テンプレートが無視している何ができるのか? ブラウザは音を出せ、クリックに応答でき、スクロール位置を知り、シミュレーションを実行できます。デッキはペーシングを制御し、表示をコントロールできます。READMEは開発者の評価の瞬間にレンダリングされます。最も強力な体験は、観客がその主題について読むのではなく、その主題を行うか感じることを可能にします:タイポグラフィについての作品は、あなたにタイプを設定させるべきです;レイテンシーについての記事は、あなたを待たせてその感覚を体験させるべきです;迷路解決プログラムについてのドキュメントは、あなたに競わせるべきです。
3. コンシート(統治する単一のメタファー)を見つけ、完全にコミットする
コンシートとは、コンテンツが属する世界であり、主題そのものから引き出されます:メイキング・オブを、あなたが歩いて通るワークショップとして語る;移行ストーリーを、引っ越しの日として語る;APIドキュメントを、レストランのメニューとして語る。コンシートを機能させるための2つのルール:
- 主題から来なければならない。 写真アプリのストーリーは暗室に属します;ランダムな「宇宙テーマ」はギミックです。メタファーがどんなトピックにも貼り付けられるなら、それは壁紙であり、コンシートではありません。
- 完全なコミットメント。 あらゆる要素をコンシートの語彙に翻訳しなさい——見出しは標識に、組織図はプロダクト自身のUIのパロディーに、トレードシークレットは引き裂かれたカードの入った金庫に、FAQは苦情箱になります。プレーンなセクションに後退した瞬間、魔法は解けます。中途半端なコンシートは、ないより悪く読めます。
4. 観客が何をするかを決め、時間を割り当てる
一文を書きなさい:「読者はN分間を、Xをすることで過ごす。」(例:「3分間部屋を歩き回り、2つのものを押す。」)次に、コピー予算を厳格に適用します——付箋ルール:2文より長いテキストの単位はなし、総単語数をカウントして上限を設定します。長文の散文はテンプレートが求めるものです;あらゆる場所でそれに抵抗しなさい。あなたが段落として書いていた情報は、ラベル、吹き出し、アーティファクトのキャプション、欄外注釈になります。
圧縮は事実を犠牲にしてはならない。 デザインする前に、事実マニフェストを書きなさい:ソースマテリアル内のすべての数字、名前、日付、主張を、観客が何を求めて来たかでランク付けします(リクルーターはAboutページを経歴と証明のために読みます;チームは四半期の数字と正直な失敗のために読みます——それらの事実は耐荷重であり、削除できません)。構築後、マニフェストを確認して各事実が生き残っていることを確認しなさい——単位の変更(1.9秒→1900ms)は問題ありません;省略は、どれほど小さく見えても欠陥です。
そして鏡のルール:何も発明してはならない。 作品が遊び心を持つとき、「2,191日」と表示する偽の稼働時間カウンター、でっち上げの「27層」、誰も計算を確認していない派生統計など、具体的で魅力的な詳細を偽造したいという強い誘惑があります。これらは事実として読まれ、本物のすべての事実への信頼を損なう。形式で遊びなさい(点滅する標識、眠っているロボット、引き裂かれたカード);データで遊んではなりません。もしギャグにソースにない数字が必要なら、ソースが悪いのではなく、ギャグが間違っています。創造性は形式に費やしなさい;事実はその予算ではありません。
5. 構築する前にピッチを行う
2~3の真に異なるコンセプトを生成しなさい。異なるとは、異なる消費モデルを意味します——探索 vs. スクロール vs. プレイ——同じページの3つのスキンではありません。それぞれについて:コンシート、観客が何をするか、何が削除されるか、あなたがそれを想像したことを証明する1つの生き生きとした詳細(詳細がピッチを売ります:「オフィスの植物は1週目から枯れている」)。1つを推薦しなさい。人間がいる場合は、選ばせるか統合させなさい;いない場合は、選択し、デリバラブルとともに、コンセプト名とあなたが却下した代替案を記した短いノートを添付しなさい。
6. クラフトルールで構築する
- モーションは教えるか、物理的でなければならない。 アニメーションは、事実を示すこと(本当に完全な遅延を待つプログレスバーなど)または実物のように振る舞うこと(持ち上がる付箋など)によって、その場所を獲得します。ループする装飾はノイズです。インタラクティビティも同じテスト:ボタンを押すと、シミュレーションではなく、実際の現象を引き起こさなければなりません(メディアが許す限り)。
- 制約は機能になる。 トレードシークレットを明かせない? 劇的に編集しなさい——金庫、検閲バー、引き裂かれたカード——そしてその理由を述べなさい。公開された制限は自信として読まれます;隠された制限はギャップとして読まれます。
- デザインシステムの範囲内に留まりなさい。 ホストプロジェクトのトークン、フォント、テーマを使用しなさい。テンプレートを破ることは構造的な反逆であり、視覚的な破壊行為ではありません——最もワイルドなコンセプトでも、ライトモードとダークモードでネイティブに見えるべきです。
- 必須の下限:
prefers-reduced-motionを尊重する(すべてをフリーズする)、音は厳密にオプトインにする、スクリーンリーダーが必要とするセマンティック構造と代替テキストを維持する。 - 自分の目で確認する。 すべてのビジュアルをレンダリングし、完成と呼ぶ前にそれを見なさい。レイアウトの衝突、クリップされたテキスト、間違ったコンテンツは、コンパイルされるコードに生き残ります。
フィードバックが「やっぱり同じだ」の場合
同じレベルでより強く磨こうとしてはいけません。一段階上がりなさい:
スタイリング → 構造 → 消費モデル → メディア
(色、 (順序、 (読者が何を (ページが音を出し、
フォント、 セクション、 するか:探索する、 ゲーム、
モーション) 密度) 遊ぶ、歩く、押す) コミック、部屋になる)
ほとんどの「魅力的にして」リクエストは、レベル3または4で解決されます。2回依頼されていて、まだレベル1~2にいるなら、すぐにレベル4に飛びなさい。
出荷前のセルフテスト
-
マニフェストテスト: 事実マニフェストを取り、最終作品内の各項目を1つずつ見つけなさい。欠けているものは、他に何かを磨く前に、最初に戻します。次に、作品内の具体的な情報(数字、日付、名前のある人物)でマニフェストにないものをスキャンしなさい——それぞれは削除されるか、明らかにフィクションとしてフレーム化されます。
-
教科書テスト: このビジュアルは、教科書にそのまま掲載され得るか? もしそうなら、説明はしていても、喜びは与えていません——さらに押し進めなさい。
-
トピック交換テスト: 異なる主題を当てはめてみなさい;構造は無傷で生き残るか? もしそうなら、それはコスチュームを着たテンプレートです。
-
10秒テスト: 最初の10秒で観客は何をするか? 正直な答えが「読み始める」なら、冒頭を再考しなさい。
-
再話テスト: 誰かがその作品を一文で、見知らぬ人を微笑ませるように説明できるか?(「彼女のAboutページはレシピカードで、下端からタブを引き裂けるんだよ。」)
実例(圧縮版)
デスクトップアプリのメイキングページは、この弧を描きました:v1 — 図付きのエッセイ(テンプレート)。v2 — セクションの改名、図のアニメーション化(装飾;リジェクト)。v3 — 同じエッセイにアプリの中心的な仕掛けのライブデモを追加(正しいレベルだが間違った構造;リジェクト)。v4 — ページは読者が歩いて通る1つの連続したイラスト化された部屋になり、すべての事実が彼らが見たり押したりできるオブジェクトとなり、合計約500語。承認。v2とv4の違いは努力ではなく——レベルでした。