ワイヤーフレームとは？作り方や意味、おすすめツールも紹介！

Webサイト制作やリニューアル時に必ず必要なのがワイヤーフレームです。一度も作成したことがない人には難しく感じますが、なぜ必要なのか、どんな内容が必要なのかがわかれば初心者でもチャレンジ可能です。ワイヤーフレームを基本的なことから紹介します。

ウェブサイト制作でお悩みの担当者様へ
ウェブサイトの新規制作やリニューアルで失敗したくないが、どの制作会社も似たような提案でどこに依頼したら良いかわからない・・・。
ウェブサイトの制作会社を探していて、このようなお悩みはありませんか？ウェブサイトは制作目的やご予算によって、最適な手法を検討する必要があります。弊社ではクライアント様の目的に応じて、集客・デザイン・機能面で最適なご提案をいたします。



ウェブサイト制作について
無料で相談する

ワイヤーフレームとは？

ワイヤーフレーム（wireframe）とは、Webページのレイアウトやコンテンツの配置を定めた設計図のことです。英語のワイヤー（wire）には「針金」「ケーブル」、フレーム（frame）には「枠」「骨組み」という意味があり、ワイヤーフレームは文字通りシンプルな線や図で構成されています。

たとえば、引っ越しの際には、次に住む部屋の間取り図を見て「ベッドはここに配置しよう」「この隙間にぴったり合う戸棚を買おう」などと家具の配置を考えます。ワイヤーフレームはWebページのデザインの前段階で「最新情報をここに配置しよう」「問い合わせへの導線はここに配置しよう」といったコンテンツの配置を決定するために作成します。

ワイヤーフレームをしっかり決めておくことで、デザインやコーディングの段階に入ってからの後出し追加や遡っての修正を防ぐことができ、効率的な制作進行管理を行えるでしょう。

ワイヤーフレームを作成しなければいけない理由

Webサイトの新規作成やリニューアル時に作成するワイヤーフレームですが、必ず作成しなければいけないのでしょうか？ワイヤーフレームにはどのような目的があるか解説します。

1.Webサイトのレイアウトを決めるため

ワイヤーフレームの第一の目的は、Webサイトのレイアウトを決めることです。デザインありきで「このデザインにはめ込むためにコンテンツを作る」という組み立て方をしてしまうと、デザインは良くても必要なコンテンツが足りていないWebサイトになりかねません。Webサイトはまず「盛り込みたいコンテンツ」をリストアップし、ワイヤーフレームを用いてレイアウトを組み立てる工程が必要です。

2.レイアウトや機能を制作者で共有するため

Webサイトを作成するためには、ディレクター、ライター、デザイナー、エンジニア、コーダーなど複数の制作担当者が関わります。そこにクライアント側の担当者や決裁者が加わることもあるでしょう。Webサイトのレイアウトや盛り込む機能、複数人ですり合わせた「ここはこうしましょう」という決定事項を記録に残す点でも、ワイヤーフレームは役に立ちます。ワイヤーフレームで情報を共有することで、後工程での追加訂正や認識ズレなどのトラブルの予防に繋がります。

3.ページ内容のアイデアを出したり、議論をするため

ワイヤーフレームはシンプルな線と文字だけで作成されています。そのため、ページに盛り込むコンテンツや目を引くためのデザインなど、アイデアを出し合うたたき台として最適です。逆にいうと、ワイヤーフレームの段階である程度デザインを固めてしまうと、議論の幅を狭めてしまう可能性があります。最初のワイヤーフレームはモノクロのシンプルなラフにとどめ、複数の担当者で議論を行いながら最終的な決定稿までブラッシュアップしていきましょう。

ワイヤーフレームは誰が作成すべきか

ワイヤフレームを作成するのは誰の役割なのでしょうか？一般的にはディレクター主導で行う場合が多く、必ずしもデザイン経験者である必要はありません。クライアントからのヒアリング内容を元にして必要なコンテンツを組み立てるのは、ディレクターの担当である場合が多いでしょう。修正やアイデア出しで他者の協力を仰ぎつつも、ディレクター自身がワイヤーフレームを作成するのが、進行管理上も効率的です。ワイヤーフレームが確定した後、具体的なWebサイトのデザインはデザイナーが行います。

ワイヤーフレームを作る際の注意点

ワイヤーフレームを作る際、注意すべき点を5つ解説します。

1.ディレクトリマップを作成してからワイヤーフレームを作る

サイト作成の手順は、以下のような流れが一般的です。

1.ディレクトリマップ作成
2.ワイヤーフレーム作成
3.Webデザイン開始
4.コーディング

まず、ディレクトリマップ上でサイトに必要なページや各ページに必要なコンテンツを確定させてから、ワイヤーフレームの作成に取りかかりましょう。たとえば社員採用の特化サイトを作るなら、会社概要のページや社員インタビューといったコンテンツが必要になります。必要なページ・コンテンツが固まる前にワイヤーフレームを作ると、結果的に後から頻繁に追加・修正が発生してしまいコストも余分にかかることになります。

ディレクトリマップって何？Web制作では絶対に必要？メリットや誰が作成すべきかを解説 Web制作に関わる人にとっては聞きなれた、見慣れたディレクトリマップですが、何のために必要なのでしょうか？Web制作でディレクトリマップが無いとどんなことで困るのか、基本的なことから解説します。

2.どのページのワイヤーフレームを作成するのか、作成の優先順位を決める

ディレクトリマップを見ながら、どのページのワイヤーフレームから作成するか、優先順位を決めましょう。ヘッダーやフッターはページ間で共通になることが多く、主要ページと合わせて決めることができます。その他のページでも、ワイヤーフレームを使いまわせるページが複数あるはずです。具体的には以下のようなページから手を付けると、効率よくワイヤーフレームが作成できます。

• 主要なページ（トップページ、ランディングページ）
• 訪問するユーザーが多いページ（採用ページなど）
• 特別なレイアウトになるページ（キャンペーンページなど）
• 支社ごとの紹介ページなど、同じレイアウトを使いまわせるページ

3.競合サイト、参考にしたいサイトを分析してから作る

いきなりワイヤーフレームを作ろうと思っても、どのようなレイアウトにすればいいかアイデアに悩む場合も多くあります。そんなときは競合サイトや人気を集めているサイトを分析して、コンテンツの配置や見せ方などを参考にするのも良い方法です。また、後述するワイヤーフレーム作成ツールの中には、無料テンプレートが含まれているものもあります。似たようなワイヤーフレームを使っても、デザイン次第でまったく違った印象になるので、ワイヤーフレーム自体は独自性やオリジナリティにこだわりすぎないようにしましょう。
競合サイトの分析ツールについては、下記のブログをご参考ください。

4.スマホ版、PC版は別々に作る

スマートフォン版のサイトは、PC版に比べて画面の横幅が狭くなるためレイアウトの変更が必要になります。PC版をスマートフォンで読み込んだ場合、レイアウトが崩れてユーザーに「見づらい」「ページが壊れている」といった印象を与えかねません。すべてのページでスマートフォン版を作る必要はありませんが、トップページや重要なページではスマートフォン版のワイヤーフレームを作成してレイアウトを最適化しておきましょう。
Webサイトの最適な表示に関しては、レスポンシブデザインもおすすめです。

5.ワイヤーフレームを作り込み過ぎない

ワイヤーフレームを作成する際に陥りがちな失敗が「ワイヤーフレームを作り込み過ぎる」ことです。Adobe XDなど、ワイヤーフレームだけでなくデザインカンプまで作成可能な高機能ツールを使う場合に起こりがちなので、注意が必要です。ワイヤーフレームはあくまでレイアウトを決定するためのもので、サイトデザイン自体はデザイナーの仕事です。ワイヤーフレームの段階で中途半端にロゴや文字の大きさ、用いる写真などを決定してしまうと、その後のデザイナーの仕事の幅を狭めてしまうことになります。また、「クライアントに分かりやすくしよう」という意図でデザイン要素を入れてしまうと、クライアントがデザインに注意を引かれ、「このデザインはこう変えて欲しい」などワイヤーフレーム以外の部分に言及して混乱の要因になりかねません。推奨されるワイヤーフレームは、モノクロでシンプルな図形。ワイヤーフレームに以外にもディレクターがこなす作業はたくさんあるので、ワイヤーフレームに多くの時間をかける必要はないでしょう。

ワイヤーフレームの作りにおすすめなツール

ワイヤーフレームを作る際に便利なツールは数多くあります。ここではワイヤーフレームの作成に使用する主なツールをご紹介いたします。

1.Adobe XD

Adobe XDは多くのWeb制作会社がワイヤーフレームを作成するときに使うツールです。モックアップやワイヤーフレームなどを作成するために作られたAdobeのツールなので、ワイヤーフレームを作成する際に便利な様々な機能が揃っています。
また、作成したワイヤーフレームをクラウド上で共有することが可能で、複数のユーザーから同時にフィードバックをもらうことが可能なのでワイヤーフレームの作成と確認が効率的に出来ることが特徴です。

2.Adobe Photoshop

Adobe Photoshopでもワイヤーフレームを作成することが可能です。前述のAdobe XDが出るまでは、Adobe Photoshopでワイヤーフレームを作成していたWeb制作会社も多く自由なデザインを作る事が可能です。

3.CACOO

CACOOはクラウドベースのワイヤーフレーム作成ツールです。PC版のWebサイトだけでなく、iOS版やAndroid版、アプリ用のワイヤーフレームが作成できます。無料のテンプレートや図形も豊富に用意されており、参加メンバーや編集権限が個別管理できるプロジェクトフォルダを設定することで、チームメンバーやクライアントと安全かつスムーズに情報を共有できます。
外部リンク：CACOO

ウェブサイト制作でお悩みの担当者様へ
ウェブサイトの新規制作やリニューアルしたいが、SEOに強い制作会社はデザインが悪い、デザインが良い制作会社はSEOに弱い・・・。
ウェブサイトの制作会社を探していて、このようなお悩みはありませんか？弊社では専門のSEOコンサルタントがサイト設計を実施、デザインは国内外の優秀なデザイナーによるデザイン性の高い結果を出すサイト制作をご提案をいたします。

ウェブサイト制作について
無料で相談する