JCW制作部ウェブサイト

設計、ワイヤーという言葉の曖昧さ

2ヶ月ぶりくらいです。忘れた頃に更新します。
メディアとしてはダメダメですね(笑)

最近タイトルの内容について社内で話すことがあったので、書いとこうかな?って思いました。
ダラダラと書いている間に、同じような(でも切り口の違う)内容の記事がUX milkさんに上がっていました。。。
http://uxmilk.jp/66715
同じように言葉の曖昧さを取り扱っていらっしゃいますが、こちらは各成果物のレベル感に対して、どのように呼んで、それはどのような役割を持っているかを解説しています。

僕の記事では、ディレクターさんが行う仕事の中で、2つの言葉に対して、「こういう認識をもってやってほしい」という切り口から書いていこうと思います。

設計ってなに?

WEB業界やシステム業界とかにいると、日々聞くことばですが、、、みなさんは「設計」って聞いて何を思い浮かべますか?
ディレクターとして仕事をしている2人のスタッフにこの問いをしてみたら、いくつか回答が得られました。

導線に関することだったり、画面に関することだったり、CMSの機能のことだったり、普段関わっている作業から連想したんでしょうねー。
すまん、10個ぐらいはあがった気がするが、忘れてしまいました。。。

上がった内容に関しては「全部当たっているけど、全部間違っている」と答えました。

要は、あがった内容はすべて設計の中に含まれることだけど、すべてそれ一個では設計しているとは言えないということです。

このように、一つの「設計」という言葉にたいして、職種や経験に応じて、認識する内容が全く異なってしまうのです。
これは由々しき問題ではなかろうかと思ったのが、ことの発端であります。

例えば、SEさんにとって、設計とはデータベースの構造やプログラムの構成、運用する人のオペレーションをどうやってシステムで代替するかを検討することが設計でしょう。
IAさん(この人が設計者って思われてることが多いですよね)であれば、既存や取り巻く情報の整理を行い、わかりやすくサイト構造や画面に落とし込むのが設計でしょう。
UX的なものをなりわいとしている人からすれば、ユーザーの行動を分析し、データや傾向、人間工学的観点から道筋を考えるのが設計でしょう。
フロントエンドを担うひとからすれば、HTMLの正しい構造化や、今後メンテナンスすることを考慮し、デザインの共通化やルールを考えるのが設計でしょう。

じゃあ、それらの人を取りまとめるディレクターさん、プロマネさんの設計って何なんでしょう?

答えは全部ですよね?

先に挙げた職種の人たちは専門職で、たしかに掘り下げた、より専門的な設計を行います。
例えばSEさんが作るようなER図※1をガッツリかけるディレクターさんは少ないでしょう。
IAやUX的なところは兼任する場合も多いので、できるかもですが、ガッツリCSS設計やタスクランナー※2の設定をできるディレクターさんは少ないでしょう。
※1データベースのデータの流れを模式的に図で表した設計図。
※2コーディングを行う際の工程を自動化し、効率よく作業するための仕組み。

だから全部を100%できる必要は無いけど、全部を網羅していなきゃいけないと思うのです。

超難しいですよね?そう、難しいのです。
だからディレクターであるならば、日々色々なことに興味を持ち、知識をつけ、様々なプロジェクトや人との関わりを積極的にやってほしいのです。

そうすることで、バラバラだった設計像を一つの「設計」というものにまとめて行くことが、ディレクターさん、プロマネさんの設計に対する使命だと、僕は思います。

ワイヤーって何?

ちょくちょく「ディレクターなんだったらワイヤーくらいちゃっちゃとひいてよ」というような、グチを現場にいると耳にすることがあります。

僕はこの言葉の中で「ワイヤーくらい」と「ちゃっちゃと」というところが非常に気になります。
また、これを言われているディレクターの経験値が浅い場合、そもそもその人が言われるべきグチなのか?というのも気になります。

前章の「設計って何?」に引き続き、ワイヤーって何なのでしょう?

これもスタッフに聞いてみました。
画面のレイアウトを検討ものするとか、要素を検討するものとか、原稿や内容をクライアントに確認するものとか、
まあ普段仕事の中で使っているワイヤーについて解答してくれました。

ですです。

要素を洗い出して、グルーピングし、プライオリティを決めた上で配置する。
そうやってワイヤーを書くって、僕も以前の記事で書いた気がします。
そして作られたワイヤーは、クライアントの定例の際にお披露目され、その日の決め事に対する会話がスムーズに進むための材料となる。

しかし、ワイヤーの役割って本当にそれだけなんでしょうか?
概要に対してクライアントに説明し、OKをもらうための資料で良いのでしょうか?

僕はノーだと思います。

そのあなたの書いたワイヤーを元に制作や開発に関わる人が、専門分野に落とし込んでいくんです。
僕は、今までにその後工程の様々な仕事を経験しました。

デザイナーとしてデザイン業務を行う場合は、ワイヤーから要素のまとまりや、プライオリティを読み取って、メリハリや色の設計、使用する写真やイラストの選別を行いますし、撮影に同行する場合でも、ワイヤーに書かれているコピーなどを元にそもそもどういうカットを撮るか、カメラマンさんと話したりします。

コーディングの場合も、スケジュール上デザインが固まる前にスタイルの設計やHTMLのフレーム構造は作っておきたいので、ワイヤーを元に大枠は検討したりします。

さすがにスクラッチでPHPなどを書くことはできませんが、オープンソースをカスタマイズする場合でも、動的な出力部分に必要な情報をワイヤーから読み取って準備します。

すなわち、ワイヤーが上記後工程に対して、考慮されていなければ、そのワイヤーが正しいとは言えないのです。
だから、「ちゃっちゃとひける」ものでもないし、経験の浅いディレクターにはなおさらコクなお話ですよね。。。

ワイヤーは、最初に設計した意図や目的をぶらさず、最後の工程まで走りきるための道標のようなものなのです。
様々な工程のスペシャリストが、同じ方向を見てプロジェクト進行するための基準なのです。
クライアントはそのワイヤーが影響を及ぼす、一つのステークホルダとかんがえられるでしょう。

まとめ

2つの言葉の定義について、自分なりにまとめると、ディレクターさんにとっての設計は、すべての工程において深掘りされていく設計を取りまとめ、クライアントにわかりやすい形でアウトプットしていくこと。
そのアウトプットの手段として、すべての工程をわかりやすく「画面」という形に落とし込んだものがワイヤーというもの。

この2つの仕事に一番向いている職種は、すべての工程の人とコミュニケーションをとるディレクターだと思います。

ディレクターの皆さん、「ちゃっちゃと」でなくても構いません。
地道に勉強して、「ワイヤー」を使って、あなたがやるべき「設計」をしていきましょう。