Webサイト制作やリニューアルの際に必ず必要なのが「ワイヤーフレーム」。非デザイナーやWeb制作に詳しくない方でも、なぜ必要なのか、どんな内容が必要なのかが分かれば初心者でも作成できます。この記事では、ワイヤーフレームの基本知識から具体的な作り方、おすすめのツールを詳しくご紹介します。

ワイヤーフレームとは

ワイヤーフレームとは、Webページのレイアウトを定めた設計図です。「ワイヤー（針金・線）」とあるように、シンプルな線と枠のみで配置を決めて行きます。

ワイヤーフレームを作成することで、Webサイトの発注側と制作側で共通の認識をもつことが可能です。

ワイヤーフレームを作成するのは誰？

Webサイトを制作する場合、ワイヤーフレームを作るのは制作会社のPMかディレクターの仕事です。状況によってはデザイナーが担当することもあります。

ワイヤーフレームを作るときはイメージに偏りがでないように、一人で作るのではなく、Webサイト制作に携わる関係者を巻き込んでチームで作るのが効果的です。チームにはクライアントも含まれます。

ワイヤーフレームの作成が必要な3つの理由

「レイアウトは、Webサイトを作りながら決めていけばよいのでは？」と考える人もいるかもしれません。ワイヤーフレームの作成が必要な理由について解説します。

1. 情報整理

ワイヤーフレームを作成せずにサイト制作に着手すると、伝えたい情報やメッセージをうまく伝えることができません。情報が整理されていないため、効果的な訴求ができないのです。

どのような情報を掲載するのか可視化することで、足りない情報や要素に気が付きやすくなります。デザイン制作後に修正するよりも、ワイヤーフレームの状態で修正するほうが手間もかからず、制作工程を効率化できます。

2. Webサイトのレイアウトを共有する

Webサイト制作には、ディレクターからエンジニア、デザイナー、ライター、クライアントまで多くの人が関わります。より良いWebサイトを作るためには、関係者が同じ目線にたって議論することが必須です。そこで、ワイヤーフレームが役立ちます。

ワイヤーフレームをもとに議論することで、関係者間の認識のズレが生まれにくく、完成間近の大幅な修正や方向性転換を避けられます。

3. メンバー間のアイデアの創出を促進

ワイヤーフレームを作成することで、Webサイト制作にかかわるメンバー全員で共通の認識をもつことができます。ある程度、レイアウトが決まったらかんたんなデザインを決めることも可能です。

追加や修正もすぐに対応できるため、多くのアイデアを集め、さまざまなパターンを試せるメリットがあります。

ワイヤーフレームの作り方5STEP

ワイヤーフレームの作成方法は、5つのステップにわけられます。

1. 要件定義
2. 要素の優先順位を決める
3. レイアウトを決定する
4. ラフ案を書く
5. ツールに落とし込む

それぞれかんたんに解説します。

STEP1. 要件を定義する

Webサイトは種類によって掲載情報が異なります。一般的なWebサイトなら、アイキャッチ、ロゴ、問い合わせページ、会社概要、キャッチコピーなどの要素が必要です。とりあえず「こんなものがあるな」とどんどん書き出していきましょう。

STEP2. 要素の優先順を決める

Webサイトを開いたときに上部にあるエリアをファーストビューと呼びます。STEP1で出した要素のうち、どの要素をファーストビューにもってくるのか優先順位を決定します。

一般的なWebサイトは、ページの下にある要素ほど見られません。そのため、ファーストビューには訪問者を引き付けたり、行動させたりする要素を設置すべきです。たとえばLPの場合、キャッチコピーやメインビジュアル、専門家の評価・受賞歴、CTAボタンの4つの要素が効果的だと思われます。

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

一般的なWebサイトのレイアウトは「ヘッダー」「フッター」「ナビゲーション」「コンテンツ」「サイドバー」の5つのパーツを組み合わせて構成されます。それぞれ以下のような役割があります。

これらのパーツを配置するレイアウトは4つの種類に分けられます。

レイアウトによって1ページで伝わる情報量が異なります。制作するWebサイトのターゲットを踏まえたうえで、どのレイアウトを使うのか決めると良いでしょう。

Figmaはレイアウトを変更しやすい「Auto Layout機能」を備えています。

関連記事：FigmaのAuto Layout機能でデザインの作業効率アップ！ 修正・変更に耐えうるデザインデータのつくり方

STEP4. かんたんにラフ案を紙に書く

ワイヤーフレームを作成するときは、修正がしやすいように基本的にデザインを作りこまないことが大切です。ワイヤーフレームツールも便利ですが、ツールを使う前に紙にペンでラフに書いてみるのがオススメです。

紙のワイヤーフレームは、社内のメンバー同士で共有しやすく、配置の変更や修正もかんたんです。意見を出し合いながら書きこめるため、ツールで仕上げる前に完成度の高いラフ案を作成できます。

STEP5. ワイヤーフレームツールで仕上げる

紙に書いたラフ案をもとに、ワイヤーフレームツールでデジタル化します。Webサイトはパソコンとスマートフォンでは見え方が異なり、それぞれに最適なレイアウトをつくることが大切です。端末に合わせてプレビューできるツールを選ぶことで、効率的にワイヤーフレームを作成できます。

デジタル化したワイヤーフレームは、発注側と共有が可能です。

ワイヤーフレームにおすすめのツール4選

ワイヤーフレームの作成に使用するツールを選ぶときは、以下のポイントに着目して選ぶことが大切です。特徴、対応OS、共有機能、スマホ対応（アプリ）料金プランを解説します。

• 使いやすさ
• 共同編集が可能か
• 多様なOSに対応しているか

自社にとって使いやすいワイヤーフレームツールを探してみてください。

1. Figma

▲出典：Figma

『Figma（フィグマ）』はデザインや開発に便利なデザインツールです。無料と有料プランがありますが、無料でも共有機能やコメント機能を使えます。ワイヤーフレームからそのままプロトタイプを作成して共有したり、発注側と共有したりしたいときは、ビジネスプランがおすすめです。

作成したファイルは、SlackやMicrosoft Teamsなどと連携できるため、プロジェクトを効率よく進めることができます。

2.AdobeXD

▲出典：Adobe Creative Cloud

『AdobeXD』はプロトタイピング作成ツールです。2023年1月に単体プランが終了しました。従来の単体で利用している人は使うことができますが、新しく利用するには『Adobe Creative Cloud（アドビクリエイティブクラウド）』の契約が必要です。

作成したファイルの共同作業はアカウントが必要ですが、閲覧のみならアカウントは要りません。Adobeの他ソフトとシームレスに利用できるため、制作環境でAdobeを中心に使用しているならおすすめのツールです。

3. Cacoo（カクー）

▲出典：Cacoo

『Cacoo（カクー）』はクラウドベースのビジュアルコラボレーションツールです。利用にはインターネット環境が必須ですが、リアルタイムで共有しながら作業を進めることが可能です。

同社運営のサービス『Backlog』などとの連携はもちろん、SlackやGoogleドライブなどとも連携できます。クラウドベースが基本ですが、社内規定などで難しいときはオンプレミスバージョンの利用も可能です。

4. Sketch（スケッチ）

▲出典：Sketch

『Sketch（スケッチ）』は2010年に登場したベクターグラフィックエディターです。利用にはデスクトップアプリのインストールが必要ですが、オフラインでも使えます。

チームで共有するときは「Sketch Cloud」にアップロードしておけば、アプリをインストールしていないメンバーも閲覧やコメントが可能です。

ワイヤーフレームを作成するときの注意点

ワイヤーフレームを作成する前に、Webサイトに掲載する情報をしっかりと整理することが大切です。ここではワイヤーフレームを作成するときの注意点について解説します。

Webサイトに掲載する情報を整理する

ワイヤーフレームを作成する前に、ディレクトリマップを作成して情報を整理します。ディレクトリマップとは、すべてのWebページのタイトルやURL、内容などをまとめた表のことです。どのような情報をどこに配置するのか設計したもので、ページの詳細まで書かれているのが特徴です。

クライアントとも共有しやすく、Webサイトの全体像が把握しやすくなります。レイアウトを決める前にしっかりと作りこんでおくことで、以降の行程管理にも役立ちます。

競合サイトのレイアウトを分析する

競合サイトのサイトデザインもチェックしましょう。使いやすさやわかりやすさなど、サイトの導線を分析します。

ここで注意してほしいのは、競合サイトは単純に検索結果の上位記事とは限らないということです。業種や扱うプロダクトが似ているなど、自社と共通点があるサイトに着目します。

競合サイトを見つけたら、トップページからクリックしてサイトの導線を確認します。ビジュアル面以外に、フォントサイズやメニューのレイアウトなどもチェックしてください。

下記ではLPやWebサイトなどのレイアウトの分析に役立つデザインまとめサイトを紹介しています。

関連記事：ランディングページ制作の参考にしたいデザインまとめサイト15選

できるだけシンプルに作る

デザイン要素を入れて作りこんでしまうと、気軽に変更や修正ができなくなってしまいます。「クライアントに見せるからていねいに作らないと」と思う人もいるかもしれませんが、修正に多くの工数がかかってしまうため、効率的ではありません。

すぐに意見を反映させられるように、できるだけシンプルにつくるのがコツです。

ブラッシュアップをくり返す

一度で完璧なワイヤーフレームは作成できません。修正をくり返して仕上げていくものです。複数回のやり取りがあるのは当たり前として、意見をどんどん反映させていきましょう。

ブラッシュアップの作業を綿密に行うことで、精度の高いワイヤーフレームを作成できます。

Webサイトの制作はGIGにおまかせください

ワイヤーフレームを作成することで、掲載する情報の整理やレイアウトなどのアイデアを共有できます。作成を助けるツールにはさまざまな種類があるため、無料期間などを活用して使いやすいツールを選んでみましょう。

「一から作るのは少し不安」「誰かサポートしてほしい」とお考えなら、株式会社GIGにおまかせください。

株式会社GIGはWebコンサルティング、UI/UXデザイン、システム開発などDX支援をおこなうデジタルコンサルティング企業です。WebサービスのコンセプトからSEOキーワード、検索ボリュームなどをふまえてディレクトリマップを制作し、ワイヤーフレーム作成などコーポレートサイトにおけるあらゆる設計やコンテンツ制作を承っています。

相談は無料です。WebやDXでお困りの方はぜひお気軽にご相談ください。

■株式会社GIG
Webサイト制作/運用のお問い合わせはこちら
会社紹介資料のダウンロードはこちら
採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

GIG BLOG編集部

株式会社GIGのメンバーによって構成される編集部。GIG社員のインタビューや、GIGで行われたイベントのレポート、その他GIGにかかわるさまざまな情報をお届けします。