slooProImg_20141024224750.jpg

[Ď] 初心者の時にお世話になったの4つのワイヤーフレーム習得方法

お疲れ様です。@Micchy_Rです。
この業界に入ったのが3年前。もちろん右も左も分からない状態でした。
業界用語というには語弊があるかもしれませんが、「ワイヤーフレーム」「ディレクトリマップ」などの、聞いただけで何となく想像できるものから、「アーキテクト」「ストラクチャー」など難しいものまで様々です。

入社して直ぐにオリエンテーションを行った直後に、会社がお客さんに提出している「企画書を眺める」仕事?をいただき、しらみつぶしに読み漁ってました。
それから間もなくして、案件の話しをいただき、企画書、設計書を作ることになる訳です。

企画書はREPと照らし合わせてスケジュールやプランや体制を纏めたもの。
「設計書」もだいぶ広義ではありますが、うちの会社で言う設計書は上でも挙げたワイヤーフレームが近しいです。


ここで初心者は「ワイヤーフレーム」という言葉に初めて触れます。

コトバンクで調べてみました。

Webページの大まかなコンテンツやレイアウトを示した構成図。主にレイアウトの確認、メニュー構成の確認、要素の強弱の確認などを目的に作成する。

なるほど「家の設計書か」などと思ったと記憶しています。
思ったことはあながち嘘でもなく、実際に家や車の設計書に例えられることが多いです。

とは言ったものの、見るのも描くのも初めて。
何かを参考にしながらというのが最初にやるべきことです。
日本には「守破離」という適切な言葉があります。
まずは作法を「守る」ことから始めるのがディレクターの第一歩です。

自分がワイヤーを描く時にお世話になった方法を紹介したいと思います。

4つのワイヤーフレーム習得方法

1.同僚のワイヤーを参考にする

まさに「守破離」の「守」になりますが、社内のファイルサーバーに保存されているだろう同僚のワイヤーを参考にするのが一番手っ取り早いです。
パワーポイントなどで作られているのであれば、社内でテンプレートやステンシルを作っている可能性もあるでしょう。社内独自の作法や、使い方などは事前に共有してもらえてると思います。

分野によってちょっとした作法があるので、参考にするのは必ず同じまたは似た分野の案件が良いです。
そのワイヤーフレームから実際にどんなサイトが構築されたのか比較しながら見て、追ってください。

習うより慣れろ!ということになりますが、サイズ感、位置、向き、色などから、コメントの入れ方などまずは「守る」を意識してみます。

2.同じ分野のサイトをとにかく見る

1.に近しいのですが、設計後にお客さんに説明する時や、デザイナーさんに依頼するときにためにインプットしておくのが良いです。
企画書の一部になる場合もあるので、吟味してみてください。
出来ればキャプチャを取得しておいて、一覧で見れたりすると後々便利になります。

ここでブックマークレットを紹介しておきます。
Wirify

ワンクリックでワイヤーフレームを作成してくれる便利なブックマークレットです。
既に公開されているサイトをワイヤーフレーム化することができるので、簡単な比較もできます。
相対的な位置関係を手早く確認できるので、入れておいて損はないです。

3.まとめサイトをみる

ワイヤーフレームのまとめサイトを見るのも一つの手段です。
手順や書き方、フォーマットやグリッドなど様々なモノが一挙に見れるので、流し見しているだけでも勉強になります。
1.2.と違って、カテゴライズの概念はないので、「パーツ」で見ることになりますが、自分の中にパーツ集としてしまっておいて、後に役立たせるなど、時間があるだけ見てしまいます。

海外のまとめサイトになりますが、3サイト紹介しておきます。

4.参考書を読む

最後に参考書です。読んで、理解して、アウトプットするにはまだまだ難しい言葉が多いので、最初に読み漁るのはあまりオススメしません。言葉に埋まります。
ですが、設計の仮説、根拠、意図を説明する場合には必ず必要になってきます。
自分が参考にした書籍はまた別の機会にエントリーしたいと思います。

最初に必要なのはモノマネ

人のマネができるのはそれだけで技術です。良いところはとことん盗む。
逆に悪いことろは何が悪いのか、どうすれば改善できるかが分かるようになると成長も早いと思います。

最終的にはクライアントに提出する会社からの提案になります。
もちろん、全てまるっと一任さている訳ではないと思うので、方向性は早めに社内で合意を取ってから進めて行くべきです。

経験は価値を生み出すので、多くの経験を積めるようにしましょう。
クライアントワークだけではなく、自分で仮想の会社を設定して、ワイヤーフレームを書き続けるなど、とにかく繰り返しを実戦してみてはいかがでしょうか。

継続していくことで、頭に入り、仕事に生かせるようになると思っています。

Micchy_R
Posted from するぷろ for iOS.

Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrEmail this to someone

Leave a reply

Your email address will not be published.

日本語が含まれない投稿は無視されますのでご注意ください。

Top