Webサイトの設計図「ワイヤーフレーム」とは?



Webサイトの設計図「ワイヤーフレーム」とは?

Webサイトを作成する際には、多くの関係者が携わるため、効率的にコミュニケーションをとるのは困難です。依頼主や企画担当者はもちろん、プロジェクトマネージャー・エンジニア・デザイナーといった様々な役割のあるチームの中で、共通理解を作り出す必要があります。Webサイトのデザインに関しては、ワイヤーフレームを利用すると効果的にコミュニケーションが行えます。

目次
  1. ワイヤーフレームとは何か
  2. ワイヤーフレーム作成に必要なこと
  3. ワイヤーフレームの構成要素
  4. おすすめツール
  5. 紙とペン
  6. PowerPoint
  7. Cacoo
  8. Moqups
  9. ワイヤーフレーム作成に参考になるサイト
  10. まとめ

ワイヤーフレームとは何か

ux-787980_1280

ワイヤーフレームを一言で言うと「サイトの設計図」です。サイトを開発する前に「何を・どこに・どのように」画面に配置するかを明らかにすることができます。視覚的で分かりやすいため、どの役割の人も同じように理解を深めることが期待されます。また、Webサイトの開発には時間がかかってしまいますが、ワイヤーフレームは簡単に作成することができます。ブレインストーミングを行ったり、仕様を柔軟に変更したりすることで、デザインを改善することができます。

ワイヤーフレーム作成に必要なこと

web-401497_1280

ワイヤーフレームの作成では「何を・どこに・どのように」配置するかを決めます。「何を」については、メニューの構成、ロゴ、コンテンツ、広告などを漏れなく描きだします。「どこに」については、画面上部・下部・左右などの画面上の位置について検討します。「どのように」については、段組やリンクなどの仕様を決定します。デザインを設計する際には、「ユーザーにとって使いやすいこと」や「伝えるべきメッセージが伝わること」を意識する必要があります。例えば、ユーザーの視線は左上から右下へ進むと言われています。そのため、重要な情報は左上に配置することが推奨されています。一方で、ワイヤーフレームの段階では色や画像といった詳細な仕様にはこだわりません。装飾は後回しとして、まず、枠組みを確立し、チーム内で共通認識を持つことが重要です。

ワイヤーフレームの構成要素

Powerpoint3

ワイヤーフレームのレイアウトには、いくつかの種類があります。全面を一つの要素で埋めるフルスクリーン型やヘッダーのあるシングルページ型などが挙げられます。一般的に用いられるのは、マルチカラム型のレイアウトです。マルチカラム型のレイアウトは以下の要素から構成されます。

  • ヘッダー:メニューや検索フォームなどを配置します- コンテンツ:訪問者に伝えたい情報を盛り込みます。文章・画像・動画・表などを提示します- サイドバー:ナビゲーションや広告などを含みます- フッター:コピーライトの表記やサイトマップを配置します

おすすめツール

紙とペン

hand-791230_1280

ワイヤーフレームは紙に手描きするのが非常に有効な方法です。改めてツールを覚える必要がなく、誰でも利用できます。仕様を変更するのも容易です。

PowerPoint

Powerpoint2

MicrosoftPowerPointでワイヤーフレームを作成することも可能です。多くのメンバーがソフトウェアを持っているので、データのやり取りも容易です。テキストや長方形のオブジェクトを駆使することで、設計図を作成します。

Cacoo

Cacoo

オンラインでワイヤーフレームが作成できます。Webサイト用の雛形があるため、効率的に設計することができます。チームで共有する機能もあります。無料プランの他に、エクスポートなどの付加機能ができる有料プランも提供されています。

Moqups

moqups

25万人以上が使用しているオンライン型のワイヤーフレーム作成ツールです。ワイヤーフレーム内でリンクが設置できるなど、高機能なのが特徴です。2プロジェクトまでは無料で使用することができます。

ワイヤーフレーム作成に参考になるサイト

ワイヤーフレームを作成する際には、他サイトの優れたデザインを参考にすると、どんなユーザーに対しても違和感のないサイトが作成できます。以下のページから、優れたWebデザインを見つけることができるでしょう。

まとめ

ワイヤーフレームはWebサイトデザインの設計図です。チーム内で共通認識を作るために高い効果があります。装飾などの細かい点にはこだわらず、枠組みをしっかりと決めることで、後続の開発作業がスムーズに進むでしょう。ワイヤーフレームの作成を通して、レイアウト・ヘッダー・フッターなどの構成要素を決め、「何を・どこに・どのように」配置するのかを明らかにします。オンラインツールに限らず、紙とペンでも作成できるので、プロジェクトに適した効果的なワイヤーフレームの作成方法を模索するのが良いでしょう。

関連記事

佐藤隆之
この記事を書いた人
佐藤隆之
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp