「WEBサイトを設計(ワイヤー)からみなおしてみる」

| 0 comments

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

ポジションがスライドして
仕事量が適正化されてきました。
Takumaです。
 

【ワイヤーフレーム】
Webページの大まかなコンテンツやレイアウトを示した線やボックスで表現された構成図。
パワーポイントやエクセル等、比較的簡単なツールで、修正が簡単なモノで作成する事が多い。(by Takuma)

今回は、WEBサイト構築においての設計PHのお話です。

最近。自分のポジションが若干上にスライドして、監修的立場(設計監修とかアートディレクションとか)になる案件がでてきました。
いままで、設計等の上流工程必須の案件は、ほとんど自分のところに回ってきてたのですが、

現在の会社に在籍して2年。膨大な作業量から緩和されつつあります。
しかし、それは1から10まで開発の上流工程から下流工程を細かく把握しきれない事と同意です。

■でも、自分のワークフローが組織に定着してる■■■■■■■■■■■■

そうなんです。ココが問題なんです。
どんな事をやってるかは以下に書いたことあったので見てみて。

▼Takumart.net:JOBでやったことを整理してみた▼
http://www.takumart.net/wordpress/archives/688

●[企画]事業構築PH

●[企画]情報設計PH

●[デザイン&企画]基礎ブランディングPH

●[設計]サイト基礎設計PH

●[デザイン]デザインブラッシュアップ

●[設計]サイト詳細設計HP

●[デザイン]量産デザイン

●[ディレクション]制作進行監修

つまりは、Takumaのやり方は
「関係者の情報を取りまとめて、着実に総意を固めて、プロジェクトを進める。」
「関係者に常に情報共有して、あと出しを無くして、逆流を防ぐ」
「確定情報として成立してから、クリエイティブに落とす」
そんなやり方です。

■今回はこのうち設計について■■■■■■■■■■■■■■■■■■■■■

比較的、プロジェクトの前半から関わるやり方をしているのですが、
用件定義やコンテンツ提案。はたまたプロジェクトロードマップにワイヤフレーム。

設計といっても、かなりごっちゃ混ぜなのが正直なところです。
これらの要素を「スジを通してブレイクダウンする」という手法。

上層部の思考さえ大枠理解できれば、事業定義領域の書類の一部を取り込んで、
一気に、コンテンツ提案&要素定義まで、落とすことが出来ます。
(※ポイントは、決済者が自分からオファーした内容を覚えてる内に落とす所。)

例えば、こんな記事がありました。

▼効果的なプロトタイピングとデザインプロセス▼
http://www.bookslope.jp/blog/2009/04/prototyping-designprocess.html

右上: HVF/HFF (High VIsual Fidelity/Low Functional Fidelity)
・既存システムに新機能を盛り込む際のユーザーテストに使える
・一般的なユーザーとのテストに使える
・離れた開発チームとのドキュメント共有に使える

左上: HVF/LFF (High VIsual Fidelity/Low Functional Fidelity)
・ビジュアルデザイン上のユーザビリティの課題の発見に使える
・一般的なユーザーとのテストに使える

右上: LVF/HFF (High VIsual Fidelity/Low Functional Fidelity)
・遠隔によるテストに使える
・ステークホルダーとの間でUXデザインやUX開発要件 (方向性) の確認に使える
・離れた開発チームとドキュメントの共有に使える

左下: LVF/LFF (High VIsual Fidelity/Low Functional Fidelity)
・足りない機能の発見に使える
・ワークフローの問題の発見に使える
・いいUXコンセプトと、そうではないUXコンセプトの切り分けに使える

となっており、右上の「HVF/HFF」が最終形と定義されています。
これらの前提資料がワイヤーフレームでの設計だとも考えられます。
加えて、事業資料と紐付けがされていてスジがとおっていればGoooooooooooood!!

近年、「サイト規模/文章/音楽/写真/動画/構成/システム/キャッチコピー等々」という
非常に様々な表現要素を複合的に包括する立場になってきたWEB。

出来る限り、人員稼動が少ない手法でもシミュレーションと詰めが、より必用です。
その上で、ワイヤーという作業PHが重要なものになってるのを実感しています。

そう。現場が何度も何度も、用件定義の変更により作り直すのはナンセンスだと思うからです。
(※そうそうプロタイプを使って検証できる案件も少ないしね。)

■簡易プロトタイプとしてのワイヤーフレーム■■■■■■■■■■■■■■

ワイヤーフレームのいいところ。
それは、「上流工程の知識/要望」と「下流工程の実情/技術」等の間を補完できる所にあります。

どちらかというと、下流工程から叩き上げできているTakumaとしては、
下流工程の人間が苦しむのが見たくない(自分もしたくない)ので、現場からのアウトプットは最小限にします。
(※その分、ワイヤー資料で、文章や構成要素、を連携しまくって練りまくります。)

加えて、グランドデザイン等の比較的前段で出さなければならないモノも、
コンテンツのアウトラインが出来た段階からしか、出さないようにしています。
(※提案資料としてはあえて分ける事で、上記の問題との混同を避けます。)

まー。コレをやると、案件によっては100P以上の厚さになるのですが・・・
ココまできてワイヤーというもののイメージが沸かない方。
(↑もっと、はやく説明しろw)

以下を参考に見てみてくださいまし。

▼ウェブサイトの設計図 ワイヤーフレームを活用しよう▼
http://www.designwalker.com/2009/04/wireframe-2.html

Takumaのワイヤーフレームは、このうち

▼The what, when and why of wireframes▼
http://www.bookslope.jp/blog/2009/04/prototyping-designprocess.html

に近いです。加えて、余白的な部分を設けて・・・

・設計書の修正差分の日時と内容の記載⇒一冊で管理するので、先祖がえりがない。
・材料提供要望の記載。⇒クライアントにも現場にも全てコレ一冊で。
・写真や文章&質問事項を記載。⇒校正用資料

を記載しています。一見、すごい効率的なのですが決定的な点が最近分かりました。

・複数人で、書類を管理すると危険。
・複合的な書類の為、解説する際に、解説者の知識が一定より上である事が必用。
・上流工程と下流工程の中立者としてのポジショニングが必用。

Takumaの書類を手本に(上層部が指示して)、ノーフォローで作っている人間を複数人みましたが、
書類上で完全に論理破綻して、考えやアイデアが整地化されないまま書面だけが量産されています。

■どうしたらいいのか・・・■■■■■■■■■■■■■■■■■■■■■■

正直、こんな事をやる人間が多くはいないと思っていたんですが、
思わぬ形で、被害者が増えているのは事実(警告は以前からしてたんだが)・・・

やはり、分業化するのが良いかと思いました。
そして、「火消し屋」として、非常事態のみに実働する。
(※それ以外の時は、分業された領域内で動き、監修だけ。)

今、組織内でやっているのは
・各職種に必用なロジックとスタンダードの定義開発。
・フロー構築と、分業領域の定着作業。
・不用意に人を選ばず上記の資料の作り方を教えるのをやめる。
(※各分業領域の書類の作り方はいいんだけど。)

「量から質」への成熟メディアへの過程を着実に進んでいるWEB
そればかりか、他のメディアを取り込み進んでいます。

自分が何をできるのか。これについても今見直しをしている今日この頃です。

■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■■■■■■

▼UT ZOOM!▼
http://www.uniqlo.com/utzoom/

●んで、一言
ユニクロの代名詞ともなっているTシャツブランド「UT」のキャンペーンサイト。
「よって(Zoom)見せる」という事をコンセプトに、Tシャツという
アウトライン「形」がほぼ同じという弱点より、その「柄」という所に、
気持ち良いぐらいにフォーカスされたコンテンツです。

ひたすら、色んな人がTシャツを着て出てきて、その柄にZoomして次の人があらわれる。
間に、人の動画や柄の元動画(ガッチャマンとかパックマンとか)をはさんで、
単調なリズムになって飽きることを防いでいる。

テレビ的な受身な見方をできて、数を見るのにも疲れない。
非常に企画段階で考えられて、洗練されたコンテンツだと思う。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

コメントを残す

Required fields are marked *.


▲このページトップへ

takumaの「デザインはあれでアートはそれで」