こんな停滞はありませんか

  • 機能の話ばかりで、使い方が決まらない
  • 画面遷移が確定せず、実装が止まる
  • 関係者ごとに前提がズレている
  • 「一度持ち帰りましょう」が繰り返される

議論を前に進めるには、参加者が同じイメージを持てているかが重要です。
ITプロダクトのように形のないものを扱う場面では、イメージの共有が難しくなります。

本サービスは、そのイメージをインタラクティブ・プロトタイプで可視化し、関係者間の合意形成を前に進めます。

SaaS UI設計とは

SaaS開発における「誰がどう使うか」というユーザー体験(UX)を、インタラクティブ・プロトタイプで具体化し、開発を前に進めるサービスです。

各種設計:納品範囲

体験設計(UX設計)

  • 利用シナリオ整理
  • 業務フロー整理
  • 状態整理

成果物:
体験設計図(必要に応じて)

情報構造設計(IA・画面構造)

  • 画面構成
  • ナビゲーション
  • 画面遷移設計

成果物:
インタラクティブ・プロトタイプに統合

インタラクティブ・プロトタイプ

  • UIデザイン
  • 主要画面設計
  • 状態/エラー/遷移設計
  • インタラクション設計
  • 実装判断が可能な設計データ

成果物:
体験検証可能なプロトタイプ

アプローチ

定例会などの会議でプロトタイプを用いて、ユーザー体験の確認をします。ディスカッションの間にもリアルタイムにプロトタイピングを更新して議題を前に進めます。

SaaS UI設計のアプローチフロー図(定例会から確定までのプロセス)
アプローチの図
  1. 定例会
    議論を止めないために、その場で画面を組み立てます。
  2. 再確認
    持ち帰り体験ベースで再確認
  3. 磨き込み
    操作感や状態遷移を中心に磨き込みます。
  4. 定例会
    再合意
  5. 確定
    検証結果をもとに決定事項を確定します。

インタラクティブ・プロトタイプは体験検証を目的としたテンプレートベースの設計です。
文言・配置・項目構成・状態設計などのUI検討を行います。
複雑な業務ロジックや外部連携の実装は含みません。

UI品質

インタラクティブ・プロトタイプは単なる検証用モックではなく、実装を前提とした品質でUI設計します。状態・エラー・例外ケースまで含め、開発判断が可能な精度で提示します。

  • 情報整理されたUI設計
  • 状態設計の徹底
  • 実装を前提とした設計精度
  • デザインシステムに展開可能な設計
状態設計を含むテキストボックスUIの設計例
テキストボックス
状態・エラーを考慮したチェックボックスUIの設計例
チェックボックス
遷移と例外処理を含むセレクトボックスUIの設計例
セレクトボックス

K2デザインシステムはこちら

導入をご検討の方へ

成果物と範囲

  • HTML/CSS/JSによる検証用インタラクティブ・プロトタイプ
  • 主要フローの実装(テンプレートベース)
  • サンプルデータの反映(検証用途)
  • 設計意図の共有
  • デザインシステム設計(オプション)
    → 既存デザインシステムへの接続、または新規構築

(参考:K2デザインシステム

本プロトタイプは体験検証を目的とした設計です。品質保証・商用前提ではありません。

K2の特徴

K2は、コミュニケーションHUBとして、抽象的な議論をインタラクティブ・プロトタイプに落とし込みます。体験設計からUI品質まで一貫して担い、実装前に判断できる状態をつくります。

抽象で終わらせない。
議論を止めない。
インタラクティブ・プロトタイプで合意を確定させる。

それが私たちの役割です。

こんな企業に向いている

  • SaaS/Webアプリの受託開発を行っている企業
  • UI/UXを提案力の一部として強化したい企業
  • 顧客との合意形成を設計段階で確定させたい企業
  • 設計段階から丁寧に進めたい企業