202109_kadobeya_talks vol.1 ／ 動くWebデザイン

=================================================

長津：カドベヤCOO／弊社WEBディレクターの長(おさ)的存在

宋：WEBデザイナー／台湾出身。

森山：WEBディレクター／無類のガジェット好き

古川：WEBディレクター／クリエイティブ部マネージャー

=================================================

今週のデザインコーナーをお願いします。

長津: “動く Web アイデアデザイン帳”、なるほどね。

宋: 提案時に使えるデザイン的な動きを調べようとしたらこれにたどり着きました。

長津: おっこれ良さそう。

宋: 今まで動きを考え深く考えずに、エンジニアに任せてることが多かったので、自分でも勉強しとこうと思いました。

長津: 面白いね。

宋: デザインサンプル集がサイトに集約されていて、この動きがいいなと思ったらそういう作りにしようということができます。

長津: javascriptまでコピペできる？

宋: 一応そうですね、ソースコードはあります。全部あるかは定かではないんですけれども、書籍もあって、本からソースコードも見れたり、WEBからダウンロードできます。

長津: 本当だ。書籍もあるんだ。

宋: デジタルハリウッド大学の先生が監修しているんです。

長津: 「印象に関わる動き」と「機能に関わる動き」とか、分類が面白い。

宋: 別に動かなくて大丈夫だけど動くだけで印象が変わるということもありますよね。

長津: へー「最低限覚えておきたい現れ方」ってコーナーもある。今日日こういうのがないとユーザーの目線誘導できないもんね。

宋: ちょっとでも動いた方が、うるさくならない限りはいいのかなと思いまして。

長津: おもしろ！これって誰向けなんだろ？デザイナー向け？エンジニア向け？

ディレクターがワイヤーを考える時は動きまで考えて設計する事って少ないわけでしょう？

宋: 私も自分がデザインしている時に自分からやろうって言う時もあれば、何も考えず作る時もあるので。インタラクションは誰が担当するか？の取り決めって無いと言ったらないですよね笑

サイトのテイストに合わせる形で、明るいサイトとか雰囲気がちょっと若いというかそういうサイトは動いた方がいいとか思いながら作る事はありますよね。

逆にちょっと静かなコンセプトのサイトだと、そんなに動きをつけなくても良いのかな、ぐらいは思いながらデザインしてます。

長津: なるほど。ディレクターがワイヤー作るときにそこまで考えてないかも。

宋: 「誰がやる?」ってちゃんと決めておいた方がいいですよね。

長津: 確かに。今までは強いていうならデザイナーの仕事だったのかな。ざっくり「こんな感じの動き」って伝えて、フロントエンドエンジニアが「いい感じにやっておきます」という阿吽の呼吸だったけど、ここまで明確にしっかり指示はしてないね。

完全に指示できるデザイナーって結構少ない、というか人材として貴重だよね。

宋: そうですね。優秀なデザイナーが細かいニュアンスまで指示したとしても、プロジェクト全体のコミュニケーションがうまくいってなくて、なんかイメージ違うなぁみたいなことって結構起こります。

デザイナーがエンジニアに指示するのがいいのか、ディレクターを通してコミュニケーションをとるのがいいのか。

デザイナーからすると、理想はディレクターが全部まとめて連携した方が本当はやりやすいと思ってます笑

長津: なるほどね。

2年前ぐらいにGoogleのマテリアルデザインのカンファレンスに出たんだけど。マテリアルデザインの画面設計の思想としては、「ワイヤー=デザイン」というか、最初からコンポーネント集という考え方なんだよね。ワイヤーはワイヤーでXDとかsketchとかFigmaとかプロトタイピングアプリで作るんだけど、オブジェクトの動きを伝える専用のGoogleのアプリみたいのが用意されてて…”モーション”だっけかな。ワークフローとしてそれぞれ別工程として考えられてたんだよね。

その"モーション"だったかを使って動きを指示する役割は、ディレクターの仕事として想定されてるんだなと感じたのを思い出した。

宋: プロトタイピングツールみたいなもんですかね？

長津: そうそう。インタラクション専門の。

宋: XD も簡単な動きをつけれるので、それよりもうちょっと機能が揃っているプロトタイピングツールはまだあると思います。

長津: なるほどね. ディレクターの仕事は広いな〜。

宋: そうですよね。会社によっては UX デザイナーが担当するときもあります。ユーザー体験に関わる機能の動きは UX の人がこう動いた方がいいとか指示したりする。

長津: なるほどね。とはいえ、そこまでディレクターが動きを考えてやれるのがベストはベストだよね。

古川さん森山さんはそこまでディレクションできる?

森山: 個人的にこういう動くやつってあんまりやったことないんですけど、そもそもあんま好きじゃないっていうのはありますよね。

長津: はははは。なるほどね。

森山: 今もこのサンプルを見ててページ自体が重いじゃないですか。”見せる表現重視で重さが関係ないサイト”だったら動いてみせるのはいいでしょうけど、個人的にはこういう重たいサイトを開いたら閉じる方向になります笑

宋: そこなんですよね。

コンテンツによってここは重くなっても動かしたほうがいいとか、そういう判断は誰がやるのっていう話です。そこは要件定義に力を入れるべきかと。

長津: ここのコーナーはCVにつながるところだからサクサクだけど、ここは世界観をわかってもらいたいからグリグリ動くみたいな切り分けは、 WEB ディレクターがやるべきところだわな 。なんでもかんでも全部が動く前提でワイヤーを作るとめちゃくちゃ重くなっちゃうっていうね。

宋: 例えば最初のメインビジュアルだけつけるか、ボタンだけとか、 全体のバランスを考えないといけない場面がある

古川: クライアントの要望ありきだと思う

長津：クライアントは全部動かして言うに決まってる笑

古川: ちょっと動かしたほうがクライアントが喜ぶ。この「動くデザインアイデア帳」のサイトも、スクロールするたびに全部アクションがあるってのは非常にうざい。

宋：このサイトはあえてだと思いますけど。

長津: 全部が全部こうだったら嫌だよね

古川:お客さんに提案する立場のディレクターとしては、ガンガン動きをつけますという感じを提案段階では出したくないというのが本音ですよね。

実装しながら、重くならない範囲で、ホバーの動きをつけるとか、クリッカブルエリアに色を付けるとか、拡大したりするとか、ちょっとした見せ方の工夫を細部までこだわっていますよっていうのをある程度工程が進んでから見せられるのがグッドなんだよね。

実際問題、エンジニアや、パートナー企業が、技術的に実装できないことを約束するわけにはいかないというのもあるし。

長津: どう？うちのパートナーさんとか実装できると思うんだけど。

古川: 基本的に世に出ている物は実装できると思う。

長津: まとめると、誰が動きの指示を出すのか問題はまだ解決されてないけど、ディレクターの必須項目として、こういう動きを1回一触って頭に入れておかないといけないってことなのかね。

古川: こういう動きが実装できるって言うのは当然頭に入れておいて、ここの場面ではこの動きがあるんじゃないかと提案したり、後はお客さんがこういう動きにして欲しいっていう時に対応できるようにするのが良さそう。

長津: そうだね。最初の依頼段階でお客さんにも動きのイメージあったりするよね。

古川: そうですね。その時は実現したいイメージを聞いて、提案しますよね。

凝った動きを作って提案した場合、確認した時に弾かれちゃう時ってあるから、こういうサイトを見てもらって動きのイメージをすり合わせるのはいいよね。

長津: そうだね。レファレンスとして結構役に立つサイトってことですよね。

古川: その通りだと思う。

長津: 素朴な疑問だけど、みんな XD の動きをつける機能とか使いこなしてます?

宋: そんなに使う機会はない。

長津: Kさん（パートナーデザイナー）とかは 結構デザインカンプの状態で 動きつけて意識高いよねあれ

古川:そうですね

宋:実は、早い段階で動きをつけると、後々面倒くさくなることもあります。後々修正とかで。

長津: では、そこそこイメージが擦り合わさって合意が取れた状態であの機能を使うってことか。

そうかそうか、実際の現場では「デザイン修正に時間がかかる問題」とのトレードオフっていうのも見逃せないよね。

宋: なんにせよ XDの動きをつけるプロトタイプ的な機能はそんなに使わない。

長津：俺、そもそもどこにあるかわかってない笑

宋： 左上にデザインモードプロトタイプモードと共有モードがあって。プロトタイプで動きをつけるとかリンクを繋げるとかができます。でも、できることってそんなにないですよ。

長津：ちょっとスライドするぐらいか。

宋： ディゾルブとか。

長津：でも、ここら辺はデザインするときに意識高くいたいよねっていう話だね。

宋: プロトタイピングツールあんまり勉強したことないんですけども 、“プロトパイ”みたいなものだったり色々使ってみようかなとさっき思ってたんですよ。

長津：シングルページアプリケーションの作り方って多分ウェブのワイヤーとは全く違うじゃん。SPAの設計手法って今どうなってんの？ってを話を近々できたらいいね。

宋: たぶんSPAはよくわからないんですけど、アプリ作っている人は”プロトパイ”使ってる人が多い

長津：これからさらに増えていくと思うんだけど、Googlaアナリティクスとかでも、そろそろWebサイトじゃなくて、Webアプリとして分析しましょうって話になってるし。今までのサイト作りの手法も変わっていく過渡期にあるよね。

今すぐ考え方を変えてものを作ってよってGoogleに言われてるわけだけど、いざやってみようと思うと、ツール的に効率よく画面設計ができないんじゃないかなという不安に駆られている。その辺を次話せたら嬉しいな。

宋：プロトタイプツール色々勉強したいと思います。

〆