HOMEビジネス ワイヤーフレームを効率よく的確に書くコツ

ワイヤーフレームを効率よく的確に書くコツ

Saki Togashi

2013/12/06(最終更新日:2013/12/06)


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

[{"post":"u003Cbr/u003E","type":"text"},{"post":"","type":"m-google m-image"},{"post":"  Webディレクターの仕事の中でもかなり重要となるワイヤーフレーム。 本当に最初の頃は苦労していました。(今でも苦労していますが) あくまでも自己流ではありますが、割とオーソドックスなやり方なので、少しでも参考になればと思います。","type":"text"},{"post":"要素を細かく洗い出す","type":"text_header_1"},{"post":" この作業はWebサイトを制作する上で、必ず必要な作業となります。かつ、このフローでそのサイトでどの情報を取り入れるかをジャッジするわけなので、かなり重要な作業です。u003Cbr/u003E","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":" やり方としては人それぞれですが、わたしはポストイットを使って整理するようにしています。そのサイトに存在する要素をすべて、一枚一枚に書いて並べていきます。","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":"(例u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003Eコーポレートサイトの場合 u003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E・ロゴ u003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E・電話番号 u003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E・住所 u003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E・TOPイメージ u003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E・会社概要 u003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E・サービス内容 u003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E・よくある質問 u003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E・メンバー u003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003Eetc…u003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003Eu003Cbr/u003Eu003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E すると、必要な物、必要でないものが明確になってくるでしょう。そしてそれを各コンテンツ別に分けていきます。nポストイットだと、追加したり捨てたりが簡単ですので個人的にはおすすめです。u003Cbr/u003Eu003C/spanu003E","type":"text"},{"post":"コンテンツの優先順位を考える","type":"text_header_1"},{"post":"","type":"m-google m-image"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E 必要な要素がわかり、コンテンツごとにも分けおわったら、n次はコンテンツの優先順位を考えます。nグローバルナビの並び順や更にその下層ページの優先順位などを考えていきます。 u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":" ジャッジの仕方は案件ごとに異なってしまいますが、各コンテンツの重要度がわかるコンテンツマップを作成し、クライアントと共有するやり方もありだと思います。","type":"text"},{"post":"実際にワイヤーを引く","type":"text_header_1"},{"post":" ここからワイヤーを実際に書く作業となります。わたしはディレクターになりたての頃、いきなりパワポで書いていました。今考えたら効率も悪いですし、きっとまともなものは書けないだろうと思います。u003Cbr/u003E","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":" 現在のやり方は、まず紙に書きおこします。基本的にシャーペンで書いては消しゴムで消して…というアナログな作業です。この段階の頃にはある程度頭のなかに出来上がりというか、方向性が見えているはずです。なのでそれをいっきに吐き出す感じなので、マウスでの作業ではなく手書きのほうがサクサク進みます。","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":" また、なぜこれが必要か、なぜここに配置するのか、など、デザイン指示の時やクライアントと共有する際の理由や根拠を考えながら作成しましょう。","type":"text"},{"post":"清書する","type":"text_header_1"},{"post":" ソフトはわたしはFwかパワーポイントで作っています。n最初エクセルだったんですけど、完全に個人的な意見ですが、nエクセルが非常に使いづらく上記に落ち着いたところです。nこの作業は手書きのものを起こすだけなので、割愛します。 ","type":"text"},{"post":"最後に細かい部分をクライアントと詰める","type":"text_header_1"},{"post":"","type":"m-google m-image"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E ワイヤーのざっくりとしたものが引けたら、原稿だったり素材だったりn次に何が必要かわかってくるので、スケジュールを確認しながらテキストを起こしたり素材や原稿を調達したりとやることが明確になると思います。 u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":" それをワイヤーに入れていけば、ワイヤーは完成します。ここからはデザイン指示や進捗管理というフローとなりますね。 ","type":"text"},{"post":"まとめ","type":"text_header_1"},{"post":" 最初にディレクターになって、ワイヤー書いてみろって言われた時に上記フローが明確だったらもっと仕事早く進んだのに…と思ったのでまとめてみました。nu003Cbr/u003E","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":" ディレクターは提案することと、判断することが仕事だと思います。この辺のことはまた改めて具体例を交えて書きたいと思いますが、ワイヤーにしろ何にしろ、クライアントの意見をしっかり聞いた上で、要素の取捨選択をしてワイヤーを書くことは、サイト制作の第一歩です。","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":" たま〜にワイヤーなしでいきなりデザインにおこす…なんて話も聞いたことありますが、わたしはワイヤーフレームをかくことは情報を整理するという意味で大変大切な作業だと思っています。大きいサイトになればなるほど、上記フローが大切になってきますので、皆さんも是非、参考にしてみてください。","type":"text"}]

hatenaはてブ


この記事の関連キーワード