何を作るかを明確に。
ビジネス目標、プロダクトを使う人、完了すべきタスクを検討します。次のバージョンで優先することと開発範囲を一緒に定めます。
設計。
形づくられる。
漠然とした問いから
動作するプロダクトへ。
アイデアを形にする、既存プロダクトを改善する、新しい機能を開発する。どの段階からでも、明確な計画、独自性のあるインターフェース、実際に動く実装へとつなげます。
プロダクトの構想、ビジュアルデザイン、開発を一貫して進めます。共に行う意思決定を、ユーザーが使うソフトウェアに反映します。
動きを具体的に確認。
ユーザーの利用フローを整理し、インターフェースに独自のビジュアル特性を与えます。開発前に実際の画面を確認し、プロトタイプで重要な操作を試せます。
実際に使える形へ。
合意した機能を開発し、必要なサービスと連携して、プロダクトの動作を確認します。動作するインターフェース上でも、デザインの判断を見直します。
最初の意思決定からリリースまで、またはチームが次に必要とする工程まで。進め方を見る
小さな画面。
広がる体験。
バンキングアプリを体験してください。
シナリオを選び、
実際に操作してみましょう。
バンキングアプリでは、概要の確認から意思決定、そして明確な次のステップへと進めます。プロダクトにおける一連の体験を通して、ユーザーが知るべきこと、できること、その後に起きることを設計します。
決定する前に。
必要な情報にすぐアクセスできます。選択肢を比較し、操作を確定する前に、その影響を理解できます。
操作中も。
インターフェースが応答し、進捗を表示して問題を説明し、復旧して続行するための明確な方法を提示します。
操作の後に。
結果が明確に示されます。何が変わったか、次にどこへ進むかがわかり、操作が成功したかを推測する必要はありません。
考え込む時間を減らし、
やるべきことを進める。
直感的な操作を支える設計。
視野を広げる。
次の一手を明確に。
短時間で完了するモバイルタスクとチームのワークスペースでは、情報の整理方法が異なります。
ウェブアプリやダッシュボードでは、ステータス、詳細、操作を一つの明確な構成にまとめます。チームは対応が必要な項目を確認し、関連情報を開いて、作業を進められます。
細部まで吟味。
隅々まで丁寧に。
プロダクトの個性は、細部に宿ります。読みやすさ、応答の仕方、ユーザーが前進するための支援。
明快さ
には構造がある。
概要詳細操作
情報設計によって、複雑なプロダクトをユーザーがたどれる道筋に変えます。
一人の人として。
ユーザーIDではなく。
現実のニーズ、習慣、利用状況をもとに意思決定します。
すべての要素に
一貫性を。
コンポーネント、タイポグラフィ、動作を体系化し、一貫性を保ちます。
読み、
認識し、操作する。
情報の優先順位を明確にし、大切なものを適切な位置に配置します。
「何もない」も
ひとつの状態。
今日のタスクはありません最新の状態です。
空、読み込み中、エラー、成功の状態も、体験の一部です。
仕事の進め方。
各段階で未解決の問いを、次につながる意思決定へと導きます。開発範囲を合意し、重要な決定を一緒に確認します。作業を通して新たな発見があれば、前提を見直します。
分析と調査
ビジネス、ユーザー、利用状況を調査し、プロダクトが達成すべきことを明確にします。重要な問いを洗い出し、それに答えるために必要な調査を選びます。
プロジェクトに応じて、以下を実施します。
- 事業・製品分析
- ステークホルダーへのインタビュー、目標、価値提案、制約条件、成功基準。
- ユーザー調査
- インタビューや適切なユーザー調査手法を通じて、ニーズ、習慣、タスク、利用状況を調査します。
- 競合分析とベンチマーク
- 直接的な競合や他業界の関連プロダクトについて、機能、ユーザーフロー、インタラクションのパターンを調査します。
- プロダクト監査
- 既存のユーザーフロー、利用可能な分析データとユーザーフィードバック、現行プロダクトの体験における課題を確認します。
- ビジュアル調査
- ブランドの背景、参考事例、検討に値する表現の方向性。
調査結果をプロダクト概要、優先事項、仮説にまとめ、デザインの意思決定に活用します。
構成・プロトタイピング
各ステップでユーザーに必要な情報と、途中で行う意思決定を明確にします。それをもとに、情報設計、ナビゲーション、コンテンツの優先順位、ユーザーフロー、画面プロトタイプを作成します。
プロトタイピングを通じて、主要なシナリオと重要な操作のロジックを検討します。操作を確定する直前の体験も対象です。主要なユーザーフローを確認し、適切なテストを行って詳細なデザインに入る前に疑問点を解消します。
主要なシナリオを検討した、明確なユーザーフローとプロダクトの構造的な基盤を作成します。
ビジュアルコンセプトの作成
プロダクトの見た目、印象、動作を検討します。タイポグラフィ、構成、色、インタラクション、動きを、プロダクト概要に基づくビジュアルの方向性としてまとめます。
代表的な画面と操作で方向性を提示し、その理由を説明したうえで、選ばれたコンセプトをチームとともに磨き上げます。
プロダクト全体に適用できるビジュアル言語を合意します。
インターフェース・デザインシステム
構成とビジュアルの方向性を、最終的な画面デザインにまとめます。コンセプトを完成したインターフェースへと発展させ、再利用可能なコンポーネント、レスポンシブな動作、各操作に伴う状態を設計します。
現実に即したコンテンツやデータ、さまざまな画面サイズ、空・読み込み中・エラー・成功の状態を含む重要なユーザーフローの詳細を検討します。
プロダクトの規模に合わせてコンポーネント、タイポグラフィ、動作のシステムを整え、将来の機能追加にも対応できるようにします。
開発に進められる、一貫性のあるインターフェースを完成させます。
開発・テスト
画面、操作、状態、作業開始前に定義した連携など、合意した範囲を開発します。開発期間中もデザインレビューを続け、実際のプロダクトでタイポグラフィ、レイアウト、動き、動作の意図した品質を維持します。
合意したプラットフォームやデバイスで、主要なユーザーフロー、フォーム、インターフェースの状態、アクセシビリティ、パフォーマンスをテストし、実装をデザインと照らし合わせて確認します。
合意した範囲の実装を完成させ、
リリースに向けて準備します。
リリース・継続的な改善
合意したプラットフォームでリリースできるようプロダクトを準備し、公開後に主要なシナリオと合意済みの分析イベントが正しく機能するか確認します。既存プロダクトの場合は、現行ユーザーが新しいバージョンへ移行する方法を計画します。
分析段階で定めた成功基準に基づいて測定項目を決めます。
合意した引き継ぎ資料を用意し、リリース後の初期結果をチームと確認します。
リリース後の追加改善にも対応できます。
ユーザーフィードバックと利用可能なプロダクトデータを確認し、改善の機会に優先順位をつけて、次の取り組みを合意します。
各サイクルでは、ユーザーフロー、インタラクション、コンテンツ、新しい画面や機能に取り組めます。変更内容は、プロダクトの目標と利用可能な根拠に照らして評価します。
作業の範囲と頻度は別途合意します。
合意した測定方法
を整え、次の改善につなげられる状態でプロダクトをリリースします。
デザイン。コード。
その先を築くための基盤。
プロジェクトには、明確なプロダクト構成と詳細なインターフェースデザインが含まれます。開発も含まれる場合は、合意した機能を実装した、実際に動作するバージョンもお受け取りいただけます。
チームが活用できるデザイン。
合意した画面、主要なユーザーフロー、インターフェースの各状態を含むFigmaファイルをご用意します。レイアウトと再利用可能な要素により、デザイナーや開発者が次の段階で参照できる明確な資料になります。
再利用可能なReactコンポーネント。
Reactを使ったWeb開発では、フォーム、ナビゲーションなど、繰り返し使う部分に共通コンポーネントを使用します。レイアウトは画面サイズに応じて調整され、新機能も同じデザインと動作を基盤に追加できます。
連携と確認。
合意したAPIやサービスを連携し、主要なユーザーフロー、レスポンシブレイアウト、読み込み・エラー・成功時の各状態を確認します。リリース前に、動作するバージョンをご確認いただけます。
明確な引き継ぎ。
合意したデザインファイル、ソースコード、セットアップの説明をチームに引き継ぎます。準備が整っているもの、実行方法、リリースと継続的な保守の担当者を確認します。
次のバージョンにつなげる余地。
より包括的なデザインシステムが必要な場合は、Figmaライブラリと、それに対応するReactコンポーネントを作成し、使い方もご案内できます。今後の画面でも、同じビジュアル言語と動作を共有できます。
システムの詳細度、連携、技術的な範囲はお客様と合意します。ネイティブモバイルアプリの技術スタックは、プロジェクトごとに別途選定します。
プロダクトについて
教えてください。次の一歩を
一緒に形にしましょう。
対象となる利用者、必要な機能、現在の状況をお聞かせください。短いフォームは右側下部にあります。次のステップをメールでご案内します。
プロジェクト概要
-
モバイルアプリ概要は近日公開予定です。
-
Webアプリ概要は近日公開予定です。