ワイヤーフレームってどう描けばいいの？って悩んでいる方もいるはずなので、高橋流ワイヤーフレームの作成方法を解説させて頂きます。
ワイヤーフレームってなに？
ワイヤーフレームとは、ウェブサイトの骨組みのことです。
競合調査を行う
競合サイトを参考にしながらワイヤーフレームを作成するため
まず、ワイヤーフレームの作成に着手する前に競合サイトを調査します。
私の場合ですが
・ その業界でシェアトップまたは勢いがあるか？
・ ユーザビリティが良いか？
・ 今回制作するサイトの世界観にマッチしているか？
・ ペルソナにマッチしているか？
などを判断ポイントにピックアップしています。
３サイト位候補を上げて、その中からクライアントと一緒に参考サイトをひとつに絞ります。
ストーリーを考える
ワイヤーフレームを作成する際
とにかく最後まで読んでもらえるよう構成を考えます。
私は恐らく、ストーリーを作る作業に一番時間をかけてます。
・ 目的に合わせてストーリーを作る
ことがポイントじゃないかと思います。
特に、「売上増加」や「問い合せ増加」を目的としている場合は
最後まで読んでもらわないと問い合せフォームまで行かずに、文章の途中で離脱されてしまいます。
そのため、ストーリーをしっかり作るよう心掛けてください。
ワイヤーフレームの構成を作成する
ワイヤーフレームは主に『写真』と『テキスト』から構成されています。
ワイヤーフレームの制作ですが、ゼロから作る場合とリニューアルの場合で構成の作成方法が異なります。
ゼロから作る場合
・写真素材が入る場所はグレーのボックスをアテておく
・テキストが入る場所は「テキスト」で記載しておく
リニューアルの場合
・写真素材が入る場所はリニューアル前で利用できそうな素材をアテておく
・テキストはリニューアル前で利用できそうなテキストを入れておく
ゼロから作る場合もリニューアルの場合も再利用しないで作るという方もいるかと思いますが、私は素材やテキストは利用できるものは再利用するようにディレクションしています。
具体的に書かれていた方が、ワイヤーフレームの段階でゴールイメージを共通認識しやすくなるためです。
素材やテキストを再利用するとワイヤーフレームを読み合わせするとき、写真差し替えやテキストのブラッシュアップが同時にできるのも大きな利点です。
レスポンシブデザインありきでワイヤーフレームを作る
私はレスポンシブデザインありきでワイヤーフレームを作ります。
・ 横幅960pxで作成（3分割しやすいから）
・ 縦幅は内容により変える（平均2,000px-3,000pxのサイトが多いかな？）
・ 縦積みしやすい構成（スマホファースト）
・ 写真とテキストの配置に偏りを無くす
どのツールで描くか？５つのツール紹介
・Adobe Photoshop/Illustrator
Adobe Photoshop/Illustratorを使って描くのが、一番丁寧な仕事のやり方だと思います。
ワイヤーをAdobe Photoshop/Illustratorで作成し、デザイナーに共有するとデザイン作業が捗るので大変喜ばれます。
ただし、作業工数がかかるため、忙しいWEBディレクターには不向きです。
・パワーポイント
パワーポイントは侮れません。
使い慣れていることもあり、大変便利。
サクサク作成できます。
・Cacoo
https://cacoo.com/lang/ja/
ワイヤーフレームをとてもキレイに描けます。
2018年はCacooを最も使ってます。
WEB上で共有できるから遠隔地のメンバーともやりとりしやすいです。
・紙
ぱっとラフを描きたいときは、やっぱり紙ですよね。
私のキャンパスノートにはワイヤーのアイデア作品が沢山描かれてます。
・ホワイトボード
ラフデザインを描いたホワイトボードをスマホで撮影して議事録と一緒にデザイナーに共有してます。
とっても効率的です。
ただし、器の大きいデザイナー以外にこの手法を使うと怒られますので、注意してください。
ワイヤーフレーム作成技術 基本と応用
基本技術の習得方法
ワイヤーはいくつかのパターンに分かれます。
パターンを知るために、有名なWEBサイトを参考にフレームを描いてみましょう。
例えば、２カラム、３カラム、水戸黄門型デザインワイヤーなど。
この基本パターンをいくつ知っているか、どのように自分なりに分類しているかによってワイヤー作成の腕に差が出てくると思います。
応用技術の習得方法
応用技術は、基本の組み合わせに過ぎません。
カラムを追加・結合・削除しながら試行錯誤して技術を磨きましょう。
WEB上には見たことのないワイヤーがあります。
もしかすると新種のワイヤーかもしれませんので、見つけた時にはメモしておくことをおススメします。
後々流行するワイヤーフレームかもしれませんよ。
実務ではどう効率よく描いているか？
WEBディレクターにはやらなければいけないタスクが沢山あって、時間がありませんよね。
効率よくワイヤーを描くためのコツですが、まず、WEBサイトのゴールをしっかりイメージします。
そして、ゴールイメージに一番近い基本ワイヤーを参考に、ベースを描いてから、カラムを追加・結合・削除すると効率良く描けますよ。
もしサイト制作やリニューアルでワイヤーフレームが必要なので書いて欲しい！という方がいらっしゃいましたらお気軽にご相談ください。
[contact-form][contact-field label=”名前” type=”name” required=”true” /][contact-field label=”メールアドレス” type=”email” required=”true” /][contact-field label=”ウェブサイト” type=”url” /][contact-field label=”メッセージ” type=”textarea” /][/contact-form]
