ワイヤーフレームって何?作成方法もしっかり解説します

ワイヤーフレームとは、WEBページのレイアウトを決める設計図のようなもので、WEB制作に欠かせない要素です。

略してワイヤーと呼ぶことが多く、現場では必ず使われる言葉ですので、WEB制作を始めたばかりで何もわからない人でもこれだけは押さえておく必要があります。

今回はワイヤーフレームの役割や作成方法について解説していきます。

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

上述のとおりワイヤーフレームとはWEBページのレイアウトを決める設計図です。

ページのどのあたりにロゴを配置して、メインビジュアルはここ、バナーや新作記事の表示はこの辺で、といったものを一目でわかるようにしてあります。

大抵の場合トップページと下部ページでは構成が微妙に違いますので、それぞれのページ用のワイヤーフレームを用意します。

ページレイアウトの数だけワイヤーフレームもあると捉えてもらえれば問題ありません。

ワイヤーフレームの役割

実際の作業に入る前に関係者全員でこのワイヤーフレームを共有しておくことで、全員が同じイメージを持ってコーディングを行うことができます。

逆にワイヤーフレームなしで言葉のみでの説明では何となくのイメージは持てても細かいところで差異が出てきてしまいます。

自分一人で作業しているならまだしも、複数人での作業や外注している時などは、人によって違うページを作ることになってしまい、サイトに統一感が生まれずちぐはぐなものになってしまいます。

また、それだけでなく事前にレイアウトを可視化しておくことで足りない項目や、不要な作業の洗い出しが可能になります。

ワイヤーフレームと似ているようで違う?混同に注意!

上記がワイヤーフレームの役割ですが、よく間違えられるものが3つありますので、それぞれ違いを見ていきましょう。

ディレクトリマップ

ディレクトリマップとは、WEBサイト全体の構成を一覧にしたものです。

ワイヤーフレームがページのレイアウトを示すものに対し、ディレクトリマップはサイト全体における各ページの配置や仕様をまとめたものであり、どのページにどれがぶら下がっているかなどを各ページのURLとともに一覧表にしています。

ワイヤーフレームだけではわからない各ページの関係を示す資料として、こちらもWEB制作の現場においては重要なものとなっています。

デザインカンプ

デザインカンプとは、WEBページの完成見本のことを指しています。

ワイヤーフレームはラフ画のような形になっていますので、それをより完成形に近づけイメージしやすいようにしたものとなっています。

外注を受けたWEB制作会社がクライアントにいくつか完成見本として提示し、その中からもっともクライアントのイメージに沿うものを選んでもらうのに使ったりします。

サイトマップ

サイトマップはWEBサイトの全体像を表示するもので、ディレクトリマップと似ていますが、ディレクトリマップやワイヤーフレームは制作時に使用するのに対し、サイトマップは制作後に使用するものです。

ユーザーにサイトの全体像を示すHTMLサイトマップと、SEO対策の際に使用するXMLサイトマップの2種類があります。

ワイヤーフレームの作成方法

ワイヤーフレームの役割と混同しやすい要素を確認したところで、実際の作成方法について見ていきましょう。

1、情報の整理

まず始めに行うのは情報の整理です。

情報の整理を行う上で大事なのは最初にそのページに載せる情報を全て書き出すことです。

例えば自社サイトのページを作成するのであれば、企業名やロゴ、主な業務内容や会社の沿革、連絡先、所在地などと思いつくものすべてを書き出します。

その後書き出した情報を性質が似ているもの同士でグループ分けします。

グループ分けすることで情報が分散してわかりづらくなるのを防ぎます。

それができたら次は優先順位を付けていきます。

WEBサイトの目的に沿った情報を優先的に表示することで、サイトに訪れたユーザーが探していた情報を提供しやすくなります

例えばロゴマーク制作を外注する時の料金を知りたいユーザーからしてみれば、企業の社長の顔写真がでかでかと表示されても意味がないのは明らかです。

もちろん顔を出すことで誠意が伝わるなどの効果はありますが、それが優先順位トップに来るべきか、は要検討です。

 

2、情報のレイアウト

情報が整理できたら次はレイアウトです。

どの情報をどこに配置するのか、ここでワイヤーフレームのほぼ全てが決まります。

レイアウトにはトレンドがあり、時代によって流行りのデザインなどがあったりしますが、それぞれのデザインには異なる役割がありますので、自分の目的に沿ったもので考えましょう。

社長の顔写真の例もそうですが、何よりもユーザー視点に立ったレイアウトが重要です。

3、清書

ここまでできたらあとはワイヤーフレームを作成するツールを用いて清書していくだけです。

もちろん手書きの状態で完成させても構いませんが、データ上で残しておくことで修正や共有が楽になりますので、多くの場合はツールを使って清書することになります。

ツールも人によって異なりますが、パワーポイントやエクセルでも作成できますし、AdobeのIllustratorを使う人やワイヤーフレーム制作ようのオンラインサービスを使う人もいます。

ただ複数人で作業する場合はデータの共有のしやすや修正のしやすさという点を念頭におく必要があります。

まとめ

ワイヤーフレームはWEBページのレイアウトを決める設計図です。

これをしっかりと作ることで完成イメージを共有でき、複数人での作業時にはブレがなくなります

また、事前にイメージを可視化しておくことで情報の不足や不要な要素の確認なども可能になります。

後々のトラブルを防ぐためにも、しっかりとしたワイヤーフレームを作成しましょう。

The following two tabs change content below.

西原 豊明

名前:西原豊明(ニシハラトヨアキ)。 事業:転売ビジネス(主に輸入)/転売ビジネススクール運営/コンサルティング 2015年に会社に勤めながら「副業」で転売ビジネスを開始し、月収200万円以上を安定的に稼ぎ続ける事に成功した後「失敗する事のないビジネス」をコンセプトに初心者・上級者を問わずして資産構築とサポートの提供をしている。

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

プロフィール



西原 豊明
1985年11月生まれ(33歳)
輸入と副業セミナー開催の「株式会社TORASCO」代表取締役。
副業コンサルタント。
モットーは「働くこと」。工業高校に進学し、3年間で800万円を稼ぐ。1日8時間働き、学校が休みの日は12時間働いたことも。バイトは月2日しか休まなかった。
27歳のときに第一子を授かり、その後念願のマイホームを購入するも、住宅ローンで家計は火の車。
「金を稼ぐため」という理由でパチンコにはまる。当時の給料の手取り月額は15万円にもかかわらず、1日10万円負けたことも。家計はさらに悪化。

状況を打開するために模索を始め、30歳になる直前にネットビジネスに出会う。

当時、パソコンもスマホも持っていなかったが、書店で見つけた1冊の本「クビでも年収1億円」(小玉歩著)を読んだことがきっかけだった。
サラリーマンを続けながら、副業としてネットビジネスを開始するも、最初の半年ほどは月2万円ほどしか稼げず。
ただ時間だけはかかったので、当時の時給は10円ほど。 挫折と失敗を繰り返していた折に、最高のメンター(師)と出会う。

副業開始から9カ月目に、無在庫輸入ビジネスを始め、これを始めてから3カ月で月収100万円、5カ月で月収200万円を達成。
この実績を、世の中のサラリーマンたちに広めたいと考え、無在庫輸入ビジネスをレクチャーするセミナーを開始。
2017年8月、株式会社TORASCO設立。


PAGE TOP