[&] designian #01

デザイニアン・ミーティング第1回
「デザイナーがデベロッパーと一緒につくるってどうなんだ!?」
------------------------------------------------------------------------



秋葉：こんばんは、今日はですね、こじんまりと勉強会をしようと思います。
白石さんといろんなところで勉強会をやっています。
どうしてもエンジニアっぽい層が集まってしまうので、
デザイナーもがんばろうぜ！ということで、こういう企画を考えました。

というわけで、そろそろ始めたいと思います。
皆さんよろしくお願いいたします。
自己紹介から。

今日の語り手、僕が一応デザイナーやっているので、エンジニアの人の
話を聞くことからはじめようと思いました。

白石：よろしくお願いいたします。
わたしは普段 html5j というコミュニティをやっていて、今5400人くらい
居るのですが、そちらの方で、問題とまでは考えていないのですが、
エンジニアの率が多いと感じていました。
もとは Google と始めたコミュニティでした。
最近ではデザイナーとエンジニアの垣根が無くなってきました。
デザイナーもスクリプトを気にして、エンジニアもデザインを気にして、
html5j と抽象的な名前に変えました。

そして、今回デザイナー向けの勉強会をやりたいということで
エンジニアとデベロッパーの垣根を壊すということをやりたいと思いました。
本日はエンジニアとしての立場です。

秋葉：20年前から、DTPからはじめて、41歳になります。営業をやったり、
小さな広告事務所で、紙媒体のデザインをやったり、Webのデザインをやったりしています。
今日、エンジニアの立場から、デザイナーに向けて、僕たちがWebのアプリを作りたい
時にどうすれば？という悩みや、とっかかりがあれば良いかと。
JavaScript も勉強しはじめて、ちょっとずつアプリも作り始めました。
Ikesu という NFC を活用して、水槽に貼っているタグで魚をスマートフォンで表示して持ち帰る
アプリを作りました。14000ダウンロードです。

デザイニアンをはじめたキッカケ。
私が前、あることがあって、前まで大阪に住んでいて、
HTML WEST というコミュニティーがあります。
そこの、神戸に住んでいる MURAOKA という男がいます。
エンジニアなんですが、「暑い」んです。
彼の家に泊まったことがあって、朝から、僕にセキュリティの話をし始めたんですよ。

白石：暑苦しいんですよね。

いい環境なんですよ、緑も多くて。
朝から、クロスサイトうんぬんという話を始めて、
俺の朝の一時間を返せ！とおもったけど、
痛い目にあわないと分からない話も、わかりやすく、
エンジニアの目線から噛み砕いて、皆さんに伝えられると....

白石：デザイナーがエンジニアの画面を除きこんで不思議がるのはターミナル、
まずは、ターミナル見て「ウェ〜」とか、Eclipse の画面見ると「うぇ〜」とか。
あとは git ですね。

秋葉：git なんかいかやっているんですね。HTML, css 書く人は多いと思うのですが、
git でやるプロジェクトになると「うぇ〜」って。

白石：git は僕もウェ〜って思います。
バージョン管理システムは便利なもので、その中で git が一番です。

秋葉：dropbox には助けてもらったことがあります。履歴が残っているので。
git コマンドで書くというのが慣れていないので、難しいです。

白石：デザイナーさんも git など、コマンドラインなど使うことになるのかなと。
秋葉：慣れないとだめなのかなと。

今日のミーティング5段階に分けたいと思います。

1. 視覚情報だけでは済まない機能のWebデザイン
2. 動きのある／動的な部分のデザイン
デザイナーはどう「設計（デザイン）するか」
3. 協業か、一人である程度つくるか？
（白石のポジション、秋葉のポジション）
4. 仕事に置けるコミュニケーションとは
5.相手をリスペクトする人は相手からも大切にされる。

■「見た目」だけでは済まない　機能のWebデザイン

はやり言葉として。
レスポンシブWebデザインって何ですか？
画面のサイズによってCSSを振り分けてHTMLは一つで書ける技術のことです....
.... というより
コンテンツをレスポンシブにできるということです。
簡単な話、モバイル環境で成立しないコンテンツは一度情報を分解／整理しなければならなくなる
メディアクエリーでどうします？
レスポンシブがメディアクエリーだと成り立ちません。



白石：うまいこと見せるにはどうするのか？

秋葉：ネタばらししましたね..... そういうことなんですよ。
結局どうするの？こういったのが減ってきているんですよ。
結局、情報はいったん少なく集約して、カテゴライズしなければいけない。
では、どうなるか？多分、情報を少なく見せることになる。




例：GUのサイト
最近リニューアルされました。
多店舗展開されているんですよ。1ページの中の中に全てつまっていました。
7万ピクセル。ちょっとスクロールすると、自分がどの位置にあるのかわかりませんでした。
でもちゃんとしたね！　悪く言うつもりは全然ありません。
多店舗展開しているところは、現在地中心から探すのが普通ですね。
グルナビとか、食べログとか。
そうそう、住所を打たなくてもいいよね。僕らにとってはそこもデザインの一つですよね。
それはエンジニアの作業かもしれないですが、そこにデザインとして入っていくのが大事かなと。

白石：デザインとは広くとらえていますよね？
秋葉：なんていうのかな？椅子のプロダクトのデザインだと、形よりも座り心地とか、
環境デザインだと、緑化されて綺麗にみえるんだけれども、緊急車両が入れる導線が考えてあるとか、
そういうのが世間一般で言われるデザインと言われていると思うんです。
そういう視点でとらえたら、Webデザインってすごく考えさせられるところがあって、
見た目だけで考えると、導線ひきにくくなるところがある、スマートフォンとか。

白石：うまいことまとめるなら、使う人のことを考えてどうするのかが、デザインで、
Webデザイン以外なら、そういうところも含めるのだが、
WebだとPhotoshop かイラストレーターかという議論になってしまう。

ではどうなるか？
多分、ユーザーが知りたい事を「検索」「ソート」など
させた方が早く満足させるかも？
場合によって.... ですが。

つまり、インタラクティブ（双方向なやりとり）が検討される...かもしれない。

僕らが作る見た目だけじゃなくて、それだけじゃ解決できなくて、
Webサイトが作るところまではいろんな人たちが作れるのだが、
そこから裏側にデータを渡して、裏側から返してもらう時に、
エンジニアに何をお願いすれば良いのかなと、考えています。

見た目やレイアウトだけのデザインで済まないことだって.....

僕らのデザインは、紙媒体ではなくて、ブラウザをうまく作るのがいいのかなと。
デザイナーからわたされて、JavaScript を書いてみたんだけど、
これだとうまくいかない.... とかありますか？

白石：それはありますね。JavaScript のノウハウがデザイナーさんに蓄積されていないんですね。
いろんな要因でこうなっているんだと思いますが、
ここ数年、HTML5 が脚光を浴びていて、それが一つ大きな影響になっている。
HTML5 以前は Flash と静的なWebページにはっきりわかれていました。
それが当たり前だと思っていました。
その壁が HTML5 で取り払われてきて、そういうところから来ているのかなと思います。
で、その変化が急だったので。急に来ましたから、2009年くらいに言われはじめて、
2010年くらいに火がつき始めて、
急に動的なデザインして！と言われても困るのかなと。

秋葉：IEの問題があって、最近やっと IE 8 以上となりましたが...
白石：最近は IE のことを考えないようにしています。（会場：笑）

秋葉：僕ね。IE8 になってやりやすくなったのは、CSSでポジションを合わせて重ねるデザインが
やっとやりやすくなりました。IE7 以前に対応させるのであれば、重ねる系は鬼門です。

白石：そういう自体には、企業向けの仕事をしていました。

■やっと本題
ブラウザを上手に使ったWebサイトをどううまく設計できるか？

●デザインカンプの問題
クライアントの同意を得るものとしては欠かせないものだと思いますが、
なかなかカンプを作ってもそのとうりにならないことが多かったりしません？
なんかこう、どこか動きのあるところ、結構後で、見せる、アップロードさせる機能とか、
ローディングバーとかどう作るかな？HTMLで作るのかな？

白石：今日あった話なのですが、デザイナーさんが ON と OFF の画像をくれましたが、
disable の画像をくれていなくて困りました。プログラマだと分かるのですが、
絵から考えると、足りていない。
いろんな種類の画像をくれているのですが、足りていない。

秋葉：デザイナーはそういうところに気が回らないんですよね。
1シーンで完結してしまうんですよ。
ストーリーが多いので、ボタンひとつひとつの状態を考えないといけなくて、
作るのをこのケース、このケースと考えないといけないですね。

白石：秋葉さんはどうしているんですかね？
秋葉：僕は無視されているんですよ。
状態を考えないで、渡すので、エンジニアが HTMLのボタンタグにしてしまっているんですよ。
僕としては残念なんですよ。
「なんでですか？」と聞いたことがあって。

白石：足りない時に、いちいち頼まないといけないのが面倒なので、
CSSで同じようなものを作った方が早いというのがエンジニアの考え方。

秋葉；CSS3 の機能も考えたデザインカンプだといいんじゃないかと。
そこまで考えてデザインを仕上げていかないといけないかなと。

白石：Photoshop で作っていると「幅固定」みたいなデザインカンプが多くって....

秋葉：最近、スマートフォンのデザインが多くなってから、伸縮しても大丈夫な作りにする人は
だいぶ増えたと思います。できない人も居るので、そこの問題は大きいのかなと。
DTPのデザインやっているところがデザイン担当すると、ボタン幅が固定されていたり、
まさにそういうことが置きましたね。

白石：そういう人の方がメディアクエリーがしっくりするらしく、640px の時のデザインとか、
ぴったりのデザインを数種類だしてくることが多いです。

秋葉：経験が無かったりするんですかね？

白石：ああ、そういう風に考えるんだ... と。

秋葉：ただ、いずれにしろ、スマホ対応を意識したデザインカンプは多くなってきたかな〜と

白石：縦のことを考えてくれるけど、横のことを考えてくれませんよね？
結局、エンジニア側が、結局幅はマークアップする人が考えて、横にしても伸びるけど、
読めたもんじゃないですよね？横は忘れちゃうんですかね？

秋葉：マークアップができる人は、今後良くなっていくと思うんですよ！

●ワイヤーフレームの問題。
ちょっとした状態の変化によって、ボタンのグレーアウトするような時、
例えば、ページの左右、こっちを押すとこっちが出てくるというような、
Native アプリとか、その時にもう次のページが無かったらボタンを消したりするのは
考えるんだけど、ワイヤーフレームだけで考えると、
オフラインになったりした時とか、どうしたらいんだろう？と手戻りが発生する。
非同期通信で画面を更新するとか、そういった時に、通信が悪い時にエラーの画面を
エンジニアに任せてしまうと、アラートの画面がポッとでてきて、終わる。
そういうところをエンジニアに任せるのも違うよね？と僕はおもうんだけど。

ワイヤーフレームは僕らが都合のいい状況しか考えていないんですよ。
いままでWebサイトなら、まだ良かったんだけど、
あんまり見受けられなかったことだけれども、
アプリになってくると、困りますよね。

白石：業務系アプリだと、最初エラーパターンをたくさん洗い出すんですよ。
Web系だと、設計に時間かけずに、さっそく実装！となるので、
そういうのは仕方ないのかな？　β版でリリースして改善改善と....

秋葉：たまに PHPのエラー画面とか出たり、
なんか僕ね〜　ここで何回か手戻りが発生して、
ここまで考えられれば、アプリのデザインがもっと良くなるんだと思っているんだけど、
エラーの画面ってどうすればいいんですか？　と聞くようにしています。

白石：業務系は、エクセルが大活躍するんですよ。エラーの状態もたくさんかきこみますが、
Web系だとそこまでやっているのは無いですよね？

秋葉：Ajax, スマホだとたくさんエラー画面でますよね。
これから、Webもエラーが面デザインしないといけないですよね。

白石：あらかじめエラーが起こる状況を考えていないんですかね？

会場：ページを移動するにしても、止まってしまうとき、待ちの画面、間のところを考えるようにしています。

秋葉：クルクルクルって待っているのは何？そこをデザインすればいいんじゃないか？
状況を知って、その状況を表示してあげないとダメなんじゃないかな？
今度一緒にやります？　（白石さん苦笑）

DEMO:
横スライド移動のデザイン

白石さんに聞きたいことがあって、URLにびっくりマークとか着いているのあるじゃないですか？
ボタンポチっとおしたら、ページが変わるんだけど、URLに!# ついてたりするのは？

白石：Google の検索インデックスが #!を入れてくれるという仕様があって、
一つの URLで様々な状態が表せると、検索性が低くなるので、
一つのページで、表示が変化する時に、#のところだけ切り替えて使うのです。

秋葉：僕の無知なところをさらけだしてしまうことになるんだけど.....
白石：打ち合わせしてないしね。雑談は6時間くらいしたんだけどね。



秋葉：DEMO CSS3, IE8 だときかないじゃないですか。こういう時は JS で？
白石：jQuery の animate でやりますね。
秋葉：CSSでトランジションさせているんですが、こういうやり方は、流行りますか？
白石：リロードするとどうなりますかね？　ちゃんとなりませんね〜
こういうのは JS でハッシュを見てちゃんとリロードできるように書くんですよ〜
秋葉：じゃあ、これちゃんと直します。ありがとうございます。
こういうのが苦手だな〜と。
白石：# 、最近だとヒストリーのプッシュステートというのを使います。そうすると、URLそのものを
変えられるので、#は使いません。

白石：github のページとかもそうですね。
ページ自身が変わっていませんが、URLは変わってますよね。
普通は #以降のものは、サーバーサイドや検索エンジンが拾っても使わないものですよね。
特殊なハッシュであれば、Google がインデックスしてあげますよね。ということです。
使ってない理由は Twitter に聞いた方がいいかもしれませんが......
プッシュステートを使えば自然な URL になります。最近は #! は使いません。

秋葉：遷移をせずに、変化するのがデザイン側でも多くなってきて。
白石：jQuery だと、プッシュステート対応のブラウザなら使うし、使えない場合は、ハッシュだし。
秋葉：今ので頭がいっぱいになってしまいました！

秋葉：いろいろ動かす時に、CSSのプロパティがあって、どうい値で動かしているのか調べてみました。
ネガティブマージンって嫌う人が居ませんか？
白石：嫌っていたら、いろんなデザインができなくなりません？

秋葉：パララックス的なサイトですよね。
もう一つあるのが、
http://www.protest.eu

こんな画面だしていいんですか？
白石：女性に嫌われますよ！　秋葉さんのファン倶楽部ありますけどね！
これは、単に背景と見なすというのか？　画像に意味があるのなら、背景画像として使うべきでは無いんじゃない？
その方がセマンティック的にもいいんじゃない？
秋葉：なんかわかんないんだけど、勉強します。
白石：秋葉ファン倶楽部のせいですね。

*********************************


designian
-----------
DEMO
ドラッグアンドドロップ、アップロード機能付きフォーム

秋葉：手もどりが発生します。なんでしょう？
白石：エラーケースですか？
素晴らしい！

秋葉：なんていうかな〜プレグレスバーとかは、プログレス要素を使いました。
すごく便利ですね！　値を入れ替えるだけでバーの伸び縮みができるなんて！

白石：jQuery UI のプラグインでプログレスを探すところから始めましたね〜
秋葉：こんなのがあるんですね〜
白石：セマンティック的にはちゃんとプログレス使った方がいいんですよね〜
秋葉：IE9 だと数字しか出てこないんですよね〜
白石：プログレスは使って、プログレスに対応していないブラウザであれば、jQuery UIにフォールバックするとか。
意味的にはプログレスを作っておきたいですよね。
秋葉：そこまでしてフォールバックさせる価値が、僕にはわかんないんだよね〜
セマンティックにする意味ある？
白石：そんなに意味は無いんだよね〜　それってたいした手間じゃないからですよね。
canvas の無いブラウザでどうするか？とか。
秋葉：HTML5 のビデオタグ使うと、お客さんがめんどくさいから.....

秋葉：ビデオをどうこうして、そのサムネイルを出したいということがありました。
僕がやったのは、正しいかどうかわからないけど、ローンチしてしまったんだけど、
白石：間違っているかもしれないヤツをローンチしている？！
秋葉：内部でcanvas を設定して、動画をいったん再生して、とめてキャプチャして、破棄しています。
ブラウザによっては、再生してからじゃないと、再生位置が変えられなかったりします。
白石：なんとか ready だっけ？
秋葉：can play のイベントを取って使ったんだけど。サムネイルだけ必要だから。何枚か。
あ〜　脱線しちゃったね。

秋葉：IE9 と Safari と Chrome なので、それ全部検証すると、微妙に違うんですよ。
白石：Firefox 捨てたんですか？
秋葉：お客さんは結局 WebM のビデオが用意できないということで....
白石：今後 Firefox も H.264 対応？ Opera も今後大丈夫？
WebM はやっと特許周辺がクリアになったかと。
VP8 の特許が MPEGとがちゃがちゃしているらしくって。
こっから本腰いれるかもしれませんね。

デザイナーがこういう風に作って、アップロード系のフォームとかありましたか？
ドラッグして送信するまで、想定されていました？
白石：動的なアプリを作るにおいて、手戻りは当然。
やってみて、わかることがたくさんあって。...
秋葉：デザイナーに腹が立ったとか、ありましたか？
白石：ぶっちゃけて言うと、なんで固定幅なんだ！固定幅しか考えていないんだ！とイラっとしていました。
去年の頭くらいの話ですね。
秋葉：もうスマートフォンへの対応とかが当たり前になってきた頃ですかね？
白石：リキッドの頭はあるんでしょうけど、デザインするとなると、キャンバスにぴったり合うように作ってしまって。
秋葉：技術的な部分がからんでくるので、そこをどうコミュニケーションとるのか？というと。
白石：そこは仲良しになるってことですよね？
「画面幅変わるとどうなりますかね？」「ああ」みたいな。
秋葉：それで仲良くなれました？　心配しただけ損しました.....

●通信中エラーに対するデザイン
●電波が無い状況かのデザイン
●アップロード進捗のための通知デザイン

秋葉：Gmail 時で、ファイルを送っている時はどうなりますかね？
けっこう大変なんですよね。
秋葉：どういったところまでデザインを出して欲しいんですかね？
白石：仲良しになるのが前提ですが、作業しながらだんだんリクエストが出てくるものなので.....
最初に設計する時間があったり、経験済みのことなら、エラーケースとかに割と頭にあるので、
最初からデザインをお願いできたりするんですが、HTML5 で先進的なことをやると、
自分でもいろいろ試してみないといけないので..........
秋葉：けっこうエンジニアもこれから大変なんですね...
白石：最近は技術の変遷が正しくって
秋葉：こういったデザインに関して、あとからお願いしても常に大丈夫みたいな....



白石：HTML5 の WebSocket の技術を使って、同時編集できます。
書いているのがいったん webサーバーに飛んでいって、それが伝わると。
秋葉：へ〜
白石：これはもうどうしようも無かったんですが、固定幅で終わっているんですね。
マウスカーソルの変え方とかわからなくって、favicon と同じ ico 形式じゃなくてダメで.....
チョークっぽい Webフォントを使っています。

明後日のイベント用に「イイネ」を連打できるマークアップを用意しました。
デザイナーさんと一緒に作りました。その前はひどくて。
エンジニアに作らせると、画面に出す機能を洗い出さなければいけなくって、
エンジニアがガッとつくって、洗い出して、
ひどい状態のボタンの集まりを、この画面に何が必要かをデザイナーさんにお願いしました。

秋葉：僕もそういうの作りましたけど、見事に止まりましたね。
白石：エラーとかいっぱい起きる可能性がありますが、全部はデザインできなくって、適当にアラートだしてますね。
秋葉：まあ、そういうのもあるんですよね。
白石：ようは「お金」なんですよ。お金がいくらでもあれば、綺麗なエラーページとか作りますよ。
秋葉：僕らもがんばりたいと思うんですが、やっぱりお金なんですよね。
エラーページだけウケたことあるんですよ。
なんか聞けたような、わかったようなわかんなかったような。
でも、さっきのカッコいいねボタンもそうなんですが、伝え方がちゃんとすれば、
いいものがあがってくるんですよね！
アイツのことが嫌いだというと、それが出てきてしまうと。
白石；デザイナーさんはエンジニアが何考えているかわからなくってイライラすることはあるんですかね？
エンジニア険悪になった経験はありますか？

会場：作業がどうとかじゃなくて、単に「人」ですかね？
こちらの作業の能力が分かっていないんですよね。
一日前に、それ一週間かかるような感じで、険悪になりました。

白石：デザイナーがどれくらい時間がかかるものなのか、わからないことがあるんですよ。
秋葉：工数がどれくらいかかるのか、やっている人じゃないと分からないですよ。
白石：「これどれくらいかかるのかわからないんですが」といって尋ねます。
秋葉：そういうことにも気をつかっていかないといけませんよね。

会場：ぐちというほどでは無いんですが、例えば、修正事項の話をエンジニアの人にすると、
比較的いままで何人かに共通、
コードをしている時、話しかけると、イラっとされますが、どうしたら良いですか？

秋葉：僕がふざけんな！と思わますからね〜