モバツイッターが、Open Web AwardsのBest Mobile Based Twtter Appを受賞しました！

さまざまなことを実現することを想定して多数のツールが作られている。

WindowsやMacのアプリケーションもあれば、ASPやSaaSと言われるWebアプリケーションなどもある。

例えば動画のエンコードのような単機能アプリであればパラメーターと目的を遂行するボタンで目的をほぼ余すことなく実現できる。

それに対して目的自体がビジネスやコミュニケーションと言った、「人それぞれ違う」ような概念の場合は、アプリケーションのデザインがもたらす制約は大きい。

例えば、ツイッターのような「140文字」という制約や、昔のmixiのように「新着日記が表示されるのは1日1個まで」などと言った制約は、そのコミュニケーションのあり方に制約をかける。

それと全く同じ文脈で、何かを生み出すツールによる制約によって、クリエイティブの幅に制約がかかっているケースがままある。

例えば、Webの画面設計。

HTMLのコーディングに使うツールはDreamweaverがほぼ業界で認められた唯一のツールと言えるが、適切なWebの画面設計ツールと言うのは全く存在しない。

おそらく機能的にはMicrosoftのVisioが、そこを意識して作られていると思うが、いかんせんVisio Professionalは価格が高いので、ベンチャーも含めると普及しているとは言い難い。

明らかにシステム開発屋のツールなので、Web制作やサービスの管理にはコストパフォーマンス的にオーバースペックである。

グラフィックソフト育ちのAdobeのFireworksは、まだその地位を確立できていない。プロトタイピングを意識したツールなので設計書ツールではない。

デザインができるIAの人はイラストレーターを使う人もいると思うが、これも設計書とはちょっと違うし、イラストレーターはVisioよりも価格が高い。

ということで帯に短したすきに長しと言う状態で、結局使われているのはパワーポイントではないだろうか？

◆パワーポイントの問題点

以前は、受託の情報設計を行う際にはVisioを使っていて標準の設計書テンプレートなどを使っていたが、Webのサービスを管理するようになると設計書を書く頻度が低くなったので、パワーポイントを使う頻度が増えた。

パワーポイントを使っていて思うのは、あくまでもパワーポイントは紙に印刷することを意識したツールであるということ。

そもそもパワーポイントに詰め込める情報量はあまり多くない。

オートシェイプも四角形に文字を書くとマージンが取られるので情報が少なくなる。
ラベルなどは□とテキストを別々に書いてグループ化することがままある。

まだ情報設計に至ってない営業や企画が使う分には問題ないのだが、そのまま作業指示に落とすためのツールとして使っていると、このツールの制約に成果物のイメージがかなり影響されることがままある。

パワポの画面サイズで物事を考えてしまうと縦にも横にも狭い世界で考えることになる。

オブジェクトサイズの細かい制御ができないパワポで作られたUIと、横幅900pxぐらいで表現するHTMLに押し込める情報量は全然違うと言っても過言ではないだろう。（というかそれを意識するとパワポは使いにくい）

最低限、画面の横幅に入る文字数は意識して作るべきだし、画像サイズやレイアウトもある程度は、この段階で意識されているべきだ。

理想とされるのは画面に表示する文字や画像、ブラウザのファーストビューを意識したCADツールということになる。前職で使っていたVisioの設計書テンプレートは、ここまでは「XGAの一画面に収まる」などということがテンプレートに埋め込まれていた。そこにあるサイズの文字を書くと、ほぼブラウザ上の実寸サイズに近いので、適切なテキストライティングが確認できるというテンプレートにしていた。

別にビジュアルデザインをするわけじゃないのだが、前工程の質は、その工程の権限範囲内で高ければ高いに超したことはない。Webはビジュアルデザイン、情報設計、システム設計が全てHTMLにmixされるので、役割範囲の切り分けが難しいだけなのだ。

この辺のことを全く意識させないで画面設計させると、パワポの解像度の制約を元に考え、それが重要な情報にも関わらず「この情報は画面に入らないから消しましょう」、と言われることがある。

もちろん伝える側にも不備があって、結局、画面設計の前の情報やコンセプトのプライオリティの伝達ができていなかったということなのだろうが、いずれにせよパワポ基準で情報を整理されてはたまったものではない。

昔、パワポでお客さんとデザイン仕様をつめるためのテンプレートを作りましょうという試みを行っているのを見ていたらパワポのテンプレにブラウザの画面枠が既に埋め込まれていた。

それベースで指示書を書いていくと、結果的にパワポの一画面に入らない情報を埋め込むことはしないし、逆に過剰に大きくなるフォーム部品を入れ込む入力フォームなどは、ほぼ間違いなく複数ページに分断されるので完成イメージがわかりにくくなる。

それで作ってしまうとHTMLにした段階で情報がスカスカになってしまったり、異様に縦が長くなってしまったり。

Webの設計がパワポの画面サイズによって制約を受けた瞬間だった。

こういう問題は、目の前のツールが絶対的な存在になっていればいるほど気がつかないものである。例えば「Mac」とか。

ということで、デザイナーでなくとも重要なものに関してはFireworksなどでプロトタイピングしてもらって考えてもらうことにする。結果的にイラストレーターが一番正しいのかもしれない。

ちなみに僕が端から見ていて、意外と良いなと思ったのは、悪名高き「Excel方眼紙」である。Excelは縦横に制限を受けないので、パワポのようなページサイズによる制限を受けにくい。実寸に近いデザインを実現しやすいという意味では、意外と悪くない。

ただシートが10枚も超えると、作業性がとても悪いので、それはそれで限界に気がついて欲しいのだが。（せめて目次と該当ページへのハイパーリンクで構成されたシートを作って欲しいものである。もちろん全てのページからは目次ページへのリンクをつけること。）

##余談だが、ホントに欲しいツールは、現状のWeb画面をキャプチャして画像やCSS要素をオブジェクトの分解能として現状のレイアウトを再現してくれるドローツールである。サービスのような日々改善の仕事は、目の前の画面を一々設計書に落とさないので、「その時点の最新状態」が設計書に書かれていることはないというのがその理由。

##もろもろ考えていくと、ビジュアルのデザイナーが論理上矛盾なくデザインできれば一番良いんだけど、システムが絡んできたり、工程を管理する上では、ビジュアルデザインの専門スキルだけに依存するわけにはいかないから、こういう話が出てくるのである。（IAは職能であるというあたりに繋がる）

関連エントリ：
F's Garage：情報デザインエントリ一覧

F's Garage：明日から実践できるIA

■同じカテゴリ[Web系]のエントリー
<<前の記事 PPPの議論は熱いなー
>>次の記事 iPhoneとWebサービスの連携手法

■このblogの書き込み最新３件
グッドデザイン賞に出てたおしゃれなサイクロン掃除機がなんと半額以下。 SEOには、運用のSEOと設計のSEOの２つのフェーズがある。 ワーナー作品のオンデマンド配信サービス「ワーナーオンデマンド」