モーションとマテリアルデザインのプロトタイピングについて – デザイナー VS 開発者

当記事はクリエイティブ・コモンズ・ライセンス(Creative Commons license / CC license)に基づいて翻訳・編集しています。

Mustafa(以下M): 僕が気付いたプロトタイピングツールにおける挑戦のひとつは、全ての時間を費やして作業し、そしてそれを捨ててしまうことだと思います。ただ、例えばPlaidでの作業方法というと、実際にコードとコードのプロトタイプを使いますよね。それは、ある意味頭がプシューっと爆発してしまうような感じです。あなたはどういうものを好んでいますか?

つまり、プロトタイピングツールについてどのように感じていますか?デザインプロセスを引き止めていますか?一度にたくさんの質問をしているんですが…。

 

Nick Butcher(以下N): あなたの質問は僕の好きな分野についてのことなんで。いいことですよ。僕個人としては、プロトタイピングツールは大好きなんです。というのは、それによってプロトタイプを作ることができるからです。もっと多くの人がプロトタイプを作るべきだと思います。

その上で、あなたと同意見です。僕も何かを書いて、それを構築するのに時間を費やして、結果としてそれを捨てる可能性があるような作業は大嫌いです。だからこそ、僕の場合はプロトタイピングツールにあまり多くの時間を費やしていないのだと思います。というのは、僕はできるだけ素早くアイデアをまとめて、すぐにコーディングに移るタイプだからです。僕自身がコーディングができるからというのもあります。もしスキルセットとしてそれが可能なら、コーディングに移るというのはいい選択肢かもしれません。Framerのようなツールを使えば、後の作業でその中のコードのいくつかを使うことができるかもしれない。

でも、もしコーディングができないのであれば、もしそのスキルセットが自分の武器のひとつではないのなら、プロトタイピングツールを使うことで同じような状況に到達することができると思います。

僕は、もっと多くの人がプロトタイプを作るべきだと感じています。より多くの人が、コードであれ何であれ、捨てる必要がないプロトタイプを作ることができる場を築きたいと思っています。

 

M: 結局プロトタイプの意図は何かということがポイントになると思うんです。ゴルディロックスの原理でもありますが、長時間費やしてしまうと、その内容が冗長になるものです。それは、すごく無駄にしているような感じがするのですが、プロトタイピングツールの良いところもあります。つい最近僕自身がペーパープロトタイピングを行ったのですが、そこでは文字通りスクリーンペーパーを用意して誰かを撮影して、それをその場で印刷して、目の前でその紙を変更していくんです。そのほうがより価値があると思うんです。

というのは、流れを学ぶことになるからです。どのように動いていくのかというトランジションを考えたり、プロトタイプを作ろうとするより、もっと価値がありますよね。ディベロッパーの作業を最小限にするということを考える時だと思うのですが、どうお考えですか?

 

N: そうですね。まずプロトタイプを作ることは何よりも最初に行うことだと思います。多くの人が十分に行っていないと思うからです。とにかくstaticsとスクリーンデザインに多くの時間を割いていますよね。そうすると欠陥が見つかって失敗に終わってしまう。プロトタイプを作ることから始めている人は、いつも上手くいっていると思います。

ただ、おっしゃる通り、収穫逓減の法則が当てはまる部分があります。かなりの時間を費やして、完璧に細かい項目ひとつひとつを洗練させていくというのは、「プロトタイプを作る」という域を超えています。僕にとっては、どれだけ短時間で学びとれるかが重要なんです。これは機能するものなのか?この先を追求するに値するのか、それとも捨てるべきか?ということを判断するということです。

もし素晴らしいプロトタイプを洗練させることに長時間を費やしていると、突然そのプロトタイプを捨てることを口に出せなくなってしまうものです。自分の子供のような感覚になるんです。手をかけすぎたんですよね。そして、それは危険なことです。

というのは、プロトタイプを作るという作業を本来のプロトタイプの目的である「学び」のために行っていないからです。そうですね、完全にあなたと同意見です。紙のように忠実度が低いものは最高だと思います。通常は、ほとんどのトランジションやアニメーションのようなものでは、ポストイットを使っています。僕のデスクがポストイットまみれになっているのを見たことがあるかもしれません。で、こうやって動かすんです。これはこういう感じで動くかな?この画面がこうやって動くことに意味があるかな?とかそんな感じです。そうすると、とても短時間で作業ができ、簡単にアイデアを捨てることができます。1時間か2時間くらいツールを使って構築に時間をかけてしまうと、それを捨てたくなくなるかもしれないです。だって、愛着が湧いてしまいますからね。

 

M: これまでどのようなプロセスでデザインをしてきたのでしょうか?

例えば、動くアイコンやそういったもの、特にPlaidsではお気に入りから外すとハートが割れたりしますよね。とても美しいと思うのですが、実際どのようにそういったものをデザインしているのですか?こういうのが素晴らしいとスケッチするのも素晴らしいと思いますが、それは最終段階のような感じです。デザイナーがアフターエフェクツ(After Effects/AE)をしようするのは知ってるのですが、プロトタイピングツールとしてのアフターエフェクツをちゃんと理解していないんです。それは、ただのアニメーションですよね。

 

N: 僕もアフターエフェクツについて理解してませんよ。

 

M: そういった楽しいものをデザインするプロセスはどういうものなのでしょうか?

 

N: プロセスの一部は、楽しいと思っているということですね。そういったアニメーションにはたくさんの「喜び」が求められると思います。そして、あまり印象に残らないようなUIをより良いものにしたいと思っています。あなたのおっしゃる「楽しいもの」は、エクスペリエンスというものを生き生きとさせると思います。だからこそ、そこに僕は価値を置いているんです。そしてプロダクトにとって非常に重要なことだと思います。なので、プロセスの一部は、モチベーションを持てるものだということです。

どのようにするかというと、僕の場合、デザインと開発にオーバーラップするスキルがあるので、両方からインスピレーションを得ていると思います。だから、例えば、先ほど話していただいたアイコンアニメーションで言うと、まずソフトウェアやテクノロジーの能力とはどういうものかを深く掘り下げて理解しようとしました。そうすることで、どのパラメータを使わなければならないのかが分かります。基本が分かっているので、変換ができる、回転ができる、この部分をトリムするといったことができます。そういったことで、インスピレーションを得ることができます。よし、じゃあこのブロックに何が作れるだろうか…という感じですね。

で、そこから作業を始めるという感じなんです、本当に。だから、これで何が構築できるかは分かっているから、このトランジションとかこの状態変化にとって意味のあるものは何か?と考えます。そこからは、注意をひきたいのか? すごく繊細な感じにしたいのか? となりますね。おっしゃっていた意図の部分とプラットフォームに対する理解の組み合わせだと思います。それを基盤としてクリエイティビティを持ち込むというのが、僕のやり方ですね。僕にとって、能力を学ぶということはとても重要なプロセスの一部です。

 

M: 実際に作成が完了する前にモーションをデザインするという点で、UIを見て、これを良い感じにするには何ができるかというのを探すようなことをしますか? どういうステップがあるのですか? 紙にスケッチしたりしますか?どのように頭の中でビジュアル化するのですか?

 

N: 僕の場合、アニメーションとか特に状態変化のようなものでは、認知負荷をいかに下げるかが全てだと考えています。すごく言いづらい言葉ですね。何かが変化するのであれば、その変化が何なのかがわかるようにして、ユーザーが何が起きているのかを理解できるようにすることが重要だということです。いつもそこから始めるようにしています。何ができるか?とか、どうすれば華やかでキラキラしたものにできるか? というところから始めることはありません。そういう考えがあるので、最初の状態と最後の状態があって、その2つの間をできる限りスムーズに遷移するようにしたいんです。そんな感じの始め方を僕はしていますね。

それから、そのトランジションをスムーズにするためのクリエイティブで楽しい方法を考えます。先ほど例に出してもらったハートが割れるアイコンを例にすると、満たされたハートの状態から空っぽのハートの状態に動かしたかったわけです。そこで、それを実現する方法とは何だろう?と考え、そうやって想像力を駆り立てていきます。いろいろな方法を試して、プラットフォームの能力を理解したら、割れるハートが出てきて、それをスケッチし直して、ほらね?って感じです。

 

M: モーションは今流行っているように感じます。でも、僕が恐れているのは、モーションというのは、先ほどおっしゃっていた通り、派手さでもあり、その技術があるから作っている人もいるということです。フレームワークやライブラリといったそういったトランジションをシンプルにするものがあるからです。

僕の観点からして恐怖だと思うのは、モーションを作るためだけのモーションになっているのではないか? ということです。先ほどおっしゃっていたように、ユーザーを誘導するためのモーションであったはずが、それに反してビジュアルとして気が散るものになるかもしれません。

 

N: それは、絶対的に恐怖です。振り子のような作用は必ずあって、何かが簡単になりそれを使いすぎると、時代遅れのような状態になって戻ってくるみたいなことがあります。中間のところで再調整する必要があるのかもしれません。僕もあなたと同意見で、今まさにその状態なのかもしれません。

プロトタイピングツールの爆発的に広がったことで、モーションという技術が多くのデザイナーが使えるものになり、モーションを使うことで境界線を学び、再調整が入るかもしれませんが、あなたは的を射ていると思います。良いモーションというのは、多くの意味で気付かれるべきではないのです。モーションとは、変更されたものを説明し補助するものであるべきで、目を引くようなものであるべきではありません。もちろん目を引くべき時はありますよ。注意を喚起する必要がある時もあります。でも、常にトランジションそのものがシンプルになるようにすべきです。気付かれないようなシンプルさですね。

もしアニメーションをオフにしたら、全体が突然飛び飛びのような感じで壊れてしまったように感じるようにすべきだということです。モーションはそういった補助的役割をしているだけで、主役ではないということを理解しているということになるからです。場面を展開する補助をしているみたいなものなんです。

 

M: モーションデザインやインタラクションデザインを後知恵として使っているように思うことはありますか?

 

N: 全くもってそうですね。

 

M: そこに問題があるように思うのです。というのは2つの状態があって、このスペースから別のものに動かしたい、どうすればそのエクスペリエンスを向上させることができるんだろう? というより、この爆発を作るにはどうすればいいのか? というような後知恵ですよね。

 

N: 業界全体としていくつかのことが起きていると思います。

ひとつは、ツールの増加です。より多くの人がアクセスできるツールが生まれているというのがひとつ。ただ、多くの人が恐れを抱いているという状態でもあります。というのは、モーションデザイナーじゃなくてインタラクションデザイナーだから、この作業がどういうものなのかよくわからないという人もいるからです。そういった人たちは意図があると思いますが、自己中心的にツールを使う人もいれば、恐れすぎて使えないという人もいます。そういう意味では、今のこの業界は、モーションがより前に出てきているという興味深い状況にあると思います。

僕がマテリアルデザインで気に入っている部分は、モーションというものを第一級市民のステータスまで引き上げたことです。明確に提示されているのですが、モーションは最後にふりかけるようなものではなく、ちょっとした喜びの瞬間のようなものであるべきだと。エクスペリエンスの一部であるべきだとしています。マテリアルデザインによって、レイアウトやコンテンツ、階層のようなものと同じレベルとして捉えられ、モーションがそういうものの裏にある主要な柱のひとつだと、マテリアルデザインが公開された時に明示されました。僕は本当に感謝しているんです。というのも、その考え方に賛成だからです。

良いモーションはアプリを理解できるものにしてくれるものだと思いますし、僕にとっては、ビジュアルを洗練させるというレベルより、インタラクションデザインに近いものです。

 

M: セオリーは理解し、アイデアはあるというデザイナーにとっての次のステップは何だと思いますか?そのようなデザイナーが次にすべきことは何でしょうか?マテリアルデザインは素晴らしいのですが、自分のアプリにフィットしていなかったり、他にアイデアがあるような場合は、どのように自分自身のトランジションモーションを改善していけばいいのでしょうか?

 

N: 僕が見たいと思っているのは、次のレベルに進んでいく人たちです。モーションは、ブランド戦略の重要な柱になりうると思います。アプリケーションやプログラムの特性がどういうものであれ、アプリ全部に同じ書体や色を使いたくないですよね。たくさんのアプリケーションが、同じ色やモーションカーブ、モーション戦略を使っています。そこから、カーブを描くように徐々にモーションをいつ使って、いつ使わないのかという理解度を深めて成長していくと感じています。

そして、さらに深いところまでいくと、どのように機能するか? とか、ブランド固有のモーションとはどういうものなのか? どうすればそれを感じることができるのか? 湧き出るようなモーションを使って何かを伝えようとすべきか? ゆっくりとした動きのより洗練された感じのものか? ここではstagger効果を使うべきか? と方法を考えるわけです。そうすると、シンプルでフラットなものではなく、異なる種類のモーションそれぞれの特性を表現しようと、より深く考えるようになると思います。

「よし、ここにはトランジションがないよりもある方が良いから、トランジションを使った」ということになります。そのトランジションが何を語るべきで、何を語るべきではないのか? ということですね。

 

M: 実際のツールセットという点では、Lottieはかなり人気のあるツールだと思いますが、アイコントランジションのデザインでどのように使っていますか?

 

N: Lottieはかなりイカしたツールです。このツールのおかげで、モーションをより多くのデザイナーが使えるようになりました。特に、デザインとエンジニアリングの間における引き渡しを簡単にしたというのは、本当に素晴らしい功績だと思います。もしまだ使ったことがないのであれば、基本的にアフターエフェクツのプラグインで、つまりそこからそのままJSONフォーマットにエクスポートできるということです。そうすれば、そのままウェブやアンドロイド、iOSに落とすことができます。専用のプレイヤーがあって、そこでそのまま再生ができます。

ワークフローの点で言うと、驚異的な変化でした。当然良い点と悪い点というのはあります。まずアフターエフェクツとの連携が強いものなので、アフターエフェクツを使用したいのであれば、すごく相性がいい。

ただ、一部の人にとってはかなり面倒なものです。例えば、シンプルなアイコンアニメーションを作りたいだけ、ハンバーガーとか「戻る」ボタンとかそういうものを作りたいという場合だとか、まだアフターエフェクツのスキルが追いついていないという場合は、あまり助けにならないかもしれません。

 

M: ちょっと話を戻して、マテリアルデザインに特化した話になるのですが、僕たちが常に直面している挑戦のひとつは、マテリアルデザインには「すべきこと・すべきでなないこと」といったガイドラインが提示されているということです。それはデザインに初めて関わるような人にとっては非常に役立つものだとは思いますが、同じように完全な規則であり、僕たちが常日頃排除してきたものが、ガイダンスなんです。

マテリアルデザインのレイヤーケーキについてお話されていたと思うんですが、もし覚えていればですが、対ガイドラインやまたその逆についてどのようにお考えですか?

 

N: あなたのおっしゃることと全く同意見ですね。ガイドラインは、非常に上手く書かれていると思います。簡潔さを心がけていて、明確な例を提示しています、”これはしてはならない。それはしてはならない。” という感じに。非常に規範的になっているので、規則に近しい場合やガイドラインに近しい場合にわざわざ議論しなくなるんです。ちょっと前に、そのレイヤーケーキメタファーの話をしました。それは、マテリアルデザインのガイドラインには、3つのレイヤーと3つの異なるタイプのガイドラインがあるということです。それぞれ、どれくらい規則に近いものなのかが異なるということです。

僕たちが思ったのは、一番下のレイヤーは、基礎的なもののレイヤーで、実際に見れば正しいとわかるものを基盤にしています。例えば、人間がどのようにコンピューターと相互作用するのか、とか人間の指はどれくらいの大きさか、みたいな…

 

M: 人間工学とか物理的な…

 

N: そうです。「48DPS以下のタッチタグは使うな」という場合、そのガイドラインは変わらないものですよね。そうなると、それはより規則に近いということになりますよね。そのガイドラインを破るべきではないですよね。

次のレイヤーは、慣習と呼べるようなものです。デザインに関する挑戦や問題を解消するあらゆる方法になりうるものです。ただ、もし全てのアプリケーションがそのガイドラインを尊いもののように捉えてしまうと、ユーザーはそこで学ぶことができず、他で応用することができなくなってしまいます。そうなると、どんどんアプリは使いにくくなり、どうしていいかわからなくなってしまいます。そのプラットフォームには、道筋という意味での規則みたいなものがないようになってしまいますよね。

だから、こういう場合では、それは規則でもなく、ガイドラインでもない、その中間のようなもので、プラットフォームが定義するパターンからまず始めてみて、そこで自分のアプリでうまくいかなそうだったら変えるというものです。ただちゃんとした理由がある場合に限った話で、目的をもってそこから外れる、というのが僕たちが使っている表現です。

そして、このケーキの一番上のレイヤーは、パーソナリティというものじゃないかと思います。どういった色を使うかとか、設定するタイプだとか、モーションやモーションで使うカーブといったもので、ガイドラインを提示する際に表現する必要があるものです。特定のフォントや色を使っているわけですから。ただそれらは決して規範的なものではありませんよね。マテリアルデザインが「こういった異なる種類の赤を使用することができますよ」と提示するのは、どこから始めていいのかわからないというような人のサポートをしたいからです。それは決して、これが使用できる赤の種類だと言っているわけではありません。フェラーリであれ、BBCであれ、それぞれブランドのカラーパレットがあるわけで、そこから色を選択するだろうし…というか選択しなければならないですし、そのマテリアルデザインのガイドラインに固執することはありません。

という感じで、規則に近しいと思えるものであっても、実際にどのケーキのレイヤーの話かによって変わるものだと説明できていたらいいのですが。そういうレイヤーがあるということ、そして、変えていい時と、プラットフォームに近い状態を守るべき時があるということを理解する必要があるということですね。

 

参照リンク : Prototyping Motion and Material Design – Designer vs. Developer #23  – Google Chrome Developers CC BY 3.0)
当記事はクリエイティブ・コモンズ・ライセンス(Creative Commons license / CC license)に基づいて編集しています。

共感いただけましたら、いいね!シェアいただけますと幸いです。

ASOBO DESIGN™ とは

ASOBO DESIGN ロゴ

ASOBO DESIGN (アソボデザイン)へようこそ!デザインの制作に関わることは何でもご相談ください。

チラシ・ポスター・パンフレットや、名刺・ショップカード・DMなどの各種印刷物、看板・ロゴマーク・パッケージデザインまで幅広いグラフィック・広告デザインに対応いたします。デザイン制作だけでなく、印刷から納品まで一貫して対応(※)しており、展示会・キャンペーン・販促宣伝活動等に貢献致します。※一部媒体を除きます

お問い合わせ

デザインの見積もり・制作依頼

SSL カード決済対応 銀行振り込みの他、各種クレジットカードでのお支払いにも対応しています。 デザイン料金はクレジットカード対応

ピックアップNEWS

実用的な折チラシデザイン
書籍「実用的!折りチラシデザイン」に作成したチラシが掲載されました。

チラシデザインが書籍に掲載されました
書籍「タイトルまわりのデザイン表現」にチラシデザインが掲載されました。

チラシデザイン集に掲載されました
書籍「実用的なチラシデザイン」にデザインが掲載されました。

雑誌掲載事例
デザイン総合情報誌「MdN」にWEBサイトが掲載されました。

メディア掲載事例について
インディーズCDの制作ガイドに、デザイナーとしてのインタビュー記事が掲載されました。

インターナショナルファッション誌 "En Vie Fashion Magazine" 内にデザインが掲載されました。

Adobe MAX Japan にて制作デザインが展示されました。

NEWS&PRESS情報一覧

事業概要 / ご利用規約

平日11時〜18時は電話でのお問い合わせも承ります。
050-5243-3791
問い合わせ専用となります。具体的な依頼の進行はメールでのやり取りとなりますので、予めご了承ください。タイミングによっては営業時間内でも応対出来ない場合もございます。その際はお問い合わせフォームをご利用ください。

お問い合わせフォーム