やわらかいアプリデザインの実現

日本Androidの会矢野りん2010

アジェンダスタイリングキーワードについて考えよう

デザインプロセスを知ろう

デザイン（インタラクション＋スタイリング）＝UX

フェーズ１

フェーズ２

フェーズ３

スタイリングキーワードについて

考えよう

フェーズ１

やわらかい＝スタイリングのキーワード

スタイリングのキーワード

すっきりした

先進性のある

重厚感のある

軽快な

女性的な／男性的な

スタイリングのキーワードとは

一連のデザインプロセスから導いた外観づくりの方向性をつくることば

スタイリングのキーワードとは

アプリの最終的な外観を決めるためのことば

デザインプロセスを知ろう

フェーズ２

デザインプロセス

モノやサービスに、目に見えるかたちをあたえるまでの過程のこと

一般的なデザインプロセス

1.事業コンセプトづくり

2.製品（サービス）コンセプトづくり

3.デザインコンセプトづくり

4.スタイリングコンセプトづくり

事業コンセプト

第一フェーズで必要なコンセプト

収益を上げる方法を整理して見出した事業の方向性

製品（サービス）コンセプト

第二フェーズで必要なコンセプト

ニーズの把握

シーズの把握

企画への落とし込み

デザインコンセプト

第三フェーズで必要なコンセプト

ターゲット（ユーザー）の設定

機能要求の整理

情報設計

スタイリングコンセプト

第四フェーズで必要なコンセプト

製品のポジションに合ったキーワードの選定※スタイリングキーワード

グラフィックの最適化

インタラクションの最適化

スタイリングって

スタイリングコンセプト

デザインコンセプト

製品コンセプト 事業コンセプト

スタイリングは表面的な問題だけど事業（ビジネス）コンセプトとつながっているよ

製品（サービス）をつくる哲学とつながっているよ

デザイン（設計）とまた別のフェーズだよ

デザイン（設計段階）の一般的な実務内容

ペルソナ作成誰が使う？

ストーリーづくりターゲットユーザーは生活のなかでどんな機能を求めてる？

機能要求の整理（グループ化）具体的にはどんな機能がどれくらいのボリュームで必要？

画面遷移など導線設計

スタイリングの一般的な実務内容

カラーリングの計画キーカラーやカラースキームの選定など

スタイリングキーワードの共有言葉によりイメージ／認識の共有

グラフィックの作成グラフィックツールによる制作実務 or コードによる実装

インタラクションの付与ツールによる制作実務 or コードによる実装

デザイン（インタラクション＋スタイリング）

＝UX

フェーズ3

UX?

User Experience ＝ 使用感

ユーザーの感情に訴えかける方法全般を指すことば

定量的によしあしを計ることが難しいよー

インタラクション？

ユーザーからの働きかけに対する反応のこと

わかりやすさと好ましさの両方に影響する

インタラクション＋スタイリング？

ユーザ‒視点では、アプリの完成度を左右する要素

なんか好き、なんか嫌いはインタラクションとスタイリング（UX）が影響している

コンパクトなデザインプロセスの例

ユーザーペルソナ新入社員OL（仕事経験は1年半）

ストーリー日々の仕事にやっと慣れてきた頃で、人間関係も活発になって趣味にも走り始めたおかげでだんだんプライベートな時間に余裕がなくなり始めたころ。増え始めたコンタクトリストをプライベートと仕事で奇麗に分けて整理できないかなあーと希望している。

コンパクトなデザインプロセスの例

想定できる機能要求新しい連絡先の登録／連絡先の編集／連絡先の削除／連絡先のグループ化／連絡先の全文検索／連絡先のタグ付け／連絡先のタグによる検索／連絡先の登録名を二重化（あだ名と本名を２つ登録できる機能）／仕事とプライベートなど登録した人間の属性によってスキンを変更する機能

コンパクトなデザインプロセスの例

スタイリングコンセプト甘過ぎないが女らしさがアピールできるスタイル。カスタマイズの余地があるためデフォルトでは装飾を盛り込まず、自分で飾りたくなるくらいの外観にする。色で飾る。流行のパステルカラー。つややかな印象、グロス系

※手がかりはペルソナに求めること

コンパクトなデザインプロセスの例

インタラクションのコンセプト光沢のある外観になるので、輝くようなエフェクトが欲しいキビキビした感じ、さっそうとした感じを動きで表したい連絡先を人間関係の種類別に切り替える機能がメインなので、切り替わったことが動きではっきり意識できるようにする舞台の場面転換みたいに「どんでんがえし」するといいかも？

スタイリングキーワード

さっそうとしたかんじ

軽い

甘すぎない

※そんなUX

以上が一般的なスタイリングまでの

流れでした

★ケーススタディ★Simejiの場合

事業コンセプト

製品コンセプト

デザインコンセプト

スタイリングコンセプト

ターゲットユーザーはadamrocker

adamrockerはこういうのが多分好きだろう。という矢野の思い込み

さんこうになりませんね...

デザインプロセスは３つあるの

使用者と管理者（購入者）、そして制作者が別々に存在する製品　のためのプロセス

使用者と管理者（購入者）は同じだが、制作者が別　の製品のためのプロセス

使用者も管理者も制作者も同じである製品　のためのプロセス

デザインプロセスは３つあるの

使用者と管理者（購入者）、そして制作者が別々に存在する製品→高機能製品／活用の仕方が制作側では特定しにくい製品／エンタープライズ製品

使用者と管理者（購入者）は同じだが、制作者が別→コンシューマ向け製品／ユーザーは不特定多数だが、使われ方は特定しやすい製品

使用者も管理者も制作者も同じである製品→開発者やデザイナー自らが欲しいと思って勝手に作る製品※Simejiはこれ↑

デザインプロセスは３つあるの

活用の仕方が制作側では特定しにくい製品ペルソナ法は適用しにくい。機能勝負。カスタマイズの利便を追求。が、管理者を満足させるスタイリングは必要

使われ方が特定しやすい製品ペルソナ法でユーザーの気持ちに寄り添うデザイン、スタイリングを模索するのがベター

開発者やデザイナー自らが欲しいと思って勝手に作る製品開発側のセンスがモロに出るので日々センスを磨く努力をすべし

ちょこっとSimeji４のデモ

さあ演習に挑戦しようコンシューマむけアプリをデザインしよう

やること

ペルソナ作成

ユーザーのストーリーを考える

機能要求をまとめる

スタイリングキーワードを考える