Web制作

ワイヤーフレームの描き方

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

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

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

ワイヤーフレームとは、ウェブサイトの骨組みのこと
家で例えたら柱などの部分にあたります。

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

・イラストレイター

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

・パワーポイント

私はもっぱらパワーポイントでワイヤーフレームを描いてます。
使い慣れていることもあり、大変便利。サクサク作成できます。

・Cacoo

https://cacoo.com/lang/ja/
ワイヤーフレームをとてもキレイに描けます。
最近は結構使ってます。
WEB上で共有できるから遠隔地のメンバーともやりとりしやすいです。

・紙

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

・ホワイトボード

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

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

基本技術の習得方法

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

応用技術の習得方法

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

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

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

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

-Web制作

執筆者:

関連記事

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

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

【制作】WEBディレクターがローカル開発環境作ってみた VirtualBox編

みなさまこんにちは。 WEBディレクター、高橋です。 WEBサーバーに都度入らずに ローカルで作業できる開発環境が欲しいなって思ったことありませんか? そこで、ローカル開発環境を久しぶりに作ってみよう …

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

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

LPOとは?

LPOとは? LPOとはLanding Page Optimizationの略で、ランディングページを最適化する取り組みのことです。 売り上げや問い合わせを増やすために、まず取り組むべき施策がランディ …

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

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