皆さんは「ワイヤーフレーム」をご存知ですか？
Webサイト制作を円滑に進めるために「ワイヤーフレーム」は非常に重要な役割を担います。
本ブログでは「ワイヤーフレームとは何か」というワイヤーフレーム自体の概念や作成の目的から実際の作成手順までをご説明し、
「ワイヤーフレームをどう読み取ったら良いだろう」
「ワイヤーフレームってどうやって作れば良いだろう」
などの様々な疑問について解決します！
また、すぐにダウンロードして使用できるワイヤーフレームのテンプレートもご用意していますので、ぜひご活用ください。
＜目次＞
1_ワイヤーフレームとは？
2_ワイヤーフレームを作成する目的
└ 2−1_完成イメージを「見える化」する
└ 2−2_サイトの掲載内容や方針を共有する
3_ワイヤーフレーム作成の手順
└ 3−1_掲載する情報の整理
└ 3−2_レイアウトの決定
└ 3−3_下書きをする
└ 3−4_ツールを使用し清書する
4_ワイヤーフレーム作成時の注意点
└ 4−1_デザイン要素は除いて考える
└ 4−2_手書きではなくデータでやり取りする
└ 4−3_レスポンシブデザインへの対応を決めておく
5_ワイヤーフレーム作成時に使用するツール
└ 5−1_Excel,PowerPoint
└ 5−2_Adobe XD
└ 5−3_Cacoo
6_まとめ
7_最後に！今すぐ利用できるワイヤーフレームサンプルダウンロード
ワイヤーフレームとは？
簡単に言ってしまうと、サイト制作のための設計図です。設計図といえば、プラモデルや家を建てる時の「設計図面」が思い浮かぶのではないでしょうか。
家を建てる時、必要な素材をモレなく準備し、効率よく作業するためには、事前に用意した「設計図」が必要不可欠となります。
サイト制作の進め方も同様です。
サイト制作はデザイナー、コーダー、プログラマなど複数の人で作業を行いますが、掲載したい内容について「どこに・何を・どのように」配置するかなどを作業者に伝える資料としてワイヤーフレームは利用されます。
ワイヤーフレームを作成する目的
ワイヤーフレームの大きな役割として、以下の２つが挙げられます。1. 完成イメージを「見える化」する
ワイヤーフレームは掲載する内容についてどのようなコンテンツがどこに配置されるかなどを簡潔な図式に示し、ページ内の設計を行います。その際にクライアントからいただいた要望や今回のサイト制作に至った背景など、Webサイトの最終目標（コンバージョン）も踏まえ、Webサイト上でどう表現するかということを定義し、「見える化」させます。
Webデザインとは違い余計な装飾がないため、掲載内容に誤りや漏れがないかに集中して確認ができます。
また、クライアントも制作者たちも全員が完成イメージを共有できるようになり、制作の流れをスムーズに進める役割を担います。
2. サイトの掲載内容や方針を共有する
Webサイトの制作にはサイトの規模によって多くの人が関わります。そのため、関係者間での共通認識があるか否かで、制作がスムーズに進むかどうかの分かれ道となります。
それぞれがバラバラのイメージを持って作業してしまうと、制作が滞ったり、クライアントのイメージと違うものができ、サイト制作に想定外の時間がかかるリスクがあります。
ワイヤーフレームを作っておくことによって、実際の作業に入ってから「あの項目が足りていなかった」「作ってみたら意外に見づらくて作り直しになった」などのトラブルを防ぐことができ、デザインや開発作業を円滑に進めることができるようになります。
ワイヤーフレーム作成の手順
ではそんなワイヤーフレームはどのように作成すればよいでしょうか。大きく分けると４つの工程で作成できます。
1. 掲載する情報の整理
ワイヤーフレームに求められる最大の要素は、「掲載情報の整理」です。まずは一番重要な情報の整理を行いましょう。具体的には以下の流れに沿って情報を整理していきます。
１）情報の洗い出し
まずは掲載したい情報を全て洗い出します。
ここではあまり詳細まで書き出すことよりも掲載内容の漏れがないように全て洗い出すことを意識します。
また、サイトマップやコンテンツマップも情報として利用します。
２）情報のグルーピング
１）で洗い出した内容について、コンテンツになるもの単位でグループ化していきます。
例)サイトロゴ、サイト名、グローバルナビゲーションはまとめてヘッダー（header）とするなど。
３）優先度の決定
グルーピングされた情報ごとに優先度を決定します。
階層構造で優先度を決定しておくと、hタグ設計に活用できます。
ワイヤーフレーム上で表現する際はコンテンツサイズの大小で表すと分かりやすいです。
2. レイアウトの決定
レイアウトは主に以下の４つの種類があります。１）シングルカラムレイアウト
２）マルチカラムレイアウト
３）グリッド型レイアウト
４）フルスクリーン型レイアウト
伝えたい内容によってレイアウトの良し悪しが変わるため、より、内容に適したレイアウトを決定する必要があります。
（詳細は参考サイトでご覧ください。）
参考サイト：サイトの目的に応じて、適切なレイアウトを考える。
https://docodoor.co.jp/staffblog/proper-layout/
3. 下書きをする
１. ２. の情報を元にまずは紙に手書きでワイヤーフレームを描いてみます。描いていくうちに情報の追加やレイアウトの変更等が発生する場合もあるため、ツールを使用する前にある程度下書きで情報をまとめます。
最初から完璧である必要はないため、描いたり消したりを繰り返して完成に近づけていきます。
4. ツールを使用し清書する
下書きが完成したらツールで清書して完成させます。上記の手順に沿って作成していけば、無駄な手戻りはなく、効率よくワイヤーフレームを作成することができます。
ワイヤーフレーム作成時の注意点
ワイヤーフレームを作成する際は以下の点に注意します。1. デザイン要素は除いて考える
デザインを含めて考えると、本来の目的である情報の整理に加えて、見た目の調整も行うことにより、作成に時間がかかってしまいます。また、ワイヤー作成者がデザイナーではない場合、ワイヤーフレームで多くの情報を決定しすぎるとデザインする際に表現の幅を狭めてしまうことがあります。
2. 手書きではなくデータでやり取りする
掲載する原稿などはできるだけデータで受領し、使用する際もコピーアンドペーストで利用するようにします。記載誤りを防ぎ、作業スピードの向上につなげます。3. レスポンシブデザインへの対応を決めておく
モバイルファーストと言われる現在、スマホ対応は必須です。PCとの表示領域に差があるため、レイアウトの変更が必要になります。
主要のページについてはスマホ用のワイヤーフレームを作成しておくと良いです。
ワイヤーフレーム作成時に使用するツール
ワイヤーフレームを作成する際に使用されるツールのメリット・デメリットについてまとめました。クライアントやプロジェクトによって求められるワイヤーフレームは変わるので、相性の良いツールを使い分けられると良いかと思います。1. Excel,PowerPoint
メリット・多くのパソコンにインストールされている
・図形を直感的に配置しやすい
・使い慣れている人が多い
デメリット
・複雑なレイアウトのワイヤーフレームの作成に向いていない
・同時編集ができない
2. Adobe XD
メリット・インストールされていないPCでもワイヤーフレームの確認、コメントの入力が可能
・画面遷移を確認できる
・ヘッダー固定やナビの開閉の再現ができ、イメージつきやすい
デメリット
・大量の画像書き出しが面倒（「jpg」に未対応）
・編集するにはツールのインストールが必要
3. Cacoo
メリット・パソコン用、スマホ用のワイヤーフレームのテンプレートが用意されている
・Cacooで作成したワイヤーフレームオンラインで共有、共同作業できる
・クラウド型ツールなので、インターネットに接続していれば使用可能
デメリット
・機能制限があるため有料プラン（1ヶ月/454円）に加入する必要がある
・タブレット/スマホでの編集ができない
まとめ
ワイヤーフレームは様々なツールを利用して作成することができ、プロジェクトや参加メンバーによって求められる内容は異なります。ただ、以下の２つのポイントはワイヤーフレーム作成のために重要なポイントなので是非抑えておいてください。
- Webサイトに掲載する内容をしっかり整理すること
- プロジェクトメンバーの認識を合わせるためのツールとして利用すること
最後に！今すぐ利用できるワイヤーフレームサンプルダウンロード
本ブログをここまで読んでいただいた皆様にワイヤーフレームのサンプルをプレゼント！下記のページからダウンロードが可能です。
Excel形式のためすぐに編集・修正できます。
【無料サンプル】ワイヤーフレームテンプレート
Webサイト制作についてのお悩みをお持ちの方へ
「現在運用中のWebサイトを改善したいけど、具体的な方法が思い浮かばない」「新しくWebサイトを立ち上げたいけど時間や制作のためのノウハウがない」
とお考えの方はぜひライズウィルにご相談ください！
お問い合わせはこちら
当社では長くシステム開発で培った技術やノウハウを武器に最新のWeb技術やクリエイティブな感性を融合させ、多岐にわたるITサービスをご提供しています。
特にクリエイティブ事業部では、お客様の商品やサービスを広く宣伝、アピールするお手伝いをさせていただいているので、興味がある方は当社Webサイトをご覧ください。
ライズウィルについて詳しく知る
ライズウィル制作実績
