Webサイト制作においてとても重要な資料となる、ワイヤーフレームをご存知でしょうか？
ワイヤーフレームをしっかりと作成することにより、Webサイト制作をスムーズに進められるのです。
そんな方のために、この記事ではワイヤーフレームの目的や具体的な作り方の流れ、作成するときの注意点といったワイヤーフレームの基礎知識をご紹介します。
ぜひ参考にして、ワイヤーフレームについて理解を深めてください！
ワイヤーフレームとは、Webサイトのレイアウトを決める設計図のこと。
イメージとしては住宅の見取り図のようなものです。
Webサイトを制作する際、まずはワイヤーフレームでどこになにを配置するのかを決定してからデザイン制作に進みます。
ワイヤーフレームは情報を整理してレイアウトを決める、制作時の初期段階の重要な工程です。
ワイヤーフレームを作成する目的は主に3つです。
ワイヤーフレームでは細かい文章の内容やデザイン装飾は作り込みません。
掲載する情報を洗い出して整理し、「ここに〇〇の解説文章を入れる」といったように配置場所を決めるために作成します。
ページ内に入れる情報を文章で説明されても、実際にどのような構成になるのかイメージしづらいですよね。
そこで、ページの完成イメージを「見える化」するためにワイヤーフレームを作成します。
そしてデザイナーやコーダー、ディレクターといった制作チーム内や、クライアントとの間で認識を合わせるための重要な資料です。
決定事項や注意点、共有したい情報を記載して認識のすり合わせをしておきます。
認識のすり合わせをすることにより、デザイン制作後やサイト公開後の差し戻しの発生を防ぐことが可能です。
ワイヤーフレームと間違われやすいものにデザインカンプ、サイトマップがあります。
デザインカンプとは、クライアントに提案するデザイン案や完成見本のことです。
また、サイト全体にどのようなページが存在するのかというサイト構成をまとめたものをサイトマップといいます。
どちらもWeb制作において重要なものですが、ワイヤーフレームとは異なりますのでご注意ください。
それでは、ワイヤーフレーム作成の5ステップをご紹介します。
順番に詳しくご説明します。
ワイヤーフレームを作成する前に、まずはサイトに掲載するコンテンツを漏れなく洗い出します。
そして洗い出したコンテンツを整理し、どのようなページでどのコンテンツを入れるかを決めていきましょう。
ページ構成を決定し、サイト全体のページ構造をツリー上のサイトマップにまとめます。
ツリー上のサイトマップは手書きや簡易的なものでも構いません。
チーム内で共有する場合は、共有しやすいツールを利用してください。
コンテンツ量が多すぎるページや、コンテンツ量が少なく内容の薄いページがある場合、ページの分割・コンテンツ移動といった対応を検討してサイト全体を整えます。
そしてページ内に入れるコンテンツが決まれば、準備完了です。
ページ内コンテンツの情報整理は以下のような手順でおこないます。
それぞれの手順について、具体例をあげてご説明します。
ピックアップ
例えば実店舗があるアパレルショップサイトの場合です。
といったように、掲載する情報を漏れがないように思いつく限りピックアップします。 競合サイトを参考にして必要事項をリストアップしていくのもおすすめです。
グルーピング
ピックアップした情報を、仲間同士でグループにします。
例えば以下のようなグループ分けが可能です。
情報が見つからないレイアウトにならないように、同じグループの項目を近くに配置します。
情報を把握しやすくするためにグルーピングは大切な手順です。
ランキング
次にグルーピングした情報に優先順位をつけます。
優先順位はサイトの目的によって変わるものであり、適切な優先順位はサイトごとに異なるものです。
例えば実店舗のあるショップのサイトなら、来店を促すために店舗所在地の情報や地図の優先順位が高くなるでしょう。
目的に沿って重要な情報から順に、目につきやすいように配置します。
優先順位の低い情報は本当にそのページに必要かどうかも検討しましょう。
情報整理ができれば、効果的に情報を伝えるためのレイアウトを決めます。
Webサイトにおける代表的なレイアウトの種類
→横幅いっぱいにコンテンツを縦積みするようなレイアウト
→メインコンテンツ＋サイドバーの2分割や3分割といった、ページ内を複数の列に分割する実用性の高いレイアウト
→方眼用紙のようにページ内を同じ大きさの四角形で分割して組み合わせ、格子状の線に合わせて余白と要素を構成する、新聞や雑誌で見られるレイアウト
他にもカード・タイル型レイアウトやリキッドレイアウトなど、多くの種類があります。
サイトの目的に合わせ、魅力的に情報発信できるレイアウトを検討してください。
レイアウトが決まれば、レイアウト内の各エリアのどこに情報を入れるか検討します。
情報を入れる代表的なエリア
→全ページ共通で使用する、サイト最上部のエリア。サイトにアクセスして最初に目に入るエリアです
→全ページ共通で使用するメニューのエリア。サイト内の重要なページへのリンクで構成する
→そのページの主題を伝える重要なエリア
→全ページ共通で使用する、サイト最下部のエリア。コピーライトやサイト全体の構成がわかりやすいリンクを配置することが多い
→2カラム以上のレイアウトでメインコンテンツの横に配置されるエリア。ナビゲーションとして利用されることが多い
整理した情報をどのエリアに設置するのか、優先順位や導線を考慮して検討してください。
ここから、いよいよワイヤーフレームを描く作業です。
ページを決めたレイアウトで分割し、そこに情報を配置していきます。
最初からツールを使うよりも、まずは手書きでラグ画のように描いていくのがおすすめです。
紙に鉛筆書きでも構いませんし、パッドの手書きアプリを利用しても構いません。
修正を繰り返しながらワイヤーフレームを作成していきます。
見やすく情報の優先順位に沿ったレイアウトを作成するために、修正を繰り返して下書きを完成させてください。
手書きの下書きでもワイヤーフレームとして機能しますが、ツールを使ってデータ化することをおすすめします。
手書きから清書するメリット
ワイヤーフレームを清書するツールは、なにを使っても構いません。
チームで制作する場合、チームで共有しやすいツールを選びましょう。
おすすめのワイヤーフレームツール
おすすめのワイヤーフレーム作成ツールについては、こちらの記事をご覧ください。
ワイヤーフレームを作成する際、とくに注意したい点を3つご紹介します。
ワイヤーフレームについデザイン要素を入れてしまうという方もいるのではないでしょうか。
ワイヤーフレームは情報を整理した設計図のため、デザイン要素は必要なく線や文字といった情報でレイアウトを伝えて共有します。
デザインに凝ってしまうと、ワイヤーフレームに引きずられたデザインになってしまう可能性がありますので注意が必要です。
初心者が失敗しやすい失敗ポイントですので、なるべくデザイン要素を盛り込まないように意識しましょう。
スマホはパソコンに比べて画面の横幅が小さく、同じレイアウトのままでは情報が正しく伝わりません。
そのため、スマホとパソコンではレイアウトを変更する必要があります。
スマホとパソコンで別々のワイヤーフレームを作成し、それぞれのデバイスで情報を効果的に見せられるレイアウトを作成しましょう。
レスポンシブで表現できるレイアウト変更を意識しておくことで、実装可能なデザインを制作できるようになります。
ページ数の多いサイトの場合、主要なページや特徴的なページのみスマホ用とパソコン用の両方を作成する、といった工夫をしてみてください。
ワイヤーフレームにはチームやクライアントと情報を共有するツールとしての働きもあります。
例えばクライアントと共有する場合、デザインイメージを具体的に伝えたい箇所に参考サイトの情報をコメントすれば伝わりやすいでしょう。
コーディングをする方と共有するなら、アニメーションの指示や具体例をコメントして共通認識として共有できますね。
ディレクターがデザイナーと共有するなら、コーディングの指示のみコメントされたワイヤーフレームでは、デザインに関する共通認識が確認できません。
このように、ワイヤーフレームを通して誰になにを伝えたいのかを意識して作成しましょう。
＼一流デザイナーのスキルが身に付く／
Webデザインのレイアウトは見た目から適当に決めるものではなく、優先順位の高い情報を効果的に伝えるために配置するものです。
ワイヤーフレーム作成で大切なポイントは以下の3つになります。
適切なレイアウトのイメージを、ワイヤーフレームによって「見える化」しましょう。
そして情報整理やレイアウトの認識を共有し、スムーズにWebサイト制作を進めてください！
