はじめてのワイヤーフレーム!基礎知識から作り方の流れまで解説!


はじめてのワイヤーフレーム!基礎知識から作り方の流れまで解説!

Webサイト制作においてとても重要な資料となる、ワイヤーフレームをご存知でしょうか? 

ワイヤーフレームをしっかりと作成することにより、Webサイト制作をスムーズに進められるのです。 

  • 聞いたことはあるけれど、どんなものかよくわからない
  • なぜワイヤーフレームが必要なの?
  • いきなりデザインを制作したらいけないの?
  • どうやって作ったらいいのかわからない 

そんな方のために、この記事ではワイヤーフレームの目的や具体的な作り方の流れ、作成するときの注意点といったワイヤーフレームの基礎知識をご紹介します。 

ぜひ参考にして、ワイヤーフレームについて理解を深めてください! 

目次
  1. ワイヤーフレームとは? 
  2. ワイヤーフレームの目的 
  3. ワイヤーフレームと混同しやすいもの 
  4. ワイヤーフレーム作成の流れ 
  5. 1.ワイヤーフレームを作成する準備 
  6. 2.情報整理 
  7. 3.情報をレイアウト 
  8. 4.下書きする 
  9. 5.ツールを使って清書 
  10. ワイヤーフレームを作成する際の注意点 
  11. 1.デザインを作り込まない 
  12. 2.スマホ版は別に作成する 
  13. 3.伝える相手を忘れずに 
  14. スムーズな制作のためにワイヤーフレームを作成しましょう 

ワイヤーフレームとは? 

ワイヤーフレームとは、Webサイトのレイアウトを決める設計図のこと。 

イメージとしては住宅の見取り図のようなものです。 

Webサイトを制作する際、まずはワイヤーフレームでどこになにを配置するのかを決定してからデザイン制作に進みます。 

ワイヤーフレームは情報を整理してレイアウトを決める、制作時の初期段階の重要な工程です。 

ワイヤーフレームの目的 

ワイヤーフレームを作成する目的は主に3つです。 

  • 情報を整理するため
  • レイアウトを決めるため
  • 認識を合わせるため 

ワイヤーフレームでは細かい文章の内容やデザイン装飾は作り込みません。 

掲載する情報を洗い出して整理し、「ここに〇〇の解説文章を入れる」といったように配置場所を決めるために作成します。 

ページ内に入れる情報を文章で説明されても、実際にどのような構成になるのかイメージしづらいですよね。 

そこで、ページの完成イメージを「見える化」するためにワイヤーフレームを作成します。 

そしてデザイナーやコーダー、ディレクターといった制作チーム内や、クライアントとの間で認識を合わせるための重要な資料です。 

決定事項や注意点、共有したい情報を記載して認識のすり合わせをしておきます。 

認識のすり合わせをすることにより、デザイン制作後やサイト公開後の差し戻しの発生を防ぐことが可能です。 

ワイヤーフレームと混同しやすいもの 

ワイヤーフレームと間違われやすいものにデザインカンプ、サイトマップがあります。 

デザインカンプとは、クライアントに提案するデザイン案や完成見本のことです。 

また、サイト全体にどのようなページが存在するのかというサイト構成をまとめたものをサイトマップといいます。 

どちらもWeb制作において重要なものですが、ワイヤーフレームとは異なりますのでご注意ください。 

ワイヤーフレーム作成の流れ 

それでは、ワイヤーフレーム作成の5ステップをご紹介します。 

  • 1.準備
  • 2.情報整理
  • 3.情報をレイアウト
  • 4.下書きする
  • 5.ツールを使って清書 

順番に詳しくご説明します。 

1.ワイヤーフレームを作成する準備 

ワイヤーフレームを作成する前に、まずはサイトに掲載するコンテンツを漏れなく洗い出します。 

そして洗い出したコンテンツを整理し、どのようなページでどのコンテンツを入れるかを決めていきましょう。 

ページ構成を決定し、サイト全体のページ構造をツリー上のサイトマップにまとめます。 

ツリー上のサイトマップは手書きや簡易的なものでも構いません。 

チーム内で共有する場合は、共有しやすいツールを利用してください。 

コンテンツ量が多すぎるページや、コンテンツ量が少なく内容の薄いページがある場合、ページの分割・コンテンツ移動といった対応を検討してサイト全体を整えます。 

そしてページ内に入れるコンテンツが決まれば、準備完了です。 

2.情報整理 

ページ内コンテンツの情報整理は以下のような手順でおこないます。 

  • 1.ピックアップ
  • 2.グルーピング
  • 3.ランキング 

それぞれの手順について、具体例をあげてご説明します。 

ピックアップ 

例えば実店舗があるアパレルショップサイトの場合です。 

  • ロゴ
  • ショップ名
  • ショップの地図
  • 電話番号
  • ショップの写真 外観・内観
  • ショップのコンセプト文章
  • セールの文章
  • セール商品の写真
  • ネットショップへのリンクバナー 

といったように、掲載する情報を漏れがないように思いつく限りピックアップします。 競合サイトを参考にして必要事項をリストアップしていくのもおすすめです。 

グルーピング 

ピックアップした情報を、仲間同士でグループにします。 

例えば以下のようなグループ分けが可能です。 

  • 「ショップの地図」と「電話番号」
  • 「セールの文章」と「セール商品の写真」
  • 「ロゴ」と「ショップ名」 

情報が見つからないレイアウトにならないように、同じグループの項目を近くに配置します。 

情報を把握しやすくするためにグルーピングは大切な手順です。 

ランキング 

次にグルーピングした情報に優先順位をつけます。 

優先順位はサイトの目的によって変わるものであり、適切な優先順位はサイトごとに異なるものです。 

例えば実店舗のあるショップのサイトなら、来店を促すために店舗所在地の情報や地図の優先順位が高くなるでしょう。 

目的に沿って重要な情報から順に、目につきやすいように配置します。 

優先順位の低い情報は本当にそのページに必要かどうかも検討しましょう。 

3.情報をレイアウト 

情報整理ができれば、効果的に情報を伝えるためのレイアウトを決めます。 

Webサイトにおける代表的なレイアウトの種類 

  • シングルカラムレイアウト 

→横幅いっぱいにコンテンツを縦積みするようなレイアウト 

  • マルチカラムレイアウト 

→メインコンテンツ+サイドバーの2分割や3分割といった、ページ内を複数の列に分割する実用性の高いレイアウト 

  • グリッドレイアウト 

→方眼用紙のようにページ内を同じ大きさの四角形で分割して組み合わせ、格子状の線に合わせて余白と要素を構成する、新聞や雑誌で見られるレイアウト 

他にもカード・タイル型レイアウトやリキッドレイアウトなど、多くの種類があります。 

サイトの目的に合わせ、魅力的に情報発信できるレイアウトを検討してください。 

レイアウトが決まれば、レイアウト内の各エリアのどこに情報を入れるか検討します。 

情報を入れる代表的なエリア 

  • ヘッダー 

→全ページ共通で使用する、サイト最上部のエリア。サイトにアクセスして最初に目に入るエリアです 

  • グローバルナビゲーション 

→全ページ共通で使用するメニューのエリア。サイト内の重要なページへのリンクで構成する 

  • コンテンツ 

→そのページの主題を伝える重要なエリア 

  • フッター 

→全ページ共通で使用する、サイト最下部のエリア。コピーライトやサイト全体の構成がわかりやすいリンクを配置することが多い 

  • サイドバー 

→2カラム以上のレイアウトでメインコンテンツの横に配置されるエリア。ナビゲーションとして利用されることが多い 

整理した情報をどのエリアに設置するのか、優先順位や導線を考慮して検討してください。 

4.下書きする 

ここから、いよいよワイヤーフレームを描く作業です。 

ページを決めたレイアウトで分割し、そこに情報を配置していきます。 

最初からツールを使うよりも、まずは手書きでラグ画のように描いていくのがおすすめです。 

紙に鉛筆書きでも構いませんし、パッドの手書きアプリを利用しても構いません。 

修正を繰り返しながらワイヤーフレームを作成していきます。 

見やすく情報の優先順位に沿ったレイアウトを作成するために、修正を繰り返して下書きを完成させてください。 

5.ツールを使って清書 

手書きの下書きでもワイヤーフレームとして機能しますが、ツールを使ってデータ化することをおすすめします。 

手書きから清書するメリット 

  • テンプレート化できるため他のサイトやページで活用できる
  • チームやクライアントと共有しやすい
  • データを保管しやすい
  • 以前のワイヤーフレームを探しやすくなる 

ワイヤーフレームを清書するツールは、なにを使っても構いません。 

チームで制作する場合、チームで共有しやすいツールを選びましょう。 

おすすめのワイヤーフレームツール 

  • Excel・Powerpoint
  • Sketch
  • Adobe XD
  • Figma
  • Cacoo 

おすすめのワイヤーフレーム作成ツールについては、こちらの記事をご覧ください。 

➡️ ワイヤーフレーム作成を簡単に!おすすめツール5選をご紹介!選び方のポイントも解説! 

ワイヤーフレームを作成する際の注意点 

ワイヤーフレームを作成する際、とくに注意したい点を3つご紹介します。 

1.デザインを作り込まない 

ワイヤーフレームについデザイン要素を入れてしまうという方もいるのではないでしょうか。 

ワイヤーフレームは情報を整理した設計図のため、デザイン要素は必要なく線や文字といった情報でレイアウトを伝えて共有します。 

デザインに凝ってしまうと、ワイヤーフレームに引きずられたデザインになってしまう可能性がありますので注意が必要です。 

初心者が失敗しやすい失敗ポイントですので、なるべくデザイン要素を盛り込まないように意識しましょう。 

2.スマホ版は別に作成する 

スマホはパソコンに比べて画面の横幅が小さく、同じレイアウトのままでは情報が正しく伝わりません。 

そのため、スマホとパソコンではレイアウトを変更する必要があります。 

スマホとパソコンで別々のワイヤーフレームを作成し、それぞれのデバイスで情報を効果的に見せられるレイアウトを作成しましょう。 

レスポンシブで表現できるレイアウト変更を意識しておくことで、実装可能なデザインを制作できるようになります。 

ページ数の多いサイトの場合、主要なページや特徴的なページのみスマホ用とパソコン用の両方を作成する、といった工夫をしてみてください。 

3.伝える相手を忘れずに 

ワイヤーフレームにはチームやクライアントと情報を共有するツールとしての働きもあります。 

例えばクライアントと共有する場合、デザインイメージを具体的に伝えたい箇所に参考サイトの情報をコメントすれば伝わりやすいでしょう。 

コーディングをする方と共有するなら、アニメーションの指示や具体例をコメントして共通認識として共有できますね。 

ディレクターがデザイナーと共有するなら、コーディングの指示のみコメントされたワイヤーフレームでは、デザインに関する共通認識が確認できません。 

このように、ワイヤーフレームを通して誰になにを伝えたいのかを意識して作成しましょう。 

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

スムーズな制作のためにワイヤーフレームを作成しましょう 

Webデザインのレイアウトは見た目から適当に決めるものではなく、優先順位の高い情報を効果的に伝えるために配置するものです。 

ワイヤーフレーム作成で大切なポイントは以下の3つになります。 

  • 情報を徹底的に洗い出す
  • 必要な情報を整理する
  • 情報の優先順位を決める 

適切なレイアウトのイメージを、ワイヤーフレームによって「見える化」しましょう。 

そして情報整理やレイアウトの認識を共有し、スムーズにWebサイト制作を進めてください!

image


関連記事

今村真理子
この記事を書いた人
今村真理子
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp