ワイヤーフレームとは？概要や役割、作成時の注意点、作成方法、役立つツールなども解説！
ipeサービス資料や最新SEO情報、事例などお役立ち情報をご提供します
「ワイヤーフレーム」とは、Webページのレイアウトを定める設計図です。
今回は「ワイヤーフレーム」に焦点を当て、その概要や役割、作成時の注意点、作成方法、役立つツールなどをご紹介します。気になるポイントを一挙確認してしまいましょう。
「ワイヤーフレーム」とは？
「ワイヤーフレーム」とは、Webページのレイアウトを定める設計図です。
例えば、上記のように、一目見ただけで、ページの「どこ」に「なに」を設置するのかを示します。
「ワイヤーフレーム」を作成することで、ページの制作作業がスムーズになります。
基本的にWeb制作では、構成・レイアウトの異なるページの数だけ「ワイヤーフレーム」が作成されるということを覚えておきましょう。
「ワイヤーフレーム」の役割
「ワイヤーフレーム」は、Webページの完成イメージを「明確化」します。
そのため、複数人でWebサイトやページを制作している企業やプロジェクトチームの場合、イメージの共有がしやすく、認識相違による制作作業のブレを防止できます。
また、足りない要素や邪魔な要素などを事前にチェックすることも可能です。
「ワイヤーフレーム」は、ワークフローをスムーズにするために必要不可欠と言えるでしょう。
「ワイヤーフレーム」作成時の注意点
ここでは、「ワイヤーフレーム」を作成する時の注意点について3点解説します。
作成の優先順位を決める
「ワイヤーフレーム」を作成する際は、ディレクトリマップ(Webサイト内の全ページのURLとタイトルや記事内容がまとめられた一覧表)を見ながら、どのページの「ワイヤーフレーム」から作成するか、優先順位を決め、構成を考えましょう。
具体的には以下のページから作成すると、効率よく「ワイヤーフレーム」が作成できます。
・トップページやランディングページなどの「主要ページ」
・採用ページなどの「訪問ユーザーが多いページ」
・キャンペーンページなどの「特別なレイアウトにしたいページ」
・会社の紹介ページなどの「同じレイアウトを使いまわせるページ」
競合・参考サイトを分析する
「ワイヤーフレーム」を作成する際、構成やレイアウトに悩む方が多いです。
その場合、競合サイトや人気サイトを分析し、コンテンツの配置や見せ方などを参考にすると良いでしょう。
また後述解説しますが、「ワイヤーフレーム」に役立つツールには無料テンプレートがダウンロードできるものもあります。
無料テンプレートでも、編集したデザイン次第で全く違う印象になるため、ぜひ参考にしてみてください。
パソコン版とスマホ版は別々に作成する
スマホ版サイトは、パソコン版に比べて画面の横幅が狭いです。
パソコン版をスマートフォンで読み込んだ際、レイアウトが崩れると、UXの低下を招きます。
そのため、パソコン版とスマホ版は、別々のレイアウトを設定することが重要です。
特にトップページや重要ページは、必ず最適化しましょう。
またWebサイトの最適な表示に関しては、レスポンシブデザインがおすすめです。
「ワイヤーフレーム」の作り方
ここでは、「ワイヤーフレーム」の作成手順について解説します。
ぜひ参考にしてみてください。
①情報を整理する
まず初めに「ピックアップ→グルーピング→ランキング」という順で、Webページに載せるべき情報を整理します。
ピックアップ
ピックアップとは、そのWebページに載せるべき情報をすべて書き出すことです。
たとえば、電話番号やバナー画像、広告などそのページに必要だと思われる情報に漏れがないようすべて書き出しましょう。
グルーピング
グルーピングとは、ピックアップで出た複数の情報を、性質ごとにグループ分けすることです。
たとえば、住所と電話番号は「連絡先」として同じグループ、ロゴと会社名は「会社」として同じグループのような具合です。
グループ分けすることで、実際のWebページになった際、情報が分散してわかりづらいという事態を防ぎます。
ランキング
ランキングとは、グルーピングした情報に優先順位をつけることです。
Webサイトの目的ごとに、適切な優先順位をつけましょう。
たとえばコーポレートサイトなら、会社を認知してもらうことが最重要です。
そのため、ロゴや社名が含まれる「会社」のグループには高い優先順位をつけ、目立つ位置に配置することを心がけましょう。
②情報をレイアウトする
情報の整理後、実際にレイアウトしていきましょう。
Webページのレイアウトは、時代や流行によってトレンドが推移しやすいです。
また、デザインから受ける印象や機能性はそれぞれ異なります。
Webサイトの目的やブランドイメージ、機能性などを総合的に考え、整理した情報を配置するよう心がけましょう。
【レイアウト時によく使用される用語】
| ヘッダー | ・Webページの上部のこと
メインビジュアルを入れたり、会社のロゴを配置したりする |
| フッター | ・webページの下部のこと
会社概要や規約など重要情報などがまとめて置かれる傾向にあります |
| グローバルナビゲーション | ・Webサイト内の全てのWebページに設置されるメニューのこと
どのページからもアクセスできるため、重要ページへのリンクはここに設置しましょう |
| サイドバー | ・メインコンテンツの横に設置されるもの
ブログサイトなどで設置され、関連記事や最新記事、カテゴリーやプロフィールページなどへ移動できる |
| カラム、ロー | ・縦のライン＝列のことをカラム、横のライン＝行のことをローと呼ぶ |
③レイアウトを清書する
レイアウト完成後、「ワイヤーフレーム」を清書しましょう。
その際、ツールを使用すると効率的に清書することができます。
手書きでも問題ないですが、データ化すれば、簡単に共有できるだけでなく、修正も容易です。
「ワイヤーフレーム」の作成におすすめのツール
「ワイヤーフレーム」を作成する際に役立つツールはたくさんあります。
ここでは、おすすめのツールについてご紹介します。
ぜひ参考にしてみてください。
Adobe XD
Adobe XDは、アドビが販売するベクターベースのプロトタイピング作成ツールです。
「ワイヤーフレーム」やモックアップを作成するために作られたツールのため、作成時に役立つ機能が揃っています。
また、作成した「ワイヤーフレーム」をクラウド上で共有でき、複数のユーザーから同時にフィードバックをもらうことも可能です。
【Adobe XDのおすすめポイント】
・画面プレビューでデザインを確認しながら修正できる
・プロトタイプ機能で、Webページの遷移や項目の動きを把握できる
・基本的な機能は無料で利用できるため、使い勝手を試すことができる
【Adobe XD：公式サイト】
Invision
Invisionは、Webページやアプリのプロトタイプを作成し、チームでの確認やフィードバックを行うことができるプロトタイピングツールです。
複数人で共同編集したり、作成したデザインに対してコメントを共有できるシステムになっています。
またLIVE SHARE機能によって、サービスに登録することなくコメントを書き込めるため、外部システムとも連携が取りやすいです。
【Invisionのおすすめポイント】
・PNGやJPG、GIF、PDFなど、豊富なファイル形式で保存できる
・DropBoxやGoogleドライブなどと連携している
・プロジェクトの作成は1つまでという制限はあるが、無料で利用できるプランがある
【Invision：公式サイト】
補足：ExcelやPowerPoint
ExcelやPowerPointでも「ワイヤーフレーム」作りは可能です。
個人で「ワイヤーフレーム」を作成する際やツールに費用を割きたくない方は、ExcelやPowerPointで簡易的に済ませてしまうのもおすすめです。
「ワイヤーフレーム」を活用し、SEO対策を心がけよう！
このページでは、「ワイヤーフレーム」に焦点を当て、その概要や役割、作成時の注意点、作成方法、役立つツールなどについて解説しました。
「ワイヤーフレーム」 を作成することで、Webサイトやページの作成を正確かつ円滑に進めることができます。
時短になるだけでなく、完成後に必要情報が欠けているトラブルやクライアントと意見の乖離を減らすことができます。
皆さんも、Webページを作成する際はぜひ「ワイヤーフレーム 」を作成してみてくださいね。
「ワイヤーフレーム」や「SEO」でお悩みの場合は株式会社ipeにご相談ください。株式会社ipeではSEOでの大手クライアント実績多数！SEOを検討する際にはぜひ一度ご相談ください。
SEOに関するご相談があれば、ぜひipe（アイプ）へご相談ください。
この記事の著者
監修者 土田悠真
早稲田大学卒業後、東京地方検察庁に入庁。その後、株式会社ipeに入社。9か月でコンサルティングチームのリーダーに就任。年商150億円超えの中古品マーケットプレイス、商品数500万品超えのファッションECサイトをはじめとし、様々なジャンルのサイトをコンサルティング、分析を行う。ツイッターはこちら。
@seotsuchida
