ワイヤーは手書き→パワポが王道

どのWEBディレクターさんでも、必ず「ワイヤーフレーム」は作ることと思います。

でも、その作り方は千差万別。僕が今まで見てきたやり方をあげるだけでも結構な数があります。ある人は「手書きこそ最強!」とコピー用紙のウラ紙に手書きで一発GO!とか、ある人は全部をfireworksで書いてしまい、そのままデザイナーさんが制作に入れる環境を提供してしまったり、
またある人は頭の中のワイヤーだけで自らデザインに入ってしまったり・・・・などなど。

その人の個人の力量やスキルによってもそうですし、単純に「社としてのやりかた」にしたがっているケースなど、さまざまみたいです。まだまだWEBディレクターという職種が生まれて日が浅いせいもあるのか、一口にワイヤーといってもやり方が確立されていないってことなんでしょうね;;;

で、僕が推奨するやり方を下に書いておきたいと思います。
僕はこの記事のタイトルが示すとおり、手書き→パワポを支持する人です。

17-01.jpg

■まず、手書きで簡単にレイアウトを設定
まずは手書きで何枚か簡単なレイアウト案を作成します。もうぐっちゃぐちゃになってしまうことも多いですが、このとき僕は「自分が使うとしたら」という視点と「FOLDライン」という考え方を特に重要視します。
つまり、実際のユーザーの気分になって、ファーストビュー(スクロールしないで見れる領域)内に何が入ればその先を見る(もしくはクリックする)かを重要視するわけです。この時点では内包するコンテンツの中身がぜんぜん決まっていないこともしばしばあるため、結構勢いで「あ、ここはこのほうがいいな。」「こうすればもっと更新が楽にならないか?」などを決めていきます。基本的に全ページ(全パターン)分を作成します。


■それからパワポで原稿も極力入れながらワイヤー化
で、それを清書する気持ちで、上述の手書きワイヤーをパワポ化していきます。ここでは結構本格的に原稿を書き込んでしまいます。たとえばバナー内の文言であったり、大きな見出し部分の原稿であったり・・・という部分です。基準は「そのワイヤーを見た素人が、どんな内容がかかれることになるのかを想像できるくらい」です。厳密な原稿ではないため当然変更や修正はありますので、HTML上でテキストになりそうな部分は「テキストが入ります。」とか「ディスクリプション(説明文)が入ります。」とかのダミーテキストで埋めてしまします。


上記手順でやると、自分が引いたワイヤーの欠点や、または生かしたほうがいいものなどを自分自身で正確にチェックすることが可能な上、作業効率を格段に上げることが可能になります。
だって原稿があらかたでも入っているのですから、デザイナーさんなどは「あ、ここにはこういう言い回しでこういう文言が入るのかな?」とサイト全体としてのテイストをつかむのに役立てられたりするわけです。

手書きや一発決めしてしまったワイヤーでよくありがちな・・・
ディレクター「え、ここはこういうことだったんだけど・・・」
デザイナー「えぇ!今さら言われても・・・」

という危険な状況を回避することが可能になりますので、ぜひ一度お試しください。