悩めるWEB担当者様のための最新ノウハウをお届け

Webサイトはワイヤーフレームが大事!?選ぶポイントと作り方を解説

CF5EAC44-3174-4B14-B49A-66C363B83B2D

みなさんは、「ワイヤーフレーム」 という言葉を聞いたことがあるでしょうか?
単に「ワイヤー」と呼ぶこともありますが、ワイヤーフレーム とはwebサイトのレイアウトを定める設計図のことです。
詳しくいうと、「何を、どこに、どのように」画面に配置するかを明らかにするものです。webサイトを作るときは、必ずと言っていいほど出てくる単語であり、サイト制作、アプリの開発において決して欠かせない要素なのです。

これからwebサイトを作りたい、アプリを開発したいという人のために、今回「ワイヤーフレーム 」について詳しく説明していきたいと思います。

>>サイトリニューアルをご検討されている方へ|RFPサンプルを無料配布中

ワイヤーフレームの概要

まずはじめに、ワイヤーフレームの基本的な役割やワイヤーフレームとよく間違られる用語について説明します。

ワイヤーフレームの役割

ワイヤーフレームは、ホームページを制作する過程において、詳細なデザインの制作に入る前に、あらかじめ情報ブロックの配置を決めるために制作されます。フレームがあることによって、クライアントも制作者たちも、全員が完成イメージを共有できるようになります。
なのでワイヤーフレームは、ワークフローをスムーズに進める役割を担っています。

ワイヤーフレームと似ているもの

ここで、ワイヤーフレームと似た役割で間違われやすい用語を紹介します。
以下3つがワイヤーフレームとよく間違われます。

  • ディレクトリマップ
  • デザインカップ
  • サイトマップ

です。それぞれ詳しく解説していきましょう。

ディレクトリマップ

 ディレクトリマップは、簡単に言うとwebサイト全体の情報と配置場所をまとめた一覧表です。
それに対し、ワイヤーフレームは1ページごとの情報と配置場所をまとめたレイアウト図です。
ですのでディレクトリマップとワイヤーフレームは、範囲と仕様の違いがあります。
ディレクトリマップは、サイト内の構造を理解するために作成しましょう。
また、表形式や樹形図形式で階層ごとにタイトルとURLを書き出すことで、ディレクトリマップの階層構造も可視化され理解しやすくなります。
 

デザインカップ

 デザインカップは、「Design Comprehensive Layout」の略で、簡単に言うとクライアントに完成イメージを伝えるデザイン見本です。
それに対して、ワイヤーフレーム は関係者全員に情報の種類とレイアウトを伝える設計図です。
なので、デザインカップとワークフレームは見せる対象者と作成目的の違いがあります。
デザインカップが完成見本、ワイヤーフレームが設計図と理解しておくとわかりやすいでしょう。

サイトマップ

 サイトマップは、簡単に言うとサイトの全体像を表し、「制作後のサイト運用時」に使用します。
それに対し、ワイヤーフレームは1ページごとを表し「制作作業中」に使用します。
また、サイトマップは、サイト内のコンテンツをユーザーに知らせるHTMLサイトマップと、検索エンジンに伝えるXMLサイトマップがあります。サイトマップの詳細につきましてはブログ記事
サイトマップって何?SEO効果から作成方法まで徹底解説をご覧ください。

ワイヤーフレームツールの選び方

ワイヤーフレームは手書きで書いたり、Illustratorなどを使っても書くことも可能ですが、ワイヤーフレーム作成ツールを使用して効率的に作成する方法もあります。

ここでは、ツール選ぶ時のポイントと、それぞれのツールの特徴をご紹介したいと思います。

選ぶときのポイント

ワイヤーフレームツールを選ぶ時のポイントは3つあります。

インストール型、クラウド型

インストール型のツールには、関係者間の確認のためにその都度ファイルを書き出さなければならないものと、ブラウザ上で共有・確認できるものがあります。

クラウド型のツールはブラウザ上での確認はもちろん、オンランインでもワイヤーフレーム共有・共同編集を容易に行うことができます。
ワイヤーフレームは、制作チーム内およびクライアントと共有し共同作業を行うので、共有・共同編集しやすいワイヤーフレームツールを選ぶことがポイントです。

他の人が使い慣れているか

先ほども言ったようにワイヤーフレームの作成は共同作業なので、他のメンバーが使い慣れていた方がいいです。
ですので、比較的多くの人が使い慣れているMicrosoft OfficeのExcelやPowerPointといったソフトウェアをワイヤーフレームツールとして使用するといいでしょう。

パソコン or スマートフォン

パソコンでの作業が想定される場合は、インターネットに接続できる環境であればどのパソコンでも使えるクラウド型ツールを使うことをおすすめします。
スマートフォンなどの実機で表示確認などを行う必要がある場合は、ワイヤーフレームを他端末と同期できるツールが便利です。

>>サイトリニューアルをご検討されている方へ|RFPサンプルを無料配布中

様々なワイヤーフレームツール

ここでは、4つのワイヤーフレームツールをご紹介したいと思います。それぞれ詳しく見ていきましょう。

Adobe XD

・説明

Adobe XDは、ユーザ操作性をデザイン、プロトタイプ化、共有するためのプラットフォームです。
ワイヤーフレーム、ビジュアルデザイン、インタラクションデザイン、プロトタイプ化、プレビュー、共有間の切り替えが簡単な、オールインワンの強力なツールです。(公式サイトより)

Adobe XDで作成したワイヤーフレームはAdobe XDがインストールされていないパソコンでもワイヤーフレームの確認、コメントの入力が可能です。
ただし、編集はAdobe XDをインストール済みのパソコンで行います。
また、PowerPointを使える方でしたら慣れるのも早いでしょう。使いやすさもPowerPointと同じぐらいです。
Adobe XDは、インストール型のツールですのでインストールしたパソコンでのみ使用することができますが、チェックは他の端末でも使用可能です。

・価格
価格は、一つのホームページを制作する場合は無料のプランで十分でしょう。
ホームページ制作を複数並行で行う場合は1ヶ月1,180円の有料プランをおすすめします。

Cacoo

・説明

Cacooはフローチャートからワイヤーフレーム、プレゼン資料まで作れる「オンライン作図ツール」です(公式サイトより)。

パソコン用、スマホ用のワイヤーフレームのテンプレートがあらかじめ用意されています。
Cacooで作成したワイヤーフレームオンラインで共有、共同作業できます。
また、図形を直感的に挿入することが可能なので慣れるまで時間はかからないでしょう。
Cacooはクラウド型ツールですので、インターネットに接続していればパソコンでも使用可能ですが、タブレット・スマートフォンでの編集はできません。

・価格
残念ながら無料で使えるフリープランは機能の制限があるので、大人数で使用の場合は1ヶ月454円の有料プランをおすすめします。

Sketch

・説明
Sketchは、Bohemian Coding社によって開発されたMac用のグラフィックデザインです。
UIデザインをする時に便利な機能が盛りこまれています。
Sketchがインストールされていないパソコンとのデータ共有は、専用のプラグインを使って行います。
注意点は、windowsでは使用できないので共有するメンバー全員がMac環境である必要があります。
また、メニューが英語表記のため最初は使いづらいと感じるかもしれませんが、機能的にはシンプルですので直感的に操作ができます。
Sketchは、インストール型のツールなのでインストールしたパソコンでのみ使用することができます。
また、アプリを使用することでスマートフォン実機での画面確認が可能です。

・価格
無料で使用できるのは14日間のみで、それ以降は年間で約1,0000円です。

Excel,PowerPoint

・説明
説明するまでもなく有名ですが、マイクロソフトがwindows,macOS,iOS及Android向けに開発・販売しているソフトです。
メリットは、多くのパソコンにインストールされていて、かつ図形を直感的に配置しやすいということです。
また、使い慣れている人が多いというのもメリットです。
それに対してデメリットは、複雑なレイアウトのワイヤーフレームの作成に向いていないことです。
ホームページの内容によってはExcelやPowerPointでのワイヤーフレーム作成が不便になることがあるので注意してください。
また、編集する場合は一人ずつ行わなければならない点もデメリットといえます。

・価格
Microsoft Officeがインストールされていれば無料で使用可能です。

今回、4つのワイヤーフレームツールを紹介してきましたが、これらはほんの一例です。
他にも様々なツールがあるので作りたいホームページ、スペックに合わせて選んでみてください。

作り方

最初に説明した通り、ワイヤーフレームの目的は、プロジェクトメンバーとの認識を合わせて、レイアウトを決め完成イメージを共有することです。
またワイヤーフレームを議論のたたき台として、アイディア出しを促進させるためにも役立ちます。
なので、ワイヤーフレームの作成はホームページの良し悪しを決めるとても重要な作業です。
ここでは、作業の注意点と流れを見ていきます。

作る際の注意点

注意点は大きく分けて3点あります。

  • デザインに凝りすぎない
  • スマホ用とPC用で分ける
  • 全てのページのワイヤーフレームを作ろうとしない
  • です。
     まず、デザインに凝りすぎるというのは初心者がよくやりがちな失敗です。
    あくまでワイヤーフレームの目的は情報を整理する事ですので、過度にデザインを入れてしまうと制作を行うデザイナーがワイヤーフレームに引きずられてしまいます。
    なので、ワイヤーフレームはなるべく線と文字だけにしましょう。
     スマホ用とPC用に分けるというのは、スマホはPCに比べて画面の横幅が小さくなるため、レイアウトを変える必要があります。
    主要ページのみスマホ用のワイヤーフレームを作成するなど工夫をしましょう。
     そして、もちろん全てのページのワイヤーフレームを作成するのが理想的ですが、規模の大きいサイトの場合には難しいかもしれません。そのような時は、ワイヤーフレームを作成するページをいくつかピックアップするのがいいでしょう。
    ホームページにおいて重要な役割を果たすページを優先するのがお勧めです。

     もし、レイアウトに迷ったら競合サイト、他社サイトを参考にしてみましょう。

    作る際の流れ

    まずは大まかな流れを見ていきましょう。

    1. 掲載する情報を整理
    2. レイアウトを決める
    3. 紙とペンで下書き
    4. ツールで清書

    です。詳しく見ていきましょう。

    掲載する情報を整理

    まず、ワイヤーフレームにどんな文章や画像を配置するかまとめます。
    配置する情報をピックアップ→グルーピング→ランキングの順番で進めるとうまくまとめられます。

    ・ピックアップ
    最初は、ワイヤーフレームに配置する情報の洗い出しです。
    とにかく思いつく限り「ロゴ」「電話番号」「あの画像」「あの文章」みたいに、情報をリストアップしていきます。

    ・グルーピング
    十分に情報をリストアップできたら、仲間同士の情報を見つけて、グループに分けます。同じグループの情報はワイヤーフレーム上で近くに配置するのが基本です。
    例えば、「電話番号と住所」、「ロゴと会社名」、「この写真とあの文章」みたいな感じです。実際にワイヤーフレームを書いていく途中では、せっかく分けたグループをばらさなければいけないこともありますが、それでもグループに分けておくと、掲載情報を把握しやすくなります。

    ・ランキング
    グループごとに、また、同じグループの中でも情報に優先順位を付けていきます。
    優先度が高いグループ、あるいは情報ほど、基本的にワイヤーフレーム上では目立つよう配置します。
    優先度が低いグループや情報は本当にそのページに掲載するべきかどうかを再度検討してみましょう。
    不要な情報が増えるほど、そのページで伝えたい主題にブレが生じます。「ピックアップ → グルーピング → ランキング」は、紙と鉛筆でも十分進められますが、ポストイットやマインドマップを利用すると捗ります。

    レイアウトを決める

    掲載情報がまとまれば、レイアウトを選択します。レイアウトは「画面をどう分割するか」、分割方法のことです。
    先にまとめた情報の量と質にあわせて、適切なレイアウトを選びます。
    スマホの普及、PCでも様々なモニターサイズの出現など、サイトを閲覧する側の環境が多様化しています。それと一緒に新たな技術とも結びついて、色々な種類のレイアウトが現れています。
    オシャレで動きも派手なレイアウトに憧れて「自分も!」となりがちですが、初心者の方は、まず定番のレイアウトをマスターしてからの方が吉です。
    今回はマルチカラムというものをご紹介したいと思います。
    マルチカラムはカラムが複数あるレイアウトです。
    カラムは画面を縦に分割したときの単位。
    日本語では「列」。縦のカラム(列)に対して、画面を横に分割したときの単位はロー(行)といいます。
    マルチカラムは、カラムが複数存在するレイアウトです。カラムが2つ存在する「2カラム」、カラムが3つの場合は「3カラム」と呼びます。
    2カラムを例に、各エリアの役割を見ていきましょう。ACDFBAF6-7EB0-45B5-B976-977BC4F5F954_1_201_a
    ヘッダー
    画面最上部のエリアです。
    サイト訪問者の目に最初に飛び込んでくる場所で、そのホームページにとっての「看板」と言えるでしょう。
    ヘッダーはサイト内のどのページにも共通して表示されます。
    どのページにも必要な「会社名やサイト名が分かるロゴ」、「売上に結びつく成約ボタン」、「サイト内の各ページを行き来するナビゲーション」などを配置します。
    ワンポイントでも美しくデザインされたロゴがあれば、不思議とページ全体の印象を良くします。
    成約は、「コンバージョン」ともいわれ、「お問い合わせ」や「商品の購入」など、そのホームページに定めた目標を、訪問者が満たす行動のことです。
    お問い合わせページヘリンクするボタンやショッピングカートの決済ボタン、または、店舗へつながる電話番号など「コンバージョンを生み出すための表示物や情報」を、ヘッダーに配置するのが基本です。
    複数のページから成り立つWebサイトにとって、ナビゲーションは極めて重要。
    ヘッダーに位置するメインナビゲーションは、「グローバルナビゲーション」とも呼ばれ、サイト内の主要なページヘ分岐します。
    ページ数が多く階層も深いWebサイトの場合は、グローバルナビゲーションでは上階層のページへ分岐させ、下層ページはローカルナビゲーションとしてサイドバーへ預けるなど工夫が必要になります。
    ローカルナビゲーションとサイドバーについては、後ほど説明します。
    コンテンツ
    ページの主題を伝えるエリアです。
    読んで見てもらうために、文章、画像、動画、表などを駆使します。
    ページを開いたとたん目に入る印象的な画像や動画をアイキャッチと呼びます。
    訪問者の興味を一瞬で惹きつけることを目的とし、そのページでの滞在時間を長くしたり、成約まで導くきっかけを作ったりなど、重要な役割を果たします。
    サイドバー
    ナビゲーションとして利用することが多い一方で、更新情報や広告など「載せたい! でもコンテンツに掲載するほど優先順位が高くない情報」を掲載できる、利用の幅は広いエリアです。
    ページ数が多く階層も深い大規模なホームページでは、ヘッダー部分のグローバルナビゲーションだけでは足りません。
    サイドバーにローカルナビゲーションを置いて補います。ローカルナビゲーションは、訪問者に下層ページをうまく見てもらえることを目的にしたナビゲーションです。
    フッター
    画面最下部、足元にあたるエリアです。
    一般的にはコピーライトを明記したり、サイトマップとして利用するケースが多いです。フッターまでスクロールしてくれた訪問者は、そのページを飽きずに最後まで見てくれたということですから、成約へのハードルも十分に下がっているはずです。
    最後のひと押しとして、成約へうまく押し切る活用法を見つけたいものです。…と、このようにマルチカラムは役割ごとに画面を分割できるところが強みです。ページの主題を伝えるのと同時にナビゲーション機能にも優れたレイアウトといえるでしょう。
    それゆえ、色々なタイプのホームページにマッチします。コーポレートサイト(会社案内を目的とするwebサイト)やネットショップ、そしてブログにも使われます。

    下書きをする

    レイアウトが決まったら、紙にワイヤーフレームを描いていきます。途中で新たに追加したい情報が出てくることも多々ありますので、いきなりツールを使うよりも、まずは紙に書いてみましょう。紙面を先に決めたレイアウトで分割し、まとめあげた情報を配置していきましょう。
    逆にスペースの都合や優先順位によっては削除する情報も。最初から完璧を目指そうとせずに、書いたり消したりを繰り返しながら完成に近づけていきます。

    ツールで清書

    ワイヤーフレームを手書きしたあとは、ツールで清書して終わります。自分しか見ないワイヤーフレームでも、清書でデータにしておくと便利です。似たようなプロジェクトがあれば、テンプレートとして利用できます。

    まとめ

    今回はワイヤーフレーム の概要、ツール、作成手順をご紹介しました。ワイヤーフレーム を作成することで、ホームページのデザインを決めるだけではなく作業をスムーズかつ正確に進めることができます。皆さんも、ホームページを作る際には「ワイヤーフレーム 」を活用しましょう。

    当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
    Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。


    広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

関連記事

適切な運用・対策できてますか? 無料診断5点セット Google広告アカウント Yahoo!広告アカウント SEO webサイト LP 申し込みはこちら