ワイヤーフレームとは？

ワイヤーフレームとは、どのページにどの情報をどうやって配置するのかを可視化したページの設計図のことです。絵を描く前のラフ画をイメージすると分かりやすいと思います。

ワイヤーフレームを作成し、Webページの構造・配置を可視化しておけば、「項目が足りなかった」「閲覧しづらかった」といった開発後のトラブルを回避できます。

ワイヤーフレームの役割

ワイヤーフレームの役割は次の3つです。

• クライアントとの情報設計確認
• デザイナー向けの指示書
• 開発チーム向けの指示書

それぞれ詳しく解説します。

1.クライアントとの情報設計確認

ワイヤーフレームは情報設計の確認をするという役割があります。ワイヤーフレームを作成すれば、盛り込む予定の情報や、Webページの構成・配置を可視化できるため、クライアントと認識の擦り合わせが可能です。

認識を擦り合わせれば、情報は過不足なく入っているのか、表示順は問題ないかなどを確認できるため、Webサイト制作後の修正依頼リスクを低減できます。

2.デザイナー向けの指示書

ワイヤーフレームは、デザイナー向けの指示書としても活用できます。ワイヤーフレームはWebページに盛り込む情報の設計図であるため、色や文字書体といったデザイン要素は含まれていません。

しかし、必要な情報やWebサイト全体の構成・配置を共有できるため、デザイナーがデザインを立案しやすくなります。また、ワイヤーフレームの補足情報として、Webサイトの制作目的やペルソナ、参考サイトなどを提示するとよいです。

情報を補足すれば、より具体的な形でイメージを共有できるため、デザインに落とし込みやすくなります。

3.開発チーム向けの指示書

ワイヤーフレームは開発チーム向けの指示書としての役割も担っています。機能要件やリンク設定を説明するにあたり、Webページ全体の構造が可視化されたワイヤーフレームは非常に有用です。

また、デザイナーに指示する際と同様、Webサイトの設計目的やペルソナなどの情報を補足すれば、対象となるWebサイトへの理解を深められます。これにより、認識のズレによって生じる開発工程での修正リスクを低減できます。

ワイヤーフレームの重要性

ワイヤーフレームの重要性は次の2つです。

• 完成形をイメージできる
• 必要な要素を把握できる

それぞれ詳しく解説します。

完成形をイメージできる

完成形のイメージを共有するために、ワイヤーフレームは重要です。Webサイト制作では、クライアントやエンジニア、コーダーなど、様々な人々が関わります。

ワイヤーフレームで完成形がイメージできれば、認識のズレを具体的に共有しやすくなるため、スムーズな擦り合わせが可能です。また、スタッフ同士でイメージを共有できれば、作業効率の向上も見込めます。

必要な要素を把握できる

ワイヤーフレームを作成することで、必要な要素が盛り込まれているかどうかの把握が容易となります。例えば、ワイヤーフレームを作成していない状態でWebサイトを制作したとしましょう。

この場合、必要な要素や動線を把握できないため、制作完了後に要素が足りなかったり、使い勝手が悪かったりするなどの事態に発展しがちです。デザインや機能などを作り込んだ後の修正作業は、大きな時間と労力がかかります。

修正作業に多大なコストをかけないためにも、ワイヤーフレームはしっかりと作り込む必要があります。

ワイヤーフレームの作成手順

ワイヤーフレームの作成手順は次の4ステップです。

1. Webサイト全体の把握・整理
2. 掲載情報のリストアップ・整理
3. レイアウトを決める
4. 最終調整の実施

それぞれ詳しく解説します。

1.Webサイト全体の把握・整理

まずは制作目的やサイトマップ、Webサイト内におけるページの役割など、Webサイト全体を把握・整理していきます。ワイヤーフレームはWebページ単体の設計図です。

そのため、ページに盛り込むべき情報や優先順位を明確にするためには、そのWebサイトについて理解を深める必要があります。

2.掲載情報のリストアップ・整理

Webサイト全体の把握・整理が完了したら、キャッチコピーや商品名、商品の強みなど、Webページに掲載する情報をリストアップします。リストアップする際は、情報の漏れがないようクライアントとしっかりとヒアリングすることが大切です。

掲載する情報をリストアップしたら、使い勝手の良いWebサイトを提供するにはどの情報を優先すべきか整理していきます。また、今後の作業をスムーズに進めたいのであれば、画像や文字数もこの段階で一緒に決めておくとよいです。

3.レイアウトを決める

掲載情報のリストアップ・整理ができたら、ページの目的に沿ってレイアウトを決めていきます。代表的なレイアウトパターンは次の5つです。

• シングルカラム：1つの列（カラム）を縦に並べたレイアウト
• マルチカラム：列を複数に分割したレイアウトフルスクリーン：動画・写真で画面全体を覆うように映すレイアウト
• グリッド：格子状にカードを並べたようなレイアウト
• ブロークングリッド：要素を意図的にずらす・重ねるなど、目線を引き付けるレイアウト

4.最終調整の実施

ステップ2で整理した情報を、ステップ3で決まったレイアウトに従って、配置していきます。最終調整のステップでは、考え込む必要はありません。

とにかく手を動かしてワイヤーフレームを作成し、作成が終了したら目的や優先順位に沿っているか確認し、必要であれば修正します。また、クライアントやチーム内からフィードバックをもらいながら調整・確定させていきます。

ワイヤーフレームを作成する際に押さえておくべき4つのポイント

ワイヤーフレームを作成する際に押さえておくべきポイントは次の4つです。

• 設計図を作成するという意識を持つ
• サイトマップ・マインドマップを使用する
• 目的とずれが出ていないか意識する
• デザイナー・コーダーと認識を一致させる

それぞれ詳しく解説します。

1.設計図を作成するという意識を持つ

ワイヤーフレームを作成する際、色や文字書体などのデザイン要素まで細かく考えがちです。しかし、盛り込む情報や優先度、掲載量を確認して、操作性や閲覧のしやすさなどを意識しながら適切な配置を決めることが、ワイヤーフレームを作成する目的です。

そのため、あくまでもWebページを制作する前の下書きとして、シンプルな設計図を作成するという意識を持っておく必要があります。

2.サイトマップ・マインドマップを使用する

サイトマップとは、Webサイト全体の構成が分かる目次のようなものです。サイトマップで各ページの情報・機能を考えたり、競合他社のサイトマップを自社と比較したりすることで、より質の高いワイヤーフレームを作成できます。

マインドマップとは、考えていることを図に書き出して、情報・アイデアを整理する手法のことです。チームでマインドアップを使用すれば、膨大な情報をカテゴリーに分類できるため、様々なアイデアを生みやすくなります。

3.目的とのズレが出ていないか意識する

目的とずれが出ていないか意識することも、ワイヤーフレームを作成する際のポイントです。Webサイトの制作目的やゴール、顧客が求めているものからズレていたり、顧客を誘導するための動線が適切でなかったりすると当然、サイトの目的は達成できません。

そのため、ワイヤーフレームは、機能性や操作性が目的とずれていないか常に確認しながら作成する必要があります。また、レイアウトや配置を決めた際は、なぜそれを選んだのか理由を明確にしておくとよいです。

4.デザイナー・コーダーと認識を一致させる

ワイヤーフレームを作成する際は、デザイナー・コーダーと打ち合わせや、機能の確認をして、認識を一致させておくとよいです。ワイヤーフレームを作成し、情報を補足するだけでも、各担当者との認識のズレをなくせます。

しかし、ワイヤーフレームの作成段階から打ち合わせしておけば、多くのアイデアを生み出せます。また、初期段階からあらゆる面でイメージを統一できるため、工程後半のトラブルや、大規模修正のリスクの大幅な低減が可能です。

ワイヤーフレームを作成する際におすすめのツール

ワイヤーフレームを作成する際のおすすめツールは次の3つです。

• Adobe XD
• Prott
• Figma

それぞれ詳しく解説します。

1.Adobe XD

Adobe XDは、Adobe社が提供しているWebサイトやアプリなどのデザインを制作できるツールです。作業効率を向上させられるプラグインが豊富な他、デバイスごとにテンプレートが用意されているため、自分の思ったとおりのワイヤーフレームを作成できます。

また、Adobe社が提供しているIllustratorやPhotoshopと連携が可能なため、Adobe XDの活用で業務の幅を広げられます。また、Adobeの公式サイトではマニュアルや学習キットなども公開しているため、初心者でも安心して利用が可能です。

2.Prott

Prottは、株式会社グッドパッチが提供しているワイヤーフレーム作成ツールです。直感的な操作で簡単に作業できることから、初心者でも簡単にワイヤーフレームを作成できます。

また、プロトタイプ作成をはじめ、デザイン共有やプレゼンも行えるため、1つのツールで幅広い作業に対応できます。

3.Figma

Figmaはブラウザ上でデザインを制作できるツールで、ワイヤーフレームとプロトタイプの作成が可能です。クラウドと同じ特徴を持っているため、1つのファイルに複数人がアクセスして同時に編集できます。

また、コメント機能を使用してフィードバックをできるため、わざわざメールやチャットで修正のやりとりをする必要がありません。そのため、業務を効率的に進められます。

ワイヤーフレームの作成とその重要性でよくある質問

ワイヤーフレームの作成とその重要性でよくある質問は次の3つです。

• ワイヤーフレームの作成タイミングとは？
• ワイヤーフレームは誰が作成するのですか？
• プロトタイプ・デザインカンプ・モックアップとの違いとは？

それぞれ詳しく解説します。

1.ワイヤーフレームの作成タイミングとは？

ワイヤーフレームを作成するタイミングは、要件定義が確定した後です。ただし、必ず要件定義の後というわけではありません。

案件によっては、要件定義のタイミングでワイヤーフレームを作成し、ワイヤーフレームを活用しながら要件を定義することもあります。

2.ワイヤーフレームは誰が作成するのですか？

ディレクターがワイヤーフレームを作成するのが一般的です。ディレクターでなくても、ワイヤーフレームの作成は可能です。

しかし、ワイヤーフレームはクライアントから聞き出した情報をもとに作成します。そのため、クライアントと直接連絡を取り、課題や要望などを聞き出しているディレクターがワイヤーフレームを作成した方が効率的です。

ただし、ディレクターが1人で作成してしまうと認識のずれが生じてしまい、工程の後半で修正などのトラブルが発生するリスクがあります。ワイヤーフレームはページの設計図であるため、チーム全体で作り込むという意識を持たなければなりません。

3.プロトタイプ・デザインカンプ・モックアップとの違いとは？

プロトタイプ・デザインカンプ・モックアップとの違いは次のとおりです。

プロトタイプとは、操作性や機能性を確認する試作品のことです。プロトタイプを使用すれば、Webサイトの制作段階でページ遷移やリンク設定、機能などを確認できます。

デザインカンプとは、Webページの詳細まで確認するためのデザイン案や完成イメージのことです。ワイヤーフレームにデザインを肉付けさせたものというイメージを持つと分かりやすいかもしれません。

デザインカンプを使用すれば、ワイヤーフレームでは確認できなかったデザイン上の問題点を把握できます。

モックアップとは、Webサイト制作用語で、制作現場では完成イメージを表していますが、意味自体はデザインカンプと同じです。

ワイヤーフレームの作成とその重要性 まとめ

Webページ制作では、多くの方が制作に携わるため、認識のズレが起きやすいです。認識のズレを放置したままだと、Webサイト制作後に情報の追加依頼や、デザイン修正などのトラブルに発展しかねません。

そこで重要となるのが、Webページを制作する前の下書きであるワイヤーフレームです。ワイヤーフレームを作成しておけば、完成形をイメージできて必要な要素を把握できるため、認識のズレによって生じるトラブルの発生リスクを低減できます。

みやあじよではご依頼者のご希望を聞きし、要望に最大限お応えしながらWebサイト制作を行っています。Webサイト制作を検討しているという方は、1度みやあじよにご相談ください。