genesixデザインプロセス – 3 – UIデザイン

この記事は、「genesixデザインプロセス」の一部です。
«(前のフェイズ) UXデザイン

概要

アプリにおけるUIデザインの役割は、「ビジネスや技術」と「ユーザー」の間に存在するインターフェイス(境界面)を、ユーザーが無事にゴールにたどり着けるように設計することです。「ビジネスや技術」は、ユーザーにとって専門的で理解しにくい場合が多く、時としてゴールにたどり着くことの妨げになってしまいます。UIデザイナーはその問題を理解、解決しながら画面を設計していきます。
そのため、UIデザイナーがUIデザインのプロセスに入る段階では、必ず前段階で設計されたUXデザインを理解している必要があります。UIデザイナーが自らUXデザイン設計をした場合に問題はありませんが、他のデザイナーがUXデザインをした場合は、そのデザイナーからきちんとヒアリングをしておきます。UIデザインのどのプロセスにおいてもUXデザイン設計に立ち戻れるように、ドキュメントにして身近に準備しておくことも大切です。

担当者

UIデザイナー

成果物

*は特にあった方が良いもの

  • スケジュール表*
  • UIフローシート
  • 各画面レイアウトデザイン
  • 画面遷移図*
  • ビジュアルデザインシート
  • ビジュアルデザインデータ(PSDファイル)*
    • アプリアイコンデザイン*
    • 各画面デザイン*
  • 共有文言シート(スプレッドシート)*
  • レイアウト指示書(印刷)*
  • アニメーション指示データ(Javascript、Flash、Xcodeなど)*
  • アニメーション指示書(印刷物)
  • 各画像(PNG)*

プロセス

  1. デザインスケジュールの設定
    UIデザインの最初期に設定し、チームで共有します。
    プロジェクト進行中に見積もりのミス(正確な見積もりは作れません)からズレが生じた場合は、その都度スケジュールの再設定と共有をセットに調整します。

    • 共有スケジュール表作成
  2. UI構造の設計
    デザイナー自身がアプリの構造を理解し、設計がユーザーのゴールに向かっているか検証しながら設計します。チーム内で共有し、プロジェクト進行中はビジュアルデザインと実装の道しるべとなって機能していきます。

    • UIフローシート作成
      • 「アプリ全体」のユーザー導線を検証・設計する
    • 各画面レイアウトデザイン
      • 「画面ごと」のユーザー導線を検証・設計する
    • 画面遷移図作成
      • 「アプリ全体」と「画面ごと」を合わせた上でのユーザー導線を検証・設計する
      • 画面の漏れとユーザー導線の最終チェック
  3. ビジュアル基本概要の設計
    指針となるビジュアル要素(ロゴ・色・レイアウト・タイプ・フォルムの基本)をこの時点で決めておき、今後のビジュアルデザインをスムーズに進めていくために利用します。

    • ビジュアルデザインシート作成
  4. ビジュアルデザイン
    ビジュアルデザインも、目的はユーザーのゴールの達成のためであることを忘れずに、常にUXデザイン設計を参照しながら進めます。
    以下のUI指針を気にかけながら進めると、ユーザーのゴール到達の手助けとなります。

    1. 触りたくなるUIであるか
      • どんなにゴールに向かっていても、触るという生理的なものをクリアしないと意味がありません。直感的に美しく、視覚から見る人にダイレクトに訴え、ユーザーとのファーストコンタクトにおいて重要になります。
    2. デザインが透明なUIであるか
      • デザインがユーザーのゴールに忠実である場合、デザインは後ろにさがりデザイナーの意識は目立たなくなり、存在は透明になっていきます。初期のエモーショナルな感動が消費された後に残るのは透明になった使いやすいUIになっているのがベストです。
    3. 温もりがあり、歓迎しているUIであるか
      • 使う人に対して常に優しいものであり、安心感を与え続け、ユーザーとアプリとの長期的な関係性を設計します。
    • ビジュアルデザインデータ作成(PSDファイル)
      • アプリアイコンデザイン
      • 各画面デザイン
  5. 文言シートの作成
    アプリ内で使用する文言の統一感のために、言語ごとのシートを作成します。
    途中から作ってしまうと、単語や言い回しに齟齬が発生してしまいユーザーを混乱させてしまうので、ビジュアルデザインの初期から用意します。

    • 共有文言シート作成(スプレッドシート)
  6. HIGチェック
    アップルのHuman Interface Guidelineを元にアプリの構成チェックします。
    プロジェクト後期の致命的な仕様上ミスの出現を防ぎます。
  7. レイアウト指示書の作成
    エンジニアに細かなレイアウト指示を出すためのツールです。
    修正時にもこの指示書にも立ち戻り反映させていきます。

    • レイアウト指示書作成(印刷)
  8. アニメーション・アクションフィードバックの指示
    アニメーションは言葉だけでは通じにくい部分なので、(アクションのフィードバックも)出来るかぎり実際のアニメーションを作って共有します。Javascript・Flash・Xcodeなど、デザイナーの得意なツールを使うのがよいです。

    • アニメーション指示データ作成(Javascript、Flash、Xcodeなど)
    • アニメーション指示書作成(印刷物)
  9. 実装用画像の書き出し
    実装用の最終ビジュアルパーツを書き出します。

    • 各画像書き出し(PNG)
  10. ビジュアルデザインチェック
    実装されたビジュアルが設計通りになっているか逐一デザイナーがチェックします。実装されてこそのアプリなので、ここでのチェックは慎重に行います。

(次のフェイズ) »検証

2 Responses to genesixデザインプロセス – 3 – UIデザイン

  1. ピンバック: genesixデザインプロセス – 4 – 検証 « ジェネシックスブログ

  2. ピンバック: genesixデザインプロセス – スマートフォンアプリ開発における「デザイン」の役割 « ジェネシックスブログ

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。