【デザインニュース】vol.6 アニメーションを活用したビジュアルストーリーテリング
==========================================
長津：カドベヤCOO／弊社WEBディレクターの長(おさ)的存在
須田：UIデザイナー／ゲーム・ドラムに日々没頭
竹田：WEBディレクター／サウナのためなら全国に出没
森山：WEBディレクター／無類のガジェット好き
古川：WEBディレクター／クリエイティブ部マネージャー
==========================================
🔳 今週のピックアップ 「寺田ニット」
UIデザイナー須田によるデザインコーナーvol.6。
今週の須田的ベストデザインは「寺田ニット」。
長津：かわいいサイトだね。
須田：スクロールでアニメーションが進んでいって、すべて線で描写されています。
すごいシンプルですが、線一本で奥行を表現するアニメーションがリッチなので、さみしさを全然感じないです。
長津：下にスクロールして先に進むと、コンテンツが横からフリックされてでてくるね。
須田：シンプルだけどやっていることは大分すごいですね。
一本の線で描くアニメーションも大変だし、実装も最先端技術を理解していないとできないですね。
長津：これまでは、コンテンツ内で概要を伝えて、詳細はリンクボタン以降で伝えることがほとんどだったよね。最近は、キービジュアルで伝えるべきストーリーテリングを完結させるのが増えてきたね。
古川：トップのストーリー(世界観)の見せ方が全てかもしれないですね。
長津：クライアント提案するとき、「今回は企画飲んでくれなさそう」って思う時があるけど、この見せ方だとクライアントも了承するよね。
長津：ストーリーテリングできるぐらい、ブランドについて理解することが大切だね。このサイトも、クライアント提案時に最初からこのグラフィックを見せたんだろうね。
須田：工場や現場にいってたくさんヒアリングした感じがしますね。
🔳 Three.jsでのアニメーション実装
越智：スキルの高いイラストレーターがデザインした気がします。どう表現するのかな？
竹田：奥行もあるのでThree.jsで処理していると思います。
須田：Three.jsは、3D表現をメインに実装できるJavaScriptライラブリの1つです。
例えば、スクロールしてオブジェクトを回転させたり、スクロールで迫って奥に抜けていく立体的な表現の部分です。
長津：フェードするような、絵と絵をつなぐ表現をThree.jsでやっている感じ？
須田：おそらく。大量のソースコードみても難しくて分からないですけど（笑）
長津：GUIエディタでつくってるのかな？
須田：何かしらのツールで吐き出してThree.jsで実装していると思います。
森山：ブラウザ上でThree.js editorでつくっていそうですね。
越智：制作は、かの有名なSHIFTBRAINさんです。Twitterに制作方法が書いてあります。
一同：「「「「（Twitterみて）すごーーーい！」」」」
長津：カメラの視点と連動してタイミング毎にアニメーションが描画されているんだね。
長津：既存のフロントエンドエンジニアの仕事じゃないよね？
須田：デザイナーと一緒に作っている感じがします。デザイナーの仕事の領域ですね。
竹田：SHIFTBRAINさん、サイトにワークフローも載せてくれていて、ディレクターにも優しい（笑）
🔳 余談 ビジョン浸透とビジュアル表現の関係性
長津：コンセプト設計する上で、納期とヒアリングの時間を天秤にかけちゃうよね。はがゆい。
古川：クライアントのWeb担当は、そもそも明確なステイトメントがない場合もありますよね。
長津：アートディレクター(以下AD)を窓口にして、ADがつくった世界観をもとにすりあわせたりね。
竹田：僕が担当した案件では、クライアントとADの打ち合わせは一度きりでした（笑）
長津：本当は、イメージボードをもとに、言葉での表現・ビジュアルでの表現をそれぞれ2か月でカタチにできるといいよね。
古川：現実的なところは一旦ムシして、理想は前工程で半年ぐらいかけたいですね(笑)
長津：社内の話になるけど、個人的には再度カドベヤビジョンを社内に浸透させていくことが大切だと感じていて、それを伝える術として、寺田ニットさんのようにビジュアルでみせていきたいな。
じゃあ今日はここまで。アディオス！
〆
この記事が気に入ったらサポートをしてみませんか？