Column

ホームページを制作する際、それが新規制作でもリニューアルであっても最初に必要となるのが「ワイヤーフレーム」です。
この記事では、ワイヤーフレームを制作する目的と作り方について解説していきます。

ワイヤーフレームは、ホームページのデザインを制作する前に必ず準備する「設計図」のようなものです。

設計図が必要なのはホームぺージに限らず、建築物や自動車など何かの製品を作る時にはかならず必要となります。

例えば家を設計する際には（何部屋作るか）（どこにキッチンを配置するか）（ドアはどこに設置するか）等の情報を盛り込みますが、ホームページでも同様に

・どの位置にどういったボタンを設置するか

・画像はどのくらいの大きさで何枚掲載するか

・最もアピールしたいポイントをどこに配置するか

・クリックした際、あるいはスクロールした際にはどのような動きをするか

といった情報をデザイン制作の前に決めておく必要があります。
これらの情報をまとめたものが「ワイヤーフレーム」です。

ワイヤーフレームには様々な目的がありますが、正しく準備することで多くのメリットがあります。
以下では、ワイヤーフレームの目的とメリットについて解説します。

あなたがホームページの（発注者）であっても（制作者）であっても、ホームページ制作に携わったことのある方なら誰しも以下のような経験したことがあると思います。

「デザインの完成物を見たら想定していたレイアウトと違って、思うようにデザイン制作が進まない」

「アピールしたいポイントが目立たないので、何度もデザインのやり直しが必要になった」

「デザイン制作してみたら、必要な要素が足りないことに気付いた」

もちろんワイヤーフレームを用意してもこれらの問題は起こりえるのですが、少なくともその数を減らすことができます。

まずはワイヤーフレームを使ってお互いの認識を擦り合わせ、正しい方向へ進んでいくためにワイヤーフレームは必須と言えます。

ホームページ制作の際に、発注者側からよく出る意見として「実際に出来上がったものを見てみないとよく分からない」というものがあります。

ホームページ制作を初めて業者に依頼する発注者多いため、この意見はごもっともなのですが、制作者側（ディレクター/デザイナー）からすると少しでも発注者のイメージを聞き出したいところです。ここで役に立つのがワイヤーフレームです。

ホームページのデザインについて、提案書に記載された情報や参考サイトだけではイメージが掴みづらいですが、ワイヤーフレームを見ながら視覚的に確認してもらうことで、具体的なアイデアや要望が出しやすくなります。

クオリティの高いホームページを制作するには、お互いの意見交換と方向性の一致が重要となりますので、そのためにもまずはワイヤーフレームを使って活発な情報共有を行う必要があります。

ここまでワイヤーフレームの目的やメリットについて解説しましたが、実際にワイヤーフレームの作り方についてご紹介していきますので、参考にしてみてください。

ワイヤーフレームの基本となるのが「サイトマップ」です。これは「ページ構成」と言われることもありますが、まず（TOPページ）（会社概要）（サービス紹介）等のホームページを構成する全ページを洗い出します。

サイトマップが決まったら次に行うのはページのランク付けです。これを行うことで、どのページをホームページの一等地（一番目立つ場所）に配置するか、逆にそこまで見てもらわなくても良いページをどこに配置するかを決めることがが出来ます。

ホームページの目的によって異なりますが、一般的に等のページはユーザーの興味が高いため目立たせるケースが多く、逆に（プライバシーポリシー）といった興味の低いページは目立たない場所に配置する事が多いです。

例えば合計20ページのコーポレートサイトを制作する場合、予算にもよりますが20ページ全てのワイヤーフレームを制作することは稀です。

「各ページの重要度をランク付けする」で決めたランク付けを基に、ワイヤーフレームを準備するページを決めて行きます。一般的には（TOPページ）のワイヤーフレームは必須です。

その他のページは、サイトの目的に合わせて（サービス紹介）（会社概要）（料金案内）（採用情報）等のページは重要度が高く、ワイヤーフレームを用意することが多いです。

予算の都合でワイヤーフレームに工数を欠けられない場合は、TOPページのみ制作することもありますが、発注者と制作者のイメージ共有がしっかりと出来ていれば、この進め方でも問題無いでしょう。

制作方法は様々ですが、以下の方法が一般的です。

・手書き

（メリット）とにかく早い。専門知識が不要で誰でも作れる。

（デメリット）修正に時間がかかる。データの共有が難しい。

・エクセル・パワーポイント

（メリット）一般的なソフトなので互換性が高い。慣れていれば作業も早め。

（デメリット）細かなレイアウトや指示が書きにくい。

・AdobeのXDやillustrator等の専用ツールを使う

（メリット）デザインに近い形で制作可能。データをそのままデザイン制作時に流用できる。

（デメリット）ツールを扱う専門知識が無いと逆に時間がかかる。

それぞれメリット/デメリットがありますが、どれを使うかは発注者と制作者で事前に決めておくと良いでしょう。
とにかくスピード優先の場合は手書きで済ませて、すぐにデザイン制作に着手することもあります。

方法が決定したら次はいよいよワイヤーフレームの制作に移ります。
ワイヤーフレームは様々な要素が合わさって構成されますが、一般的には以下の要素で構成されています。

・ヘッダー・グローバルナビゲーション

→ホームページの最上部に表示されるエリアで、基本的に全ページ共通のパーツです。ホームページを訪れたユーザーは、このヘッダーをクリックして各ページにアクセスすることが多いので、ホームページの基本となるパーツです。

・メインビジュアル（ファーストビュー）

→ホームページを開いた時に一番最初に表示されるエリアを指します。ホームページで取り扱う商品・サービスのキャッチフレーズや、ホームページ全体を表す画像が配置されるため、ユーザーのホームページの第一印象を決める非常に重要なエリアです。

・コンテンツエリア

→サイトマップで決まった各ページの情報を掲載していくエリアです。一般的に優先度が高い情報を上部に掲載することが多いですが、このエリアの仕様がホームページ全体で統一されるため、TOPページのコンテンツエリアは最も重要な部分です。

・フッター

→ホームページの最下部に表示されるエリアで、基本的に全ページへのリンクがここに表示されます。優先度が低く、コンテンツエリアには表示されなかった（プライバシーポリシー）等をフッターに表記することが多いです。

ヘッダーと同じく全ページ共通のパーツです。

今回はワイヤーフレームの目的と作り方について解説してみました。

ワイヤーフレームの作り方は制作会社によって様々で、予算によっては発注側が用意するケースもあります。

ホームページの制作を検討されている方は、ワイヤーフレームの作り方やサンプル等を制作会社に提示してもらうことで、会社選定の基準になるのではないでしょうか。

満足できるホームページ制作に向けて、この情報が少しでも参考になれば幸いです。