使い方ガイドへスキップ
Interfaces That Feel作者 owl-listener

Interfaces That Feel スキル。

インターフェースの文言と動きを、ユーザーの感情状態に結び付けます。

  • インタラクションデザイン
  • 感情状態
ソースレビュー · interfaces-that-feelSKILL.md
タスク インターフェースの文言と動きを、ユーザーの感情状態に結び付けます。 成果物 選んだ画面の瞬間にユーザーが感じそうな状態の説明。 始める前に 文言とタイミングを含む、実際の読み込み・エラー・完了状態を提供してください。受け手の調査があれば加え、推測した感情と観察されたユーザー行動を分けられるようにします。
記事用の要約 · ソース確認日 2026-11-02 · 生成された例ではありません

01 機能概要

インターフェースの文言と動きを、ユーザーの感情状態に結び付けます

感情に応じたタイミング、エラー復帰、フィードバックを確認し、ユーザーの状態を具体的な文言と動きの判断に変えます。

ソースに基づくワークフロー実行ベンチマークではありません

作業の進め方

Interfaces That Feel は、使う人の状態から製品内の一場面を検討します。結果を待つとき、エラーから立て直すとき、タスクを終えたときでは必要な合図が異なります。このスキルは各場面を、文言、タイミング、イージング、操作動作の具体的な選択に対応付けます。

ソースの変換手順は、感じている状態を名付け、物理的な類推を探し、行動的な特性を抽出して画面へ適用するものです。動きが存在する理由や、動きを減らした設定でも体験が成立するかも確認します。正しく動くものの伝わり方が弱い画面への、対象を絞った改善に適しています。

想定される成果物

  • 選んだ画面の瞬間にユーザーが感じそうな状態の説明。
  • その瞬間に結び付けた具体的な文言とタイミングの提案。
  • 感情的な合図と動きを減らした場合の、変更前後の比較レビュー。
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    対象の瞬間を特定する

    読み込み中、空の状態、エラー、成功、オンボーディングのいずれかを選びます。ユーザーが経験していそうなことを記述し、その評価を、直接観察して得たユーザーに関する根拠と区別します。

  2. 02
    感覚を動作に変換する

    抵抗や落ち着きなど、有用な物理的類推を探します。関連する特性を抜き出し、イージング、時間、間隔、文言の判断につなげます。

  3. 03
    画面の合図を修正する

    エラーからの復帰を明確にし、ユーザーを責めない表現にします。成功の応答は適度に、読み込み文言は目的のある語調にします。時間を埋めるだけの動きは除きます。

  4. 04
    結果を確認する

    動きを減らす設定も含め、変更前後の体験を比較します。色と画像を除いても感情的な合図が残るかを問い直します。

02 利用場面

使いどころ

文言とタイミングを含む、実際の読み込み・エラー・完了状態を提供してください。受け手の調査があれば加え、推測した感情と観察されたユーザー行動を分けられるようにします。

向いているケース

  • 反応が冷たい状態技術的には正しい画面でも、待機や復帰中のユーザーへの応答が乏しい場合。
  • 文言と動きの調整エラー、成功、導入時の場面を理由のある形で整えたいチーム向け。

確認すべき制限

  • 解釈には背景が必要感情の読み取りは設計上の評価であり、すべてのユーザーがそう感じる証拠ではありません。
  • 動きを抑えるソースは追加する前に動きを減らし、動きを減らす設定でテストすることを推奨します。
  • 指針であり成果の証明ではないユーザー証拠がなければ、タイミングの提案だけで満足度向上を示すことはできません。

用意する入力

  • 対象状態確認したい読み込み、エラー、成功などの瞬間を提供します。
  • ユーザーの背景タスク、その重要性、既知の受け手に関する調査を説明します。
  • 現状の実装現在の文言、タイミング、動きの振る舞いを提供します。

03 重要な判断

重要な判断

  1. 理由のあるタイミング

    時間とイージングを、意図する行動的な合図に結び付けます。

  2. 役立つ復帰文言

    エラーメッセージは責任を認め、具体的な次の行動を示せます。

  3. 控えめな動き

    アニメーションを残す前に、その役割を確認します。

04 依頼例

目的を絞った依頼文を試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

ソースとセットアップを確認する

確認したい読み込み、エラー、成功などの瞬間を提供します。

アップストリームのソースファイル
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/interfaces-that-feel/SKILL.md

以下の参照先から、提供元の手順を確認できます。利用前にリポジトリのセットアップ要件を確認してください。これはインストールコマンドではありません。

一つの成果物から始める

スキルを実行する前に、このブリーフの範囲、素材、制約を調整してください。

サンプルブリーフ
interfaces-that-feel を使い、待機・失敗・完了を含むレポート生成フローをレビューしてください。既存文言を読み、実際のタイミングを調べてください。まずユーザーが置かれそうな感情的背景を述べ、調査の裏付けがない仮定を明示してください。簡潔な文言と少数の動きの変更を提案し、それぞれ何を伝えるか説明してください。タスクの速さと明快さは維持してください。動きを減らす設定で体験を比較し、アニメーションなしでも伝わるべき合図を特定してください。提案はこの3状態に限定してください。

結果を確認する

実際の出力を、次の観察可能な基準に照らして確認してください。

  • 各文言・動きの提案に、選んだ状態での目的がある。
  • 仮定した感情と実際の調査結果が分かれている。
  • 動きを減らしても必要なフィードバックとタスクの明快さが残る。

OpenDesignは、コーディングエージェント向けのローカルデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、下記にリンクされた固定のソースリビジョンについて説明しています。アップストリームの挙動や要件は変更される可能性があります。

ソースの所有者
owl-listener
スキルファイル
SKILL.md
ライセンス
MIT
確認したスナップショット
2026-11-02 · 9a6930cf84a8
編集部によるソース要約
インターフェースの文言と動きを、ユーザーの感情状態に結び付けます。

リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付時点の人気の指標であり、スキルの利用状況や品質スコアではありません。

06 開始前の質問

始める前の質問

単にアニメーションを追加するスキルですか?

いいえ。ソースは先に動きを減らし、残す各アニメーションに理由を持たせるよう求めます。

画面の何を変更できますか?

ソースは文言の語調、タイミング、イージング、色温度、間隔、アニメーション時間を扱います。

動きを減らす設定も確認しますか?

はい。その設定でのテストは推奨される実践の一部です。

OpenDesign

依頼内容とデザイン作業を一つの場所に。

ブリーフ、ソース資料、デザイン作業をローカルワークスペースにまとめて管理できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/interfaces-that-feel/SKILL.md