HTML5時代のモバイルWEBアプリケーションデザイン先生：白石俊平・秋葉秀樹

Ruben Bos

HTML5時代のモバイルWEBアプリケーションデザイン
白石俊平
株式会社オープンウェブ・テク
ノロジー

秋葉秀樹
株式会社ツクロア（tuqulore）

何事にも答えはひとつでない世界
デザイナーへの不満・エンジニアへの不満・仕事上の不満

•デザイナーのスキルについて
•ワークフロー・チーム作業について
•新技術・UIトレンドについて

白石俊平
株式会社オープンウェブ・テク
ノロジー

秋葉秀樹
株式会社ツクロア（tuqulore）

Question 1

デザイナーへの不満
エンジニアへの不満
仕事上の不満

デザイナーのスキルについて
Webデザイナーになるにはどうしたらいいでしょうか？

Screenmedia

「Webデザイナースキル」で検索してみると…
デザインセオリー、色彩、タイポグラフィ、コンセプト立案
Photoshop、Illustrator、Dreamweaver、Flash、Fireworks
レスポンシブWebデザイン、パララックス
HTML、JavaScript、ActionScript、PHP、jQuery、WordPress

JavaScriptができないんですがどうしたらいいでしょうか？

webcrunch

http://t32k.me/mol/log/why-valley-wants-designers-can-code/

1.
あなたが働いている領域の中間についてより深く理解できるでしょう。もし効率
的なデータベース処理をできるクエリーが書ければ、トレードオフに必要な適切
なレスポンス時間を設定できます。なにがコードを簡単にし、難しくするのか理
解していれば、アイデアをより速く実装できるでしょう。（開発工数は限られて
いるので工数削減以上のものが得られるかもしれません。）中間領域を知ること
は事をうまく運び、より考えられたデザインの決定をする上で役立つでしょう。

!
2.
プログラミングを理解することで、より良いプロトタイプ作ることができます。
デザインアイデアをチームメイトやクライアントに伝えるための最適な方法は、
動くプロトタイプを作ることです。素早くプロトタイプを作ることであなたのア
イデアに命が吹き込まれ、内なる素晴らしいアイデアを解き放たれ、あなたのデ
ザインの本当の意味を皆が理解するのに役立つでしょう。

!
3.
プログラミングを理解することで、製品コードのバグや欠陥を特定するのに役立
つでしょう。チームメイトのデザイナーが活気づくにつれて、あなたはUIイン
タラクションの問題に取り掛かっているプログラマーを助ける重要な役割を担う
ことができるでしょう。つまりそれは、最終プロダクトがこれ以上無いほどの出
来になるということです。

!
原文：3 Reasons Why Learning To Code Makes You A Better Designer

そのデザイン、ほんとに操作しやすい？

2500 ÷ 50 = ?

Dribbbleが好きなんですが、それを見続けてたら
UIデザイナーになれますか？

企業担当者のデザイナーへの不満（実話）
動きがわからないとアプリはつくれないじゃないですか？
結構そのあたりをわかってくれるデザイナーさんがいないんですよ…
某家電メーカーアプリ担当

なんで一枚の画面デザインでアプリがつくれると思うかな…
動きを全然考えてくれないんだよね。
某研究所アプリ担当

こんな画面の案をいっぱい出されたんだけど
エラーの画面とか結果表示とか、不都合な状態は考えてくれない。
某カメラメーカーアプリ担当

ツクロアからの提案！

デザイナーはプログラムができないのであれば

特にアプリのような場合、

デザインチームにエンジニアを一人くらい混ぜた
チーム編成がよいです

ワークフロー・チーム作業について
Q. エンジニアさんとの会話に苦労しています
。
使ってる単語が難しいし、
やたら論理的に話すことを求められるし、
そもそも話すときの姿勢が攻撃的です・・・
どうしたらいいでしょう？

iDo Photography

ワークフロー・チーム作業について
要件がコロコロ変わるのですが、どうしたらいいでしょうか？

Harding Theatre

改革ポイント！
デザインワークを変えるための提案

常識？非常識？デザイン決定までの流れ
印刷・出版デザインの一例

DTP
印刷

イメージラフ

http://www.wave-inc.co.jp/weblog/index.php?paged=12

ゲームの一例

エンジニアによるプロトタイプ

グラフィックデザイン

ストレスのない操作感になるか？
ゲームシステムで矛盾がないか？
触って気持ちいいか？
（注意）画像はイメージです


出版・印刷
デザインの
決定プロセス

ゲームデザインの
決定プロセス

Web（アプリ）デザインは割とゲームよりなのかもしれません

新技術・UIトレンドについて
見出しとかに画像を使いたがるお客さんが多いんですが、
どうしたらいいでしょうか？
そもそも、HTML5とかCSS3っていつ、どう使うの
が適切なの？
albertpaul143

HTML5時代のモバイルWEBアプリケーションデザイン先生：白石俊平・秋葉秀樹

新技術・UIトレンドについて
フラットデザインを求められるのですが、どうしてもしょぼくなります
。
どうしたらいいでしょうか？

「主役」と「脇役」の関係を明確にしよう
必要な要素、不要な要素がより明確化

2003年

2013年

Mac OS9用DVDプレイヤー（アップル製）

iPhone用動画プレイヤー（アップル製）

効率的生産性・環境の変化

みなさんからの質問タイム

告知：Designian 002
http://designian.html5j.org/events/2/

HTML5時代のモバイルWEBアプリケーションデザイン先生：白石俊平・秋葉秀樹

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to HTML5時代のモバイルWEBアプリケーションデザイン先生：白石俊平・秋葉秀樹 (20)

More from schoowebcampus (20)

Recently uploaded (9)