layers-surface

/layers-surface

/layers-intro が読み込まれていることを前提とします。このスキルは手順書ではなく、手法のライブラリです。詳しくは、そちらの「これらのスキルの使い方」をご覧ください。

サーフェスレイヤーは、それより下のレイヤーで決定したすべてのことが、人が実際に触れるものになる場所です。言葉、音、ビジュアル、物理的なアフォーダンス、動き、フィードバックがこれにあたります。最もメディア固有のレイヤーですが、最初に重要となる決定は普遍的なものです。サーフェスが画面、音声インターフェース、物理デバイス、サービスのタッチポイントのいずれであっても変わりません。

サーフェスの問題は、多くの場合、より深い問題の兆候です。ここでの中心的な規律は、サーフェスで修正できる問題と、下位レイヤーを見直す必要がある問題を見分けることです。

---

このレイヤーで決定すること

• サーフェスが、概念モデルの用語とオブジェクトを尊重しているか
• ブレッドボードのアフォーダンスがすべて存在するか。また、モデルに裏付けられていないサーフェス要素がないか
• 感情的な表現が、ユーザーの行っている作業に合っているか
• 何が起きたのか、何が進行中なのか、何がうまくいかなかったのかを、ユーザーが把握できるか
• 何が最も目立つか、また、それが目立つべきものか
• 必要とするユーザーが、すべての要素を利用できるか

---

規律 — サーフェスの誠実さを保つために

• サーフェスでの修正か、より深いレイヤーの問題か。 最も重要な判断です。コピーやレイアウトで修正すべきことなのか、それとも概念モデルやインタラクションフローに根本原因がある兆候なのかを見極めます。用語の誤りは、書き直せば済むこともあれば、用語がモデル内で決まっていないことが原因の場合もあります。症状を取り繕うのではなく、より深い問題は該当するスキルに戻します。
• 用語がユビキタス言語と一致していること。 直接的な違反（モデル用語が一貫せずに使われている）、未登録の用語（モデルにないサーフェス上の言葉。モデルに追加するか、ノイズとして削除する）、トーンの不一致を指摘します。
• オブジェクトの一貫性。 シェイプシフター（コンテキストによって大きく異なる形で現れる同じオブジェクト）や、マスクされたオブジェクト（ユーザーがオブジェクトの種類を認識できない形式）がないこと。
• 両方向の完全性。 ブレッドボードのアフォーダンスがすべて存在すること。モデルにもフローにも裏付けられていないサーフェス要素がないこと（こうした要素は、すり抜けたインタラクション上の決定です。/layers-interaction-flow に戻します）。
• エラーは診断し、説明し、復旧を可能にすること。 「問題が発生しました」では、3つすべてを満たせません。この3つをすべて行わないエラー状態を、漏れなく指摘します。
• 目立ちやすさが重要度を反映していること。 フロー上、ユーザーに気づいてほしいものが目立ち、目立つべきでないものが目立っていないこと。
• アクセシビリティは意識して決定し、成り行き任せにしないこと。
• 感情的な表現が、ユーザーニーズにおける感情面と社会面の役割に合っていること。 製品のメリットをユーザーのメリットとして言い換えただけのものではないこと。

---

テクニック

ここでは、既存のサーフェスを下位レイヤーに照らして監査する作業と、未決定のサーフェスに関する判断を進める作業の2種類を行います。状況に応じて使い分けてください。

テクニック	用途
用語チェック	共通言語のリストを使い、すべてのラベル、見出し、ボタン、エラー、通知、ヘルプ文言を照合します。
オブジェクトの一貫性チェック	各モデルオブジェクトについて、どこに、どのような形で現れるかを確認します。形を変えるオブジェクトや、別の姿に隠れたオブジェクトを見つけます。
完全性チェック	ブレッドボードとサーフェスを双方向に照らし合わせ、不足しているアフォーダンスと、背後にモデルがないサーフェスを見つけます。
感情的なトーンのチェック	感情面・社会面のジョブに立ち返り、トーン、見せ方、強調のずれを見つけます。
フィードバックとエラーの一覧化	各アクションと状態遷移について、成功したか、進行中か、失敗したかをユーザーがどう把握できるか、また次に何をすべきかを確認します。
階層のレビュー	重要な場所ごとに、ユーザーが何に気づき、何をすべきか、サーフェス上でそれが最も目立つ形になっているかを確認します。伝え方を決める前に、何を最優先にするかを決めます。
アクセシビリティの確認	メディアごとに確認します。画面（コントラスト、サイズ、タッチターゲット、キーボード、スクリーンリーダー用ラベル、フォーカス）、音声（すべての情報を音声で伝えること、視覚情報がなくても復帰できること）、物理的な環境（手の届きやすさ、触覚による識別、照明、細かい手指の動きを必要としないこと）。
一貫性の確認	似たものは似たように、異なるものは異なるように扱い、メディアの慣習を尊重するか、意図的に破るようにします。
制作（実際のメディア、モックアップ、スタイルタイル、プロトタイプ、デザインシステム、コピー優先）	監査ではなくサーフェスを制作するときに使います。実際のインタラクションのフィードバックにはコード、レイアウトや階層にはモックアップ、初期のトーンにはスタイルタイル、タイミングや動きにはプロトタイプを使います。既存のデザインシステムを拡張し（矛盾させず）、言語が主な素材である場合は、まずコピーを書きます。

---

デザイナーとの作業

メディアと、下位レイヤーにあるものを確認します。概念モデル（オブジェクトと共通言語）、ブレッドボード、感情面・社会面のジョブを含むジョブストーリーを確認してください。サーフェスがすでにある場合は監査し、ない場合は未決定の内容を検討します。

現在の懸案に合ったテクニックを提案します。用語に違和感があるなら用語チェック、ユーザーが何が起きたかわからないならフィードバックの一覧化、デフォルト任せになっているならアクセシビリティの確認を行います。10項目すべてを実施する必要はありません。

残すのは要点だけにします。監査結果（それぞれにサーフェスの修正か、より深いレイヤーの問題かをタグ付け）、未決定のサーフェスに関する判断事項（選択肢と制約を添えてグループ化し、優先順位を付ける）、先に解決すべきレイヤー横断の問題、そして改訂で失われないよう、すでにうまく機能している点です。

サーフェスは、下位レイヤーですでに決まっていることを尊重するか、損なうかのどちらかです。概念モデルやインタラクション構造に大きな変更を加えた後は、改めて確認してください。