Webサイトのワイヤーフレームの作り方|無料テンプレートも紹介|Webサイト制作・CMS開発|LeadGrid

Webサイトのワイヤーフレームの作り方|無料テンプレートも紹介

目次

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

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

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

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

ワイヤーフレームとは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種類まとめました。


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

マルチカラムレイアウト

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

グリッド型レイアウト(カード型/タイル型)

特徴

それぞれのコンテンツを縦に配置する

複数のカラム(列)を配置する

コンテンツをWebサイト全体に配置する

複数のコンテンツをカード状(タイル状)に配置する

メリット

  • レスポンシブデザインに対応しやすい

  • ストーリーを作りやすい

  • サイドメニューからいつでも他のメニューを探せる

  • 情報量を整理しやすい

  • インパクトを与えられる

  • 写真や動画が活きる

  • おしゃれで遊び心がある

  • 多くの情報を掲載できる

デメリット

  • 縦に長くなりすぎると読みにくい

  • コンテンツの品質が低いと寂しく見える

  • レスポンシブデザインに対応しにくい

  • 掲載できる情報量が限定される

  • テキストが少ないため何のサイトかわかりにくい

  • 制作のハードルが高め

  • コンテンツごとの棲み分けが難しい

  • Webサイトのイメージが画像の質に左右される

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の詳細はこちら

コーポレートサイトをリニューアルすべきタイミングや実行方法をマニュアルにしました

マニュアルを見る

リード獲得に強いCMS・Webサイト運用ツール LeadGrid

LeadGridを使えば、Webマーケティングに強いサービスサイト、オウンドメディア、コーポレートサイト制作をスピーディに制作可能です。

ページを見たまま編集できる「ページ編集機能」や「フォーム管理機能」など、Webの知識がなくても担当者ベースで施策が実行できます。

くわえてご希望の方には、WebマーケティングやSEOコンテンツの設計、運用、分析までトータルでご支援しています。

Webサービスやオウンドメディアの立ち上げ、コーポレートサイトリニューアルなど、御社のプロジェクトをお気軽にご相談下さい。

得意領域

  • Webマーケティングに強いWebサイト制作
  • サービスサイト、オウンドメディアサイトの立ち上げ
  • Webマーケティングの戦略設計、運用支援

記事を書いた人

LeadGrid BLOG編集部

LeadGrid BLOG編集部

LeadGrid BLOG(リードグリッド ブログ)は、リード獲得に役立つ情報を発信するWebマーケティングメディアです。

お役立ち資料

サイト制作、マーケティング戦略設計、コンテンツ制作、Webコンサルティング
関連のお役立ち資料をご紹介します。

Web制作・CMS開発・Webマーケティングに関してお気軽にご相談ください。

多くのWeb制作、オウンドメディア制作、Webコンサルティング、コンテンツマーケティングの実績から制作から運用・改善までトータルでサポートします。