ワイヤーフレームとは？ホームページの設計図の役割と、初めてでも描ける作り方

ワイヤーフレームとは

ワイヤーフレーム（wireframe）は、もともと「針金の骨組み」という意味の言葉です。ホームページ制作では、ページの骨組み、つまり見出し、文章、画像、ボタン、メニューなどを、どの順番でどこに置くかを示した図のことを指します。

ワイヤーフレームには、色、写真、飾りなどのデザインの要素は入れません。画像を置く場所は「×」を描いた箱で、文章は線や仮の文字で表します。見た目ではなく、「何を」「どの順番で」「どれくらいの大きさで」載せるかを決めることに集中するためです。

ほかの設計資料との違い

ホームページ制作では、ワイヤーフレームのほかにもいくつかの設計資料が使われます。

サイトマップは、トップページ、会社概要、事業内容、お問い合わせといった、ホームページ全体のページの構成を、木の枝のような図で表したものです。サイトマップの作り方はサイトマップとページ構成の決め方で説明しています。

デザインカンプは、ワイヤーフレームをもとに、色、文字の種類、写真などを入れて、完成した状態に近い見た目に仕上げた見本です。

ワイヤーフレームは、この2つの間にあり、全体の構成で決めたページの一つ一つについて、中身と並べ方を決める役割を持っています。

ワイヤーフレームを作る理由

作り直しを減らせる

色や写真まで入れたデザインを作ってから「この情報が足りない」「順番を変えたい」となると、デザインを大きく作り直すことになります。先に骨組みの段階で内容と順番を決めておけば、変更はワイヤーフレームを描き直すだけで済みます。

関係する人の認識をそろえられる

社内の担当者、経営者、制作会社など、ホームページ作りには複数の人が関わります。言葉だけで「トップページに実績を載せたい」と伝えても、どこに、どれくらいの大きさで載せるのかは人によって思い浮かべるものが違います。ワイヤーフレームがあれば、同じ図を見ながら話し合えます。

必要な原稿と写真がわかる

ワイヤーフレームを作ると、ページごとに必要な文章と写真の量がはっきりします。「この見出しの下に100字ほどの説明」「ここに作業風景の写真が1枚」といったことがわかるので、原稿や写真の準備を早めに始められます。写真の準備はテーマの写真の用意を参照してください。

ワイヤーフレームに載せるもの

ワイヤーフレームには、ページを作るのに必要な要素を、上から順番に並べて描きます。会社のホームページのトップページなら、次のような要素がよく使われます。

それぞれの要素について、ワイヤーフレームに書き込んでおくとよいことは次のとおりです。

• 見出し：仮でもよいので、実際に使う言葉に近い文を書く
• 文章：どんな内容を、何文字くらいで書くか
• 画像：何の写真やイラストを置くか
• ボタン：押したらどのページに移るか
• 大きさ：ほかの要素と比べて、目立たせるか控えめにするか

最初の画面（ファーストビュー）は、見に来た人が最初に目にする部分です。何の会社で、誰に何を提供しているのかが、ひと目で伝わるようにします。ヒーロー部分の設定も参考にしてください。

ワイヤーフレームの作り方

専門のソフトを使わなくても、ワイヤーフレームは作れます。

1. ページの目的を決める

まず、そのページを見た人に何をしてほしいのかを決めます。トップページなら「事業内容を知って、問い合わせてほしい」、採用ページなら「仕事内容を知って、応募してほしい」などです。目的が決まると、載せる要素と順番が決めやすくなります。

2. 載せる要素を書き出す

目的のために必要な情報を、思いつくだけ書き出します。そのうえで、見に来た人が知りたい順番に並べ替えます。会社のホームページに載せる内容の考え方は会社のホームページに載せる内容で説明しています。

3. 箱と線で描く

紙やソフトに、縦に長い枠を描き、上から順番に要素を箱で配置していきます。画像の場所は「×」を描いた箱、文章は横線で表します。大切な要素ほど大きく、上の方に置きます。

4. スマホの形も描く

今は、スマホでホームページを見る人が多くなっています。パソコンの横長の画面だけでなく、スマホの縦長の画面でどう並ぶかも描いておきましょう。パソコンで横に並んでいた要素が、スマホでは縦に並ぶことが多くなります。

5. 関係する人に見てもらう

描いたワイヤーフレームを、社内の関係者や制作会社に見てもらい、足りない情報や順番の違和感がないかを確認します。直した内容はこの段階で反映しておきます。

よくある失敗

ワイヤーフレームでよくある失敗は、載せたいことを全部詰め込んでしまうことです。伝えたいことが多いほど、一つ一つの印象は弱くなります。そのページの目的に関係の薄い要素は、別のページに移すか、思い切って省きましょう。

もう一つは、仮の文字のまま進めてしまうことです。「見出しが入ります」「ここに説明文」といった仮の文字だけで話を進めると、実際の原稿を入れたときに、文字が多すぎて入りきらない、逆に少なすぎて間延びする、といったことが起きます。見出しだけでも、実際に使う言葉に近いものを入れておくと、完成の状態を想像しやすくなります。

テーマを使う場合のワイヤーフレーム

WordPressのテーマを使ってホームページを作る場合は、テーマにすでにページの型が用意されていることがあります。その場合は、ゼロからワイヤーフレームを描くよりも、テーマのデモサイトを見ながら「この部分には自社の何を入れるか」を書き込んでいく方が効率的です。デモサイトの画面を印刷したり、画面の写真を撮ったりして、その上に書き込むのも一つの方法です。

ホームページ制作の全体の流れはホームページ制作の流れ、作る前に決めておくことはホームページの要件の決め方で説明しています。