スキル

ワイヤーフレームを参考にしつつHPを作成すれば超効率的!HP作成時に大切なワイヤーフレームの目的と注意点を解説

「ホームページを作るときはワイヤーフレームを使うと良い。」

と聞いたけど、何のことかさっぱりわからないといった方も多いかと思います。

ワイヤーフレームとは、簡単に言うとホームページを作成する際のレイアウトを決める「設計図」のことです。

今回は、このワイヤーフレームを使う目的をはじめ、ワイヤーフレームを利用する際の注意点について解説していきます。

また、ワイヤーフレームを作成するためのおすすめツールも併せてご紹介していきます。

ワイヤーフレームは何のために使う?

まず、「ワイヤーフレームを使う目的は何なのか」について解説していきます。

ワイヤーフレームを使う目的は主に以下の4つです。

1)情報を整理するため
2)ホームページのレイアウトを決定するため
3)チーム内でうまく連携をとるため
4)アイデアを出したり、議論を加速させたりするため

以下でそれぞれを解説していきます。

情報を整理するため

ワイヤーフレームの第一の目的は「情報の整理」であると言えます。

頭の中だけで考えるよりも、ワイヤーフレームを利用するほうが「ホームページのどこにどういう文章を書くか」といった構想が整理しやすくなります。

つまり、頭の中の考えやイメージを実際に見える化することで情報が整理されていくというわけです。

ホームページのレイアウトを決定するため

当たり前の話ではありますが、ホームページのレイアウトは、実に多種多様です(どういったものがあるかについては後ほど解説します)。

ホームページを作成する上では、コンテンツの中身や整理も大切ですが、「どんなレイアウトにするか」も非常に大切になります。

というのも、どんなに良いコンテンツでも、見にくい、読みにくいホームページだとユーザーは離れていってしまうからです。

なので、ワイヤーフレームを作成する際にしっかりとレイアウトを決めておくことが重要で、これをしておくとその後の作業がスムーズになります。

チーム内でうまく連携をとるため

ホームページは1人で黙々と作成するよりもチームと連携しながら作成していくことが多いかと思います。

そんな時は、みんなでイメージを共有しておくことが大切になります。言葉で伝えることでイメージの共有は出来ますが、ワイヤーフレームを使い実際に目に見える形にすることで、お互いのイメージに相違が生まれるのを防ぐことができます。

同じイメージを共有しておけば、チーム全体が同じ方向に動くことができるようになるでしょう。

また、ワイヤーフレームはコミュニケーションツールにもなります。

例えば、ホームページの作成を依頼してこられたお客さんに「だいたいこんなイメージになります」とワイヤーフレームを見せることで、お客さんのイメージとのすり合わせができるようになります。

また、もしお客さんのイメージと違った場合や、「こうしてほしい」と要望された場合は、そこを変更することができますし、後でその変更内容をチーム内で確実に共有することもできます。

このように、ワイヤーフレームを使うことによって、チーム内だけでなく、お客さんとの間の認識のずれをなくすことができ、うまく連携していくことができるようになるのです。

アイデアを出したり、議論を加速させたりするため

ワイヤーフレームを使い設計図を作ることで、だいたいの「完成図」のイメージが持てます。

したがって、ワイヤーフレームを議論の「たたき台」にし、

「ここに、こんな写真を持ってきたらよくない?」
「ここには、Q&Aボタンを設置しよう」

などといったアイデアを出して、ブラッシュアップしていくのに役立ちます。

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

ワイヤーフレームを作成する際は、以下の7つの点に注意が必要です。

1)各自でアイデアを考える
2)サイトマップは競合サイトを参考にする
3)目指すホームページデザインを参考にする
4)ビジュアル化する
5)スマホ版は別に作成する
6)デザインの段階から、コード担当者を加える
7)ホワイトボードを撮影して議事録にする

それでは、それぞれ解説していきます。

各自でアイデアを考える

ワイヤーフレームを作成する最初の段階では、チームではなく各自でアイデアを出すようにしましょう。

というのも、最初からチームでワイヤーフレームを作成してしまうと、個々のメンバーが考えたアイデアを明確にできないからです。

また、各自で考えたものを持ち合わせた方が様々なアイデアの中から良いモノを抽出することもできるので、まずは、各自で考えるようにするのがおすすめです。

ちなみに、アウトプットの形は特にこだわる必要はありません。

サイトマップは競合サイトを参考にする

ホームページを作成する際には、サイト内のリンクのつながりを把握するために「サイトマップ」を用います。

そして、このサイトマップを作成する際は、競合サイトや類似サイトを参考にすることをおすすめします。

似たような業界やジャンルのホームページは、その内容や構成が似ている場合が多いからです。

真似をしなくても、「だいたいこんな感じか~」とイメージをつかむだけでも良いでしょう。

目指すホームページデザインを参考にする

参考:MUUUUU.org

ワイヤーフレームでホームページのデザインを考える際は、目指しているホームページのデザインに近いサイトを参考にするとスムーズに作業が進みます。

何も参考にせずにゼロから作るよりも、他のサイトを参考にした方が簡単にデザインが決まります。

なので、他のサイトで自社が目指しているデザインに近いものがあれば、ぜひ参考にしてみてください。

ビジュアル化する

ワイヤーフレームを作成する際は、全体のレイアウトを考えることになります。

ここでビジュアル化までしておくと、その後のデザイン作業をスムーズに進めることができます。

なので、ぜひワイヤーフレームと合わせてビジュアル化までしておきましょう。

スマホ版は別に作成する

ホームページは、PCで表示される場合とスマホで表示される場合では、画面の横幅が違うため同じようには表示されません。

したがって、スマホ版はPC版よりも画面の横幅を小さくレイアウトする必要があります。

なので、スマホ版用にPC版とは別のワイヤーフレームを作成しておくのが理想です。

デザインの段階から、コード担当者を加える

先ほども少し述べましたが、ワイヤーフレームを作成する段階では、レイアウトやデザインを重視しながら作成していくことになります。

そこでおすすめなのが、コーディングを担当する人もデザインを考える時に参加してもらうようにすることです。

というのも、コード担当者も参加していれば、完成形のイメージを持ってもらえますし、そのデザインが実現可能か、作成にどの程度時間がかかるのか、といったこともわかるようになるからです。

なので、可能な限りデザインを考えていく段階からコード担当者にも参加してもらい、意見を出してもらうようにしましょう。

ホワイトボードを撮影して議事録にする

サイトを作成する際には、よくホワイトボードのようなデザイン手法を使います。

したがって、そのホワイトボードなどの写真を撮影し、それを議事録代わりに利用することで、より効率的にプロジェクトの概要をチーム内で共有できます。

ワイヤーフレームを作成するツール

ここからは、ワイヤーフレームを作成する際に利用できるツールをご紹介していきます。

ここでは、以下のようなオフラインで使えるモノとオンラインで使えるモノの両方をご紹介します。

◎オフライン

1)ペンと紙
2)パワーポイント
3)エクセル

◎オンライン

1)Cacoo
2)Mosqups
3)Mockingbird

ペンと紙(オフライン)

まずは、「ペンと紙」です。

手元にあるペンと紙を使えば、手書きのワイヤーフレームを作成することができます。

今回紹介するツールの中では一番原始的ですが、修正を適宜入れられるので、意外と使いやすいんです。

以下で紹介するツールを使う前にササッと紙とペンで書いみるのもいいですね。

Power Point(オフライン)

続いては、Power Point(パワーポイント)です。

パワーポイントを用いてワイヤーフレームを作成する際のメリットとデメリットは以下のとおりです。

◎パワーポイントを使うメリット

1)慣れている人が多い
2)〇や□など図形が豊富にあって、使いやすい

◎パワーポイントを使うデメリット

1)複雑なレイアウトは編集しづらい
2)情報量が多いサイトの場合は適さない(例:食べログやSUUMO)

パワーポイントは、日ごろから資料作りなどに利用していて操作に慣れている方が多い反面、細かい操作がしにくいため、複雑なレイアウトには向いていないというデメリットはあります。

参考:Power Point

Excel(オフライン)

お次は、皆さんご存知のExcel(エクセル)です。

エクセルを用いてワイヤーフレームを作成するメリットとデメリットは以下のとおりです。

◎エクセルを使うメリット

1)パワポ同様、使い慣れている人が多い
2)罫線で区切られているため、情報の整理がしやすい

◎エクセルを使うデメリット

1)図形のバリュエーションが少ない
2)複雑なレイアウトには向いていない

エクセルは、先ほどご紹介したパワーポイントに比べると、図形に自由度がないため「チェックボックス」「送信ボタン」といったホームページ特有の要素を表現するのが難しくなります。

一方で、罫線で区切られているため、情報整理がしやすくなっています。

こうしてみると、エクセルはワイヤーフレームを作り慣れている人向けだと言えそうです。

参考:Excel

Cacoo(オンライン)

ここからは、オンラインで使えるワイヤーフレーム作成ツールをご紹介していきます。

Cacooは、100種類以上のテンプレートが収録されている「オンライン作図ツール」です。

Cacooでは、リアルタイムで共同作業ができたり、メンバーの編集履歴を残したりと、チームの共同作業のためのコラボレーション機能が満載です。

また、操作も簡単で、豊富なテンプレートを利用して素早く作成することができます。

参考:Cacoo

Moqups(オンライン)

続いては、世界の150万以上の人々に利用されているワイヤーフレーム作成オンラインツール「Mosqups」です。

Mosqupsは英語対応となっていますが、説明書がなくても直感的に操作できるため問題ありません。

また、豊富なステンシルやアイコン、フォントもあり、さらに自身が持っている画像を用いてワイヤーフレームを作成していくことも可能です。

有料プランは月$10から利用可能で、無料プランも提供しています。

参考:Mosqups

Mockingbird(オンライン)

最後に紹介するツールは、ドラッグ&ドロップやコピー&ペーストなどの簡単操作でワイヤーフレームが作成できるオンラインツール「Mockingbird」です。

そのシンプルな操作で、ササッとワイヤーフレームが作れてしまいます。なので、新しいツールの操作を覚えるのが苦手という方でも安心してご利用いただけます。

参考:Mockingbird

ワイヤーフレームを使って最高のホームページを作ろう!

今回は、新しいサイトを立ち上げる前にワイヤーフレームを使う目的や注意点について解説してきました。

今回ご紹介したワイヤーフレーム作成ツールはどれも使いやすく、ワイヤーフレームの作成に役立ってくれます。

ぜひワイヤーフレームを有効活用して、素晴らしいホームページを作成してみてください。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
など専門家が独自に入手した、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。