Jshiike 3年弱前 edited | ▲upvoteする | link | parent | on: 気遣いのあるデザインの裏にある努力

フレームワークやツールが進化することで、そこそこのスキルがあれば比較的短い期間でもそれなりのプロダクトをつくれるようになるという恩恵を世の中全体が享受できますが、一方で才能のある人たちは、その便利になった道具を利用して、更に先に進みます。そしてUIの競争は際限なく続きます。

一つの目のパターンは、意外なところまで気遣いをしているので、それを発見したときにポジティブな喜び、驚きを感じるところ。

Slackを使っていると、

などは、本当にそこまで仕様として必要かという好みは分かれるかと思いますが、「こうすればユーザはもっと使いやすいはずだ。」と徹底的に考えている人がいて、即実装している結果かと。

二つの目は、ものすごく自然にスムーズで使いやすいのだけれども、どうしてかと言われると説明してもらって初めて気づくようなユーザ体験を実現するために、裏側で相当な気遣いと努力が払われているケース。

そいう意味で、Twitter Videoを担当したPaul Stamatiouが、その取り組みをまとめた長いブログのエントリーはとても参考になります。

Paulは以前、「Provide meaning with motion」というエントリーで、Androidのマテリアルデザインの発表をうけて、「Googleが暗黙的にアナウンスしたのは、これからのデザイナーにとっては、アニメーションや遷移など、モーションをデザインするスキルが重要になるということ。」と発言しています。そして彼自身の日々の仕事のスタイルも、Framer.js & Framer Studioをヘビーに使ったプロトタイプ駆動型です。

プロトタイプのおかげで数千回の会議が不要になる。

但し、

プロトタイプづくりには相当な時間がかかるし、本質でない技術的なチャレンジを解決しなくてはいけなくなることもあるので、「どんな使いごごちになるんだろう。」という大きな問題を解決したくなったときだけ取り組むようにしている。

さて、Twitter Videoに話しを戻します。Paulは、Google Venturesが短いサイクル(Google Venturesでは一週間単位)でアイデアを具現化していくspringメソッドにおいて唱えている「Understand, Diverge, Decide, Prototype and Validate(目標/問題点を理解し、アイデアを膨らませて様々な角度から検証し、方向性を決め、プロトタイプをつくり、ユーザのフィードバックをもらう)」の考えに沿って、750枚を超えるSketchモックアップと54個のFramerプロトタイプを経て作り込んでいます。

最初は、録画のページと再生 / 編集画面のページに分かれた構成にはじまり、

などいくつかの問題をステップごとに解決していった様子が、各デモビデオで紹介されてますし、ユーザテストの様子も載ってますので、是非原文をチェックしてみてください。

また、プロトタイプを実際にiOSとAndroidのコードに落とし込んでいくプロセスについても触れています。プロトタイプで設定した値をそのまま適用できなくて、OSごとのノウハウが必要なこと。Paul自身がアプリの実装をするエンジニアとペアプログラミングすることでコードの構成を把握し、プロトタイプをアプリ上に着実に反映させるための指摘力を上げていったこと。

デザインとプログラミングにまたがる人材を育成することの重要性はどんどん上がってきますね。

“The details are not the details. They make the design” - Charles Eames (詳細にこだわるというのは細かいことではなく、それがデザインをつくりあげるということである。)


2014 Topアクセスランキング


Back