Muraki Takuma
 インブラウザデザインとは

 インブラウザデザインの背景
 今までのフローとの違い
 課題

 これからの時代

 インブラウザデザインを取り入れるとしたら…
 まとめ
 最後に
ブラウザ上で
デザインをするということ。
・レスポンシブWebデザインの登場。
・いままでのPhotoShopを使ってカンプを出す
ワークフローに限界がきている。
Webデザインなのに
PhotoShopでデザインをして、
カンプを出す必要があるのか?
Webデザインなのに
!?
PhotoShopでデザインをして、
カンプを出す必要があるのか?
大きく異なる点
デザインカンプを作らない代わりに

ブラウザ上でデザインをするという点。


今までの制作フロー

ワイヤー

デザイン

テスト
アップ

コーディング

テスト
アップ

納品


今までの制作フロー

ワイヤー



デザイン

テスト
アップ

コーディング

テスト
アップ

インブラウザデザインによる新しい制作フロー
ワイヤー

デザイン
&

コーディング

テスト
アップ

納品

納品
PhotoShop
VS

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

LessやSassなどを用いて楽々管理!

・フォントを変更するのが大変。→宣言一つで変更可能!
・要素の配置1つを動かしても大変。→

CSSで柔軟に対応!

・修正によってレイヤーの管理が崩壊。

→そもそもレイヤーがない!

・レスポンシブWebデザインの実現も相当な時間がかかる。

→メディアクエリーで柔軟に対応!

・コーディングの知識がないと、コーダーから「組めない」という声が

→ブラウザ上だから組めるものしかできない。
・画面幅が変わったときの見た目を表現できない。

→画面幅を変えることである程度は、確認ができる。
ブラウザでページをデザインするということは
PhotoShopでページをデザインするよりも

フレキシブル

だということ。
他にもメリットたくさん!
・早い段階で実機でテストアップができる。
・「組めない!」ということが無くなる。
・全体の稼働が減る。
・お客様がイメージしやすい。
・「使ってみたら使いにくかった」を防ぐことができる。
・余計な画像を使わずに済む。
・早めに動き(jsなど)のテストアップができる。
・ PhotoShop上で困ることを、楽にできる。
etc
ここまでの話だけなら
インブラウザデザインって良いかも!
って思いますが・・・
ここからは課題のお話。
・CSS3が、全ブラウザに対応してない。
・ブラウザでできるデザインの限界。
・お客様への説明と理解。
・デザイナーとコーダーの境目は?
・全体の技術力や知識の向上。
・新しいフローの確立までの時間。
・ゴールが見えないという不安。

・PhotoShopからブラウザへ切り替える事への抵抗感
・今まで以上に、ワイヤーが重要になってくる。
etc
課題もたくさん
それでも時の流れは
待ってくれない。
これからの時代は…?
デザイナー×コーダー
が手を取り合う時代
(両方できる人は、別ですが)
コーディングしかできない人がデザインをしたら、
いかにもコーダーが組んだようなデザインしかできません
デザインしかできない人は、
そもそもコーディングができません
(両方できる人は、別ですが)
コーディングしかできない人がデザインをしたら、
これじゃあ、
いかにもコーダーが組んだようなデザインしかできません
まずい。
デザインしかできない人は、
そもそもコーディングができません
(両方できる人は、別ですが)
コーディングしかできない人がデザインをしたら、
いかにもコーダーが組んだようなデザインしかできません
デザインしかできない人は、
そもそもコーディングができません

両方の技術を身につける必要がある。
分業自体が難しい時代に入ってきているので
まずは、お互いの技術を身につける必要がある。
今からできそうなこと。
・トップページ(ユニークページ)は
デザイナーが今まで通りカンプを作る。

モジュール一覧をブラウザ上で
デザイン・実装。

・
モジュールベースのデザイン(設計)
・1ページまるごとデザインするのではなく、
モジュールごとにデザインをする。
・モジュールの組み合わせによって1ページをデザインする。
インブラウザデザインについて。
・メリットは非常に多い。
・課題も非常に多い。
・今すぐ企業に取り入れるのは難しい?
・今からできることもたくさんある。
・技術において、分業が難しくなってきている。
・コミュニケーションが必須。
日々進化するWeb業界では、
立ち止まってはいけない。
時代に合ったワークフローを
常に取り入れていく必要がある。
ご清聴ありがとうございました。

インブラウザデザインについて(考察)