社内でプレゼンをしたときのものです。

1. Muraki Takuma

2.  インブラウザデザインとは
 インブラウザデザインの背景
 今までのフローとの違い
 課題
 これからの時代
 インブラウザデザインを取り入れるとしたら…
 まとめ
 最後に

4. ブラウザ上で
デザインをするということ。

5. ・レスポンシブWebデザインの登場。
・いままでのPhotoShopを使ってカンプを出す
ワークフローに限界がきている。

6. Webデザインなのに
PhotoShopでデザインをして、
カンプを出す必要があるのか？

7. Webデザインなのに
！？
PhotoShopでデザインをして、
カンプを出す必要があるのか？

8. 大きく異なる点
デザインカンプを作らない代わりに
ブラウザ上でデザインをするという点。

9. 
今までの制作フロー
ワイヤー
デザイン
テスト
アップ
コーディング
テスト
アップ
納品

10. 
今までの制作フロー
ワイヤー

デザイン
テスト
アップ
コーディング
テスト
アップ
インブラウザデザインによる新しい制作フロー
ワイヤー
デザイン
＆
コーディング
テスト
アップ
納品
納品

11. PhotoShop
VS
インブラウザデザイン

12. PhotoShopでページをすべてのデザインをしていると・・・
・カラースキームを変更するのは大変。
・フォントを変更するのが大変。
・要素の配置1つを動かしても大変。
・修正によってレイヤーの管理が崩壊。
・レスポンシブWebデザインの実現も相当な時間がかかる。
・コーディングの知識がないとコーダーから「組めない」という声が
・画面幅が変わったときの見た目を表現できない。
etc

13. ブラウザでページをデザインすると・・・
・カラースキームを変更するのは大変。→
LessやSassなどを用いて楽々管理！
・フォントを変更するのが大変。→宣言一つで変更可能！
・要素の配置1つを動かしても大変。→
CSSで柔軟に対応！
・修正によってレイヤーの管理が崩壊。
→そもそもレイヤーがない！
・レスポンシブWebデザインの実現も相当な時間がかかる。
→メディアクエリーで柔軟に対応！
・コーディングの知識がないと、コーダーから「組めない」という声が
→ブラウザ上だから組めるものしかできない。
・画面幅が変わったときの見た目を表現できない。
→画面幅を変えることである程度は、確認ができる。

14. ブラウザでページをデザインするということは
PhotoShopでページをデザインするよりも
フレキシブル
だということ。

15. 他にもメリットたくさん！
・早い段階で実機でテストアップができる。
・「組めない！」ということが無くなる。
・全体の稼働が減る。
・お客様がイメージしやすい。
・「使ってみたら使いにくかった」を防ぐことができる。
・余計な画像を使わずに済む。
・早めに動き(jsなど)のテストアップができる。
・ PhotoShop上で困ることを、楽にできる。
etc

16. ここまでの話だけなら
インブラウザデザインって良いかも！
って思いますが・・・
ここからは課題のお話。

17. ・CSS3が、全ブラウザに対応してない。
・ブラウザでできるデザインの限界。
・お客様への説明と理解。
・デザイナーとコーダーの境目は？
・全体の技術力や知識の向上。
・新しいフローの確立までの時間。
・ゴールが見えないという不安。
・PhotoShopからブラウザへ切り替える事への抵抗感
・今まで以上に、ワイヤーが重要になってくる。
etc

18. 課題もたくさん

19. それでも時の流れは
待ってくれない。

20. これからの時代は…？

21. デザイナー×コーダー
が手を取り合う時代

22. （両方できる人は、別ですが）
コーディングしかできない人がデザインをしたら、
いかにもコーダーが組んだようなデザインしかできません
デザインしかできない人は、
そもそもコーディングができません

23. （両方できる人は、別ですが）
コーディングしかできない人がデザインをしたら、
これじゃあ、
いかにもコーダーが組んだようなデザインしかできません
まずい。
デザインしかできない人は、
そもそもコーディングができません

24. （両方できる人は、別ですが）
コーディングしかできない人がデザインをしたら、
いかにもコーダーが組んだようなデザインしかできません
デザインしかできない人は、
そもそもコーディングができません
両方の技術を身につける必要がある。

25. 分業自体が難しい時代に入ってきているので
まずは、お互いの技術を身につける必要がある。

26. 今からできそうなこと。
・トップページ（ユニークページ）は
デザイナーが今まで通りカンプを作る。
モジュール一覧をブラウザ上で
デザイン・実装。
・

27. モジュールベースのデザイン（設計）
・1ページまるごとデザインするのではなく、
モジュールごとにデザインをする。
・モジュールの組み合わせによって1ページをデザインする。

28. インブラウザデザインについて。
・メリットは非常に多い。
・課題も非常に多い。
・今すぐ企業に取り入れるのは難しい？
・今からできることもたくさんある。
・技術において、分業が難しくなってきている。
・コミュニケーションが必須。

29. 日々進化するWeb業界では、
立ち止まってはいけない。
時代に合ったワークフローを
常に取り入れていく必要がある。

30. ご清聴ありがとうございました。