Webページ制作の必要不可欠な要素の中に「ワイヤーフレーム」というものがあります。

Web制作におけるワイヤーフレームは、ターゲットとなる顧客を架空の人物として設定する「ペルソナ」や、顧客の購買行動を把握するために用いられる「カスタマージャーニー」などに匹敵する重要な要素です。

Web制作に欠かせないワイヤーフレーム作成のメリットや役割を見ていきましょう。

Webページを見える化するワイヤーフレームとは？

端的に説明すると、ワイヤーフレームは「ページの設計図」と定義することができます。ワイヤーフレームはWebサイトのTOPページのようなページのレイアウトを決めるものです。

そのためWebページ制作の初期段階に作成する必要があり、ペルソナやカスタマージャーニーといった要素と並んでサイト設計に関わる要素になります。

Webページ制作ではWebページに載せる情報を予め関連グループごとにまとめ、TOPページのどの部分に項目を配置するかを決めていきますが、そこで活躍するのがワイヤーフレームと覚えておきましょう。

注意しておきたいのは、ワイヤーフレームは「TOPページのレイアウト」ではないということです。

あくまでページレイアウトの設計図そのものを指すため、TOPページとは別に下層ページのレイアウトを作った場合もワイヤーフレームとなります。

ワイヤーフレームを作成するメリット

Webページ制作の初期段階にワイヤーフレーム作成を行うことで様々なメリットを得ることができます。

Webページの完成図が分かる

1つ目は、制作するページの完成図が分かるということです。

Webページの制作をプロジェクトメンバーで行う場合や自社サイトに盛り込みたい情報が決まっている場合などに、予め追加する項目がどこにあるかを可視化できるため、完成後にイメージのズレが出てしまうリスクを下げることができます。

そのほかTOPページの制作では盛り込みたい情報が多くなるため、ワイヤーフレームのように追加する項目の配置が予め分かっていなければ、完成後に「情報の漏れ」が起こってしまうリスクが高まります。

制作したWebページの状況次第では「項目の追加ができない」こともあるため、はじめにワイヤーフレームを作成することが重要なのです。

導線設計が整いやすい

ワイヤーフレーム作成では、自社サイトのWebページに訪問したユーザーが「何を求めているのか」を意識して作成することも重要です。

自社サイトのTOPページであれば、サイトのファーストインプレッションにユーザーが求めているものとマッチングする項目を配置する必要があります。

自社サイトでアピールしたいことだけでなく、訪問したユーザーがTOPページで何を求めているかを考えた画面設計を行うことで、ユーザーが求めている情報への導線を自然と作ることができます。

盛り込む情報のピックアップを加速させる

ワイヤーフレームを作成するには、その前準備として「盛り込む情報」を決めておく必要があります。したがって、ワイヤーフレームを作成すると決めれば「情報のピックアップ」が急務となるのです。

Webページに訪問するユーザーに対してどのような情報を開示するのか（あるいは下部ページに盛り込む情報なのか）を決めることはピックアップした情報のグループ分けを必要とするため、結果的に前準備を終わらせることができます。

画面設計によって、ユーザーのWebページに対する印象は変化します。ワイヤーフレーム作成をWeb制作におけるコアプロセスとして認識することが重要です。

ページレイアウトに使用する用語と役割

ワイヤーフレーム作成を行う前に、Webページレイアウトでよく使用される用語と役割を知っておきましょう。

まずは「ヘッダー」です。ヘッダーはWebページの上部のことを指します。

ユーザーがWebページに訪れて最初に目にする部分になるため、画像やスライドショーなどのメインビジュアルを配置することが多くなります。

そのヘッダーの対極に位置するのが「フッター」です。フッターはページの最下部にあたり、ヘッダーのような目を引くコンテンツは配置しない傾向にあります。

配置する情報は「企業情報」や「サイトポリシー」などで、サイトの全体図が分かる「メニュー」などもここに配置されます。

また、Webサイト内のページ全てに設置されるメニューを「グローバルナビゲーション」といいます。サイト内のどのページにも表示されるため、「お問い合わせページ」や「資料請求」などの重要ページへのリンクを設定しましょう。

そのほかでは「関連記事」などを配置する「サイドバー」があり、メインコンテンツとサイドバーで縦の列が2列できるWebページは「2カラム構成」といわれ、Webページの基本構成となります。

導線設計を意識したページレイアウトとは？

Webページのワイヤーフレームには「導線」を意識したレイアウトが必要です。

ユーザーの知りたい情報が載っているページへの道順を把握し、その情報にたどり着く道順を整えてあげることがWebページの「導線設計」といえます。

Webページや自社サイトに訪問するユーザーが「どのような流入経路を通って訪問するのか」を考えると、Webページ上におけるレイアウトの優先順位が決めやすくなります。

特にTOPページのヘッダーやグローバルナビゲーションといった場所には、訪問するユーザーが「1番知りたい情報」へのリンクが貼られた項目を配置しましょう。

導線設計で重要なことは、訪問したユーザーが目的のページへたどり着くまでの障害をなるべく無くすことです。

ページレイアウトのイメージが湧かない場合は、競合サイトがどのようなページレイアウトを行っているかを参考（モデル）にするといいでしょう。

SEO効果あり！パンくずリスト

Webページの導線設計と関連した要素の1つに「パンくずリスト」があります。

パンくずリストには、Webサイトに訪問したユーザーが「Webサイトのどこにいるのか」を一目見て分かるように、「通過したページを表示しリンクを貼っておく」という役割があります。

ある程度ページ数のあるWebサイトではユーザーがサイト内の現在地を把握できない「サイト内迷子」になってしまう可能性が出てきます。

サイト内で迷子になってしまったユーザーは目的のページに戻る（あるいは進む）ことができず、サイトからそのまま離脱してしまうこともあるのです。

そうしたリスクを軽減するために、通ってきたページにすぐ戻ることができるパンくずリストが必要になります。

ユーザーが通過したページを表示するパンくずリストにはTOPページを起点として、下部ページである「カテゴリー」などが続いて表示されます。

そのため、ワイヤーフレーム作成の段階でWebページの階層（ディレクトリ）を決めておく必要があるのです。

パンくずリストが正しく活用されているWebサイトは、ユーザーだけでなく検索エンジンからも探しやすいというメリットがあるため、SEO対策として効果的といえます。

ワイヤーフレーム作成はWeb制作を円滑にするだけでなく、その後のコンテンツ作りやSEO対策にも影響があることを覚えておきましょう。

（画像はPixabayより）