---
id: productivity-things-representative-ja
service: Things
website: https://culturedcode.com/things/
category: productivity
prompt: representative
language: ja
generated: 2026-07-18
---

# Things

> **統合制作プロンプト** · 生産性 · 製品、UX、UI、フロントエンド、SEO/AEO、性能、QAをつなぐ統合制作仕様。

## このプロンプトを使う場面

**時間を計画し集中作業を完了する**が重要な製品を企画・設計・開発するときに使います。[Things](https://culturedcode.com/things/) の公開情報設計は参考にできますが、自分の課題に合わせて再設計し、ロゴ、文章、画像、固有素材、ピクセル単位のレイアウトは複製しません。

- 参考サービス：Things
- 主要オブジェクト：タスク・予定・ルーティン
- 主要リスク：優先順位の明確さと通知疲れ
- 画面の出発点：集中計画ボード · 抑制されたミニマル · 情報密度 中 · 今日の優先事項 -> 時間と予定 -> タスクリスト -> 集中または完了 · #111111 · Things

## 公開インターフェースのデザイン分析

- 分析の基準: 公開トップ画面と代表的なタスクフローに繰り返し現れる視覚・構造パターンです。サービスは更新されるため、最終的には実サイトのキャプチャで確認します。
- 画面アーキタイプ: 集中計画ボード
- トーン＆マナー: 抑制されたミニマル
- 情報密度: 中
- カラー戦略: ニュートラルな表面上の抑制されたブランドアクセント (#111111)
- ナビゲーション構造: サイドバー中心のコンテキスト切替
- 構造の順序: 今日の優先事項 -> 時間と予定 -> タスクリスト -> 集中または完了
- 再利用するパターン: 今日の優先事項、予定、タスクリスト、集中状態、クイック操作
- 独立して適用するルール: 順序と意思決定原則だけを参照し、ロゴ、文章、画像、アイコン、固有の画面構成は複製しません。

## 先に置き換えるプロジェクト情報

```yaml
製品名: "[自分の製品名]"
対象ユーザー: "[主要ユーザーと利用状況]"
解決する問題: "[ユーザーが解決したい問題]"
主要機能: "[必須の3〜5機能]"
事業目標: "[転換、活性化、継続などの指標]"
技術スタック: "[例：Next.js と Tailwind CSS]"
ブランドトーン: "[例：明確、落ち着き、信頼感]"
```

## そのまま使えるプロンプト

```text
あなたはシニアプロダクトデザイナー、UXストラテジスト、フロントエンドアーキテクト、テクニカルSEO責任者です。

[自分の製品名]について実装可能な製品仕様を作り、必要に応じて本番品質のコードまで生成してください。Things（https://culturedcode.com/things/）は「時間を計画し集中作業を完了する」を扱う情報設計と意思決定フローだけを参考にし、ブランド、ロゴ、固有文言、画像、著作物、正確な画面配置は複製しないでください。

プロジェクト条件：
- 対象ユーザー：[主要ユーザーと利用状況]
- 解決する問題：[ユーザーの問題]
- 主要機能：[必須の3〜5機能]
- 事業目標：[転換、活性化、継続など]
- 技術スタック：[フレームワーク、スタイル、データ、配信]
- ブランドトーン：[言葉と視覚の特徴]

必須基準：
1. タスク・予定・ルーティンの関係と状態を一目で理解できるようにする。
2. 優先順位の明確さと通知疲れについて予防、説明、回復経路を用意する。
3. loading、empty、error、success、disabled、権限なし、partial-data 状態を定義する。
4. 360px、768px、1280pxでコンテンツ優先順位とナビゲーションを維持する。
5. セマンティックHTML、論理的なキーボード順、見えるフォーカス、44pxタッチ領域、WCAG AAコントラストを守る。
6. 画面構造、コンポーネント、データ、操作、マイクロコピー、例外、検証可能な受入条件を明示する。
7. 各インデックス対象ページに固有title、meta description、canonical、見出し階層、クロール可能な内部リンクを設計する。
8. 重要な質問には見える本文で直接答え、WebSite、WebPage、BreadcrumbList、CreativeWork の構造化データと一致させる。
9. メイン画像、フォント、JavaScript、Core Web Vitals、低速回線の性能予算を設定する。
10. 抽象的な助言ではなく、実装・テスト可能な結果を返す。

出力順：
- 目標、仮定、成功指標
- ユーザーフローと情報設計
- 画面・コンポーネント仕様
- データモデル、状態、エラー回復
- レスポンシブとアクセシビリティ
- SEO、AEO、構造化データ計画
- 実装計画またはコード
- 検証可能な完了チェック
```

## デザイントークンの出発点

```css
:root {
  --color-primary: #111111;
  --color-ink: #F8FAFC;
  --color-canvas: #090A0B;
  --color-surface: #141619;
  --color-tint: #11111155;
  --color-danger: #FB7185;
  --radius-card: 8px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
}
```

これは出発点であり、Thingsを複製する指定ではありません。自分のユーザーに対してコントラスト、階層、密度、ブランドの独自性を検証してください。

## 期待する成果物

- ユーザー成果と測定可能な指標に結びつく製品要件
- 情報設計と重要なエンドツーエンドフロー
- データ、状態、操作、アクセシビリティを含むコンポーネント契約
- モバイル、タブレット、デスクトップの適応ルール
- SEO/AEOコンテンツモデル、構造化データ、内部リンク計画
- 性能予算、分析イベント、テスト、リリース受入条件

## 続けて使う改善プロンプト

1. 「最重要フローについて、同じデータモデルで通常、読込中、空、部分データ、入力エラー、サーバーエラー、権限なし、成功状態を定義して。」
2. 「仕様をセマンティックで再利用可能なコンポーネントに変換し、実際の長さの日本語、360px・768px・1280px、キーボード・スクリーンリーダー動作を含めて。」
3. 「優先順位の明確さと通知疲れの観点で監査し、重大度順に根拠、修正、検証方法、完了条件を示して。」
4. 「Thingsのブランドや固有レイアウトに似た部分を除き、有用な情報設計の原則だけを残して。」
5. 「目的、データ要件、コンポーネントAPI、例外、アクセシビリティ、テスト、依存関係を含む開発チケットに分解して。」

## 検収チェックリスト

- [ ] Thingsは情報設計の参考に限定されている。
- [ ] 実プロジェクトのユーザー、問題、機能、指標でプレースホルダーを置換した。
- [ ] タスク・予定・ルーティンの優先順位と状態変化が明確である。
- [ ] 優先順位の明確さと通知疲れに対する信頼・回復経路がある。
- [ ] 空、遅延、部分、失敗、権限制限状態を網羅した。
- [ ] キーボード、スクリーンリーダー、200%拡大、動きの抑制、コントラストを検証できる。
- [ ] 独立した製品言語とビジュアルアイデンティティになっている。