Webサイトやアプリを作る際に無くてはならない「ワイヤーフレーム」。ディレクターが作成するデザインの設計図で、制作をスムーズに進めるために必要な要素です。
ワイヤーフレームの作り方に決まりはありませんが、専用のツールを使うことで「スムーズ」かつ「分かりやすく」作成することができます。
そこで今回は、基本的な考え方から、ワイヤーフレーム作成のおすすめのツールまで、ワイヤーフレームに関する知識をご紹介いたします。
目次
ワイヤーフレームを簡単に説明すると、「どこに、なにを、どのように配置するか」が書かれた「Webサイトやアプリの設計図」のことです。家を建てる時に作る、間取りや設計図をイメージするとわかりやすいかもしれません。
ワイヤーフレームは、Webサイトを作成する上で「Webサイトに関わる人全員で完成イメージを共有し、作業内容を確認する」ことができます。つまり、ワイヤーフレームはWeb制作を進める上での「コミュニケーションツール」という役割があります。Webサイトの完成図が見える化されているので、複数人で作業する際も同じイメージを持って作業をすすめることができます。あいまいな共通認識のまま進めてしまうと、作業内容にずれが乗じたり、想定外の工数が発生したりします。また、担当者間で引継ぎが発生した場合でも、ワイヤーフレームを見れば状況は一目瞭然です。スムーズに業務のやり取りを進めることができます。
初めてワイヤーフレームを作る方は、「どこからはじめればいいのだろう」と迷うかもしれません。ワイヤーフレームをまとめているサイトを紹介しますので、全体像を理解したい人は参考にしてください。
実際に公開されているWebサイトのワイヤーフレームが紹介されています。マウスオーバーすると実際のサイト画像が表示されるので、ワイヤーフレームに書くべき内容が具体的で分かりやすいです。
たくさんのワイヤーフレームがまとめられているサイトです。webサイトだけでなく、アプリのワイヤーフレームもあります。
一般的には、以下の流れでワイヤーフレームを作ります。
まずは、Webサイトに掲載する情報を整理します。最初の段階では、載せようと思っている内容を全て書き出してみましょう。
その後、「電話番号と住所」「業務内容とサービス名と業務のイメージ写真」といったように、情報をグルーピングしていきます。似た情報は似た配置にするのがワイヤーフレームを作る上での基本になるので、盛り込みたい内容に漏れがないか確認しながら準備を行いましょう。
最後に、情報の重要度を決めましょう。Webサイトの目的によって、魅せるべき順番が変わってきます。例えば、コーポレートサイトであれば会社の情報がメインになりますし、コンテンツサイトであれば運営企業のロゴはメインにしなくてもいい場合もあるでしょう。また、不要な情報が多いと、見る人にとってわかりにくいサイトになりますので、しっかり情報の取捨選択をするようにしましょう。
Webサイト全体の大まかなレイアウトを考えましょう。
ヘッダー・ナビゲーション・コンテンツエリア・フッターなどから構成されるマルチエリアタイプにするのか、ランディングページのようなシングルページにするのか、コンテンツが並んだタイルにするのか。
サイトの目的や情報量に合わせて適切なレイアウトを選択してしましょう。
方向性が決まったら、ワイヤーフレームの下書きをしましょう。いきなり完成させようと思わずに、ざっくりとした配置案から詰めていくのがおすすめです。
Webサイトを見る人の視線は左上から右下へ「Z」を描くように動きます。この事を意識して、視線の動きに合わせて情報を配置すると、伝わりやすいサイトになります。
ラフが固まったら、清書しましょう。手描きのままでは、自分だけしか読めないかもしれません。ワイヤーフレーム作成に便利なツールについては、後述します。
ワイヤーフレームを考える際には、以下の4点に気をつけましょう。これらを意識すると、効率的にワイヤーフレームを考えられますよ。
Web作成に慣れないうちは、1からサイトデザインを考えると時間がかかってしまいます。似た目的や近い業種のWebサイトをいろいろと研究し、参考にしましょう。参考にするだけでなく、レイアウトをワイヤーフレーム化することで、自分自身のデザインの引き出しも広げることができます。
サイト全体の構成を考える際は、競合サイトや類似サイトもぜひチェックしてみましょう。特にサイトマップを見ると、どのような情報を網羅しているかが一目瞭然です。また、作ろうとしているサイトに盛り込んだほうがいい情報が抜けていた場合も把握することができます。
全く同じにするのはNGですが、「どうしてこの配置になっているのか?」と考えると、ワイヤーフレームを作るときに良い参考になります。
スマホとPCでは画面の幅も違うので、別のレイアウトを用いるのが一般的です。PC版のワイヤーフレームを考える際に、レスポンシブかどうかも視野に入れるとスムーズにスマホ対応を進めることができます。
ワイヤーフレームは、あくまでサイト全体の設計図です。カラーリングやボタンの形などのデザインを決めるのは次の段階(デザイナーの仕事)です。色を付けてしまうと、細部が気になって進みません。構成の良し悪しを判断するためにも、デザイン要素は除いてシンプルな形で考えましょう。
自分のWebサイトであれば、紙とペンで手書きするのが一番早いかもしれません。しかし、社内でイメージを共有する場合や、お客さんに提案する際にはそこれではNGです。そのため、誰が見てもひと目で分かるワイヤーフレームを作成する必要があります。
PowerPointやExcel、Illustratorなど普段ビジネスで使っているツールを用いて作成することもできます。このような使い慣れているソフトを使うのも良いですが、ワイヤーフレームに最適化されているわけではないので、作成には不便さを感じるかもしれません。
そのため、最初は慣れないかもしれませんが、専用のツールを利用しましょう。以下におすすめのツールを紹介しますので、比較して一番使いやすいものを選んでください。
手軽にワイヤーフレームを作成する上でオススメなのが、ワイヤーフレームをブラウザ上で作成できるツールです。ソフトをインストールする必要がないので、すぐに使い始めることができます。なお、このようなツールはドラッグ&ドロップで感覚的に作成できるツールが多くあります。
会員登録の有無や画像保存の方法、日本語対応の有無、インターフェイス等にそれぞれ特徴があるので、いくつか比較してみて使いやすいと感じるものを選びましょう。
参考:Cacoo
日本語対応しているので、操作が分かりやすいです。
Webサイト用の図形ツールを使えば、簡単にワイヤーフレームが作れます(ワイヤーフレーム用のテンプレートもあります)。それ以外にも、フローチャート・ネットワーク構成図・マインドマップ・ガントチャート・組織図等のテンプレートが豊富で、ビジネスで幅広く活用できます。
また、複数メンバーでの編集機能や、チャット機能もあります。
参考:Wireframe.cc
ドラッグで範囲を作成し、ツールを配置できます。作成したツールもドラッグで移動可能。シンプルなインターフェイスが特徴で、手書き感覚でスムーズに操作できます。saveボタンをクリックすると、Web上に保存される仕組みになっています。また、URL共有でワイヤーフレームをシェアできる点も便利です。
参考:NinjaMock
デバイスを設定し、それぞれに最適化したワイヤーフレームを作ることができます。Webサイトだけでなく、アプリのワイヤーフレームを考える際には便利かもしれません。要素が手書き風のフォントで構成されているので、オシャレなワイヤーフレームも作成が可能になります。
参考:moqups
登録なしでも気軽に作成できます(無料版に会員登録すれば、PNGやPDFでの出力ができるようになります)。必要な要素をドラッグするだけなので、操作も簡単です。
参考:Prott
ドラッグ&ドロップで操作可能です。パーツも豊富(特に、スマホのパーツ)なので、初心者でも簡単に分かりやすいワイヤーフレームが作れます。また、アニメーションの設定ができ、プレビュー機能を使ってWebサイトやアプリ同様の遷移の確認もすることができます。
参考:mockingbird
ドラッグ&ドロップで操作可能です。配置できるツールは、動画や地図画像、RSSなど汎用性が高いものが多いです。シンプルだからこそ、使いやすいサービスかもしれません。
参考:MockFlow
会員登録が必須ですが、無料で使えます。テンプレートが豊富で、想定しているレイアウトに近いものを使えば効率的に本格的なワイヤーフレームを作ることができます。
参考:HotGloo
シンプルで使いやすいツールです。7日間は無料でトライアルができます。ただ、海外のサービスなので日本語サイトには向かないかもしれません。
オンライン環境でワイヤーフレームを作成するのに抵抗があるという人にオススメなのが、ソフトをインストールして使うタイプのツールです。インターネット環境に左右されないので、いつでも・どこでも作成できるという強みがあります。
最初にPC・スマホ等のデバイスと画面サイズを設定すると、キャンバスが表示されます。ワイヤーフレームに必要な要素をドラッグすれば簡単に描画できます。初心者でも手軽に作れる使いやすいソフトです。
参考:PowerMockup
オフラインツールでワイヤーフレームを作りたい人におすすめのツールです。インストールすると、OfficeソフトのPowerPointを拡張できます。ワイヤーフレーム用の要素が増えるので、ドラッグ&ドロップをするとパワポ上で簡単にワイヤーフレームを作れる仕組みになっています。普段はパワポで作業している人は、とても使いやすいと思います。
高機能なツールではありませんが、ワイヤーフレーム作成に特化しているため、慣れればスムーズに使いこなせるツールです。
手描きで下書きを作成する際に役立つテンプレートや、スマホで手軽にワイヤーフレームを確認できるアプリなどを紹介します。
紙に下書きする際に便利なサイトです。ブラウザの画面フレームをダウンロードできるので、これを印刷するとイメージしやすいかもしれません。
タブレットやスマートフォンでワイヤーフレームを作成できるツールです。紙に書くように簡単に形にできます。移動中や打ち合わせの場など、ひらめきをすぐに反映できるという便利さがあります。
分かりやすいサイトを作るためには、ワイヤーフレームの段階でしっかり検討を重ねることが大切です。「なんとなく」のままサイト作成を進めては、途中で迷子になってしまって結局作り直しになるかもしれません。今回ご紹介したポイントをおさえて、ワイヤーフレームを上手に活用してください。
どのようなサイトにも必ずある「お問い合わせフォーム」。実は、このお問い合わせフォームの作り方次第で、CVRが劇的に変わるのをご存知でしょうか…
この記事をご覧いただいている皆様へ。 このページは、SEO情報ブログ「ディーエムソリューションズの社員が作った、【SEOまとめ】」にて公開さ…
SEOやリスティング広告などの集客施策には注力しているが、受け皿であるランディングページを”売れる”ように工夫してい…
2018年1月18日、Googleのウェブマスター向け公式ブログにて、モバイル検索のランキング要素にページの読み込み速度が組み込まれるSpe…
CMSとは、Content Management Systemの略で、直訳するとコンテンツ管理システムと呼ばれます。Webサイトを作成する際…
EC・通販サイト運営における売上アップを考えたとき、ECサイトそのもののリニューアルを行うのは有効な手段です。特にサイト作成から時間が経過し…