ワイヤーフレームの作り方と気をつけたい注意点

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

 

サイトのデザイン・制作を始める際に、ワイヤーフレームをしっかり作り込むことが重要になってきます。今回はワイヤーフレームの作り方と注意点、作成の役に立つツールをご紹介します。

ワイヤーフレームとは

ワイヤーフレームとは、本番サイトのデザイン下書きや設計図になるものです。「フレーム(骨組み)」とあるように、構築するサイトに必要なコンテンツを、どこにどのように配置をするかを決めるために作成します。

コンテンツをどのような順番で配置するかといったことを決める工程を「情報設計」といいます。情報設計を行い、サイトの目的に沿ったコンテンツの配置を決めることで、構築作業の途中で「足りないコンテンツを足す」といった事態を防ぐことができます。

後から不足しているコンテンツを追加するとなった場合、全体的なデザインの崩れや、それによる修正が大変な手間となることがあるので、作成して損はありません。

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

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

実際にワイヤーフレームを作成するとなったときの、大まかな流れを説明していきます。

1.情報を整理する

最初にワイヤーフレームに配置する情報、サイトに掲載していきたい情報をまとめていきます。情報を整理する際に「ピックアップ」「グルーピング」「ランキング」の順で進めていきます。「ピックアップ」とは、サイトに掲載する情報を全て書き出し、リストアップしていきます。必要な情報に抜けがないようにするためなので、この時点で整える必要はありません。

「グルーピング」とは、ピックアップの際にリストアップした情報から、似ているものをグループ分けしていく作業です。電話番号や住所といった、性質の近いものをまとめていきます。

「ランキング」とは、グルーピングした情報をグループごとに優先度の決めていくことです。優先度の高いグループは、サイトで目立つ位置に配置する必要があります。

制作するサイトごとに目立たせたい情報が何かを明確にして、コンセプトがブレることがないようにしていきます。

2.レイアウトを決定する

次に、整理した情報をユーザーに伝えるためのレイアウトを決定していきます。「マルチカラム」や「タイル」といった様々なレイアウトから、どのように見せればユーザーが利用しやすいかを検討します。

流行りのレイアウトもいいかもしれませんが、ユーザー視点に立った時に目的の情報が見つけづらい作り方のレイアウトになるようであれば避けるべきです。

3.清書

決定したレイアウトの共有や、修正を容易にするためにツールを使って清書を行います。ExcelやAdobe製品など様々なもので作成が可能なので、使用しやすいツールを選ぶと良いでしょう。

作成時の注意点

ワイヤーフレームを作成するまでにはいろいろな注意点があります。

注意点1. デザインする時と同様にコンテンツを入れ込む

ワイヤーフレームだからといって、コンテンツを端折ってはいけません。前述にもあったように、後々コンテンツを追加するトラブルに繋がってしまうので、サイトに入れたいコンテンツは、ワイヤーフレームを作成する段階でしっかり入れ込みましょう。

また、各コンテンツのサイズ感をワイヤーフレームの段階で表現することも重要です。例えば、メインビジュアルを画面いっぱいにして設置するのと、幅900pxくらいで設置するのとでは印象がかなり変わります。

注意点2. 色などデザイン要素は入れない

ワイヤーフレームは情報設計を行い、コンテンツの配置、レイアウトを表現するために作成します。そのため、ワイヤーフレームに色やデザインといった要素は不要です。どこにどんなコンテンツが入るという情報が重要です。

ワイヤーフレームにデザイン要素があると、お客様に渡した際に、お客様の方で「こういうサイトになっていくのか」と固定概念が生まれてしまい、お客様の希望が聞き出しにくくなってしまう可能性があります。他には、デザイナーがワイヤーフレームに入っているデザイン要素に引きずられることも考えられます。

デザイン要素に引っ張られることなく、お客様と製作者で完成をイメージできるよう、ワイヤーフレームにデザイン要素は入れない方が良いでしょう。デザインの下書きではないことの理解が必要です。

注意点3. トップページと下層ページを用意する

どこのサイトも大体トップページと、下層ページのレイアウトや入っているコンテンツは違うものです。したがって、ワイヤーフレームをお客様に提出する際、トップページと下層ページ用のワイヤーフレームを用意するといいでしょう。

下層ページのワイヤーフレームは全ページ作成できれば理想ですが、そうもいかない場合は、代表的なページレイアウトを決定して作成するといいでしょう。ただし、レイアウトを大幅に変更したいページが存在する場合には、完成後にユーザーにとって見づらいサイトになってしまうことを防ぐためにも、ワイヤーフレームを作成した方が良いでしょう。

注意点4. レスポンシブWebデザインも用意

スマホが普及し、レスポンシブ対応が基本となっているため、ワイヤーフレームにもレスポンシブWebデザイン用を用意しなければなりません。

PCサイトと比べると画面幅が全く違うので、レイアウトの変更やコンテンツの変更が必要な場合があります。ワイヤーフレームではPCサイト・スマホサイトを別々に考えると良いでしょう。

注意点5. サイトの導線を考える

ワイヤーフレームを作成する際、重要なのがページの導線です。ユーザーにとって見やすいコンテンツの配置になっているか、ユーザーがページ内で迷子にならないかがワイヤーフレーム作成時に決まりますので、導線を考えた作り方が大切になります。

しかし「導線ってどうやって考えるかわからない」「どういうレイアウトが適しているのか」という方もいらっしゃるかと思います。そのような場合、同じようなジャンルの競合・他者サイトをチェックするのが有効です。

検索で上位に表示されているサイトは導線を考慮したコンテンツの配置になっているはずです。参考例として複数サイト比較して良いところ、制作するサイトに適しているところを探すと良いでしょう。

ワイヤーフレーム作成ツール

ワイヤーフレームの作成には、自分用のラフなどであれば手書きが最も早く簡単かもしれません。しかし、手書きだけでは、お客様や他の作業者と共有するには問題です。

作成に使用できるツールには、Adobe製品のIllustratorやPhotoshop、Microsoft Office Excel、Google スプレッドシートなど様々なものがありますので、自分の使いやすいものを使用すると良いでしょう。今回は一部をご紹介します。

Googleスプレッドシート

デザイン要素はワイヤーフレームで必要無いため、Google スプレッドシートで作成することも可能です。リアルタイムで編集でき、Googleのアカウントを持っている人であれば誰とでも共有できます。

Googleスプレッドシート

Adobe Comp CC

Adobe Comp CCは、タブレットやスマートフォンでワイヤーフレームを作成できるツールです。ジェスチャーにより手書きで簡単にレイアウトを形にできます。移動中や打ち合わせ、空き時間など、その場ですぐに反映できるという便利さがあります。

Adobe Comp CC

cacoo

cacooは、ワイヤーフレームだけでなく、フローチャートやサイトマップも作成可能なツールです。グループ内で共有できたり、変更履歴を見るなど、機能がたくさんあります。有料ツールですが、無料トライアルがあります。

cacoo

moqups

moqupsは、ブラウザベースのワイヤーフレーム制作ツールです。

英語サイトですが、直感的に操作できるようになっており、アカウント登録することで手持ちの画像の利用が出来ます。無料プランもありますが、作成できるプロジェクト数が少ないものの、有料プランにすることでPNGやPDFでのエクスポートが可能です。

moqups

Prototyper

Justinmind Prototyperは、本格的な機能をもつフリーソフトです。有料版は、HTMLの書き出しなどさらに多くの機能が使用できます。ページ内の簡単な動きなどを確認するのに便利です。

Justinmind Prototyper

まとめ

今回の記事では、ワイヤーフレームの作り方と注意点、そして作成に役立てられそうなツールをご紹介しました。ユーザーが見やすく使いやすい位置に、必要なコンテンツを入れ込んだワイヤーフレームを作成できればいいかと思います。情報の見せ方を決めるワイヤーフレーム作成は大事な作業ですので、丁寧に作成していきましょう。

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

CATEGORY :
サイト制作
tree