愛車:マツダアテンザ
Webを中心とした、ビジネス&テクノロジーに関する思いつき
by F-shin
[ このサイトについて ] [ F-shinについて ] [ トップ ]
iPhoneアプリ
author:えふしん
photo_20.jpg
藤川真一について


初代モバツイ開発者
想創社再創業 / KMD博士課程
著書〜100万人から教わったウェブサービスの極意―「モバツイ」開発1268日の知恵と視点 [Kindle版]
お求めやすい夏休み特価!
このカテゴリ[Web系]の最新30件
本ブログは移転しました インターネットの遊び方を身につけよう ネットでの選挙活動と投票率 Web2.0がうまくいかなかったワケ WebにおけるMVCアーキテクチャの勃興と変遷 何故、PCはブラウザ、スマホはアプリなのか。 言っとくけどスマホは退化でもあるからな。 アイコン5000円とか、Web受注(発注)価格について。 残念なWeb論の骨子 HTMLってホントよく出来てるな。 「やまもといちろう×イケダハヤト対談イベント」のログを読んで ネットサービスの成功者は「とりあえず受託」という言葉使うのやめません? 全収集型RSSリーダーの終焉とソーシャル化するWeb 頑張ると報われるプログラマーの社会とは。 Perlが○○な話 アメリカ製品のすごさと不思議とワイヤフレーム どの人件費を考えても絶対にお得!利用規約ナイトがきっかけの本が出ます。 クラウドやモバイルを、もっと仕事で活用したいけど、どうやって会社を説得したら良いかわからない! スマホアプリらしいUXとは。 インターネットの変化に対して起こるモヤモヤすることを考え、整理する活動 Facebookは見なくてもいい情報が出てくるSNS 「あなたは影響力があるから、そんなことを言っちゃいけません」の問題点 Facebookに時間を取られすぎる対策 Paypalの本人確認がむかつく件 ネット系イベントがとても主催しやすくなった件 モバイルファーストが失敗なハズはないが、今はまだ時期尚早 やりがいはソートできない…非情なデータベース社会 2012年までのふりかえりと2013年へ ブラウザという平面の限界 ブログ記事の流通の難しさ
[このカテゴリをもっと見る]
Powered by
Movable Type

February 28, 2009

スポンサーリンク

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

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


Microsoft Office Visio Professional 2007
マイクロソフト (2007-01-30)
売り上げランキング: 886

オムニグラフ 5 プロ
オムニグラフ 5 プロ
posted with amazlet at 09.02.28
アクト・ツー (2008-10-30)
売り上げランキング: 6165
スポンサーリンク
■同じカテゴリ[Web系]のエントリー
<<前の記事 PPPの議論は熱いなー
>>次の記事 iPhoneとWebサービスの連携手法
■このblogの書き込み最新3件
本ブログは移転しました インターネットの遊び方を身につけよう トトロが陽なら、『風立ちぬ』は陰?〜『風立ちぬ』の感想
この記事への提案、提言一覧

すっごく、よく分かります。パワポの弊害

ワイヤーフレームって、どうしても初心者デザイナーを引っ張ってしまいやすいので、デザインの発想を止めずに、押さえるところを押さえてもらうには、どの程度まで作り込むか悩むところありますね

お客さんもワイヤーで分かったような気がしてるけど、実際にハイパーリンクされないと理解できないところもあるので、難しい

理想は、紙のワイヤーフレームではなくって、HTMLでスケルトンサイトをつくってしまうことなんですけど....

2009/02/28 12:20 とみぃ

実はパワポはスライドページを切り替えるたびに発想が分断されているという話を聞きます。

要件定義や機能設計で、いくら画面設計書作って、パワポで説明しても最終形がイメージができないのは、そういうのも理由かもしれません。

図面で表現するというのは、何かを抽象化していることに他ならないのですから、Webに慣れてなければ、設計書での説明でお客さんにとって必要な何かを思い出させるのはなかなか難しかったりしますね。

業務システムがそれで成り立つのは、特に大企業の発注側がプロであるケースというのは無視できないと思っています。

(まぁ逆に言うと、リリースする前に、必ずしも本当に必要なものが見えるとも限らないので、トータルでOKなのかもしれませんね。大事なのはリリース語の改善フローを回していけることだと思います。)

2009/02/28 17:59 f-shin

OmniGraffle 5はいかがでしょうか?
簡易Visio + 強力アウトライン表現ソフトって感じです。
# macのみになりますが。

気になるお値段は
Standard: $99.95
Professional: $199.95
http://www.omnigroup.com/applications/OmniGraffle/

ライセンスについて、先日ブログに書きましたので
よかったらご覧ください。
一人で使う分には複数台のmacにインストールできます。
http://sol1og.blogspot.com/2009/02/omnigraffle-5-mac.html

yahoo uiのステンシル
http://developer.yahoo.com/ypatterns/wireframes/
とか
iPhoneのステンシル
http://www.graffletopia.com/stencils/358
とか
ワイヤーフレームのステンシル
http://www.graffletopia.com/stencils/354
とかがあります!

2009/03/02 13:35 so_bot

はっ、Amazon!
ご存知でしたね >_<

2009/03/02 13:38 so_bot

僕が持ってるのはOmniGraffleの4で、ステンシルが少ないなぁと思っていたので、そういう情報はありがたいです。

ありがとうございます!

2009/03/02 14:45 f-shin
この記事への提案、提言









あなたの情報を保存しますか?