ワイヤーフレームとは？作成ツールや作成手順をプロのデザイナーが徹底解説！

フォーカスしたいもの

ワイヤーフレームはホームページを制作する上で、詳細なwebデザインに入る前の配置などを決めるために制作されます。

ワイヤーフレームを作る事は制作する側だけにメリットがあるものと思われがちです。しかし、クライアントにも大きなメリットをもたらすものです。

ワイヤーフレームを作る事で、クライアントや制作する側、両者が同じ品質の完成形を共有出来ます。

今回の記事では、ワイヤーフレームを作る目的からメリット・デメリット、作成する際のポイントを紹介していきます。

また、ワイヤーフレームを作る際のおすすめのツールやワイヤーフレームのテンプレートも公開いたしますので、制作の参考にしてください。

ワイヤーフレームとは？

ワイヤーフレームを一言で表すと、「webページのレイアウトを定める設計図」で、webサイトの制作において欠かせないもののひとつです。

ワイヤーフレームは名前の通り、ワイヤー「線」とフレーム「枠」で作成された設計図で、webサイト制作において、クライアントの依頼やサイトの目的を表現した基礎のUI（ユーザーインターフェース）です。

見た目の部分を決定する前にワイヤーフレームを作成するので、仕様自体を制作以前に変更する事も可能。

制作にとりかかる前にワイヤーフレームを作成し、クライアントとの相互確認をしておくためにも有用なものなのです。

ワイヤーフレームを作る目的

ワイヤーフレームを作る目的は、制作するwebサイト上のさまざまな情報の配置を決定するためにあります。

クライアントからの要望などをくみとり、webサイトのどの部分に設置するべきか、UI/UXを意識した配置を考えるためにも重要です。

制作をする前に操作性や機能について確認し、ワイヤーフレームを中心においてクライアントやチーム内でのやり取りのための仕様書、という位置付けでの活用をしているケースも存在します。

ワイヤーフレームを作成するメリット

ワイヤーフレームを作るメリットは、ブラウザ上で確認し実際のサイズ感を把握出来る事が挙げられます。

ワイヤーフレームにする事で、テキストの挿入もテストが容易となり、文字数まで設定したレイアウトも高い精度で対応が可能です。

クライアントからの依頼やチーム内での意見をワイヤーフレームに視覚化する事で、要素の過不足を確認出来る点もメリットです。

ワイヤーフレームを作成するデメリット

ワイヤーフレームは線と枠だけの単純化した設計図ですが、簡単に作れるものではありません。

事前に制作するwebサイトの情報を洗い出し、設計を具体化・整理する必要があります。

しかし、この部分に時間を費やす事で今後の制作進行や、クライアントとの確認作業が各段にスムーズになるのは事実です。

ワイヤーフレームとデザインカンプの違いとは？

Webサイトの制作において混同されやすい「ワイヤーフレーム」と「デザインカンプ」ですが、両者は全く異なるものです。

それぞれの特徴について解説します。

ワイヤーフレームとは

ワイヤーフレームとはどこに何を配置するかというサイトのレイアウトのことを指します。

実際にデザインを決める前に作るものであり、デザインを決定する骨組みの役割です。例えると絵を描くときの下書きのようなイメージです。

サイトのどの場所に写真を入れるのか、どこに記事を置くのか、どこに広告を配置するのかなどを考える作業で、共同でサイトを作るときや外部の業者にデザインしてもらうときなどに方向性を決めるのに役立ちます。

デザインカンプとは？

デザインカンプは完成見本のことを指します。ワイヤーフレームが骨組みやベースの部分であるのに対し、こちらは実際にデザインを組み込んででき上がったものとなります。

クライアントのニーズに合わせてデザインを決め、このデザインカンプをいくつか作って提案するといった使われ方をすることがほとんどです。

ワイヤーフレーム作成する際のポイント

ワイヤーフレームを作る上でのポイントをご紹介します。

事前にディレクトリマップを作成する

ワイヤーフレームを作る前にディレクトリマップを必ず作るようにしましょう。

ディレクトリマップにおいて、サイトの制作に必要なページ数やコンテンツを確定した上で、ワイヤーフレームの作成をします。

必要ページ数やコンテンツが確定していない状態でワイヤーフレームを作っても、途中でワイヤーフレームを修正する事になり、余計なコストがかかってしまいます。

どのwebページから作成をしていくのか、優先順位を決める

ディレクトリマップを確認しながら、どのページから作成していくのか順番を確定しましょう。

ヘッダーやフッター、サイドバーなどは、どのページでも共通のデザインを用いる事がほとんどなので、こういった部分から決定していくと良いでしょう。

他にもワイヤーフレームをチェックしていく事で、ページが違っても同じブロックや情報を流用する事が可能、と判断出来ます。このような部分から作成する事で、作業コストが効率的に軽減出来ます。

参考にしたいwebサイトをしっかり分析して作成する

ワイヤーフレームの作り方に慣れていない場合、どのようなレイアウトにすればいいのか悩んでしまうのではないでしょうか。

そういった時は、制作するwebサイトの競合サイトや、大手企業のwebサイトなどをチェック・分析しましょう。

さまざまなwebサイトをチェックし分析する事で、コンテンツの配置の仕方や、デザインの手法などを参考に出来ます。

スマホ版とPC版のワイヤーフレームは別々に作成する

スマートフォンでwebサイトの閲覧をすると、PC版と比較して横幅が狭いレイアウトがほとんどです。

PC版だけのレイアウトしか用意していないと、スマホでwebサイトを閲覧した時に表示が適切でない事による、「見にくい」「操作しにくい」といった事態になってしまいます。

ワイヤーフレームを作り込みすぎない

ワイヤーフレームはあくまでもレイアウトを定める設計図です。

サイトのデザインまで作り込んでしまい、ワイヤーフレームの作成に無駄に時間をかけてしまう事がないよう、注意が必要です。

ワイヤーフレームは、基本はモノクロで線と枠だけでとどめるよう注意しましょう。

ワイヤーフレームの作成におすすめのツールを6つ紹介

ワイヤーフレームを作る上でおすすめのツールを6つご紹介します。

Excel

Webサイト制作のワイヤーフレームはエクセルでも作ることができます。

ワイヤーフレーム作成ツールを使っていない場合、エクセルでワイヤーフレームを作っているという人が多いのではないでしょうか。

他のツールと比べるとシンプルで簡単なイメージ共有であればExcelでも十分である場合がほとんどです。

Excel

PowerPoint

プレゼンテーションソフトである「Microsoft PowerPoint」を使ってワイヤーフレームを作成することができます。最大のメリットは多くのパソコンにインストールされていること。操作に慣れている方が多く、共有のしやすさがあります。

また、PowerPointは□や△などの図形を直感的に配置しやすいというのも特徴のひとつです。

逆に、難点は複雑なレイアウトのワイヤーフレームの作成に向いていないこと。

ホームページの内容によっては、ExcelやPowerPointでのワイヤーフレーム作成が不便になることに注意が必要です。

PowerPoint

 Adobe XD

Adobe XDは多くのWeb制作会社がワイヤーフレームを作成する時に使うツールで、少し高度な印象のあるワイヤーフレームツールです。

ツール自体がワイヤーフレームやモックアップを作成するために作られたものなので、数多くの便利な機能が備わっています。

Adobe XDの特徴としてクラウド上でデータを管理・共有できることが挙げられます。

また、アニメーションを追加できたりPowerPoint感覚でデザインを作成できたりと、高度な機能を使うことができる点も大きなメリットです。

Adobe XDを使えば、より具体的な完成図をメンバーと共有することができます。リアルタイムの共同編集やコメント機能もあり、Adobe XDがインストールされていないパソコンでもコメントが可能です。

Adobe XD

Adobe Photoshop

Adobe Photoshopでもワイヤーフレームの作成は可能です。
画像の編集やイラストの作成など、Web制作で利用されることの多いツールです。テキストの挿入や装飾などもおこなえ、ワイヤーフレームはもちろん、デザインカンプの作成にも使えます。

Adobe XDの正式リリースがされる前は、Adobe Photoshopでの作成が主流でした。

他Adobeツールとのデータの同期が可能で、ワイヤーフレームが完成した後に、そのままデザインの作り込みができるのもAdobe Photoshopを使うメリットのひとつです。

Adobe Photoshop

CACOO

クラウド型のワイヤーフレーム作成ツールで、インターネットさえあれば、いつでもどこでもアイディアを共有できるワイヤーフレームツールです。

日本語のため解説もわかりやすく、リアルタイムの共同編集機能や、コメント/チャット機能がついていることが特徴です。

PC版だけでなく、スマホ版（iOS/Android）、アプリ版のワイヤーフレームの作成が可能です。

無料のテンプレートや図形などが用意されており、メンバーの編集権限を個別で管理することが可能です。

メンバーやクライアントと、安全かつ、効率的に情報の共有ができます。

CACOO

Figma 

Figma はオンライン上で簡単にワイヤーフレームを作成できるツールです。

時間や場所を選ばずに利用でき、アカウントさえ取得していれば、オフィスにいなくても作業をおこなえます。

自宅や離れたワークスペースでの作業が可能となり、業務効率アップが期待できます。

リモートワークを推奨している企業におすすめのツールです。

Figma

ワイヤーフレームの作成手順

ここからは、実際にワイヤーフレームを作っていくための手順を紹介していきます。

ページに掲載する情報を事前に準備！

まずは、作成するページに必要な要素を用意します。

WebサイトのトップページであればWebサイトのイメージを伝える画像やロゴ、どのようなサイトなのか要約したもの、メニューなどが必要です。

もし現状だと曖昧な場合は、思いつく限りWebサイトに掲載する情報を書き出してみましょう。

「アイキャッチ」「ロゴ」「会社情報」「SNSへのリンク」「キャッチコピー」など、多くの要素が書き出せるはずです。

コンテンツの幅を設定する

実際にWebサイトに設置するためのコンテンツの幅を決めます。

上記で挙げられた必要な要素をどのくらいの大きさでコンテンツとして成り立たせるのかを決めることで、Webサイト全体のバランスやデザインをまとめやすくなります。

ヘッダー・フッターを設定する

コンテンツの幅・大きさが決まったら、ヘッダー・フッターを設定します。

ページが遷移してもヘッダー・フッターは原則、変わらないので事前に決めておくことで、Webサイト全体のデザインの統一感が保たれます。

グローバルナビゲーションを設定する

グローバルナビゲーションとはWebサイトのすべてのページに共通で表示された自サイトの各ページへのリンクのことを指します。

一般的にはWebサイトの上部やサイドバー、ページの下部にメニューボタンやタブ、テキスト等で表示されます。

 レイアウト（カラム）を設定する

その後、より詳細に「どのようにコンテンツを配置するのか」を決定していきます。

レイアウトは一から考えるというより、代表的なパターンから選ぶのが一般的となります。

代表的なパターンには以下の4種類があります。

• マルチカラムレイアウト

• シングルカラムレイアウト

• フルスクリーンレイアウト

• グリッドレイアウト

マルチカラムレイアウト

マルチカラムレイアウトは複数の列に分割されたレイアウト。

左右のどちらかにサイドバーを配置した2カラムレイアウト、サイドバーが左右に配置された3カラムレイアウトなどが代表的です。

左右で別々の情報を表示できるため、ユーザーのアクションがスムーズになります。

サイト内の回遊性（ユーザーがサイトをどれくらい閲覧したか）を促進できることも魅力です。

シングルカラムレイアウト

シングルカラムレイアウトは縦長に1つのカラム（列）を並べたレイアウト。

シンプルであるがゆえに、ユーザーにとってもストレスなく閲覧できるのが特徴です。

スクリーンサイズの小さなスマートフォンでは、シングルカラムレイアウトの見やすさが大きなメリットとなります。

商品販促のためのランディングページで採用されることが多いです。

フルスクリーンレイアウト

フルスクリーンレイアウトは、画面いっぱいに写真や動画を表示させるレイアウト。

一点突破の訴求力が魅力で、良くも悪くもビジュアルのクオリティに大きく左右されるレイアウトです。

ハイブランドのサイトなど、世界観を伝えたいケースに採用されることが多いです。

グリッドレイアウト

グリッドレイアウトは同じ大きさの正方形（または長方形）で構成し、タイル状にカードを並べたように配置されたレイアウト。

多くの情報を見せることが可能でページ全体の統一感を出しやすいのがメリットです。

グリッドレイアウトはブログサイトのTOPページでよく利用されています。

レイアウトの設定で重要なのは「このページはどのような目的で作るのか」を考慮することです。

また、想定しているユーザーが主に使用しているデバイスに合わせ、見やすいであろうレイアウトを決めることも重要となります。

設定したレイアウトに沿って掲載したい要素を整理しながら配置する

コンテンツのサイズが決定しヘッダー・フッター・グローバルナビゲーションが決まった後に「どの情報を」「ページ内のどこに」配置するかを決めていきます。

設定したレイアウトのパターンに沿って、コンテンツを設置していきましょう。

まとめ

ワイヤーフレームはWebサイトの制作を始める前に作っておくことで、大きなメリットを生むものです。

制作をするメンバーだけでなく、クライアントとの相互確認のためにも活用できます。

また、Webサイトの制作を開始する前に相互確認をしておくことで、クライアントが求めるものと完成イメージが乖離することを最小限にできます。

導入を検討している方は一度、作ってみることをおすすめいたします。Webサイト制作の効率化と、クライアントとの精度の高い確認作業にもつながるでしょう。