デザインエンジニア・ボーダーレスな時代を楽しもう!

37

Transcript of デザインエンジニア・ボーダーレスな時代を楽しもう!

Page 1: デザインエンジニア・ボーダーレスな時代を楽しもう!
Page 2: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

1. アプリスキルだけでは勝負しない

2. 画面デザインだけではない、広い世界が待っている

3. 大切なのはインプット~アウトプットへの責任

4. インブラウザデザインで考えること

5. 最後に個人的に思うこと

デザインエンジニア・ボーダーレスな時代を楽しもう!

Page 3: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

秋葉秀樹

デザインコンサルティング ビジュアルデザイン、グラフィックデザイン HTML, CSS, JavaScript 組み込み機器(家電ディスプレイ)デザイン 映像制作 音楽制作(作曲・編曲) 3DCG(3Dモデリング・3Dアニメーション) 3Dプリンティング、デジタルファブリケーション 筑波大学 非常勤講師

HIDEKI AKIBA

業務・研究・教育内容

株式会社 ツクロア 代表取締役・デザイナー

Page 4: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

集客を“デザイン”

Page 5: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

100種類以上のサカナ達をスマホで飼える、 新感覚・位置ゲーム+知育図鑑系スマホアプリ「サカナタッチ」

http://www.sakanatouch.com/

Page 6: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

1.アプリスキルだけでは勝負しない

Page 7: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

斧やナタで「ものを切る」行為に スキルを持たない人がケガを防ぐため 問題解決によってデザインされた道具。

それが「ハサミ」。

スキルを持たない人のための道具、 それはアプリケーションも同じ。

Page 8: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

アプリケーションスキルを持たない人でも ある程度、目的を達成できる時代

「ペンツール?使えないですけど、これ、描けますよ」

Page 9: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

(ProTools/DAW)

数百万~数千万円 10数万円

2000年 現在

ちょっとした動画・音源作成

Page 10: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

一般の方がグラフィックツールを 使いこなすようになる

Page 11: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

2. 画面デザインだけではない、広い世界が待っている

Page 12: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

これは ソフトウェア学科の

授業風景

Page 13: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

近年設立された工房はソフトウェア学科の学生やデザイナーが使用

Page 14: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

Page 15: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

実案件や仕事を忘れて、もっと楽しんだほうがいい

Page 16: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

バスドラムの振動をピエゾセンサーで数値化。 MacbookをNode.jsサーバーにして、 数値化された振動データをWeb Socket通信でChromeブラウザが受信。 HTML5 Canvasによって数値をパーティクルで描画。

プログラミングはすべてJavaScriptのみ。

Page 17: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

Page 18: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

3. 大切なのはインプット~アウトプットへの責任

Page 19: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

見積 レビュー 納品受注開始

公開

UAT(ユーザー受け入れテスト)

Page 20: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

現実的に起こりうる「ビジネス事情」による予定変更

競合他社の動向技術進化による市場ニーズの変化 (人工知能, ボットなどの導入)

関わる企業・株主・投資家との絡み

見積 レビュー

微修正

受注開始

要望

大規模な改修

要望

常に変化が 求められるUAT(ユーザー受け入れテスト)

× 延期

Page 21: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

現実的に起こりうる「ビジネス事情」による予定変更

見積 レビュー

微修正

受注開始

要望

大規模な改修

要望

× 延期常に変化が 求められるUAT(ユーザー受け入れテスト)

デザイナーのスケジュールは 多くの場合、ここだけだと誤解されている

Page 22: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

見積レビュー

微修正

受注開始

要望

大規模な改修

要望

レビューレビュー 次の課題

デザイン開発

レビュー 次の課題

レビュー 次の課題

レビュー 次の課題

1週間 1週間 1週間 1週間

契約期間1 契約期間2

限られた制作期間でサービスが成功基準を満たすのは、 今や困難な時代

デザイン開発

デザイン開発

エンドユーザーの顔が浮かんでくるとデザインの仕事が楽しく感じる

Page 23: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

よいデザイナーは事業の成長によりそう

Page 24: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

4. インブラウザデザインで考えること

Page 25: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

「アニメーションの実装は必ずしもエンジニアが 得意とする分野ではない」

ダイナミックに動く ・ドロアー ・ローディング などインタラクティブ部分

ニュースフィードアプリについてはエンジニアからJSONを提供してもらう

https://techfeed.io

https://techfeed.io

Page 26: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

コンセプト

手書きラフ

デザイン カンプ

インブラウザ デザイン

プロダクト用 コーディング

重要なのはこの循環

Page 27: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

インブラウザデザインでやって くださるんですね そのままプロダクト(本開発)に 使えるんですか?

• エンジニアとの住み分けを明確に • デバッグは得意ではない • あくまでデザイン担当である

Page 28: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

このSpinner(ローディングアイコン)、 サーバーからJSONが返ってきたらフェードアウトするようにお願いします。 今はsetTimeoutで3秒後に消えるように ダミーでつくっています。

本プロダクトでそのまま実装… 3秒後にJSON間に合わず、画面まっしろ。。

//サーバからJSONが返ってきたら親要素のloadingクラスを外してください

function(){//JSON取得、loadingクラスを外すcontainer.removeClass(“loading”);

}

.container.spinner{//Spinner非表示transform:scale(0);transition:.2s;opacity:0;

}.container.loading.spinner{//Spinner表示transform:scale(1);opacity:1;

}

Page 29: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

開発チームは常に恵まれているとは限らない

• 技術やデザインの業務経験が少ないディレクター • HTML5など最新技術に普段触れない、古いタイプのSIer

それってデザイナーの役目なの?

限られたリソースの中で最大限の成果を出すのも プロの仕事

Page 30: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

5. 最後に個人的に思うこと

Page 31: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

「どんなスキルを習得すれば有利?」 なんて考えなくていい。

それは楽しい体験からはじめて得るもの!

いくら儲かる?転職に有利? なんて思わなくていい

Page 32: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

http://internet.watch.impress.co.jp/docs/news/1040367.html

Page 33: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

Page 34: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

Page 35: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

Page 36: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

最後に、個人的に…

エンドユーザーへの接点・アウトプットの出口はデザイナーが受け持つ。

「◯○なスキルもつべき」とあまり決めつけず、 予算や人員、限られたチームで最大限の成果を出すために、 山積した問題に対し、自分が何をするべきか、何ができるのか考えたい。

広くプロジェクトを見渡し、 可能な限りの問題解決を行なうことがデザイナーの勝負どころ ではないだろうか?

Page 37: デザインエンジニア・ボーダーレスな時代を楽しもう!

デザインエンジニア・ボーダーレスな時代を楽しもう!

秋葉秀樹HIDEKI AKIBA

Thank you !