2014/01/30にSSIであったTHE GUILD深津さんのUIセミナーの内容を忘れないようにまとめておきます。

お話の内容としては、大きくわけてこんな感じ。

1.なぜ今フラットデザインなのか
2.iOS7のフラットデザイン
3.アニメーション•効果音の効果について
4.使えるメソッドの紹介

1.なぜ今フラットデザインなのか

なぜ今フラットデザインなのか？というテーマについては、新しいモノが普及していく中でのデザインスタイルの一般的な変化という視点から語られていたのが面白かったです。

普及とデザインスタイルの一般的な変化（テレビを例に）

phase1　ユーザーが理解できるデザイン(1950年代)
ユーザーがまだどういうものかが分からないので、できるだけ分かりやすく、具体的なデザインになる。

phase2　販売の為のスタイリングの多様化(1970年代)
だんだんと使い方が分かるようになり、他の製品と差別化をするためにスタイリングが多様化する。

phase3　抽象化されたデザイン(2010年代)
使い方をユーザーがわかっているため、無駄なものを削ぎ落そうとすることで、デザインが抽象化する。

※画像出典：パナソニック　テレビと家電の歴史

こういうようなデザインスタイルの変化にそって、スマートフォンというモノも、普及して成熟してきているから、色々なものが削ぎ落されて抽象化されたデザインになってきていると。なるほどこれはすごく納得。iOS7でフラットになって最初に、iOS7以前のiphone使ってなかったら操作わからなそうと思ったし、実際にまだ普及期である東南アジアとかではあまりフラットは受け入れられていない（と聞いた）というのも納得できるお話でした。
それ以外にも、背景として「コンテンツに集中させるため」「差別化、一新が必要だった」「開発工数の軽減」などが挙げられていました。

2.iOS7のフラットデザイン

iOS7で使われているフラットデザインの効果のおさらい。

レイヤー構造
レイヤー構造を使って、フラットの弊害である「どこが押せて、どこが押せないのか？」というのが分かりにくくなる問題の解決。

ブラー
アクティブな情報とそう出ないものを分かりやすくする。

俯瞰からコンテンツを拡大する構成
操作をナビゲーション中心ではなく、コンテンツ中心にし、コンテンツに集中しやすくしている。

カラーマナーと脱アイコン
アイコンではなく、色と文字で押せるところを差別化する。

この中でも、操作をナビゲーション中心ではなく、コンテンツ中心にし、コンテンツに集中しやすくしている設計はすごく秀逸だなぁと感じました。意識することなく操作できているし階層が理解しやすい。

3.アニメーション・効果音の効果について

アニメーション、効果音については効果を意識して使うと、バランスよく取り入れられそう。

アニメーションの効果
・特定の場所に注目が集められる。
・状態の変化を通知。(画面のスライド、ファイルを削除したなど。)
・ユーザーに考える時間を与えられる。
・ストレスの軽減。(ロードなど。プログレスバーで終了時間が予測できるなど。)
・一瞬の変化は信用されないことがある。(ゲームの「save」などはあえてアニメーションをいれて時間を取ったりすることがある。)

過剰なアニメーションによって、ストレスを与えないために意識すること
・アニメーション中にも他の操作をできる状態にしておく。
・0.1秒以下だとストレスに感じない。
・アニメーションを使う面積に気を使う。派手にではなく、操作をした場所でアニメーションが起こるなど。

効果音
・画面を見ていないユーザーに通知ができる。
・長い処理等で待っている時間に、他のことに注意を向けられる。(例えば何かを送信する時、送信完了した時に音がすると知っていれば、送信を待っている時間に他のことをできる。)
・感覚のチャンネルを増やすことで、インパクトを増やす。

4.使えるメソッドの紹介

THE GUILDではメソッドの開発にも力を入れているそうです。その理由としては、時代や環境、経験則に依存しすぎないように、考え方、学習を抽象メソッドベースで行うことで、チームメンバー、クライアントとの意識統一を行うためだそうです。
紹介されていた使えるメソッド3つ

プロコンリスト
長所(PROS)と短所(CONS)をまとめたもの。
長所と短所で釣り合いのとれるデザインにする。
感覚思い込みでのデザインにブレーキをかけられる。

ステートメントシート
ステートメント（アプリのすべてを説明できる一文）、ターゲット、ユースケース、コア機能、諦めることをまとめてコアコンセプトの共有に使う。優先順位の共有ができ、アプリが本質からぶれにくくなる。大人数のチーム、クライアントがいる場合に役立つ。優先順位を明確にすることで、方向転換がちょっと難しくなるので、慎重に設計する。
▶ダウンロード

フィッシュボーン図
あいまい且つ複雑な問題のブレイクダウンができる。
STEP1 魚の頭の部分に問題となっている状況や解決したい課題を書く
STEP2 大きな背骨を1本引く
STEP3 大きな要因を3～6個考えて、それらを「大骨」の先端に書く
STEP4 大骨の要因を考えて、それを「小骨」に書く
STEP5 最後にそれぞれの小骨に対して原因や解決策を考えて書く

Tags: UX/UI