制作

【現役Webディレ生講義】ワイヤーフレームの作成方法

投稿日:2015年11月12日 更新日:

ワイヤーフレームってどう描けばいいの?って悩んでいる方もいるはずなので、高橋流ワイヤーフレームの作成方法を解説させて頂きます。

ワイヤーフレームってなに?

ワイヤーフレームとは、ウェブサイトの骨組みのことです。

競合調査を行う

競合サイトを参考にしながらワイヤーフレームを作成するため
まず、ワイヤーフレームの作成に着手する前に競合サイトを調査します。

私の場合ですが
・ その業界でシェアトップまたは勢いがあるか?
・ ユーザビリティが良いか?
・ 今回制作するサイトの世界観にマッチしているか?
・ ペルソナにマッチしているか?
などを判断ポイントにピックアップしています。

3サイト位候補を上げて、その中からクライアントと一緒に参考サイトをひとつに絞ります。

ストーリーを考える

ワイヤーフレームを作成する際
とにかく最後まで読んでもらえるよう構成を考えます。
私は恐らく、ストーリーを作る作業に一番時間をかけてます。

・ 目的に合わせてストーリーを作る

ことがポイントじゃないかと思います。

特に、「売上増加」や「問い合せ増加」を目的としている場合は
最後まで読んでもらわないと問い合せフォームまで行かずに、文章の途中で離脱されてしまいます。
そのため、ストーリーをしっかり作るよう心掛けてください。

ワイヤーフレームの構成を作成する

ワイヤーフレームは主に『写真』と『テキスト』から構成されています。
ワイヤーフレームの制作ですが、ゼロから作る場合とリニューアルの場合で構成の作成方法が異なります。

ゼロから作る場合

・写真素材が入る場所はグレーのボックスをアテておく
・テキストが入る場所は「テキスト」で記載しておく

リニューアルの場合

・写真素材が入る場所はリニューアル前で利用できそうな素材をアテておく
・テキストはリニューアル前で利用できそうなテキストを入れておく

ゼロから作る場合もリニューアルの場合も再利用しないで作るという方もいるかと思いますが、私は素材やテキストは利用できるものは再利用するようにディレクションしています。
具体的に書かれていた方が、ワイヤーフレームの段階でゴールイメージを共通認識しやすくなるためです。

素材やテキストを再利用するとワイヤーフレームを読み合わせするとき、写真差し替えやテキストのブラッシュアップが同時にできるのも大きな利点です。

レスポンシブデザインありきでワイヤーフレームを作る

私はレスポンシブデザインありきでワイヤーフレームを作ります。

・ 横幅960pxで作成(3分割しやすいから)
・ 縦幅は内容により変える(平均2,000px-3,000pxのサイトが多いかな?)
・ 縦積みしやすい構成(スマホファースト)
・ 写真とテキストの配置に偏りを無くす

どのツールで描くか?5つのツール紹介

・Adobe Photoshop/Illustrator

Adobe Photoshop/Illustratorを使って描くのが、一番丁寧な仕事のやり方だと思います。
ワイヤーをAdobe Photoshop/Illustratorで作成し、デザイナーに共有するとデザイン作業が捗るので大変喜ばれます。
ただし、作業工数がかかるため、忙しいWEBディレクターには不向きです。

・パワーポイント

パワーポイントは侮れません。
使い慣れていることもあり、大変便利。
サクサク作成できます。

・Cacoo


https://cacoo.com/lang/ja/
ワイヤーフレームをとてもキレイに描けます。
2018年はCacooを最も使ってます。

WEB上で共有できるから遠隔地のメンバーともやりとりしやすいです。

・紙


ぱっとラフを描きたいときは、やっぱり紙ですよね。
私のキャンパスノートにはワイヤーのアイデア作品が沢山描かれてます。

・ホワイトボード


ラフデザインを描いたホワイトボードをスマホで撮影して議事録と一緒にデザイナーに共有してます。
とっても効率的です。
ただし、器の大きいデザイナー以外にこの手法を使うと怒られますので、注意してください。

ワイヤーフレーム作成技術 基本と応用

基本技術の習得方法

ワイヤーはいくつかのパターンに分かれます。
パターンを知るために、有名なWEBサイトを参考にフレームを描いてみましょう。
例えば、2カラム、3カラム、水戸黄門型デザインワイヤーなど。
この基本パターンをいくつ知っているか、どのように自分なりに分類しているかによってワイヤー作成の腕に差が出てくると思います。

応用技術の習得方法

応用技術は、基本の組み合わせに過ぎません。
カラムを追加・結合・削除しながら試行錯誤して技術を磨きましょう。
WEB上には見たことのないワイヤーがあります。
もしかすると新種のワイヤーかもしれませんので、見つけた時にはメモしておくことをおススメします。
後々流行するワイヤーフレームかもしれませんよ。

実務ではどう効率よく描いているか?

WEBディレクターにはやらなければいけないタスクが沢山あって、時間がありませんよね。
効率よくワイヤーを描くためのコツですが、まず、WEBサイトのゴールをしっかりイメージします。
そして、ゴールイメージに一番近い基本ワイヤーを参考に、ベースを描いてから、カラムを追加・結合・削除すると効率良く描けますよ。

もしサイト制作やリニューアルでワイヤーフレームが必要なので書いて欲しい!という方がいらっしゃいましたらお気軽にご相談ください。

The following two tabs change content below.
美容医療業界を中心に、ネットからの来客数(EC、リアル店舗)・採用数を増やすデジタルプロモーションを担当。 法学部出身で業法対応(薬機法・景表法)のプロフェッショナリスト。 手がけたWEBディレクション数は350サイトを超える。 現行サイトを鋭く分析し、的確なUI/UX改善でグロースハックさせてきた。 コミュニケーション力に定評があり、小規模案件から大規模案件まで幅広く対応。 スクーで登壇実績あり。

最新記事 by Satoshi Takahashi (全て見る)

-制作

執筆者:

関連記事

ランディングページ(LP)とは?

ランディングページとは? ランディングページとは、商品やサービスを売ることを目的とした、一枚のページに情報を集約したWEBサイトのことです。 商品やサービスを売るためには欠かせないWEBサイトになりま …

【設計】WEBサービスの4モデルとは?

みなさまこんにちは。 WEBディレクター、高橋です。 WEBサービス立ちあげて、一山当てるぞー!なんて考えている人、いませんか? WEBサービスを設計するときは、どのように収益化するか?をまず考えない …

【設計】ユーザーストーリーとは?

ユーザーストーリーとは? ユーザーストーリーとは、ユーザーがどのようなアクションをするかを簡潔に記載したものになります。 WEB制作だけでなく、システム開発全般でもよく使われていて、要件定義、設計、テ …

ホームページ作成

ホームページの作り方

みなさまこんにちは。 高橋聡です。 今回はホームページ作成の手順を簡単に解説させて頂きます。 企画を作成する サイトで何を発信していきたいか考えます。 例えば、このサイト「スクウェアクリエイト」では、 …

WEBサイト制作におすすめのレンタルサーバー

みなさまこんにちは。 WEBディレクター、高橋です。 WEBサイトやWEBメディアを立ち上げる時 どのレンタルサーバーで運用するか迷いませんか? 今回はおすすめのレンタルサーバーをご紹介させて頂きます …