先週のMOVIDA SCHOOLはTHE GUILD代表の深津さん(@fladdict)でした。
THE GUILDはDesignとEngineeringの統合を目指した製作者集団として創業し、iPhoneアプリのヒット作を生み出していて、ミニチュア撮影で有名なトイカメラアプリTiltShiftGen2などが代表作です。
今回は深津さんにアプリのUI/UX設計とデザインについてお話いただきました。

デザインとは設計すること

デザインはセンスではなくエンジニアリングだと思っている。
広義でいうと目的を提案・解決することである。
手段としては、満足を与えるUXデザイン、使いやすくするUIデザイン、分かりやすくする情報デザインがある。
例えば問題があって形状や色で解決するのがグラフィックデザインであり、その課題を目的があって意図的に解決する手段がデザインである。

デザイナーとエンジニアはお互いのこだわりを理解しよう

デザイナーは『ピクセル単位で整理し、色や書体を統一』する。このような細かいズレを気持ち悪いと思う感覚は、違う職種の人には理解されにくい。
これはエンジニアの言葉で言えば命名規則を作るということと同じで、エンジニアにとって命名規則のないソースコードは見るに堪えないだろう。
非エンジニア風に言えば、帳簿の桁を揃えないようなもの。
『グリッドを設計する』は『クラスのテンプレートを作る』、『操作にフィードバックを与える』は『関数に返り値を渡す』といったようにデザイナの感覚はエンジニアの感覚に近い言葉で置き換えることができる。
互いに尊重し合い、お互いのこだわりを理解するようにしよう。

iOSのフラットデザイン

iOS7のデザインは、視覚的にはフラットだが構造的には多層化されている。
この多層化をユーザーにどのように見せていくかが大事になっている

  • ジャイロを用いたパララックス
  • 擬似的に遠近感を与えることでユーザーにコンテンツの階層構造をわかるようにしている。
    これにより奥行きという情報チャネルが一つ増えている。

  • 曇りガラス上のブラー
  • コンテンツとナビゲーションを分離するための手がかりになる。
    操作が割り込まれているという、一時的なステートであることをユーザーに明示的に宣言できる。
    ユーザーが今何をやっているのかという現在位置を喪失させないような工夫が可能になっている。

  • 画面遷移の変更
  • 俯瞰からコンテンツを拡大していくスタイルへ。
    ズームイン・ズームアウトを用いて、どのコンテンツを選択したかを明示できるようになっている。
    これによってナビゲーション中心ではなく、コンテンツ中心の設計が採用されている。

非言語的でのコミュニケーション

アニメーションを使うことで特定の場所に注目を集めることができたり、状態の変化を通知できる。
つまりアニメーションを用いることで、ユーザーに体験を認識しやすくすることが可能となる。
一般的に、感覚のチャネルが増えるほど理解しやすくなる。

変化がないことで認知できない事例として、iOS7の電卓がわかりやすい。
2500÷50の計算をしようとすると、答えが1になる人も出てくる。
これは2500÷50を行った直後のアニメーションがないために、無意識にもう一度『=』を押してしまい、結果2500÷50÷50の計算をやってしまっている。
変化を伝達させるためにアニメーションは効果的。

アニメーションを用いることでユーザーのストレスを軽減する事もできる。
ワードやパワーポイントなどでファイルを保存する時などがわかりやすい事例で、砂時計アイコンを一瞬表示させることにより、ユーザーに『正しくセーブできた』と実感させている。
わざと時間をかけた方が良いこともある。
ゲームにおいてもアニメーション中に次の画面をロードすることで体感の待ち時間をなくし、ユーザーストレスを軽減させている。

効果音/振動も感覚のチャネルを増やす良い手段。
長い処理等でユーザーは他のことに注意を向けられるが、そういった画面を見ていないユーザーにも通知が可能だになる。
重いファイルのダウンロード後などに効果音を鳴らすことで、離脱したユーザーにアクションの終了を通知することができる。

デザインメソッド

時代や環境、経験則に依存しすぎないように、考え方や学習を抽象メソッドベースで行うことが大切。

  • プロコンリスト:感情と好みを排除した長所と短所のリスト
  • プロコンリストの良いところは、1)客観的に評価する機会を得られる、2)簡単に行える、3)チームで状況を共有しやすい、といったことが挙げられるが、一方で1)感覚、感情面の評価ができない、2)正確な重み付けが難しいといったデメリットもある。
    トレードオフになる項目を評価することで感覚や思い込みで先走りにブレーキをかけ、客観的評価の機会を設けることができる。

  • ステートメントシート:プロダクトの本質を1行で表した文章と補足情報
  • サービスのコアコンセプトをチーム共有するためのもので、ステートメント、ターゲット、ユースケース、コア戦略からなる。
    チーム全体で価値観の共有をすることができ、本質からブレなくなり、引き継ぎや途中参加もしやすくなる。
    詳細についてはこちら

  • フィッシュボーン図:問題と原因を網羅するツール
  • フィッシュボーン図とは簡単に言えば、結果とその結果をもたらす原因とを整理するために用いられる図のことで魚の骨のように表されるもの。
    複雑な問題を単語化し、具体的な課題に落とし込めるので、複数の解決アプローチを探せ、状況も俯瞰できるので、簡単に解決できるようになる。

  • イメージボード:関連しそうなイメージのストック
  • 予めdribbble等のサイトから関連するビジュアルやUIイメージをストックしてイメージボードにしておく。
    いろんなものを同時に見ることで多方面からの視点が得られ、事前に可能性や方向性を検証できる。
    たたき台作成や、デザイナーやエンジニアとのやりとりの際に重宝する。


アニメーションの効果の説明などは具体的に説明されるとなるほど!と思うようなポイントがいっぱいで感覚的なものを以下にロジカルにつないで設計に落としこんでいくかというのがデザイナーの仕事なのだと思いました。


MOVIDA JAPAN株式会社では、世の中を変えるようなサービスを作るスタートアップを支援しています。
MOVIDA SCHOOLに参加したいという方は是非アプリケーションからコンタクトしてください!
↓↓詳しくはこちら↓↓
http://www.movidainc.com/programs/contact.php