[&] Web Directions East 2009 (Andy Clarke)

Andy Clarke | Web Directions East

Walls Come Tumbling Down

View more documents from Andy Clarke.

Web Directions East 2009
Andy Clarke『壁を壊せ』
--------------------------------

Walls Come Tumbling Down
Andy Clarke

資料の日本語は Google Translate で翻訳しました。

イギリスにあるデザインスタジオ。
デザインワークフローのいかし方。
学んだことも著書にまとめている。
Web デザインワークルフロー（訳本）
DVD も何本かでている。

常に Web デザインの仕事ばかりではない。
プラスチックのファクトリーでも働いたことがある。
この初期の仕事の製造のプロセスからもさまざまなことを学んだ。
経済不況の時代、時間を節約したい、お金も節約したい、
一番重要なところに費やしたい。

創造性は不可欠な要素である。
より多くの要素を想像する。
web デザインのワークフローを見直す。
よりクリエイティブになる時間の使い方。
Web デザインがどういうものなのか、誤解がある。
web デザインの取り組み方は製造業のやり方でやられている。
印刷などと同じになっている。
よりクリエイティブになるには？
クライアントや、上司とのやりとり

あたらしいワークフローのやりかた
ブラウザ内でのデザインをする。
　Photoshop ではなく、ブラウザの中で。

　設計改善のワークフロー
　設計はブラウザで、
　節約する
　設計システムの無いサイト

システムをデザインし、モジュール型で再利用できるもの。

時代遅れのワークフローを破棄する。
イギリスで始めにデジタルカメラをとったのは、自分かもしれない。
デジタル写真というのが写真のありかたを変えるのか？
製造業のプロセスを踏襲していた。
非常に非効率で、時間もお金がかかるプロセスのまま、
すべてのプロジェクトにあてはまるものでは無い。

現在の Web デザインは Photoshop で静止画像を作り、みせる。
その後、開発者がコードに直している。
そこで初めてブラウザ上でどう見えるのかがわかる。
実際はブラウザ間でどう見え方が変わるか、それだけのテストの部門があったりする。
この作業自体が無駄。

プロセスのあり方を考えないといけない。
いちだんかい　戻って考える。
開発者側はデザインを解釈して HTML/CSS 具現化する。
デザイナーは Photoshop でデザインして、ブラウザで表現できないことの腹をたてる。
今よりももっといいプロセスをつくっていけるはず。

皆さんに提案したいのは、デザイナー側とコーダー側でやりとりして、
時間を無駄にしない、クリエイティブに時間を使う。質の向上にも貢献できる。

ブラウザ内でデザインすることで、非常に短期的なフォーカスで仕事をしていける。
集中してできる。断片的にもデザインできる。
自分がいいと思ったものを見せて、改善していくというプロセス。
グループで作業するにも向いている。
やりとりをしながら細かい修正していくことができる。
クライアントやりとしりながらできる。
短い時間で大きな進捗が得られる。

その場でインタフェースを変えれば、すぐ修正し、すぐ見られ、試行錯誤できる。
ユーザーも巻き込んで進めていくことができる。
相手のオフィスの中でも短い時間で作業できる。

このプロセスの間にクライアントにも大きくかかわってもらう。
以前はクライアントへ一番のプランを一方的に提案するばかりであった。
デザイナーは多くの場合、クライアントのせいにしたがる。
クライアントが文句をつけるのは、作業にかかわりたいという欲求を満たすために
ものをいっている場合もある。
最初からクライアントにかかわってもらい、密にかかわってもらうことによって、
理不尽が要求がこの場合おきない。
フラットな静止画像を見せることで終わらない。

設計はブラウザで。

まずコンテンツありき。
デザインというのは決して機能しか決まっていない段階で決めるべきではない。
双方向に様子を見ながら、Web 上でプロセスを進めることができる。
静止画を見せるだけでは、動いている Web サイトをつくることはできない。

Internationalist Magazine
このプロジェクトでは何をやっているのか？
オープンデザインプロセス。すべてのプロセスにかかわっている。
フロントエンドも、ユーザービリティも、HTML/CSSも。
実際にテンプレートを作り CMSとうまく調和できる形で。
35のテンプレートが実際にある。
アーティクルのページもあり、表紙もあり。
これを 3週間で提供した。
実際にやっている作業はスピードがあった。
お金は無いが、短期間でもっとやって欲しいと考える。

古いワークフローでは、たくさんの静止画像をつくってしまう。
ワークフレームとか、静的なプロセスはまだはびこっている。
もちろん悪いといっているわけではない。
たとえば、色を変えるとか、位置を変えるとかは、非効率。

なぜわれわれはブラウザを使わないのか？
実際に本当に必要なものを使う。
もっと流れがあって、効率性のある、問題点を解決するもの。
どうやって流れのある流動的な操作を提供するのか？
ブラウザでテストすれば、もっと速いプロセスを回せる。
Photoshop の場合、時間がかかりすぎる。
HTML/CSSだとすぐ見られる。修正できる。
デザイナーはクリエイティブな作業をできなければいけない。
最終的にどのように見えるのかを提示する。
　モックアップで、何種類かの見栄えを提示するばあい、
　マウスオーバーなど動きのあるデザインを静的な画像でうまく見せることはできない。

クライアントもデザインのインタラクションに関与することができる。
実際に初期の段階から作り込むことに意味がある。
クライアントに、静的なデザインを見見せることを止める時がきた。
静止画を見せるのはもう古い考え方。

問題は静止画に関して、クライアントがゴーサインを出してしまうこと。
クライアントがそこで決定してしまうのには問題がある。

Web サイトが、すべてのブラウザで全く同じように見えることは必要ですか？
その答えは「No」
すべてのブラウザで同じ経験ができれば良い。
ここを間違えると、最終的に間違った道になってしまう。

とにかく Web サイトで同じように見える方がいいという観念がまだ残っている。
すべてのブラウザで同じでなくてもいいことがなかなか理解してもらえない。
別に壊れたわけではない。
違うということは壊れているわけではない。
見方とか経験とか、技術的な経験も違う。
時々、ベースレイヤーを共通に。
ブラウザによる違いをテストしておく必要がある。
ソリューションごとに時間がかかる。
Web のアクセシビリティをどこまを取り入れるのはプロジェクトによる。

タイポグラフィーについて。
たとえばスタイル的に、最初のパラグラフで大きめのフォントを使うとき。
古いタイプのブラウザだと対応していない表現がある。
それでも十分満足できる。
少し読みやすく調整する。
iPhone 対応にする時
少し派手にする部品もあり。
いろんなブラウザを使っている人には見えない部分もあるかもしれない。
装飾的に使っているものは見えなくてもいい。
微妙なシャドーなども、
ブラウザで SHadow をサポートしてしないものもある。
でも、何かが抜けているということには気付かないものがある。
気付かない人の方がおおいはず。
box shadow,どのブラウザでもできるわけでも無いがいい。
デザイナーはすべて同じに見えないことを理解する。
クライアントに説明することは難しいが。

CSS はいくつかのモジュールに分かれている。
すべての古いブラウザが、新しい CSSをサポートすることはありえない。
すべてのブラウザで同じように見せるために時間を使わない。

一番最新のブラウザのためにデザインをしていい。

Selling Universal IE6 CSS to clients
クライアントに IE6 対応に時間を使うか、クリエイティビティに時間を使うのか選べばいい。
一歩進めるために一番最新技術をつかって、Web で何ができるのか、
より先に進めるために、デザイナーも成長が必要である。
業界として共通のパターンを作り、価値を付け加えるように、
最新のアプローチを使うべきと伝える。

ぜひ、どのようになるのか、考えて欲しい。
仕事のためになにをして、何をさし示すのか？

http://twitter.com/malarkey
stuffandnonsense.co.uk
forabeautifulweb.com
transcendingcss.com

Q. 日本ではあまり事例として見られないが。イギリスでは普通に行われているのか？

A. イギリスでも普通ではない。
　　クライアントに理由づけを説明するのを考える。説得しなくていい。
　　自分のやり方を押し付ける。携帯でも見えることで説得できる。
　　予算的にも増えるコストもない。
　　ブラウザ間で同じように見えることには価値がないことに気付く。
　　あと三年すればこの考えが一般化する。