Weサイト制作におけるワイヤーフレームは、サイトデザインを決める重要な要素です。
「ワイヤーフレームの必要性を知りたい」
「ワイヤーフレームとデザインの違いがよくわからない」
このような悩みを抱える方は少なくありません。
そこで本記事では、ワイヤーフレームの必要性や作り方について解説します。おすすめツール5選も紹介しますので、ぜひ参考にしてみてください。
【無料お役立ち資料】
初心者でもよくわかるお問い合わせを増やすWEBサイトの作成方法
資料内容
- WEBサイト作成の流れと説明
- 各フェーズでの重要ポイント
- 問い合わせを増やすための最終チェックリスト
- 制作後の運用方法
- 制作の進め方と注意すべき点
サイト制作を依頼する際に知っておくべき内容になっていますのでぜひ無料でご覧ください。
この記事の内容
ワイヤーフレームとはWebページの設計図
ワイヤーフレームは、わかりやすく表現するならWebページの設計図です。
Webサイトを制作するにあたって、コンテンツや各ページのレイアウトなど、ユーザーニーズを踏まえながら決定しなければなりません。
ワイヤーフレームなしでWebサイト制作を進めても、軸がぶれたり開発者間での認識が合わなかったりなど、業務に支障が出る恐れがあります。
そこでワイヤーフレームを作成すれば、サイトのイメージの可視化が可能です。開発者間での認識も統一され、アイデアのたたき台にもなるでしょう。
ワイヤーフレームの必要性
それでは、ワイヤーフレームの必要性について解説します。
- Webページに必要な要素を決めるため
- 完成形を開発者で共有するため
- Webページの設計に関するアイデア出しをするため
Webページに必要な要素を決めるため
ワイヤーフレームは、Webページに必要な要素を決めるために欠かせない要素です。
Webページには、テキスト以外にも画像・動画・リンクなどさまざまな情報を盛り込み、コンテンツを充実させる必要があります。
ワイヤーフレームなしで進めれば、何度も修正や変更が必要になり生産性の低下や、余計なコストがかかるでしょう。
ワイヤーフレームで必要な要素を把握しておけば、このようなリスクを軽減できます。
完成形を開発者で共有するため
ワイヤーフレームは、Webページの完成形を開発者で共有できます。
1つのページを作成するにも、エンジニアやデザイナー、アートディレクター、Webディレクターなど複数の担当者が関わるため、情報共有は欠かせません。担当者によって認識のずれが生じれば、当初の目的とはかけ離れた内容になる恐れがあります。
始めにワイヤーフレームを作成しておけば、複数の担当者がいてもスムーズな情報共有が可能になるでしょう。
Webページの設計に関するアイデア出しをするため
ワイヤーフレームは、Webページを設計する際のアイデア出しにもつながります。
ワイヤーフレームは、線と簡単なテキストだけのシンプルな構成です。あくまでも設計図としての役割なので、ここからさまざまなアイデアの叩き出しができます。
ワイヤーフレームと混同しやすい用語との違い
サイトデザイン用語には、混同しやすい用語がいくつかあります。ここからは、ワイヤーフレームと混同しやすい3つの用語との違いを見ていきましょう。
- ディレクトリマップとの違い
- サイトマップとの違い
- デザインカンプとの違い
ディレクトリマップとの違い
ワイヤーフレームとディレクトリマップの違いは、対象となる範囲です。
- ワイヤーフレーム：1ページごと
- ディレクトリマップ：Webサイト全体
ワイヤーフレームでは1ページごとに情報をまとめますが、ディレクトリマップはサイト全体の情報をまとめて一覧表にします。
サイトマップとの違い
ワイヤーフレームとサイトマップの違いは、使用する目的とタイミングです。
サイトマップは、Webサイト全体の階層図のことで、サイトが完成してから使用します。Webサイトの訪問者に向けて、サイト構造をわかりやすく伝えるのがサイトマップの目的です。
ワイヤーフレームは、Webページを作成する前に使用するもので、社内や開発者がサイト構造を把握するために使用します。
デザインカンプとの違い
ワイヤーフレームとデザインカンプの違いは、情報を伝える相手です。
ワイヤーフレームは、社内や開発者などWebサイト制作に関わる関係者に情報を伝えます。
デザインカンプは、Webサイトが完成してからクライアントに向けて、完成したデザインの見本として提示します。
ワイヤーフレームの作り方5ステップ
では次に、ワイヤーフレームを作る5つのステップをそれぞれに解説します。
- 必要な情報をリストアップする
- 情報を優先度で並べ替える
- レイアウトを決定する
- ワイヤーフレームをスケッチする
- ツールで清書する
必要な情報をリストアップする
まずは、必要な情報を全てリストアップします。
- ロゴ
- 画像
- 会社情報
- リンク
上記はあくまでも一例ですので、リストアップする情報はこれらに限りません。
例えば、トップページなら、キャッチフレーズや各ページへのリンクを配置できる「グローバルナビゲーション」などをリストアップします。
他にもSNSのリンクやキャッチコピーなど、思いつく限りは全てこの段階でリストアップしておきましょう。
情報を優先度で並べ替える
次は、情報の優先度を決めて並べていきます。
Webサイトでは、ページが上部にあるほど見られやすい傾向があります。
優先度の情報が記載されたページを下部に設置すると見られる可能性が下がるので、ユーザーに伝えたい情報を伝えられません。
優先度の高い情報は、上部に設置してください。
レイアウトを決定する
次に、レイアウトを決定します。
- 1カラム：1列の縦並び
- マルチカラム：複数の列で構成される
- グリッド：コンテンツをカード状に並べる
- フルスクリーン：コンテンツを画面いっぱいに表示する
ページコンテンツによって、見やすいレイアウトが変わります。各ページで最適なレイアウトを決定してください。
ワイヤーフレームをスケッチする
レイアウトを決定したら、ワイヤーフレームをスケッチします。
ここでは大雑把に手書きでも問題ありません。
ユーザーにとって見やすいレイアウトを意識しながら、必要な情報が盛り込まれているか、ページの優先度が間違っていないかなどを確認してください。
ツールで清書する
そして最後に、ツールで清書します。
手書きでもある程度のイメージはつかめますが、社内で共有したりクライアントに提示したりする場合は、ツールで清書した方が見やすいでしょう。
ツールで清書しておけば、ワイヤーフレームをデータとして保存しておけます。後から見直したり、他のサイトを制作するときに参考にしたりできるでしょう。
ワイヤーフレーム作りに役立つツール6選
それでは、ワイヤーフレーム作りに役立つツールを6つ紹介します。
- Adobe Photoshop
- Adobe XD
- cacao
- Figma
- Excel
- PowerPoint< /li>
Adobe Photoshop
| 運営会社 | アドビ株式会社 |
|---|---|
| 料金（税込） | Photoshop：月額2,728円 フォトプラン：月額2,178円 コンプリートプラン：月額6,480円 |
| 主な機能 | PhotoshopのAI 生成塗りつぶし 不要なものを削除 背景変更 空を置き換え 白黒をカラーに 写真の合成 画像切り抜き |
| 無料トライアル | ◯（7日間） |
Adobe Photoshopは、ドキュメント作成から写真編集まで、幅広い用途に活用できます。
2023年9月にリリースされたバージョンには、新機能が搭載されより使い勝手が向上しているのもポイントです。
- AIによる写真編集
- 生成塗りつぶし
- 生成拡張
- 削除ツール
ワイヤーフレームの作成以外にも、Webページ制作に役立つ機能を網羅しています。
Adobe XD
| 運営会社 | アドビ株式会社 |
|---|---|
| 料金（税込） | XD単体プラン：月額1,298円 コンプリートプラン：月額6,248円 |
| 主な機能 | デザインカンプ作成 デザイン共有 プロトタイプ作成など |
| 無料トライアル | ◯（7日間） |
Adobe XDは、レイアウトを作成したいときに役立つツールです。
直感的操作が可能なので、誰でも簡単に使えます。
注目したいのは、アセット機能を搭載しているところです。要素のスタイルを瞬時に切り替えられるので、業務効率化にもつながるでしょう。
cacao
| 運営会社 | 株式会社ヌーラボ |
|---|---|
| 料金 | プロプラン：月額660円 チームプラン：月額1,980円 |
| 主な機能 | リアルタイム共同編集 コメント書き込み ビデオ通話・チャット ビデオ通話中の画面共有 |
| 無料トライアル | ◯（14日間） |
Cacaoは、クラウド型ツールなので、ネットにつながる環境があれば、時間や場所を気にせず利用できます。
シンプルで見やすいテンプレートが豊富に揃っており、専門的な知識やスキルは必要ありません。
使い方も簡単ですし、あらゆる共有方法にも対応しています。外部ツールとの連携も可能なため、業務効率化を図れるでしょう。
Figma
| 運営会社 | Figma Japan |
|---|---|
| 料金 | スターター：永久無料 プロフェッショナル：月額1,800円/年払い/人 ビジネス：月額6,750円年払い/人 エンタープライズ：月額11,250円/年払い/人 |
| 主な機能 | 共同作業 プロトタイピング 開発モード |
| 無料トライアル | ◯（要問い合わせ） |
Figmaは、複数人で共有できるデザインツールです。
作成したデザインには、好きな時間にリアルタイムでフィードバックできます。
プロトタイピング機能を使えば、ノーコードでイメージを具体化できるのでスキルや知識は必要ありません。
開発モードでは、デザインのコード化に必要な情報を簡単に取得できます。
Excel
| 運営会社 | Microsoft |
|---|---|
| 料金 | 無料 |
| 主な機能 | 文書作成 表計算 図表作成など |
| 無料トライアル | – |
Excelは無料で使えますし、カスタマイズ性に優れているのが特徴です。
テキストが多めのときも使いやすいですし、作成したフレームワークをGoogleスプレッドシートで共有することもできます。
ただし、情報量が多いと重くなることに留意しましょう。
PowerPoint
| 運営会社 | Microsoft |
|---|---|
| 料金 | 無料 |
| 主な機能 | 資料作成 スライドショー アニメーション 図表作成など |
| 無料トライアル | – |
Microsoftが提供するPowerPointは、無料で使用できるオフィス用ソフトウェアです。
PowerPointでは、スクリーンショットをそのまま使用できるので、イメージを具体化させたいときに活躍してくれるでしょう。
ワイヤーフレームの場合は、後からスクリーンショットを削除すればいいので操作も簡単です。
ワイヤーフレームを作成するうえでのコツ5つ
では最後に、ワイヤーフレームを作成するコツを5つ紹介します。
- 作成するページの優先順位を明確化する
- デザインは作らずにシンプルなワイヤーフレームを作成する
- 事前のリサーチや分析を徹底する
- スマートフォンとパソコン向けは別々に作成する
- ユーザー目線で作成する
作成するページの優先順位を明確化する
ワイヤーフレームは、作成するページの優先順位を明確化してください。
ワイヤーフレームは1ページごとに作成するため、ページ数が多くなるほど時間と手間がかかります。レイアウトによっては、1つのワイヤーフレームを使い回しもできるでしょう。
主要ページやユーザーに見て欲しいページなど、優先順位を明確化すれば業務効率化につながります。
デザインは作らずにシンプルなワイヤーフレームを作成する
ワイヤーフレームは、設計図の役目があるのでシンプルな構成を心がけてください。
デザインは、後からデザイナーが担当します。
見やすさを重視したいなら、色分けするといいでしょう。
事前のリサーチや分析を徹底する
フレームワークを作成する前に、事前のリサーチや分析を徹底してください。
そのためには、目的を明確化することも重要です。
なぜWebサイト制作を行うのか、目的を明確化しておけばリサーチや分析する内容も見えてきます。
競合他社のサイトを分析すれば、自社の弱みや強みも見出しやすいでしょう。
スマートフォンとパソコン向けは別々に作成する
ワイヤーフレームは、スマートフォン向けとパソコン向けを個別に作成してください。
パソコンでは見やすくても、スマートフォンではレイアウトが崩れて見づらくなる恐れがあります。
パソコンでもスマートフォンでも見やすいよう、デバイスに合わせてそれぞれにワイヤーフレームを作成するのが理想です。
ユーザー目線で作成する
特にユーザーがどのような視線の動きをするのか？を意識しましょう。
視線の動きは大きく、Z型・F型・N型の3つのパターンがあります。
| パターン | 視線の動き | 活用シーン |
|---|---|---|
| Z型 | 左上→右上→左下右→右下 | 画像が均一に並んでいるページ |
| F型 | 左上→右上・右下、左上→左下 | コンテンツ量が多いページ |
| N型 | 左上→左下～右上→右下 | 縦読みのページ |
上記のパターンは、それぞれメリットとデメリットが存在します。
一般的な目線はZ型ですが、ワイヤーフレームはユーザー目線を第一に考え、ユーザーにとって見やすいことを意識してください。
まとめ：ワイヤーフレーム作りのコツをおさえて魅力的なWebサイトを作ろう
ワイヤーフレームは、Webサイトの仕上がりに影響する重要な要素です。
ワイヤーフレームを作成しなかったページは、閲覧したユーザーを不快にさせるかもしれません。
本記事で紹介したワイヤーフレームを作成するコツやツールを活用しながら、ユーザーが使いやすいサイトを構築していきましょう。
【無料お役立ち資料】
初心者でもよくわかるお問い合わせを増やすWEBサイトの作成方法
資料内容
- WEBサイト作成の流れと説明
- 各フェーズでの重要ポイント
- 問い合わせを増やすための最終チェックリスト
- 制作後の運用方法
- 制作の進め方と注意すべき点
サイト制作を依頼する際に知っておくべき内容になっていますのでぜひ無料でご覧ください。
