「WPJ Conference Vol.1 DESIGN meets CODE」の発表資料

2. デザインエンジニア・ボーダーレスな時代を楽しもう！
1. アプリスキルだけでは勝負しない
2. 画面デザインだけではない、広い世界が待っている
3. 大切なのはインプット∼アウトプットへの責任
4. インブラウザデザインで考えること
5. 最後に個人的に思うこと
デザインエンジニア・ボーダーレスな時代を楽しもう！

3. デザインエンジニア・ボーダーレスな時代を楽しもう！
秋葉秀樹
デザインコンサルティング
ビジュアルデザイン、グラフィックデザイン
HTML, CSS, JavaScript
組み込み機器（家電ディスプレイ）デザイン
映像制作
音楽制作（作曲・編曲）
3DCG（3Dモデリング・3Dアニメーション）
3Dプリンティング、デジタルファブリケーション
筑波大学 非常勤講師
HIDEKI AKIBA
業務・研究・教育内容
株式会社 ツクロア
代表取締役・デザイナー

4. デザインエンジニア・ボーダーレスな時代を楽しもう！
集客を デザイン

5. デザインエンジニア・ボーダーレスな時代を楽しもう！
100種類以上のサカナ達をスマホで飼える、
新感覚・位置ゲーム+知育図鑑系スマホアプリ「サカナタッチ」
http://www.sakanatouch.com/

6. デザインエンジニア・ボーダーレスな時代を楽しもう！
1.アプリスキルだけでは勝負しない

7. デザインエンジニア・ボーダーレスな時代を楽しもう！
やナタで「ものを切る」行為に
スキルを持たない人がケガを防ぐため
問題解決によってデザインされた道具。
それが「ハサミ」。
スキルを持たない人のための道具、
それはアプリケーションも同じ。

8. デザインエンジニア・ボーダーレスな時代を楽しもう！
アプリケーションスキルを持たない人でも
ある程度、目的を達成できる時代
「ペンツール？使えないですけど、これ、描けますよ」

9. デザインエンジニア・ボーダーレスな時代を楽しもう！
(ProTools / DAW)
数百万∼数千万円 10数万円
2000年 現在
ちょっとした動画・音源作成

10. デザインエンジニア・ボーダーレスな時代を楽しもう！
一般の方がグラフィックツールを
使いこなすようになる

11. デザインエンジニア・ボーダーレスな時代を楽しもう！
2. 画面デザインだけではない、広い世界が待っている

12. デザインエンジニア・ボーダーレスな時代を楽しもう！
これは
ソフトウェア学科の
授業風景

13. デザインエンジニア・ボーダーレスな時代を楽しもう！
近年設立された工房はソフトウェア学科の学生やデザイナーが使用

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

15. デザインエンジニア・ボーダーレスな時代を楽しもう！
実案件や仕事を忘れて、もっと楽しんだほうがいい

16. デザインエンジニア・ボーダーレスな時代を楽しもう！
バスドラムの振動をピエゾセンサーで数値化。
MacbookをNode.jsサーバーにして、
数値化された振動データをWeb Socket通信でChromeブラウザが受信。
HTML5 Canvasによって数値をパーティクルで描画。
プログラミングはすべてJavaScriptのみ。

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

18. デザインエンジニア・ボーダーレスな時代を楽しもう！
3. 大切なのはインプット∼アウトプットへの責任

19. デザインエンジニア・ボーダーレスな時代を楽しもう！
見積 レビュー 納品受注開始
公開
UAT（ユーザー受け入れテスト）

20. デザインエンジニア・ボーダーレスな時代を楽しもう！
現実的に起こりうる「ビジネス事情」による予定変更
競合他社の動向
技術進化による市場ニーズの変化
（人工知能, ボットなどの導入）
関わる企業・株主・投資家との絡み
見積
レビュー
微修正
受注開始
要望
大規模な改修
要望
常に変化が
求められるUAT（ユーザー受け入れテスト）
延期

21. デザインエンジニア・ボーダーレスな時代を楽しもう！
現実的に起こりうる「ビジネス事情」による予定変更
見積
レビュー
微修正
受注開始
要望
大規模な改修
要望
延期
常に変化が
求められるUAT（ユーザー受け入れテスト）
デザイナーのスケジュールは
多くの場合、ここだけだと誤解されている

22. デザインエンジニア・ボーダーレスな時代を楽しもう！
見積
レビュー
微修正
受注開始
要望
大規模な改修
要望
レビュー
レビュー
次の課題
デザイン
開発
レビュー
次の課題
レビュー
次の課題
レビュー
次の課題
1週間 1週間 1週間 1週間
契約期間1 契約期間2
限られた制作期間でサービスが成功基準を満たすのは、
今や困難な時代
デザイン
開発
デザイン
開発
エンドユーザーの顔が浮かんでくるとデザインの仕事が楽しく感じる

23. デザインエンジニア・ボーダーレスな時代を楽しもう！
よいデザイナーは事業の成長によりそう

24. デザインエンジニア・ボーダーレスな時代を楽しもう！
4. インブラウザデザインで考えること

25. デザインエンジニア・ボーダーレスな時代を楽しもう！
「アニメーションの実装は
必ずしもエンジニアが
得意とする分野ではない」
ダイナミックに動く
・ドロアー
・ローディング
などインタラクティブ部分
ニュースフィードアプリに
ついてはエンジニアから
JSONを提供してもらう
https://techfeed.io
https://techfeed.io

26. デザインエンジニア・ボーダーレスな時代を楽しもう！
コンセプト
手書きラフ
デザイン
カンプ
インブラウザ
デザイン
プロダクト用
コーディング
重要なのはこの循環

27. デザインエンジニア・ボーダーレスな時代を楽しもう！
インブラウザデザインでやって
くださるんですね
そのままプロダクト（本開発）に
使えるんですか？
• エンジニアとの住み分けを明確に
• デバッグは得意ではない
• あくまでデザイン担当である

28. デザインエンジニア・ボーダーレスな時代を楽しもう！
このSpinner（ローディングアイコン）、
サーバーからJSONが返ってきたらフェー
ドアウトするようにお願いします。
今はsetTimeoutで3秒後に消えるように
ダミーでつくっています。
本プロダクトでそのまま実装…
3秒後にJSON間に合わず、画面
まっしろ。。
//サーバからJSONが返ってきたら
親要素のloadingクラスを外してく
ださい
function () {
// JSON取得、loadingクラスを外す
container.removeClass(“loadi
ng”);
}
.container .spinner {
// Spinner 非表示
transform: scale(0);
transition: .2s;
opacity: 0;
}
.container.loading .spinner {
// Spinner 表示
transform: scale(1);
opacity: 1;
}

29. デザインエンジニア・ボーダーレスな時代を楽しもう！
開発チームは常に恵まれているとは限らない
• 技術やデザインの業務経験が少ないディレクター
• HTML5など最新技術に普段触れない、古いタイプのSIer
それってデザイナーの役目なの？
限られたリソースの中で最大限の成果を出すのも
プロの仕事

30. デザインエンジニア・ボーダーレスな時代を楽しもう！
5. 最後に個人的に思うこと

31. デザインエンジニア・ボーダーレスな時代を楽しもう！
「どんなスキルを習得すれば有利？」
なんて考えなくていい。
それは楽しい体験からはじめて得るもの！
いくら かる？転職に有利？
なんて思わなくていい

32. デザインエンジニア・ボーダーレスな時代を楽しもう！
http://internet.watch.impress.co.jp/docs/news/1040367.html

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

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

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

36. デザインエンジニア・ボーダーレスな時代を楽しもう！
最後に、個人的に…
エンドユーザーへの接点・アウトプットの出口はデザイナーが受け持つ。
「⃝○なスキルもつべき」とあまり決めつけず、
予算や人員、限られたチームで最大限の成果を出すために、
山積した問題に対し、自分が何をするべきか、何ができるのか考えたい。
広くプロジェクトを見渡し、
可能な限りの問題解決を行なうことがデザイナーの勝負どころ
ではないだろうか？

37. デザインエンジニア・ボーダーレスな時代を楽しもう！
秋葉秀樹
HIDEKI AKIBA
Thank you !