販促担当者のためのデジタルマーケティング情報メディア|baXooka[バズーカ]

Web担当者に必須!ワイヤーフレームの考え方と注意点

Webサイトを立ち上げる時やリニューアルする際に作成するワイヤーフレームですが、作る目的や、企業・個人によって書き方も作り方も多種多様です。

最近はProttやAdobe XDなどワイヤーフレームで簡単にサイトのプロトタイプが確認できるツールも出てきており、ページ遷移や操作性といった動きがイメージできるようになったため、非Web担当者にも伝わりやすいワイヤーフレームの活用度が広がっています。

ワイヤーフレームでしっかりと目的やレイアウトを担当者と打ち合わせることでデザイン、コーディング工程での修正がなくなり、スピーディーな制作が可能になります。

今回は、ワイヤーフレームの意味や考え方について改めて整理してお伝えしたいと思います。

ワイヤーフレームの役割と目的

ワイヤーフレームとは


ワイヤーフレームとは、「Webサイトの設計図」にあたります。「どこに」「何を」配置して、「どんな」ことを達成させるためのサイトなのかをレイアウトしてサイトとしての意味を具現化させる意味合いがあります。

よく例え話をする時に、家を建てることを想定してもらいます。注文住宅を建てる際に、吹き抜けをリビングの中央にといったように「どこに」「何を」配置して、「どんなこと」をかなえたいかを建築士に伝えて図面を書いてもらいますよね?

建築士はその希望を図面に起こしてマイホームを造ってくれますが、それと同じことをWebサイトを創るときも行います。いきなり大工さんに家を建ててもらうと自分のイメージと違う時に大変なことになることは想像に難くないでしょう。

ワイヤーフレームの目的

ワイヤーフレームの目的は大きく分けて以下の3つです。

  • ①達成したい目的に沿った設計図を作成すること
  • ②制作会社とクライアント間のイメージを共有すること
  • ③機能面・操作性を確認すること

昨今Webサイトは表現の幅が広がり動的なデザインも増えてきています。さらに、スマホとPCでの見せ方の違いも事前に必ず確認しておきたい要素ですよね。そういった1つ1つのポイントを確認しながら進めることで、コーディングを意識したデザインや導線の良いサイト作りにつなげていきます。

ワイヤーフレームの注意点

起こりやすい認識ギャップ

ここまでで、ワイヤーフレーム作成の重要性はおわかりいただいたかと思います。では、作成の時に注意すべき点はどんなところにあるでしょうか?

まずは起こりやすい認識ギャップを防ぐことです。発注側と制作側がそれぞれの常識で話してしまい、デザインやコーディングの工程に進んだ時に初めて互いの認識が違っていたと発覚するケースがよくあります。

具体的には、発注側のレギュレーションや社内用語が制作側に正確に伝わっていなかったり、制作側がWeb制作の専門用語で資料やワイヤーフレームを作成してしまうといったことが原因となりがちです。

双方のイメージをしっかりと合わせるためには、ワイヤーフレームやデザインに入る前に共通のレギュレーションを作成する等、文書や図で確認しながら進めていくことが重要です。

発注者はココを確認

ワイヤーフレームを確認する時のポイントは、「目的に沿ったレイアウトを提案してくれているか」「機能面・動作面は目的を果たせそうか」を確認すると良いかと思います。特にしっかりチェックしたいのは、以下の5つです。

  • ①ファーストビューでの表示範囲
  • ②グローバルナビゲーション
  • ③視線の動きに沿ったデザイン(スマホではスクロールやタップ位置等も)
  • ④コンバージョンまでのページ遷移数
  • ⑤コンバージョンポイント

強調しない箇所に目がいくか、ユーザーが操作時にストレスを感じないかといったことをイメージしながら、不明な点は必ずディレクターの意図を確認してから進めていきましょう。

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

構成要素

では、実際にどのようにワイヤーフレームを作成するのかをご説明します。Webサイトは多くの場合、次の要素から成り立っています。

  • ①ヘッダー
  • ②グローバルナビ
  • ③サイドナビ
  • ④メインコンテンツ
  • ⑤フッター

最近は③を外して②を画面に固定して表示させることも多くなってきていますが基本構成はこの5つで構成されています。

次に、サイトの種類を考えます。例えば、会社HP等のコーポレートサイトの場合は、基本構成で制作されていることが多く、ブランドサイトやコーポレートサイトは①②④⑤で構成されていることが多いです。

サイトの種類から構成がイメージできれば、クライアントからヒアリングした内容からそのイメージに近い見本サイトをいくつかピックアップします。見本サイトは「イケサイ」等の参考サイト集や競合サイトからサイトの特徴を見極めてレイアウトしていきます。ランディングページや特集ページは作り方にセオリーがあり、そのセオリーを土台にして要望を組み込んでいきます。

ツール紹介

ワイヤーフレームを作成するツールは、図形が表示できればどんなツールでも作成できるので、会社で指定がない限りは自分が使いやすいツールで作成すると良いでしょう。

以下にワイヤーフレームが作成できるツールを思いつく限り並べてみたいと思います。

Microsoft Excel

ビジネスPCであれば必ず入っている定番ソフトですね。エクセルに馴染みのある方も多く、始めやすいソフトだと思います。

Microsoft Power Point

エクセルと同じくお馴染みのソフトです。こちらはWeb制作会社でもワイヤーフレームで使われることの多いソフトの一つです。図形も描きやすいですし、印刷と相性が良いので出力して共有出来る点でも使い勝手が良いです。

Cacoo

こちらはワイヤーフレームや簡単な図を作成することに特化したWebツールです。初心者でも直感的にわかるように設計されていたり、Web制作に必要なテンプレートが豊富な点が重宝します。無料プランで25シート利用できるので、充分使えるツールです。

Adobe Illustrator

デザイナーやWeb担当者であれば入っていることも多いかと思いますが、使い心地と完成度は他のツールと比べると格段に高いです。デメリットは、Webデザインは縦に長くなりがちなので20,000px以上になる可能性がある場合は注意が必要です。

Adobe Photoshop

Webデザイナーはこちらを使うことが多いかと思います。Illustratorと違い縦の長さを気にする必要がなく、デザインする際もワイヤーフレームをそのまま使用することが出来るので、ワイヤーフレーム→デザインへの移行をしやすい点で効率的だといえます。

Adobe Experience Design

2017年10月にベータ版から一般公開されたワイヤーフレームのプロトタイプツールです。通称XDと呼ばれています。特徴は、連続したデザインをリピートして1つのブロックに出来ることや、ワイヤーフレームをボタンにリレーションしておけば、デモ画面で実際に擬似リンク状態になり表示させることが出来るので、クライアントとの確認が取りやすくなります。

Adobe CCからローンチされたため、CS6以下のバージョンのデザイナーにつなぐ際は、文字を書き起こしたりする必要があるため、注意が必要です。

Prott

グッドパッチ社が提供しているプロトタイピングツールです。2014年から公開され、世界121カ国以上で利用されている有料ツールです。1プロジェクトは無料で利用できるので、試しに使ってみて使いやすければ有料版を検討してみてはいかがでしょうか。

まとめ

ここまで、ワイヤーフレームの重要性についてまとめましたがいかがでしたでしょうか。

最初に決めておくことがきっちりと決まっていれば、ワイヤーフレームの完成度も高くなります。弊社ではWebディレクターがヒアリングを行い、ワイヤーフレームを書かせていただきますが、最初に綿密な打合せと意思疎通が出来ている案件ほど、成果が出るサイトとなり、その後の導線設計を見直す頻度も少なく済む傾向があります。

弊社はWeb制作から、Webで使用する写真・動画の撮影まで一括でご提案することが出来ます。Web制作のプランニング〜素材制作〜定期更新等など、効果が出るようまるっと一括で提案して欲しい!という方は、ぜひこちらからご相談ください

The following two tabs change content below.
龍田アシカイネン

龍田アシカイネン

WEBディレクター。 サイト分析、UI設計、WEBアプリケーション活用が得意分野。 最新情報はくまなくチェックするミーハー男子、ECサイト運用経験あり。 常にトレンドと使いやすさを考えたサイト設計を考えています。 元柔道部 区大会銅メダリスト。 ユニ◯ロの防臭靴下を愛用、足の裏の手入れは毎日欠かさず行っている
販促の最新トレンド、事例をお届け!
メルマガ登録情報入力
必須
必須
メールアドレス 必須
会社名 必須
SNSでフォローする