Webサイトのワイヤーフレームの作り方｜無料テンプレートも紹介｜Webサイト制作 / CMS・MAツール｜LeadGrid（リードグリッド）

Webサイト構築やリニューアルで欠かせないワイヤーフレームの作成。

ワイヤーフレームは凝って作る必要はないものの、作成の意味や流れを知らないままだと十分に機能しない可能性があります。

そこで本記事では、ワイヤーフレームの作り方を4ステップで解説。ワイヤーフレームの役割や作成の注意点も解説し、基本的な部分を抑えられる内容となっています。

最後には参考になる無料のテンプレートも紹介しているので、ワイヤーフレームの作成に悩む人はぜひご覧ください。

企業サイトを制作する意義や制作上のポイントといった、ワイヤーフレームを制作するときに必ず意識すべき前提知識は無料配布資料「Webサイト集客入門ガイド」や「売上が伸びるBtoBサイト制作のポイント」といった資料をお手元に保存し、活用すると安心です。

Webサイト集客入門ガイド|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com

売上が伸びるBtoBサイト制作のポイント|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com

ワイヤーフレームとはWebページのレイアウト設計図

ワイヤーフレーム（wireframe）とは、Webページのレイアウトを決める設計図のことです。

たとえばWebサイトのトップページは、上からヘッダー、ナビゲーションメニュー、メインビジュアル・コンテンツ、フッターの順番になっています。これらの構成をもとにして、具体的にどのような情報をどこに掲載するのかを決めるのがワイヤーフレーム作成です。

Webサイトのレイアウトはページによって異なるため、ワイヤーフレームはWebページのレイアウトの数だけ作成すると覚えておきましょう。

ワイヤーフレームについては下記の記事でも解説しています。

関連記事：Webサイト制作で必要な情報設計・画面設計とは

ワイヤーフレームを作成する目的と役割

ワイヤーフレームを作成する目的と役割は下記3点が挙げられます。

• Webサイトのレイアウトを決めるため

• プロジェクトメンバーと認識を一致させるため

• ページ内容のアイデアを出すたたき台にするため

Webサイトのレイアウトを決めるため

ワイヤーフレーム作成の最大の目的は、Webサイトのレイアウトを明確にすることです。

Webサイトのレイアウトをデザインありきで決めてしまうと、見た目だけを追求した使いにくいWebサイトになってしまいます。ワイヤーフレームを作成すれば、コンテンツありきの機能的なWebページを組み立てられるのです。

プロジェクトメンバーと共通認識を持つため

Webサイト制作には、ディレクターやライター、デザイナー、エンジニア、コーダーなどさまざまな担当者が関わります。ワイヤーフレームを作成することでプロジェクトメンバーの認識を一致させることができ、ブレのないWebサイトを制作できるでしょう。

またWebサイトの完成イメージを持って制作を進めることで、サイトに足りない要素やいらない要素を事前にチェックすることも可能です。

ページ内容のアイデアを出しをするため

ワイヤーフレームを設計することで実際のWebページをイメージしやすくなり、具体性のあるアイデア出しを行えます。

たとえば「トップページのメインビジュアルはどの画像を使用するか？」「お問い合わせボタンはどこに配置するか？」など、ワイヤーフレームを見ながら複数の担当者で議論を交わせば、より洗練されたWebサイトを制作できるでしょう。

ワイヤーフレームの作り方4ステップ

ワイヤーフレームは下記4ステップで作成されます。

1. Webページに必要な情報をピックアップ

2. 情報の優先順位を決める

3. レイアウトを決める

4. 手書きでラフを作り、ツールで清書する

1. Webページに必要な情報をピックアップ

まずはWebページに必要な情報をピックアップしていきます。たとえば企業サイトのトップページとランディングページを制作する場合、それぞれ下記のような情報が必要となるでしょう。

■トップページの場合

• 企業ロゴ

• キャッチコピー

• メインビジュアル

• 商品・サービスの特徴

• 商品・サービス、会社が選ばれている理由

• 導入事例やお客様の声

• お問い合わせ

• 基本情報

■ランディングページの場合

• キャッチコピー

• アイキャッチ画像

• お問い合わせ

• 導入文

• 商品・サービスの情報

• メディア掲載実績や体験談

• よくある質問

• 導入の流れ

Webサイトに掲載するべき要素がわからない場合や、抜けがありそうで不安な場合は競合他社のWebサイトが参考になります。情報の抜けがないよう、思いつくものはすべて書き出しておきましょう。

2. 情報の優先順位を決める

1でピックアップした情報の優先順位を決め、どのページを上部に表示させるか判断します。一般的にWebサイトでは下層にいけばいくほどユーザーの訪問率が下がるため、重要なページはトップページなど上層に配置するようにしましょう。

このようなページ配置を「階層構造」といいます。Webサイトの構成設計は構成図（サイトマップ／サイトツリー）の作成が効果的です。Webサイトの構成設計やサイトマップ（サイトツリー）の作成方法については下記の記事でも解説しています。

関連記事：Webサイト構成の設計方法｜SEOに強いサイト構造を作るコツも解説

関連記事：サイトツリーとは？メリットと作り方やおすすめツールについても

3. レイアウトを決める

要素の洗い出しができたら、実際にレイアウトしていきます。

Webサイトのレイアウトにはいくつか定番の型があります。それぞれにメリット・デメリットがあるため、Webサイトの目的によってどのレイアウトを採用するか決めるようにしましょう。下記に代表的なレイアウトを4種類まとめました。

4. 手書きでラフを作り、ツールで清書する

決定したレイアウトに従って、まずは手書きでラフを作ります。ユーザーの目線の動きや、コンテンツの優先度を考えながら配置していきましょう。

手書きのラフが完成したらツールを使って清書します。ワイヤーフレームはデータ化することでプロジェクトメンバーに共有しやすくなるうえ、似たタイプのWebサイトを制作する際に土台として使うこともできます。

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

ワイヤーフレームを作成するときの注意点は下記の3点です。

• どのページのワイヤーフレームを作成するか優先順位を決める

• ワイヤーフレームではデザインを作りこみすぎない

• スマートフォン版は別に作る

どのページのワイヤーフレームを作成するか優先順位を決める

本来であれば、Webサイトのワイヤーフレームは全ページ分を作ることが理想的です。しかしページ数が多いWebサイトを制作する場合は、どのページのワイヤーフレームを作成するか優先順位を決めることが求められます。

下記の条件を満たすページは優先的にワイヤーフレームを作成しましょう。

• トップページ

• 制作するWebサイトのなかで重要な役割を果たすページ

• トップページとレイアウトが大きく異なるページ

ワイヤーフレームではデザインを作りこみすぎない

ワイヤーフレームはあくまでも設計図です。あとからコンテンツが変更されることもあるため、初期段階ではデザインを作り込みすぎないよう気をつけてください。

ワイヤーフレームを作るときは長方形や正方形を組み合わせてコンテンツの配置を表します。デザインの際に余計なイメージを与えないよう、モノトーンの濃淡で色を表すとよいでしょう。フォントもごく一般的なものを使うなど、ワイヤーフレームはできるだけシンプルに制作することをおすすめします。

スマートフォン版は別に作る

スマートフォンとPCは画面の縦横比が異なるため、ワイヤーフレームは別々に作る必要があります。PC版にしか対応していない場合、スマートフォンで読み込んだときにレイアウトが崩れてしまう可能性があるからです。

すべてのページでスマートフォン版を作るのは難しいですが、トップページや重要なページではスマートフォン専用のワイヤーフレームを作るべきでしょう。

おすすめのワイヤーフレーム作成ツール

ワイヤーフレームはツールを活用することで簡単に作成できます。ここではおすすめのツールを4つ紹介します。

• Figma

• Cacoo

• Adobe XD

• Sketch

Figma

▲出典：Figma

Figmaはブラウザ上で簡単にデザインができるツールです。誰でも使える操作性の高さと、共同編集できる便利さで全世界で利用されています。

デスクトップブラウザやスマートフォンのテンプレートが用意されており、手軽にワイヤーフレームを作成できる点も利用のメリットです。

なおLeadGridチームもFigmaを利用しています。

Figmaの詳細はこちら

Cacoo

▲出典：Cacoo

Cacooは株式会社ヌーラボが提供するオンライン作図ツール。簡単にアイデアを共有できるよう開発されており、リアルタイムでの編集・共有やURLでの共有が可能となっています。

iOS、Android、デスクトップWebサイトなど豊富なテンプレートも用意されているため、ワイヤーフレームの作成に不慣れな人でも使いやすいツールといえるでしょう。

Cacooの詳細はこちら

Adobe XD

▲出典：Adobe XD

Adobe XDはWebサイトやアプリ制作のためのデザインツールです。AdobeのデザインツールといえばPhotoshopやIllustraterが主流でしたが、今では使い勝手の良さからXDがよく利用されています。

デザイン作成、プロトタイプ作成、共有・コメントが可能。普段からAdobe製品を使っている人におすすめです。

Adobe XDの詳細はこちら

Sketch

▲出典：Sketch

Sketchはオランダ発のMac用デザインツールです。無駄な機能がなく動作がスムーズなことから、スペックが高くないPCでも快適に利用できます。

直感的な操作ができるため、ワイヤーフレームを初めて作る人にもおすすめ。プラグインも豊富にあり、自分好みにカスタマイズもできます。

Sketchの詳細はこちら

【無料】参考になるワイヤーフレームテンプレート・サンプル例

最後にワイヤーフレームのテンプレート・サンプルを紹介します。無料のものを紹介しているので、ぜひご活用ください。

基本的なワイヤーフレームテンプレート（Sketch）

▲出典：Dribbble

Webサイトの基本的なワイヤーフレームテンプレートです。さまざまなページに対応するテンプレートがあるため、効率よくワイヤーフレームを作成できます。

ダウンロードページはこちら

ECサイト用のワイヤーフレームテンプレート（Sketch）

▲出典：Dribbble

ECサイト用のワイヤーフレームテンプレートです。商品の詳細ページだけでなく、店舗への案内ページなどこれ一つでECサイトに必要なワイヤーフレームを作成できます。

ダウンロードページはこちら

ランディングページ用のワイヤーフレームテンプレート（PSD）

▲出典：Dribbble

ランディングページを作成できるワイヤーフレームテンプレートです。ファーストビュー、ボディ、クロージングの3部構成で基本的なランディングページを作成できます。

ダウンロードページはこちら

ワイヤーフレームは効率的なWebサイト構築に必要不可欠

ワイヤーフレームはWebページの設計図です。プロジェクトメンバーと共同でワイヤーフレームを作りこむことで、無駄のない機能的なWebサイトを制作できるでしょう。

今回紹介したワイヤーフレームの4ステップは下記の通りです。

1. Webページに必要な情報をピックアップ

2. 情報の優先順位を決める

3. レイアウトを決める

4. 手書きでラフを作り、ツールで清書する

「ワイヤーフレームの作成が難しい」「自社でのWebサイト制作に限界を感じる」とお悩みなら、Web制作会社への依頼もおすすめです。

LeadGridではコーポレートサイト、採用サイト、ランディングページなどさまざまなWebサイト制作の実績があります。ワイヤーフレーム作成ではヒアリングを行い、Webサイトで実現したいことや目的を明確化していきます。コンテンツの統廃合や追加コンテンツの提案、クライアントに用意いただく要素の洗い出しも行いますので、スムーズな制作進行が可能です。

またLeadGridは直感的な操作が魅力のCMSで、都度エンジニアに依頼することなく担当者ベースでさまざまなコンテンツの更新・ページ追加が可能。スピード感あるWebサイト運用を実現できます。

LeadGridのWebサイト制作の実績はこちら

LeadGridの詳細はこちら