ホームページ制作のワイヤーフレーム｜作り方のポイントを解説

ホームページ制作をするとき、どのようにして作成していますか?

実はホームページ作成に必要となるのがワイヤーフレームなのです。1人で作っている時は必要ではありませんが、会社など複数の人が関わる時には必ず必要となります。

どんな内容でホームページを作るのか。このようなことを決める時、ワイヤーフレームの必要性に気づくでしょう。

今回はこの「ワイヤーフレーム」に関して、必要性から作成の仕方などわかりやすくお伝えします。

この記事を読んでワイヤーフレーに関して知ることで、今後のホームページ制作がやりやすくなると思いますので、ぜひ試してみて下さい。

ワイヤーフレームとは

ワイヤーとは「線・電線・針金」などを意味する英単語です。またフレームとは「枠・骨格」を意味します。

このことから、ワイヤーフレームとは「シンプルな線や図」で構成されるもののことを指します。

このワイヤーフレームは、Webページデザインの前段階で作成していくものです。

「何をどこに配置するのか」「問い合わせなどの導線はどのようにどこに配するのか」。

このようなことを考えて作っていくのです。

また、ワイヤーフレームは修正や追加を効率的に行うためにコーディングやデザインに入る段階の前に決めておきます。つまり、Webサイト制作におけるワイヤーフレームとは「Webページのレイアウトをシンプルな線・枠で表現した設計図」となるのです。

家を建てる時に必ず設計図を作るように、Web制作にも設計図が必要なのです。

ワイヤーフレームの目的

ワイヤーフレームはWeb制作における設計図だとお伝えしました。

では、どのような目的があってワイヤーフレームがつくられているのでしょうか。もちろん「Webページのレイアウト・仕様」を決めることではありますが、それだけではありません。

どのような目的があるの、詳しく解説していきます。

情報整理のため

情報設計と言われているのがホームページ制作を行う過程の事を意味します。

情報を集めていくとテキストや画像など多くの情報が出てくると思います。

どのような文章や写真などを使って、コンテンツ制作をしていくのか。それをテキストで整理していくのはかなり無理な話です。

そのような時に活用できるのが「ワイヤーフレーム」となります。

ワイヤーフレームはどのようなものを載せていきたいのかを決めていく、重要なポイントとなります。

共有認識をするため

会社でホームページ制作を行う時、基本的に1人では作らないと思います。

コーダー、エンジニア、デザイナーなどあらゆる専門家が集まり、一つのサイトを作り込みます。その中で同じ共有認識をもっていなければ、サイトを作る際にスムーズに進めることができません。

このような時に重宝されるのが「ワイヤーフレーム」なのです。

一度ミーティングをしながら皆で情報を持ち寄り、ワイヤーフレームに書き込みを行うことで、共有認識ができてまとまりのある良いサイトを作ることができます。

ワイヤーフレームは共有認識をするためにも作られていくのです。

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

ワイヤーフレームの作成手順を一つずつ見ていきたいと思います。

ワイヤーフレームはホームページ制作を行う上でかなり大事なものとなってきます。しっかりと作れているかどうかで、Webサイトの出来が変わると言っても過言ではありません。

サイトマップを作る

ホームページの設計図となるワイヤーフレームですが、どんなページを作っていきたいのか、まずはっきりさせる必要があります。

そのためすぐワイヤーフレームに書きこんでしまうと、その後に情報が出てきたり削除されたりする時に、いちいち手直しが必要となってしまいます。

まずはサイトマップから作っていくのがおすすめです。

WebサイトのTOPページから作り、TOPページができたら、その下層ページを作っていきます。

これにより、ホームページ全体を作りこむことができるでしょう。

このようにTOPページから作りこんでいき、ようやくワイヤーフレームを使う段階に来ました。

ワイヤーフレームは全てのページに作っていくことが理想ではあるものの、膨大なテキストと図形など、そこまで手が回らないのが正直なところだと思います。そのため、本当にワイヤーフレームが必要なのかを見分けることが大事です。

1つずつ仕分けるのは大変ではありますが、この基礎段階でしっかり作業をすることで後々いいサイトを作ることができるようになるでしょう。

このようにサイトマップを作ることが、ワイヤーフレームをよりスムーズに確実に完成させることができます。

レイアウトを決める

ワイヤーフレームを作成するページを分類したら次に「レイアウト」を決めていきましょう。

レイアウトはさまざまなものがあるものの、代表的なものは次の4つになります。

その4つを確認してみましょう。

1カラムレイアウト	横一列のコンテンツを縦に並べる
タイル型レイアウト	コンテンツをタイル状に並べる
マルチカラムレイアウト	カラムとタイルを組み合わせて並べる
サイドバー固定レイアウト	固定されたサイドバーが常に表示される

この4パターンが代表的なものになります。

どれが自分に合うのかを考えながら選んでみてはいかがでしょうか。

下書きをする

下書きは、優先順位を決めて配置をしていきます。

まずは軽く配置をしてみて、全体的にどのようなバランスになるのかをみてみましょう。

この時に大事にするのは「ユーザー目線」です。忘れがちになるところですがユーザー目線というのがとても大事なものですので、改めて確認をしてから作業してみることをおすすめします。

優先順位の高い物から配置をしていき、最後はあまり必要のなさそうなものが集まってきたらそれを省いていきましょう。

このような手順で下書きをすすめていきます。

ツールで清書する

最後に、確認をしてから清書をしていきましょう。

ワイヤーフレームはWebサイト作成をする人すべてがみるものとなります。

そのためミーティングでもワイヤーフレームを使うと思いますので、清書は是非ツールを使ってみることがおすすめです。

手書きで間違いがあっては元も子もありません。しっかりわかりやすいようにツールでワイヤーフレームを完成させておきましょう。

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

ワイヤーフレームを作るやり方をご説明してきましたが、少しわかってきたでしょうか。

出来上がったワイヤーフレームですが、大切なページが抜け落ちていないかを確認します。また、ワイヤーフレームですが作成するページの基準、注意点をあげてみます。

• 他のページと比べてページのコンテンツが大幅に異なるページなのか
• 特有のレイアウトを使用しているページなのか
• 重要な役割を担っているページなのか

上記を参考にして、ワイヤーフレームを作るかどうかを決めてみて下さい。

また、スマホレイアウトも作成しておく必要があります。

今ではスマホでの閲覧が一般的になり、情報はスマホから確認することが当たり前となりました。

それだけ大事なスマホ版サイトです。PCだけでなくレイアウトなどちゃんと設定をして見やすいサイトを作っていきましょう。

ワイヤーフレーム作成のためのツール4選

ワイヤーフレームはどのようなツールを使っても基本的には作ることができます。そのため、関わる人がどのようなツールを使っているのかを調べ、その中で最も多く使われているツールを使うのがいいのではないでしょうか。

良く使っているかと思いますが「Adobe XD」や「CACCO」、「パワーポイント」や「エクセル」も有名です。さらにチーム開発を効率化できる「Figma」もおすすめです。

今回は、こちらの5つを取り上げてご紹介いたします。

Adobe XD

Adobe XDは多くのWeb制作会社がワイヤーフレームを作る時に使うツールになっています。

Adobe XDを使うメリットは下記の通り。

• ワイヤーフレームを作成するときに使うツールのため扱いやすい
• クラウドにあげやすいためすぐに共有することができる

このようにクラウド上で共有ができると、複数のユーザーが同時に見ることが可能ですよね。それと同時にフィードバックをもらえるため、ワイヤーフレーム作成と確認が効率よくできます。

デメリットは下記の通りです。

• レイヤー効果がない
• 画像補正ができない
• テキストの細かい調整ができない

この3点があげられます。

Adobe XDは共有やコメント、デザイン作成にプロトタイプ作成ができることからどのようなものをどこに修正して欲しいかが一発でわかります。そのため、面倒なやりとりは必要なくスピードをもって作業が進むために効率は各段にアップすると言えるでしょう。

CACOO

CACCOを使うメリットは下記の通りです。

• ワイヤーフレームのための素材や図形が豊富
• 情報量が多くても対応可能

CACOOはワイヤーフレーム作成のための専用ツールです。そのため、ワイヤーフレームで使うボタンや入力フォームなどの素材がたくさんあります。

雛形もあるため、簡単なものであればワイヤーフレームをあっという間に完成させることも可能です。

他には、メンバー共有機能がついています。ワイヤーフレームをしっかり作りこみたいときにぴったりなツールといえるでしょう。

デメリットは下記の通りとなります。

• 慣れが必要
• 本格的に利用したいのであれば有力版が必要

パワーポイントに似ているため、直感的に操作することができます。

無料で使えるのですが、7ページ以上のワイヤーフレームとなったときに有料版を購入する事が必要です。

もし無料版のみで使いたい場合はエクセルやパワーポイントを使ったほうがいいでしょう。

パワーポイント

パワーポイントを使うメリットは下記の通りです。

• 使い慣れている人が多い
• 図形が豊富にあるため直感的に使いやすい

この2点になります。

やはりパワーポイントの魅力は、圧倒的に使っている人が多いということ。そのため使い勝手が良く、作業しやすいでしょう。

また、図形も豊富にあることから直感で作業ができるのも嬉しい機能です。ページは変更をすると横だけでなく縦長のページを作ることもできます。

デメリットは下記の通りです。

• 複数のレイアウトになると編集が難しい
• 作業量が多いものは適さない

パワーポイントは情報量が多い時は向いていません。配置する要素が非常に多いことでミスが増えてしまうのです。

パワーポイントも使いやすさだけでなく、作業量にも気をつけて使いたいですね。

エクセル

エクセルを使うメリットは下記の通りです。

• 使い慣れている人が多い
• 罫線で区切られていることから情報を整理しやすい

エクセルも多くの人が使っているので、やはり使いやすいと思います。また罫線で区切られているため、線と文字を使って作ることができます。

シンプルにするために「デザインに凝りすぎる」心配はなくていいので安心ですね。

デメリットは下記の通りです。

• パワーポイントと比較して図形のバリエーションが少ない
• レイアウトが複雑になると編集が難しい

パワーポイントのように図形を自由に入れることが難しく、ホームページ固有の要素である「チェックボックス」や「送信ボタン」などを表現するのが困難かもしれません。

このため、少しのワイヤーフレームを作る人、また作り慣れている人に向いているといえるでしょう。

Figma

Figmaを使うメリットは下記の通りです。

• チーム開発に向いている
• 操作性が優れている

ブラウザ上でデザインができるツールのため、場所を問わずチーム全体で制作を進めることが可能です。1つのファイルを複数人で編集することができるので、チーム開発にはうってつけのツールと言えるでしょう。

さらに操作性にも優れており、図名の描写から配置など、直感的に操作することができます。

デメリットは下記の通りです。

• Adobe製品との相性が良くない
• 出力できる拡張子が少ない

Figmaは「Photoshop」などのAdobe製品との相性があまり良くなく、連携して制作することができません。

また、出力できる拡張子が「PNG」「JPG」「SVG」「PDF」の4種類しかなく、デフォルトでは「PSD」や「GIF」などの拡張子で出力することはできません。プラグインや外部サービスを活用することで対応できるようになるため、必要であれば導入を検討してみてください。

ワイヤーフレームと混同されやすい関連用語

ここでは、ワイヤーフレームに関連する用語を3つ紹介したいと思います。似ているようにも思えますが、どれも違う意味をもっているので、ワイヤーフレームと比較しながら確認をしていきましょう。

デザインカンプ

ザインカンプとは「デザインの完成見本」のことをいいます。そのため、クライアントへの提案やメンバーとの共有に欠かせません。

具体的なイメージを共有することができます。

デザインカンプですが「モックアップ」という言葉と混同されやすくなっています。モックアップとは、プロダクトデザインにおける完成模型や試作品のことを言います。

そのため、デザインカンプと同じ意味で使われます。

このようにどちらも「完成版のイメージ」ということで、明確に使い分けることはできないということを頭に入れておくと良いでしょう。

またデザインカンプはデザインの「構成案」や「ワイヤーフレーム」を基に作られます。

構成案やワイヤーフレームで色や画像などが決まっていないものを、デザインカンプで完成までイメージして詳細まで決定していくものとなります。

プロトタイプ

プロトタイプとは商品やサービスなどの試作品のことを言います。ゲームやソフトウェア開発の初期段階にプロトタイプを作成します。

操作、バランス、機能などを確認し、ユーザーから、実際にリリース前に反映させる開発方法、手法を「プロトタイピング」といいます。

これにより、開発途中でも確認や修正ができることで問題点が早く発見できるというメリットがあります。

プロトタイプは自動車や身近にある製品など様々な分野で作られ、Webサイトやアプリなどでも作成されるようなケースも増えてきています。

ディレクトリマップ

ディレクトリマップはサイト全体のページを親子関係をもとに整理をし、エクセルなどの表にまとめたものを言います。

サイトマップに似ているように思えますが、ディレクトリマップは制作陣が確認するものであり、ユーザーは直接利用することはありません。

ディレクトリマップはサイトに必要なページを洗い出し、整理する際に作成するものになります。

ワイヤーフレームはしっかり作れる会社に依頼しよう

ワイヤーフレームはページのレイアウト設計図であり、サイト制作の前半の段階で必要となりますね。

どのような道に進むのかを示すことにより皆で共通認識を持つことが可能となる、それがこのワイヤーフレームになります。

このワイヤーフレームがしっかり作れるかどうかにより、制作会社の優劣を見極めることができる一つの判断基準だと言えます。

それだけ大事なワイヤーフレームです。問題なくワイヤーフレームを作れる制作会社を探し、依頼をするようにしましょう。