セラクの「みんなの情熱大学」では最新テクノロジーや先端領域にかかわるセミナー等、イベントを運営しています。専門領域を超えて議論のできる仲間との出会い、ともに良くなる環境と学習機会を提供しています。
Good Design Award 2017受賞者によるデザイン講座
2018年10月12日（金）に開催された「みんなの情熱大学」はデザイナー向けのUI/UXデザイン講座でした。そのなかでもとりわけ「動き」に着目して詳しく解説しています。講師は、「IT×農業」をキーワードとした農業の環境モニタリングサービス「みどりクラウド」にてUI/UXデザイナーを担当している五十嵐さんです。
五十嵐さんはGood Design Award 2017受賞者でありデザインとプログラミングを同時に行うスタイルを得意としています。
講師作成の資料ツールを使用した最先端のセミナー
プロジェクターに映し出された資料は五十嵐さん自ら考案・作成したWEBツールでした。全員参加型のセミナーを実施できるものです。講座は参加者がQRコードを読み取るところから始まり、URLにアクセスすると資料が閲覧できるようになっています。
WEBツールは、グッドボタン（青）、ウェイトボタン（緑）、コメント（紫）などが可視化されていて、参加者がブラウザ上でコメントするとプロジェクターに映し出された画面上にもコメントが流れる仕組みになっています。オフラインでのセミナーでありながら、オンラインのような要素がありとても先進的ですよね。
講師説明の中で「Good Design Award 2017」を受賞したお話しをした途端、セミナー参加者が次々とグッドボタンを押していました。その際、嬉しそうに照れていた五十嵐さんが、周りの雰囲気を和やかにしていました。
デザインの中での「動き」の重要性
講義では、まずデザインにおける「動き」の重要性について話がありました。データ処理の際、アニメーションの動き方次第で、受け手の感じ方が変わるという話を実際にアニメーションを例としてスクリーンへ映しながら説明をしていきます。うなずきながら聞くセミナー参加者がたくさんいらっしゃいました。
次に、「アニメーションのメリットとデメリット」の話になり、Web上で「動き」を出す方法について話は進みます。このタイミングで一人のセミナー参加者がウェイトボタン（緑色）を押しました。五十嵐さんは途端に話を中断し、ウェイトボタンを押した方にどこで引っかかったのかお伺いしていました。通常のセミナーの場合、一度あいだをとって質問事項などを聞くのが普通ですが、今回のように参加者の疑問に対してすぐに反応し答える参加者への気配りが印象的でした。
CSSとJavaScript
Web上で「動き」を出す方法はいくつかありますが、今回はHTML5について解説していきます。
動きを出す方法は主にCSSとJavaScriptの二種類からなりますが、JavaScriptの優位性ついて展開・解説しています。図でもわかるようにHTMLとCSSに比べてJavaScriptでできる事が多いことが見てとれます。
ただ、一方で五十嵐さんはデザイナーにとってJavaScriptは優しくないと言います。
「アニメーションを自動生成してくれるCSSが扱いやすく、JavaScriptは少し玄人向きで大変、、、？」という話だったのですが、どういうことなのでしょうか？
こちらの画像では右に動かす動作をする場合のCSSとJavaScriptのソースコードについて比較しています。同じ動作をさせるのに確かにコード量が違い、結果として全然必要となる工数が違いますね。
これを見ているとJavaScriptは大変というのも頷けます。五十嵐さん曰く、どちらもメリットとデメリットがあるのでお互いのメリットを使いこなすことで魅力的な「動き」のデザインができるということでした。
アニメーションのデザイン的な役割
デザインの中でアニメーションがどのように作用するかという説明もありました。例として上記のアニメーションが使われていました。
ここでは物理法則に沿ってアニメーションを動かすことで画像が何を表示しているのか理解しやすくなることがわかります。上記のスライド画像が左端から真ん中にスライドし、揺れながら止まるアニメーションが使われていました。
セミナー参加者がツールのコメント機能で「プリン？」コメントしました。五十嵐さんは即座にコメントに対して「そうです」と反応し、プリンと認識できた理由は、動きがあるからですと説明をしていました。
確かに動きがあると直感的に、その物体が何かわかりやすいですね。逆に揺れずにそのまま停止するとその物体がどんなものなのか人によってはわからないかもしれません。
このような細かい動きにはCSSだけではなく、JavaScriptの存在が欠かせないとのことで、JavaScriptの重要性が良く理解できました。また最後にSassの紹介と3DのCSSの紹介がありました。
実際の作例もいくつか紹介いただきました。Sassによって通常より簡単にアニメーションの設定を実現でき、3DのCSSを使うことで細部まで動くアニメーションを作る事ができるとわかりました。今後の未来のデザインの可能性を感じました。今回のスライドアプリもSassでつくっているようです。
セミナー終了後、セミナー参加者が資料ツールで質問をコメントで投稿していました。
オンラインの資料ツールだからなのかたくさんの方が質問をしていて、なかには笑いを誘うような質問もあり和やかな質問タイムでした。
最後は乾杯！
懇親会ではデザイナーの皆様が各々UI/UXデザインについて語り合い、楽しそうに情報交換をしていました。またここでも五十嵐さんが作成した資料ツールについてのお話しも多くあり、実に盛り上がった懇親会でした。
その他参加者より
「デザインにおける動きの重要性について再認識ができた」
「プログラミングはサンプル丸写しせず、JavaScriptを真剣に勉強してみようと思った」
「3D CSSの作例が素晴らしかった」
という感想を頂きました。
業務で「動きのあるデザイン」をされている方もこれからしようと考えている方も新たな発見があったり、理解が深まったりと収穫が多い講座だったと思います。
今後も様々なセミナーを実施していきますので「みんなの情熱大学」に是非ご期待ください。
0コメント