ワイヤーフレームとは？作り方や役割、おすすめのツールをご紹介

各企業のホームページやアフィリエイト用のブログを作成する際に、何の準備もなしに作り始めることはできません。

その際に必要となるものの1つとして「ワイヤーフレーム」が挙げられます。

WEB担当者の方なら、ワイヤーフレームについて知っておく必要があるでしょう。

そこで今回は、ワイヤーフレームの作り方や役割、作成する際の注意点やツールについて紹介します。

ワイヤーフレームとは？

ワイヤーフレームとは、企業のホームページや個人のアフィリエイトサイトを作成する際に、そのコンテンツ内の構造や仕組み、盛り込む内容について記したものとなります。

どのような構造になっているのか、どこにどのようなコンテンツが含まれるのか、それらを可視化し、文字と図解で記した言わばホームページの設計図です。

家を建てるときにも設計図が必要なように、WEBサイトを作成する上でも必要不可欠なものとなります。

ワイヤーフレームの役割

WEBサイトを作成するに至ってワイヤーフレームの役割として、①情報設計を行いレイアウトを決める、②情報共有、意見の照らし合わせという2つが挙げられます。

どのページにどのようなコンテンツを盛り込むのか、その順番やイメージ・文章などの配置について決めることを情報設計と呼びます。

情報設計はWEBサイトを作成する上で欠かせない要素の1つで、その情報設計を元にレイアウトを決めていき、事業部ごとのプロジェクトメンバー内で必要な情報を可視化、共有するという役割もあります。

このように重要な役割があることから、ワイヤーフレームは必ず作成します。

ワイヤーフレームの作り方とは？

ワイヤーフレームとは何か、その役割やツールについて説明しました。

それでは実際にワイヤーフレームを作成する際、作り方の手順について4つの段階ごとに分けて詳しく紹介します。

その①：サイトマップを設置する

ワイヤーフレームの作り方の第一段階として、サイトマップを設置します。

サイトマップとは、そのWEBサイト全体の構成について、樹形図や箇条書きで地図のように一覧で表したページを指します。

サイトマップはHTML内でタグを用いて手動で作ることもできますが、やり方がわからない方はWordPressなどにあるサイトマップを作るためのプラグインとインストールし、自動で設置しましょう。

サイトマップの設置はワイヤーフレーム作成のためだけではなく、後にSEOにも大きな影響を与えます。

▶サイトマップでSEO効果を高められる！？作成方法と仕組みを解説

その②：ワイヤーフレームに組み込むページを選ぶ

サイトマップの設置ができたら、次にワイヤーフレームに組み込むページをピックアップしていきます。

サイト内の全てのページを組み込むことが理想ですが、非常にたくさんのコンテンツがあるサイトや複雑な構成をしたサイトなどの場合、全てを組み込もうとすると膨大な時間がかかります。

その場合は全体的な骨組みが分かる程度に重要なページだけを予めピックアップしておきましょう。

その③：各ページのレイアウトを決定する

次に各ページのレイアウトを決定していきます。

レイアウトには、画面をいっぱいに使った「カラムレイアウト」や、文章やイメージを小さくし、横・縦並びに配置する「タイルレイアウト」、また双方の特徴を組み合わせた「マルチカラムレイアウト」などいくつか種類があります。

それぞれメリットやデメリットがあるため、コンテンツ内容やテーマに即したレイアウトを決めましょう。

カラムレイアウト

カラムレイアウトのメリットとして、画面を横に大きく使うためインパクトを与えやすく、また上から順番にスクロールするためストーリーが作りやすい仕様になります。

デメリットとして、コンテンツの量が多いと縦に長くなりすぎるため読みにくく、コンテンツに見合う画像や動画などの素材が乏しいと寂しいということが挙げられます。

このようにカラムレイアウトは、画面の幅を大きく使ってコンテンツを見せられるため、インパクトのある訴求がしやすいということが特徴となり、広告用のランディングページなどに使われることが多いでしょう。

タイルレイアウト

タイルレイアウトのメリットとして、タイル状にたくさんのコンテンツを並べることができ、情報が区切られるためスマホやタブレットといったモバイルユーザーが使いやすい仕様になります。

デメリットとして、掲載できるコンテンツが限定的になり、優先順位が付けづらいということが挙げられます。

このようにタイルレイアウトは、たくさんコンテンツをコンパクトに並べられるということが特徴となり、ブログサイトのTOPページなどに使われることが多いでしょう。

マルチカラムレイアウト

マルチカラムレイアウトのメリットとして、コンテンツを整理しやすく、見せたい情報は大きく表示するなど優先順位が付けやすい仕様になります。

デメリットとして、タイル型と同じく掲載できる情報が限定的になり、モバイル端末対応がしにくいといったことが挙げられます。

このようにマルチカラムレイアウトは、コンテンツの整理がしやすく、優先順位が付けやすいということが特徴となり、コーポレートサイトやECサイトなどに使われることが多いでしょう。

その④：実際にワイヤーフレームを作る

サイトマップの設置、ページのピックアップ、レイアウトの決定ができたら、先程挙げたツールを用いて実際にワイヤーフレームを書いていきます。

WEBサイトのホームを例に挙げて、作成方法を説明すると画面の一番上から「ヘッダー・メインビュー・コンテツエリア・フッター」という4つのエリアに分割をします。

それらの情報を元に、ツールを使って各エリアごとに配置する文章やイメージ、画像などを簡潔に記していきます。

他のページのワイヤーフレームを作る際にも基本的に同じ手順で作ることが可能です。

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

作り方の手順は以上になりますが、実際に作成する際にいくつか注意点があります。

まずワイヤーフレームを実際につくる際に、サイトのデザインについてこだわり過ぎないということです。

どんな色を使うのか、文体やヘッダーのロゴはどうするのかなど、1つ1つ気にするとスムーズに作ることができません。

また、スマホやタブレットなどモバイル端末用に別途ワイヤーフレームを作る必要がある場合もあります。

WEBサイトを作るテーマによっては、自動でデスクトップ以外の端末表示に対応しているものもありますが、全てが対応しているというわけではないため注意が必要です。

ワイヤーフレームを作るためのツール3選

ワイヤーフレームは、一般的にMicrosoft Officeの「Excel」や「PowerPoint」などの表計算、スライド作成ソフトウェアで作成することができます。

しかし、初めてワイヤーフレームを作成する方にとっては、それらのソフトだと手間がかかってしまう場合があるため、ワイヤーフレームを作成するための専用ツールを使用することをおすすめします。

ワイヤーフレームを作成する専用ツールは、予め用意されている枠に必要事項を書き込むだけでワイヤーフレームを自動的に作成してくれる便利なツールとなります。

ここでは、ワイヤーフレームを作るための主なツール3選を紹介します。

Adobe社がリリースしている「Adobe XD」を使ったワイヤーフレーム作成については、以下の記事をご覧ください。

▶楽々ワイヤーフレーム制作!AdobeXDの活用術

LucidChart

「LucidChart」は、アメリカに拠点を置くLucid Software Incが提供するクラウド型のフローチャート作成ツールです。

LucidChartは、デザイン性の高いワイヤーフレームを作成することができ、チャットを通してリアルタイムに情報共有できる直感的なクラウドツールとなります。

他の専用ツールと比べて低価格で利用することができ、シンプルで充実した機能を搭載するLucidChartは、約180か国以上で1500万人以上のユーザーによって使用されています。

導入後、すぐに活用できクラウドサービスと連携することで様々な文章を直接入力することもできるため、「スピード感を持って効率よく作成したい」という企業におすすめのツールと言えるでしょう。

LucidChart：https://www.lucidchart.com/pages/ja/wireframe-software

Cacoo

「Cacoo」は株式会社ヌーラボが提供するフローチャートからワイヤーフレームを作成できるオンライン作図ツールです。

Cacooは、プロジェクトのアイデアやWEBデザインのレイアウト、作業計画などをオンライン上で簡単に作成しメンバーに共有することができます。

ワイヤーフレーム、モックアップ、フローチャート、マインドマップ、オフィスレイアウトまで豊富なテンプレートを元にあらゆる図を作成できるのが特徴です。

オンラインミーティングの時など、「チームで図を使ったコミュニケーションを効率的に行いたい」という企業におすすめのツールと言えるでしょう。

Cacoo：https://cacoo.com/ja/

Justinmind Prototyper

「Justinmid Prototyper」は、JUSTINMINDが提供するiPhoneやAndroidなどのスマホ向けサイト・アプリのワイヤーフレームを作成するツールです。

ドラッグ&ドロップで直感的に操作でき、初心者の方でも手早くワイヤーフレームが作成することができます。

また、チュートリアルが丁寧で使いやすく、無料でも十分に豊富な機能を利用することができる点が特徴となります。

初めてプロジェクトを進める際など、「無料で手軽にワイヤーフレームを作成したい」という企業におすすめのツールと言えるでしょう。

Justinmind Prototyper：https://www.justinmind.com/

ワイヤーフレームの作り方について｜まとめ

いかがでしたでしょうか。

今回は、ワイヤーフレームの役割や作り方、また注意点について詳しく紹介しました。

ワイヤーフレームは、WEBサイトを作成する上で非常に重要な役割があります。

作り方としては以上で挙げた4つの手順であるため、それほど複雑ではありません。

しかし、デザインをこだわり過ぎたり、全てのページを組み込もうとすると時間がかかってしまうため注意する必要があります。

実際に作る際には、今回紹介した内容をぜひ参考にしてください。