Webサイトを制作しようとする際に、ワイヤーフレームという言葉が出てきたことはありませんでしょうか。ワイヤーフレームとは、Webサイトを制作する際の設計図のようなものです。制作が複数人で関わるプロジェクトの場合、イメージの共有に力を発揮します。
本記事では、ワイヤーフレームとは何なのか、どういう時に必要になってくるのかを説明し、ワイヤーフレームの作り方についても解説いたします。ワイヤーフレームを作るためのおすすめツールも紹介するので、ぜひ最後まで見てください。
目次
ワイヤーフレームとは？
Web制作時に使用されるワイヤーフレームとは、 ホームページの基本的なレイアウトやコンテンツの配置を簡単にスケッチした設計図です。ページの「どこに」「何を」「どのように」配置するかをまとめ、自社サイトの構築・改修時の確認や、クライアントのコンセプトに沿った構成をイメージしやすくするために作られます。
ワイヤーは「ケーブル」や「電線」を意味し、フレームは「骨組み」「骨格」を意味することからも分かる通り、グラフィックやデザインの部分までにはいかない、あくまでも間取り図のような設計図をワイヤーフレームと呼ぶのです。
ワイヤーフレームが必要な理由
それでは、ワイヤーフレームはなぜ必要なのでしょうか。
ワイヤーフレームを制作する主な理由は下記のとおりです。
● 情報整理
● 関係者との情報共有
ワイヤーフレームを制作することで、作ろうとしているWebサイトについての情報整理ができるようになります。どのようなレイアウトのものを制作するのか、どこにどのようなコンテンツを配置するのかといった、サイトの基礎的な情報が可視化されるのです。
また、クライアントやWebデザイナーなど、プロジェクトに関わる担当者の情報共有にも長けています。もしも担当者が変更になったり、業者が入れ替わったりした場合でも、ワイヤーフレームがあれば、視覚的にレイアウトを把握することができるため、簡単に完成イメージを共有することができるでしょう。
ワイヤーフレームを制作する流れ
ワイヤーフレームの意味・必要な理由をご紹介したところで、ここからは実際にワイヤーフレームを制作する流れについて、企業の公式サイト（コーポレートサイト）を例に説明していきます。
必要情報の洗い出し
まずは、Webサイトに掲載したい必要情報を洗い出していきましょう。はじまりの段階ではまだ完成イメージはできていない状況なので、掲載したい内容をすべて書き出すようにしてみてください。
必要情報の例
● 会社名
● 社長メッセージ
● ロゴ
● バナー
● 住所
● 業務内容
● 電話番号
● アクセス
● 問い合わせページ等
必要情報を書き出した後には、似たような情報をグルーピング（グループ分け）していきましょう。グルーピングをする理由は、似た情報を同じような配置で制作するのが、ワイヤーフレームの基本であるからです。たとえば、「電話番号」、「住所」、「アクセス」は同じグループにするというように、似たようなくくりでグルーピングできるものをまとめていきましょう。
そして最後に、ピックアップした情報の重要度を決定していきます。Webサイトの目的やコンセプトに沿って、重要度を決定しましょう。その際に、すべて書き出した内容についての見直しを行い、不要な情報は削除していくようにするとベターです。
関連記事：コーポレートサイトとは? 制作時のポイントや具体例をご紹介
ラフ案の作成
必要情報の洗い出しをして、グルーピング・情報の取捨選択ができたら、ワイヤーフレームのラフ案を作成していきます。この段階では本当にスケッチのような感じで、ラフなものを作るようにしましょう。ラフ案を作り込み過ぎてしまった場合、レイアウト考案の段階で適切なレイアウトを選択できなくなってしまう危険性があります。
必要情報をどこに、どのような形で配置するか、Webサイトに訪問した人の導線を意識しながら、ラフなワイヤーフレーム案を作成していきましょう。
レイアウト考案
ラフ案を作成したら、レイアウトを考えましょう。どのようなコンセプトでホームページを制作するのか決定していく段階がレイアウト考案の段階です。親しみやすいサイトにしたいのか、かっちりした企業イメージを演出したいのか、企業の方向性によってサイトのレイアウトも変化してくるでしょう。
レイアウトには、一般的に使用されるテンプレートが存在します。1カラム（1列）レイアウトやマルチカラム（複数列）レイアウト、サイドバー固定レイアウトなどです。情報の量や内容、企業の方向性に応じて、適したレイアウトを選択するようにしていきましょう。
本番制作
レイアウトができあがったら、実際のワイヤーフレームの制作に移ります。
Webサイトのページは、ページの上部・下部にあたる「ヘッダー」「フッター」、サイト訪問者の視覚に最初に表示される「メインビジュアル」、ページの内容のメイン部分になる「コンテンツエリア」という要素に分けられます。どのように訪問者に見せるべきなのか、それぞれの要素で注意すべき点が出てきますので、その点を考慮したうえで要素ごとに必要となる内容を配置していきましょう。
ワイヤーフレームは代表的なページごとに制作していきます。他のページへの導線もしっかり意識するようにして、完成形のワイヤーフレームを制作するようにしましょう。
関連記事：ホームページ制作や運用でやってはいけない31のことを解説！
ワイヤーフレームを便利に制作できるツール7選
ワイヤーフレームの作り方の流れを押さえたところで、ここからはワイヤーフレームを便利に制作できるツールを7つご紹介していきましょう。
それぞれのサイトには強みとしている部分があります。ホームページのコンセプトに合った制作ツールを選択するようにしてください。
Adobe XD
Adobe XDは、ワイヤーフレームやアニメーションなどの制作を行うためのWebデザインツールです。デバイスごとにテンプレートが用意されており、プロトタイプ機能や余白表示、リピート機能など便利な機能が豊富です。
基本の有料プランは、月額1,298円(税込)で利用することができますが、無料で使えるスターターキットも用意されています。Webデザインを職業としていない方にとっては、こちらのスターターキットで十分でしょう。
Cacoo
Cacooは、ワイヤーフレーム以外にもプレゼン資料などが作成できるビジュアルコラボレーションツールです。100種類以上のテンプレートを用意しているところも魅力ですが、Slackなどの外部サービスとの連携、チャット機能などを搭載しており、コミュニケーション機能の豊富さがCacooの強みと言えるでしょう。
基本料金は、プロプランが月額660円とリーズナブルです。チームプランも1人あたり月額660円で200ユーザーまで使えるので、比較的大規模なプロジェクトでも使用することができるでしょう。
シート数の制限など、機能的には劣ってしまいますが、無料で使えるフリープランも用意されています。
Sketch
Sketchは、Bogemian Coding社が開発したMac専用のワイヤーフレームツールです。直感的な操作性が特徴で、Mac用のツールを探している方には使いやすいツールでしょう。
基本料金は、スタンダードプランの月額9ドルで、さらに機能が拡張されたビジネスプランは運営会社に問い合わせて利用することができます。また、30日間無料で使える試用期間も用意されているので、気になる方はこちらで試してみるとよいでしょう。
Excel
Excelは、パソコンを利用している方には説明不要の表計算ソフトです。Excelはソフトが普及しているため、使い慣れた操作でワイヤーフレームを制作することができます。
ただし、複雑な構造やレイアウトのワイヤーフレームを制作する際は、Excelでは不十分ですので、専用のデザインツールを使うようにした方がよいでしょう。
基本料金は、Microsoft Excelがインストールされていれば無料です。今ではGoogleが提供しているGoogle スプレッドシートというクラウド上で共同編集できる表計算ソフトもあります。無料でワイヤーフレームを制作したい方は、Google スプレッドシートを利用してもよいでしょう。
Wireframe.cc
Wireframe.ccは、利用しやすいワイヤーフレームツールです。とてもシンプルなインターフェイスが特徴で、必要最低限のレイアウトでワイヤーフレームを作りたいという方におすすめです。料金は1人月額16ドルからで、サインアップすることで7日間の無料トライアルを利用できます。
Marvel
Marvelは、複雑なプログラミングコードを利用せずに、プロトタイプが作成できるワイヤーフレームツールです。
速効性が特長ですが、すべてのデバイスごとにテンプレートが数百種類あること、無料プランでもプロジェクト作成が無制限なところも魅力でしょう。
Justinmind Prototyper
Justinmind Prototyperは、ワイヤーフレームや高度なプロトタイプまで、様々なデザインが制作できるオールインワンプロトタイピングツールです。ユーザー側の操作で画面が反応するように設計するWebインタラクションの設定も行えるのが特徴でしょう。
プランには、月額9ドルのスタンダードプラン、月額19ドルのプロフェッショナルプラン、企業向けのプランがあります。無料版も利用できるので、気になる方は無料版から試してみましょう。
関連記事：無料でも制作可能！おすすめホームページ作成ツール6選をご紹介！
ワイヤーフレームの参考サイト
実際に制作されたワイヤーフレームを視覚的に見ることは、これからワイヤーフレームを制作しようとする人によい示唆を与えるでしょう。
最後に、ワイヤーフレームを制作する際に参考となるサイトをご紹介していきます。
Wireframe Showcase
海外のサイトであるため、英語表記ですが、見たいホームページにカーソルを合わせると、ワイヤーフレームが重ねて表示されます。とても分かりやすい作りになっており、ワイヤーフレーム制作の参考にしやすいでしょう。
I ♥ wireframes
I ♥ wireframesは、ワイヤーフレームを実際に制作した人たちから投稿されたワイヤーフレーム実例紹介サイトです。
掲載されているワイヤーフレームは、実に800種類以上あり、パソコン用・スマホ用など様々なデバイスごとのワイヤーフレームを見ることができます。こちらも海外のサイトであるため、英語表記になっていますが、ワイヤーフレームを視覚的に把握するためにはよいでしょう。
まとめ：ワイヤーフレームで万全の準備を
ワイヤーフレームとは、ホームページの基本的なレイアウトやコンテンツの配置を簡単にスケッチした設計図のことで、情報整理や関係者との情報共有のために制作されます。無料や、お手頃な価格で利用できるワイヤーフレームツールがありますので、活用するようにしましょう。
自社のホームページのコンセプトを明確にし、関係者のイメージを統一するためにはワイヤーフレームの制作が必須と言えます。Web制作に失敗しないためにも、ワイヤーフレーム制作は忘れずに行うようにしましょう。
