Webデザインにおいて、ワイヤーフレームは欠かせないものです。ワイヤーフレームを適切に制作することで、効率的にWebサイトをデザインできます。この記事では、ワイヤーフレームの作り方や目的、気をつけるポイント、制作ツールなどを紹介します。ぜひ効率的なWebデザインの実現に向け、役立ててください。
→テンプレートからすぐにサイトが作れる「BiNDup」を30日間無料体験する
Webデザインに欠かせないワイヤーフレームとは
ワイヤーフレームとは、ホームページのレイアウトやコンテンツの内容を示した設計図のことです。Webサイトをデザインするときには、このワイヤーフレームの存在が欠かせません。
ワイヤーフレームは、コンテンツとして掲載する情報を整理するとともに、共にプロジェクトを進めるメンバーと認識をすりあわせる意味でも重要です。
Webデザインのワイヤーフレームはデザイナー以外でも制作可能
Webデザインのワイヤーフレームは、必ずしもデザイナーが制作するものではありません。むしろデザイン面よりも、どのような情報をどこに掲載したいのかという内容面のアウトラインが重要になります。
実際にWeb制作の現場でもクライアントからヒアリングを行い、ディレクターがワイヤーフレームを作成する場合が多々あります。
Webデザインにワイヤーフレームが欠かせない理由
Webデザインにワイヤーフレームが欠かせないといわれる理由は、ワイヤーフレームにいくつかの目的があるためです。
ワイヤーフレームには、コンテンツの内容と順番を決める情報整理をすると同時に、具体的な配置、つまりレイアウトを決める目的があります。また、ワイヤーフレームを作ることでイメージが可視化でき、メンバーと認識をあわせることが可能です。さらに、ワイヤーフレームをアイデアのたたき台として、さまざまなアイデアを集められます。
これらの目的から、ワイヤーフレームは効率的にWebサイトをデザインするために必要とされています。
Webサイトのワイヤーフレームのサンプル
→テンプレートからすぐにサイトが作れる「BiNDup」を30日間無料体験する
Webデザインにおけるワイヤーフレームの制作手順
それでは、Webデザインにおいてワイヤーフレームをどのように制作すればよいのか、具体的な制作手順について順を追って解説します。
手順1.必要な要素やページなどを決定する
画像やロゴ、ページなどサイトを構成するのに必要な要素をすべて書き出し、必要な要素やページなどを決定します。要素があいまいな場合は、アイキャッチ、ロゴ、会社情報、SNSのリンクなど、現段階で必要だと考えられる情報を書き出しましょう。
ここで書き出した要素は、最適な順番やレイアウトで組みあわせて、ホームページの形を作るものです。したがって、それぞれの要素に優先順位もつけておくと理想的です。
手順2.サイトマップ（ディレクトリマップ）を制作する
ホームページの要素を書き出したら、それを元にサイトの全体像をしっかりと制作します。これをサイトマップ（ディレクトリマップ）と呼びます。
サイトマップができていない段階でワイヤーフレームを制作してしまうと、サイトマップに変更が生じた場合には、すべてを制作し直さなければなりません。必ずワイヤーフレームを制作する前にサイトマップを完成させましょう。
手順3.どのページのワイヤーフレームを制作するのか決める
サイトマップができたら、どのページのワイヤーフレームを制作するのかを決めます。
理想は、全ページのワイヤーフレームを制作するのが望ましいといえます。しかし、大抵の場合は、サイト制作の担当者は他業務との兼任などで忙しく、そこまでできないケースがほとんどです。そこで、制作するサイトにおいて、重要な役割を果たすページのワイヤーフレームを優先的に制作していくのがおすすめです。
とりわけ、「TOP」「会社について」「企業理念」「エントリー」といったページは、最低限ワイヤーフレームを制作したほうがよいでしょう。
→テンプレートからすぐにサイトが作れる「BiNDup」を30日間無料体験する
手順4.レイアウトを考える
次にレイアウトを考えます。最初にある程度レイアウトの大枠を決めておくことで、ワイヤーフレームを制作しやすくなるためです。レイアウトによって画面の見やすさやコンテンツの読みやすさも変わってきます。ここでは、代表的なレイアウトをいくつか、具体的に紹介します。
1カラム（シングル）レイアウト
1カラムレイアウトは、シングルレイアウトとも呼びます。縦1列にコンテンツを並べていくタイプのレイアウトです。
このタイプは画面を横に大きく使うため、見やすいのが特徴で、コンテンツを縦に順番に配置することで、続きが読みたくなるメリットもあります。一方、コンテンツが多すぎると縦に長くなり、途中で飽きてしまうため注意が必要です。視覚効果などを使い、インパクトのある訴求がしやすいレイアウトとなります。
フルスクリーンレイアウト
フルスクリーンレイアウトは、画面全体を1枚のキャンバスのように表示するレイアウトです。大判の写真などを使うことで、印象的なページに仕上がります。
ビジュアルが重視されるページのタイプで、制作者のセンスが完成度を左右することになります。中途半端な形にならないよう、デザイナーなどの担当者と相談しながら制作するとよいでしょう。
BiNDupのテンプレート Natural Farm｜ビジュアルを大胆に押し出したシンプルかつ印象的なデザイン
タイル型レイアウト
タイル型レイアウトは、コンテンツをタイル状に配置していくレイアウトのことを指します。画面をスクロールすることなく、複数のコンテンツが視界に入るため、多くのコンテンツを掲載したい場合に最適です。ブログ型サイトのページによく使われています。
狭いスペースでいくつものコンテンツを掲載できるためスマホ対応しやすいのがメリットですが、コンテンツの優先順位をつけにくいのが難点です。
マルチカラムレイアウト
マルチカラムレイアウトは、1カラムレイアウトとタイル型レイアウトを組みあわせたレイアウトです。
情報を整理しやすく、またコンテンツの大きさを変えることで優先順位をつけやすくなります。しかし、一方で掲載できるコンテンツ数が限られるため情報の厳選が必要でしょう。比較的スマホ対応しにくい側面もあります。
サイドバー固定レイアウト
サイドバー固定レイアウトは、サイドバーが固定され、それ以外の部分はスクロールによって移動できるレイアウトです。
サイドバーが常に画面表示されているため、ユーザーがコンテンツ全体を見渡せて、使いやすい点がメリットです。一方、スマホ対応ができないため、スマホからの閲覧は不便といえます。
BiNDupのテンプレート PAREDE Cosmetics｜固定されたサイドバーでいつでもメニューを表示させるレイアウト
→テンプレートからすぐにサイトが作れる「BiNDup」を30日間無料体験する
手順5.ワイヤーフレームを制作する
レイアウトを決定したら、ワイヤーフレームの制作に入りましょう。レイアウトにあわせて、コンテンツの内容をどこにどのように配置するのか決めていきます。レイアウト上では、メインビューとコンテンツエリアとに分けて配置を考えることが大切です。
メインビューとは、キャッチコピーや画像など、サイトを印象づけるメインのスペースです。一方、コンテンツエリアはコンテンツの内容を並べるスペースで、ユーザーの使いやすさを意識したうえで、目次的な役割となるように優先順位をつけてコンテンツを並べていくことが肝要です。
また、リンクボタンは色分けしておく、特に目立たせたい部分を分かりやすくしておくなどの工夫も重要です。まずは手書きで制作し、ツールで清書すると作りやすいでしょう。
手順6.チームで共有する
ワイヤーフレームができたら、チームで共有し内容を精査します。このとき、自分より経験のあるスタッフや、チームリーダー、エンジニア、デザイナーなどにも確認してもらうのがおすすめです。
技術面やデザイン面などで、より高度な知識を持つ人にアドバイスを受けるようにするのが望ましいでしょう。ワイヤーフレームをそのままデザインに起こすのではなく、トレンドや技術的な部分を考慮してよりよいデザインに仕上げることができます。
Webデザインのワイヤーフレームを制作する際の注意点
Webデザインのワイヤーフレームを制作する際には、注意すべき点もあります。ワイヤーフレーム製作の注意点をいくつか解説します。
デザイン要素は入れない
ワイヤーフレームはあくまで、情報を整理するためのものです。したがって、ここではあえてデザインは入れず、線と文字だけで作るのが基本となります。デザイナーがワイヤーフレームにひきずられないよう、できるだけデザイン要素を省いたものが理想的です。
どのページのワイヤーフレームを優先して作るか精査する
どのページでワイヤーフレームを優先的に制作するかを精査します。優先度を判断する基準としては、まず、他のページとコンテンツ内容やレイアウトが全く異なるページならばワイヤーフレームがあったほうがよいといえます。また、サイトにおいて重要なページも同様です。
時間が無い場合は、特に主要ページに絞ってワイヤーフレームを制作するとよいでしょう。中にはワイヤーフレームを使い回せるページもあります。効率的に作業するためにも要不要の精査が重要です。
競合サイトを分析する
ワイヤーフレームを制作する際に、どのようなサイトにしたらよいか迷ったら、競合サイトや他社サイトをチェックしてみるのがおすすめです。競合サイト、他社サイトを見ることで、自社にあった情報の見せ方が見つかる可能性があります。良質なサイトのレイアウトやコンテンツ配置を参考にするとよいでしょう。
スマホ版のワイヤーフレームを別途制作する
Webサイトをスマホで表示すると画面が小さくなるため、新たにワイヤーフレームを制作するのがおすすめです。ただし、ワイヤーフレームを制作する数が増えるほど、工数も増えてしまいます。主要ページのみスマホ版のワイヤーフレームを制作するなど工夫が必要です。
→テンプレートからすぐにサイトが作れる「BiNDup」を30日間無料体験する
Webサイトのワイヤーフレーム制作におすすめのツール
Webサイトのワイヤーフレーム制作に多く使われているのは、以下のようなツールです。
- PowerPoint
- Excel
- Adobe XD
- Adobe Photoshop
- cacao
それぞれ描画や図形が使いやすく、ワイヤーフレーム制作への利用におすすめです。
テンプレートのレイアウトも自由にカスタマイズできるBiNDup
Webデザインを行う際は、ワイヤーフレームの制作が不可欠です。優先度の高いページや、レイアウトに特殊性のあるページなどは、ワイヤーフレームを制作してスムーズかつ利便性の高いWebサイトの構築を目指しましょう。
ワイヤーフレームの制作に迷う場合は、テンプレートを利用することもおすすめです。BiNDupでは業種別の豊富なテンプレートに加え、質問に答えるたけで、自動で目的にあったレイアウトを作成できる機能を備えています。また、テンプレートをアレンジして使う場合でもワイヤーフレームの制作は重要です。カスタマイズ性に優れ、専用のサポートも受けられます。まずはお気軽にご登録ください。
POINT
- ワイヤーフレームはコンテンツやレイアウトを決めるほか、メンバーと認識をあわせる役割がある
- ワイヤーフレームにはできるだけデザインを省いたものにする
- コンテンツやレイアウトが他とは大きく違うページや主要なページを優先的して作る