- 公開日： 最終更新日：
ワイヤーフレームとは？役割・作り方・作成に使えるツールを解説
ホームページ制作では、必ずと言って良いほどワイヤーフレームが作成されます。
ワイヤーフレームとは、サイト全体の各ページを線画で表現したもので、各ページのコンテンツ配置を視覚的に把握できる設計図のような資料です。
当ページでは、ワイヤーフレームとは何か、役割、作り方、作成で利用するツール、よく似た言葉、FAQについて解説します。
ワイヤーフレームとは
「ワイヤー」とは線、「フレーム」とは枠を意味し、ワイヤーフレームとは、Webサイトの完成イメージを線と枠だけで表現した資料のことを指します。
ワイヤーフレームにはビジュアル要素が含まれていないため、ホームページの見た目を把握することはできませんが、サイト全体の各ページにどのようなコンテンツがどこに配置されるかを確認することができます。
ビジュアル要素が含まれると、コンテンツだけに集中して確認するのが難しくなります。そのため、ホームページ制作においてワイヤーフレームの作成は、期待通りの成果を実現するために必須のステップです。適切な作成と確認を行うことで、ホームページの効果を高めることができます。
なお、ワイヤーフレームは通常、ホームページ制作会社のWebディレクターがデザイナーやコーダーと協力して作成するのが一般的で、クライアントが直接作成することはほとんどありません。
ワイヤーフレームの具体例を見て理解を深めたい方は、以下のサンプルをご覧ください。
ワイヤーフレームの役割
ワイヤーフレームには3つの役割があります。
納期を短縮するため
ワイヤーフレームを作成することで、プロジェクト全体の納期を短縮することが可能です。
もしワイヤーフレームを作成せず、デザイン案を基にコンテンツや配置を確認しようとすると、修正が発生したときにデザインの調整が必要になるので、多くの時間がかかります。
しかし、ワイヤーフレームは操作性の高いツール（後述のツール例参照）を使用して簡単に作成できます。その結果、Webデザインにかかる時間が大幅に削減され、プロジェクトの納期短縮に繋がります。
ページの内容や配置を議論するため
ワイヤーフレームは、ビジュアル要素がないためコンテンツに集中して確認できます。これにより、関係者がコンテンツや配置の議論を深め、ホームページの成果を最大化できます。
ビジュアル要素のあるWebデザインで確認を行うと、デザインの印象に左右されやすくなりますが、ワイヤーフレームを使えば、コンテンツに集中して議論ができるため効果的です。
レイアウトや機能を全員で共有するため
ホームページ制作には、お客さまのWebマスターや決裁者、デザイナー、コーダー、プログラマーなど、さまざまな人が関わります。
それぞれが個別にホームページのコンテンツやリンクの配置などを伝えていると、後から「自分はそのように希望していなかった」というトラブルが発生する可能性があります。
そこで、ワイヤーフレームを使って各ページのコンテンツや配置を決定し、関係者全員で共有することで、トラブルを未然に防ぐことができます。
ワイヤーフレームの作り方
ワイヤーフレームの作り方を解説します。
1. ホームページのコンセプトと目的を確認する
ホームページのコンセプトと目的を確認しましょう。
制作するホームページの種類によって、各ページのコンテンツや配置が変わってくるため、まずはコンセプトと目的をしっかりと理解することが重要です。これにより、ユーザー目線に立ったワイヤーフレームを作成できるようになります。
2. サイト全体で共通するコンテンツを検討
ホームページには、ヘッダー、フッター、サイドナビゲーションといった、サイト全体で共通するコンテンツがあります。
これらの共通コンテンツは、サイト全体のコンバージョンに大きな影響を与えるため、まずはどの情報を掲載するのかを明確に定めましょう。
ここでは、頭の中で整理するだけでなく、実際に手書きでヘッダーやフッター、サイドナビゲーションを書いてみると、より具体的なイメージが湧きやすくなります。
3. 個々のページで必要なコンテンツを検討
個々のページで必要なコンテンツをリストアップしましょう。
この作業は、ワイヤーフレームを作成する担当者が一人で考えるのではなく、ホームページ制作に関わる全員がアイデアを出し合い、さらにライバルサイトの調査結果を活用すると効率的です。
コンテンツをリストアップすることで、訪問者にとって情報が過剰になっていないか、必要なコンテンツが不足していないかを把握しやすくなり、より成果を上げるホームページへとつなげることができます。
4. それぞれの優先順位を定める
各ページに掲載するコンテンツに優先順位を付けましょう。
ページタイトルに対して重要度が高いコンテンツはページの上部に配置し、同じ重要度のものは横並びに配置します。また、横並びの中でも優先順位を考慮し、左側に重要なコンテンツを配置するようにします。
このように優先順位をつけることで、効果的なコンテンツ配置が実現し、高い成約率を達成できるホームページとなります。
5. ワイヤーフレームを作成する
サイト全体のページで掲載するコンテンツと優先順位が定まったら、ワイヤーフレームを作成しましょう。
お客さまが作成する場合は、ExcelやPowerPointなどのツールを使えば、ホームページ制作会社に十分に意図を伝えることができます。
ワイヤーフレームの作成で利用するツール
ワイヤーフレームの作成でよく利用するツールを解説します。
Figma
Figmaは、ブラウザ上でワイヤーフレームを作成できるツールです。Figmaを利用することで、複数人での共有も行えるので、スムーズなワイヤーフレーム作成が行えます。また、ホワイトボード機能などもあり、ワイヤーフレームのアイデア出しやフィードバックがスムーズに行えることも魅力の1つです。
PowerPointやExcel
ワイヤーフレーム作成ツールは、操作に慣れるまで時間がかかることがあります。そのため、お客さまがワイヤーフレームを作成する際には、MicrosoftのPowerPointやExcelを利用することをおすすめします。
ワイヤーフレームとよく似た言葉
ワイヤーフレームとよく似た言葉を解説します。
デザインカンプ
デザインカンプは、最終的なデザインの静的なイメージです。レイアウトや色、フォントなどすべてのデザイン要素が含まれ、クライアントに確認してもらうために使用されますが、動作や反応を伴う要素は含まれません。
モックアップ
モックアップは、デザインカンプと似ていますが、動作や反応を伴う要素や簡単な操作が含まれることもあります。見た目は完成に近く、動作やユーザー体験をシミュレートするために使用されます。
プロトタイプ
プロトタイプは、デザインの動作やインタラクションを再現するモデルです。ユーザーが実際にクリックしたり、操作をシミュレートできるようになっており、ユーザビリティテストなどで使用されます。
ワイヤーフレームに関するFAQ
ワイヤーフレームに関するFAQを解説します。
自分で作成するときには丁寧に作成しないと駄目？
お客さま自身でワイヤーフレームを作成する際は、丁寧に作成する必要はありません。ホームページ制作会社に内容が正しく伝われば、Webデザインの細かいサイズや余白などは気にしなくても大丈夫です。制作会社が最適化を行ってくれます。
ワイヤーフレームを見てもイメージがつかめない
ホームページ制作会社が提出したワイヤーフレームを見ても、ホームページのイメージがつかめないと感じるお客さまは多いです。ワイヤーフレームは、イメージをつかむためのものではなく、各ページに掲載するコンテンツやその配置を定めるためのものです。したがって、イメージではなく、コンテンツに注力して確認を行いましょう。
ワイヤーフレームのまとめ
ワイヤーフレームについて解説しました。
ワイヤーフレームは、各ページのコンテンツや配置を検討するためのものであり、適切な確認や修正を行うことで、ユーザーフレンドリーなホームページに成長させることができます。
ワイヤーフレームがよく分からないとお悩みのWebマスターの参考になれば幸いです。
