design-process

デザインプロセス

プロジェクトが実行段階で失敗することはまれです。失敗の原因は、ブリーフィングが不明確、または不完全であることです。構造があることで、創造性を発揮する余地が生まれます。

対象範囲

次の場合にこのスキルを使用します。

• デザインプロジェクトを最初から構成するとき
• ブリーフィングを記録、検証、または完成させるとき
• ワイヤーフレームやプロトタイプを作成するとき
• ムードボードを意思決定のツールとして使用するとき
• 開発チームへの引き継ぎを準備するとき
• デザインレビューやユーザビリティテストを計画するとき

原則

1. 構造が創造性を発揮する余地を生む

体系的なプロセスによって、創造的なエネルギーが混乱の中で失われるのを防ぎます。

2. ブリーフィングが成否を大きく左右する

プロジェクトが失敗する最も一般的な原因は、ブリーフィングが不明確であることです。

3. 発散してから収束する

すべてのフェーズには、選択肢を広げる探索の段階と、選択肢を評価して絞り込む段階があります。

4. ユーザー中心であることは譲れない

クライアントを満足させることだけを重視し、ユーザーを無視するデザインは失敗です。

5. 慣例より差別化を優先する

ユーザーのためになる場合には、あえて慣例を破る勇気が良いデザインには必要です。

6. 完璧さより反復を重視する

孤立して長時間磨き込むより、早い段階で見せてフィードバックを集めるほうが効果的です。

7. ドキュメント作成を後回しにしない

ドキュメントに記録されていないデザイン上の決定は、実装時に失われます。

ルール

必ず行う：ブリーフィングを体系的に記録し、検証する

完全なブリーフィングには、次の内容が含まれます。

• 現状： すでにあるものは何ですか？ なぜ不十分になったのですか？
• 目標： デザインで具体的に何を実現すべきですか？（測定可能な成果として記述します）
• 対象ユーザー： ユーザーは誰ですか？（カスタマージャーニーを参照します）
• 制約： 予算、スケジュール、技術要件、コーポレートデザインのガイドライン。
• 競合： 競合他社は何をしていますか？ 意図的に何を差別化すべきですか？
• 成功基準： 成功をどのように測定しますか？

すべてのブリーフィングを見直し、矛盾、抜け漏れ、暗黙の前提がないか確認します。

必ず行う：デザインプロセスの7つのステップに従う

1. ブリーフィングと調査 — 要件を明確にし、データを収集して、競合を分析します。
2. 戦略とコンセプト — ポジショニング、情報アーキテクチャ、コンテンツ戦略を策定します。
3. ワイヤーフレーム作成 — ビジュアルデザインを含まない構造レイアウトを作成します。階層とユーザーフローに重点を置きます。
4. ビジュアルデザイン — 色、タイポグラフィ、画像、デザイングリッドを決定します。
5. プロトタイピング — 実際のユーザーフローを再現するインタラクティブなプロトタイプを作成します。
6. レビューとテスト — ユーザビリティテスト、アクセシビリティチェック、ステークホルダーからのフィードバックを実施します。
7. 引き継ぎとドキュメント作成 — スタイルガイドと仕様書を添えて、体系的に成果物を引き渡します。

必ず行う：ムードボードを意思決定のツールとして使用する

• 視覚的に異なる方向性を少なくとも2つ作成します。
• ビジュアルデザインに進む前に、クライアントに提示します。
• ムードボードは議論の土台であり、最終成果物ではありません。

必ず行う：ビジュアルデザインの前にワイヤーフレームの承認を得る

• ワイヤーフレームによって、構造、階層、ユーザーフローが明確になります。
• ワイヤーフレームの段階で承認を得ることで、コストのかかる構造変更を防げます。
• ワイヤーフレームには意図的に色や画像を含めないようにします。

禁止：ブリーフィングからビジュアルデザインに直行する

• コンセプトの段階がないと、見た目は魅力的でも戦略的には失敗するデザインが生まれます。

禁止：孤立してデザインを完成させる

• 途中経過を早い段階から定期的に見せます。
• フィードバックを得ずに作業する時間が長くなるほど、方向を誤るリスクが高まります。

禁止：トレンドを盲目的に取り入れる

• DribbbleやBehanceのトレンドはインスピレーションであり、設計図ではありません。
• すべてのデザイン要素に、ユーザーのニーズまたはブランド戦略に基づく理由が必要です。

禁止：ドキュメントなしで引き渡す

• Figmaのリンクだけでは引き継ぎとはいえません。
• 次の項目をドキュメントに記録します：余白、インタラクションの動作、レスポンシブ時の動作、エッジケース、読み込み状態。

パターン

ダブルダイヤモンド

重要なデザインプロジェクトでは必ず使用します。ダイヤモンド1（問題を理解する）：発見してから定義します。ダイヤモンド2（解決策を開発する）：開発してから提供します。これにより、正しい問題を解決していることを確かめられます。詳細は references/double-diamond.md を参照してください。

デザインスプリント（5日間）

検証済みのソリューションをすぐに必要とする場合に適しています。月曜：理解、火曜：スケッチ、水曜：決定、木曜：プロトタイプ、金曜：テスト。成果：1週間で検証済みプロトタイプが完成します。

スタイルガイドファースト

大規模プロジェクトに適しています。まずデザインシステム（色、タイポグラフィ、余白、コンポーネント）を定義し、そこからページを組み立てます。成果：一貫性、拡張性、ページ制作の迅速化。

コンテンツファーストデザイン

常に実践します。レイアウトを作成する前に、テキストと画像のコンセプトを作成します。デザインはコンテンツに応えるものであり、その逆ではありません。

ステークホルダー調整ワークショップ

複数の意思決定者が関わる場合は、プロジェクトのキックオフ時に実施します。目標、ターゲットユーザー、期待、禁止事項について話し合う90分間のワークショップです。結果を書面に記録します。

アンチパターン

フランケンシュタインデザイン

さまざまなトレンドやステークホルダーの要望による要素を寄せ集めたデザインです。明確なコンセプトがありません。解決策： ビジュアルの方向性を一つ定め、一貫してそれに従います。

委員会によるデザイン

すべてのステークホルダーが、デザインの形成に対して同等の発言権を持ちます。結果：妥協したデザインになります。解決策： フィードバックを集めますが、決定は一人が行います。

ピクセルパーフェクトなウォーターフォール

次のページに着手する前に、各ページをピクセル単位で完璧に仕上げます。解決策： まずシステムを構築し、その後ページを組み立てます。

Lorem Ipsumデザイン

プレースホルダーテキストを使ったレイアウトです。後から実際のコンテンツに置き換えると、レイアウトが崩れます。解決策： 実際のテキスト、または現実的なテキストを使って、コンテンツファーストで進めます。

機能の肥大化

プロセスの途中で新たな要件を継続的に追加します。解決策： フェーズ1でスコープを確定します。新しい要件はバックログに追加します。

チェックリスト

• ブリーフィングが完了し、矛盾がないか確認済み
• ターゲットユーザー／ペルソナを定義済み
• 競合分析を実施済み
• 情報アーキテクチャとサイト構造を確立済み
• ムードボードの方向性を少なくとも2案提示済み
• ワイヤーフレームを作成し、承認済み
• デザインシステム（色、タイポグラフィ、余白、コンポーネント）を定義済み
• システムに基づいてビジュアルデザインを作成済み
• すべてのブレークポイントでレスポンシブの動作を定義済み
• 主要なユーザーフローのインタラクティブなプロトタイプを作成済み
• 少なくとも3人のユーザーを対象にユーザビリティテストを実施済み
• アクセシビリティチェックに合格済み
• 引き継ぎ用ドキュメントを作成済み
• スタイルガイドのドキュメントを最新の状態に更新済み

関連項目

• customer-journey — ジャーニーによって、デザインで対応すべきユーザーフローが定まります
• ai-design-workflow — AIツールがプロセスの複数のフェーズを支援します
• landing-pages — ランディングページでは、コンバージョンに重点を置きながら同じプロセスに従います
• website-audit — 監査とリニューアルでは、分析からデザインプロセスを開始します
• branding-identity — ブランド戦略がビジュアルデザインに反映されます
• webdesign-review — プロセスの最後に品質保証としてレビューを行います