2016年3月4日

ウェブサイトを作成する上で「ワイヤーフレーム」という言葉を耳にするでしょう。

ワイヤーフレームはウェブサイトを作成する際に必ず作る必要がある重要なものですが、ウェブデザイン初心者の中には、ワイヤーフレームの意味や設置の目的をよく理解できていない人もいるかと思います。今回は、初心者向けに意味や目的、基本的な作り方などを解説します。

ワイヤーフレームとは？

そもそもワイヤーフレームとは、ワイヤー(線)とフレーム(骨組み)を組み合わせた言葉で、公開するウェブサイトの元となる設計図を意味します。イメージとしては、絵を描く前の鉛筆による下書きと言ったら分かりやすいと思います。

ワイヤーフレームを作っておくことで、ウェブサイトを実際作る工程で、「足りない項目があった」「完成したけど思ったより見づらかった」などの失敗を防ぐことができます。

設置する目的

設置する目的としては、「作成する工程での失敗を防ぐ」「完成イメージを明確にする」「一緒に作成するメンバーと認識を一致させる」「情報を整理する」などが挙げられます。

ウェブサイトには様々な情報が組み込まれますが、ワイヤーフレームの設定は大量にある情報を整理することに繋がります。

例えば、企業の公式サイトには、企業理念や会社概要、サービス内容などを載せる必要があります。これらの情報を整理し、どこにどのように表示させるのかを決める作業こそ、ワイヤーフレームの設定なのです。

ディレクトリマップなどとの違い

ワイヤーフレームと似ているものに、ディレクトリマップ・デザインカンプ・サイトマップなどがあります。

まずディレクトリマップとは、ウェブサイトを構成する全てのページのURLとタイトルがまとめられている一覧表のことです。ワイヤーフレームはサイトのレイアウトなのに対し、ディレクトリマップはどのページがどこにぶら下がっているのか、構造を明確にする役割があります。

デザインカップとは、クライアントに完成イメージを伝えるためのデザイン見本のことです。ワイヤーフレームはウェブサイトを作るプロジェクトメンバー内で共有するものなのに対して、デザインカップはクライアントに見せるものと覚えましょう。

ウェブサイトを作成する上でよく聞くサイトマップは、サイトの全体像を分かりやすく表したものです。ウェブサイトが完成した後・運用時に表示します。サイトマップには、サイトを利用するユーザー向けのHTMLサイトマップ、検索エンジン向けのXMLサイトマップの2種類があります。

ワイヤーフレームの基本的な作り方

ここでは、ワイヤーフレームの基本的な作り方を解説します。

情報を整理する

ワイヤーフレームを作成するには、まずウェブサイトに載せる情報を整理する必要があります。企業情報・サービス内容・広告・お問い合わせフォームなど、載せる情報をピックアップし、箇条書きにしていきます。

一通りピックアップしたら、性質が似ているものをまとめるグルーピングという作業に入ります。例えば、電話番号と住所は連絡先や企業情報としてまとめることができます。

グルーピング後は、情報に優先順位をつけていきます。例えば、企業の公式サイトを作るとして、コーポレートサイトにするのか、コミュニティサイトのようなレイアウトにしたいのかによって、優先順位が変わってきます。

実際にレイアウトをする

次に、整理した情報をレイアウトしていきます。ウェブサイトのレイアウトには流行があるため、競合サイトのレイアウトを分析して、レイアウトを決めるのがおすすめです。もちろん、企業のイメージを考えて、独自のレイアウトにする方法もあります。

ツールを使って清書する

ワイヤーフレームの作成は、基本的に手書きでもOKです。しかし、ツールを使って清書することで、プロジェクトメンバーと共有がしやすくなり、手軽に修正ができるようになります。

ツールとしては、Power PointやExcelで作成できます。

また、Cacooやmoqupsといった無料のオンラインツールもおすすめです。

AdobeXDなどのデザインツールも好ましいです。

ワイヤーフレームの目的を理解してウェブサイトを作りましょう

ワイヤーフレームを設置する目的や、混同しやすい用語、基本的な作り方を解説してきました。

ワイヤーフレームの作成は、ウェブサイトを作成する上で欠かせない作業です。

難しい工程ではないですし、基本的には手書きでできるので、初心者さんも取り組みやすいと思います。

設置する目的を理解して、より見やすいウェブサイト作りをしましょう。