【徹底解説】ホームページのワイヤーフレームを作る5STEP【おすすめツールを紹介】お知らせ

「ホームページのワイヤーフレームって何？」
「どうしてワイヤーフレームが必要なの？」
「簡単に作れるツールが知りたい」

ホームページを作るにあたって欠かせないのがワイヤーフレーム。あらかじめ作っておけば、最短のスケジュールで完成度の高いホームページが仕上がります。

しかしホームページ制作に携わる人の中には「ワイヤーフレームがなくても作れるのでは？」と思われる方もいるのではないでしょうか。そこでこの記事では、

• ホームページ制作におけるワイヤーフレームの役割
• ワイヤーフレームを作るメリット
• ワイヤーフレームの作り方
• ワイヤーフレームを作る際の注意点

について解説します。ワイヤーフレームを作る重要性が理解できる内容のため、ホームページ制作に携わる方はぜひご一読ください。

ワイヤーフレームはホームページの設計図

ワイヤーフレームはホームページの設計図にあたるもので、不動産物件で例えるなら部屋の間取り図と同じようなものです。

ワイヤーフレームを活用すればホームページのレイアウトを決められたり、メンバー同士でアイデアを出し合えたりできるようになります。

実際に作成したワイヤーフレームを元にデザイナーやライターがホームページを仕上げるため、非常に重要な役割を果たします。

ちなみにワイヤーフレームのイメージは以下の画像のようなものです。

ワイヤーフレームはホームページの設計図にあたるため、手間を惜しまずに作るようにしましょう。

ホームページ制作でワイヤーフレームを作るメリット3選

「ワイヤーフレーム＝ホームページの設計図」と言われても、何のために作るのか分からない方もいらっしゃるのではないでしょうか。ホームページ制作でワイヤーフレームを作るメリットは以下の3つです。

1. レイアウトが決めやすくなる
2. 意見が出し合いやすくなる
3. 作業がスムーズになる

順番に見ていきましょう。

1.レイアウトを決めやすくなる

ワイヤーフレームを作ることで、ホームページのレイアウトを決めやすくなります。ホームページに掲載するコンテンツの内容によって、最適なレイアウトは変わってきます。

ワイヤーフレームを作る際には「どのコンテンツを載せるか」や「どのように並べるのか」といったことを考えるため、制作に取り掛かる前段階でレイアウトを決定可能です。制作前にレイアウトを決められれば、後々の修正を大幅に減らせるため、作業がスムーズになります。

ホームページのレイアウトを決めるために、ワイヤーフレームは欠かせないのです。

2.意見が出し合いやすくなる

ホームページ制作に携わるチームメンバー同士が意見を出しやすくなることも、ワイヤーフレームを作るメリットです。

ホームページ制作現場の多くは複数人で行うため、情報共有が必須になります。情報共有時に前提となる情報がないと、意見が出しづらくなるでしょう。

意見交換が活発にならないと、完成度の高いホームページ作りが難しくなる可能性があります。しかし、ワイヤーフレームがあればホームページ制作の前提条件を共有できるため、的確な意見を出し合えるようになります。

ワイヤーフレームにはチームメンバーのコミュニケーションを円滑にする役割もあるのです。

3.作業がスムーズになる

ワイヤーフレームがあることで、ホームページ制作をスムーズに進められるようになります。なぜなら、ワイヤーフレームの作成により、文章や写真のレイアウトが整理されているからです。

仮にワイヤーフレームなしでホームページ制作に取り掛かった場合、制作途中でコンテンツの作り直しなどが発生する可能性があります。特にレイアウトを組み治す必要性が出た場合、納期の変更を余儀なくされるほど時間がかかってしまうこともあるでしょう。

ワイヤーフレーム作りは手間に感じるかもしれませんが、実はホームページを完成させるための最短ルートになるのです。

ホームページのワイヤーフレームを作る5STEP

「ワイヤーフレームってどうやって作るの？」と作り方にお悩みの方は多いのではないでしょうか。そこでここからはワイヤーフレームの作り方を5ステップに分けて解説します。

1. Webサイト全体のコンセプトを把握する
2. サイトマップを作成する
3. 掲載する情報を整理する
4. レイアウトを決定する
5. ワイヤーフレームを作る

順番に見ていきましょう。

1.Webサイト全体のコンセプトを把握する

最初に、制作予定のホームページの全体のコンセプトを把握しましょう。ホームページのコンセプトによって、掲載すべき情報が異なります。

そのためコンセプトを把握する工程を省いてしまうと、情報の絞り込みができなくなってしまうのです。「企業のアピールのため」「集客向上を目指すため」など、ホームページを作る目的はそれぞれです。

ホームページの目的を達成するために、全体のコンセプトを把握できているかどうかは非常に重要です。

2.サイトマップを作成する

Webサイトのコンセプトを理解したら、それを満たせるようなサイトマップを作成しましょう。

サイトマップとは名前の通りサイト全体の地図のようなもので、以下の画像のようなイメージです。

サイトマップがあれば全体を俯瞰できるようになるため、ホームページが完成するのに必要な作業量が見えてきます。

サイトマップ作りに悩んだときは、同じようなコンセプトで公開している他社ホームページを参考にしてみるのがおすすめです。

サイトマップを作成すればホームページの完成に必要な作業量が見えてくるため、チームメンバーにも共有しましょう。

3.掲載する情報を整理する

前項で作成したサイトマップを元に、ホームページに掲載する情報を整理します。どのページにどのコンテンツを掲載するかを、パズルのようにはめ込んでいきます。

コンテンツによっては掲載する必要がなかったり、逆にページを増やす必要に迫られたりすることもあるでしょう。この段階で各コンテンツのボリュームを決めておけば、ホームページ制作に取り掛かる際に作業がスムーズになります。

情報を整理しながら、各ページに掲載するコンテンツを決めていきましょう。

4.レイアウトを決定する

掲載するコンテンツに基づいて、各ページのレイアウトを決定します。

ホームページのレイアウトには以下のタイプがあります。

• シングルカラムレイアウト：縦長1列のレイアウト
• マルチカラムレイアウト：ページを複数の列に分割するレイアウト
• フルスクリーン型レイアウト：画像や動画を画面いっぱいに映し出すレイアウト
• グリッド型レイアウト：カードを並べたようなレイアウト

コンテンツの内容や量によって、適切なレイアウトは異なります。コンテンツの内容や、想定する読者にとって見やすいレイアウトを選ぶようにしましょう。

5.ワイヤーフレームを作る

レイアウトを決定したら、ワイヤーフレーム作りに取り掛かります。

レイアウトの中にコンテンツを埋め込んで、1ページに付き1枚のワイヤーフレームを作っていきましょう。

ワイヤーフレーム作りにおすすめのツールを後述しているため、ぜひ参考にしてみてください。

ホームページのワイヤーフレームを作る際の注意点

ホームページのワイヤーフレームを作る際は、以下のポイントを押さえましょう。

1. 配色はモノトーンで行う
2. ページごとの優先順位を付ける
3. スマホ版とPＣブラウザ版は別に作る

上記のポイントを押さえれば、ホームページ制作をスムーズに進められるようになります。一つずつ順番に解説します。

1.配色はモノトーンで行う

ワイヤーフレームを作る際は、モノトーンの配色で行うようにしましょう。ワイヤーフレームに基づいてホームページが出来上がるため「色付けしたらどうなるかな？」と気になる方は多いかもしれません。

しかしワイヤーフレームに色を付けてしまうと、以下のようなデメリットがあります。

• チームメンバーから自由な意見が出にくくなる
• デザイナーが既存の配色に引っ張られて、最適な色付けができなくなる

色が付いたワイヤーフレームによって、チームメンバーが作業しづらくなる可能性があります。

後の工程でチームメンバーが創意工夫しやすくするためにも、ワイヤーフレームはモノトーンで作るようにしましょう。

2.ページごとの優先順位を付ける

ワイヤーフレームを複数枚作る場合は、ページごとの優先順位を付けるようにしましょう。ホームページが複数ページに渡る場合は、各ページにつき1枚のワイヤーフレームを作ることになります。

しかしワイヤーフレームを作る順番を先に決めておかないと、チームメンバーの作業が滞ってしまいます。完成までのスケジュールに、支障が出てしまうかもしれません。

事前に優先順位を決めておけば、デザイナーやライターはワイヤーフレームを元に自分の作業に取り組めるようになります。

優先順位決めに迷ったときは、チームメンバーとも話し合うようにしましょう。作るべきワイヤーフレームが複数ある場合、優先順位を決めておけばチーム全体の作業がスムーズに進められます。

3.スマホ版とPＣブラウザ版は別に作る

スマホ版とPCブラウザ版は、別に作ることがおすすめです。近年ではPCよりもスマホが主流になっているため、両者それぞれで読みやすいページを作る必要があります。

スマホとPCでは画面の大きさが異なるため、両方に対応するためにはそれぞれ別のレイアウトで作成する必要があります。

スマホ版とPC版それぞれで見やすいレイアウトを考え、ワイヤーフレームを別々に作りましょう。このような配慮が、より多くのユーザーから好印象を持たれるホームページ作成を可能にします。

ホームページのワイヤーフレームを作るおすすめツール4選

「ワイヤーフレームって何のソフトを使って作ればいいの？」と疑問を持たれる方は多いのではないでしょうか。そこでここからは、ワイヤーフレーム作りにおすすめのツールを4つ紹介します。

1. Adobe XD
2. パワーポイント
3. エクセル
4. Cacoo

各ツールとも特徴があるため、ご自身に合うものを使いましょう。

1.Adobe XD

Adobe XDはWebサイトやモバイルアプリに特化したデザインツールで、ワイヤーフレーム作りにうってつけです。

Adobe XDでワイヤーフレームを作るメリットは以下の3つです。

• 複数の要素を一気に複製できるため、作業を高速化できる
• 作成物をWeb上で共有が可能
• PNG・PDFへの書き出しが簡単

Adobe XDで特におすすめなのが、「リピートグリッド」という複数の要素を一気に複製できる機能です。同じ要素の羅列が続く場合はコピペよりも早く作れるため、作業が一気に高速化します。

月額1,298円かかりますが、7日間は無料版を体験できます。ワイヤーフレームを作る機会がある方は、まず無料版を試しに利用してみるのがおすすめです。

2.パワーポイント

資料作成でおなじみのパワーポイントも、ワイヤーフレームを作るのにおすすめのツールです。

パワーポイントでワイヤーフレームを作るメリットは、以下の2つです。

• 図形の種類が豊富なために作りやすい
• 使い慣れている人が多いため、アイデア出しの時に他のスタッフも書き込みやすい

ワイヤーフレームを作ったことがない方でも、パワーポイントを使ったことがある方は多いのではないでしょうか。ワイヤーフレーム専用ソフトと違って、使い方をゼロから習得する必要がありません。

初めてワイヤーフレームを作られる方は、パワーポイントで作ることから始めてみてはいかがでしょうか。

3.エクセル

表計算やグラフ作りに最適なエクセルも、ワイヤーフレームを作るのに有効なツールです。エクセルを使ったことがないという方は、なかなかいないでしょう。

エクセルでワイヤーフレームを作るメリットは、以下の3つです。

• マスで区切られているので、情報整理がしやすい
• サイトマップ作りにも最適なため、ワイヤーフレームと同一ファイルで進行できる
• 使い慣れている人が多いため、アイデア出しの時に他のスタッフも書き込みやすい

エクセルはマスで区切られている仕様のため、セルの結合を駆使すれば見やすいワイヤーフレームを作ることが可能です。

エクセルでワイヤーフレームを作る場合も、ツールの使い方をゼロから覚える必要がないため、すぐに進められます。

4.Cacoo

制作するワイヤーフレームの枚数が多い場合は、Cacooを導入するのも選択肢の一つです。Cacooはワイヤーフレーム専用ツールのため、他よりも作業を高速化できる機能を豊富に搭載しています。

Cacooのメリットは以下の3つです。

• テンプレートがあらかじめ揃っているため、レイアウトを書く工程を省ける
• パソコンにソフトをインストールする必要がない
• エクスポート形式が豊富(PNG/SVG/PDF/PS/PPT)

利用料は月額660円、14日間は無料での利用が可能です。ワイヤーフレーム作りを効率的に進めたい方は、ぜひ導入を検討してみましょう。

まとめ

ワイヤーフレームはホームページの設計図になるため、作成することにより制作作業が効率化できます。

ホームページを制作する際に「ワイヤーフレームを作るのは面倒…すぐにホームページ作りに取り掛かりたい」と思われるかもしれません。

しかし、ワイヤーフレームがあればチームメンバーと完成イメージが共有可能です。さらにスケジュールを組み立てたり、アイデアを出しやすくなったりするなどメリットがたくさんあります。

決めたれた納期通りに完成度の高いホームページを仕上げるため、ワイヤーフレームをしっかり作ることをおすすめします。