ホームページを作成するとき、まず必要なのがワイヤーフレームです。ワイヤーフレームはWebデザインをする際に設計図としての役割を持ち、ワイヤーフレームの出来次第でホームページの質が変わります。
そこでこの記事ではワイヤーフレームの作り方を紹介します。
Webデザインにおけるワイヤーフレームとは
Webデザインをする際に使われるワイヤーフレームとは、Webデザイン上での設計図のようなものです。ホームページを作成する際に、画面上に「どこに」「何を」配置するのかを決めるためにあります。
何かを作成する際に「下書き」は必要不可欠です。ワイヤーフレームはいわば「ホームページ上での下書き」のようなものです。
ワイヤーフレームを作成することによって、クライアントとのコミュニケーションもスムーズに進みます。
Webデザインのワイヤーフレームを作る手順4つ
ここからはWebデザインのワイヤーフレームを作る手順を紹介します。手順をしっかり踏めば初心者でもワイヤーフレームは作れます。
ワイヤーフレームを作る際には、オンライン・オフラインツール、もしくは手元に紙とペンを用意しておきましょう。初心者の方ならオンラインツールが1番おすすめです。
手順1：サイトマップを作る
最初にすることはサイトマップを作ることからです。なぜサイトマップが必要かというと、ワイヤーフレームは「Webページ上の設計図」ですので、設計図を立ち上げる前に「何を作るか」というものを決める必要があります。
先にワイヤーフレームを作ってしまうと後に修正などができたとき、一からやり直しということになる事もあります。まずはサイトマップをしっかり作りましょう。
手順2：作るページを決める
サイトマップを作ったら次は作るページを決めていきます。初めてWebページを作るとなると、すべてのページのワイヤーフレームを作るのはかなり厳しいです。
特に初めて仕事で依頼されたとなれば尚更です。慣れるまではワイヤーフレームを作るページを決めておくといいでしょう。
手順としては重要な、特にトップページなどユーザーが１番訪れるページを作ってみると良いでしょう。
手順3：ページのレイアウトを決める
ワイヤーフレームを作るページを決めたら、次にそのページのレイアウトを決めていきます。ホームページを作成するとき、Webデザインでは代表的なレイアウトがあります。
一から全部作る必要はなく、それらのレイアウトを見て１番ホームページに合っているものを選ぶと良いでしょう。
なお、Webデザインにおけるレイアウトについて詳しく知りたい人は、次の記事を参考にしてください。
手順4：ワイヤーフレームを書く
ここまできたら、後はワイヤーフレームを書くだけです。レイアウトを決めたらそれに沿う形でワイヤーフレームを作っていきます。
例えばホームページのサイトのトップページを作るとします。まずは要素別に分けて、コンテンツを設計します。
要素の名前は上から「ヘッダー.グローバルナビゲーション」「メインビュー」「コンテンツエリア」「フッター」となります。
[要素の名称][どのようなもの？]
| ヘッダー.グローバルナビゲーション | サイトの一番上に表示される、全ページ共通 |
| メインビュー | メインビジュアル。キャッチコピーや画像を入れる |
| コンテンツエリア | 目次ページ |
| フッター | ページの一番下に表示される。全ページ共通 |
Webデザインのワイヤーフレーム作成時の注意点4つ
ここからはワイヤーフレームを作る際の注意点を４つ紹介します。ワイヤーフレームは慣れてくればすぐに作れるものですが、それまではなかなか思うようにはいかないものです。
特にWebデザインでのワイヤーフレームは難しいので、4つの注意点を抑えて、できるだけ効率的に作れるようになっていきましょう。
注意点1：作るWebページの判断基準
Webデザインで重要なのは判断基準をはっきりしておくことです。判断基準としては、サイト特有のレイアウトを使用していたり、サイトの一番重要なページだったり、一定の規則性を持たせて見やすさやデザイン性など、自分の中の判断基準を持ちましょう。
後に回せるページはひとまず置いておいて、全体のページの核となる部分を見極め、着手すると、判断基準ができやすいです。
注意点2：デザインに凝りすぎない
ワイヤーフレームを作る際に良く失敗するケースが「デザインに凝りすぎること」です。Webデザインをしていると、どうしてもデザインにこだわってしまいます。
ですが、あくまでワイヤーフレームはサイト上での「下書き」のようなものです。こだわりすぎては、後にデザインをする場合に混乱することがあるので、ワイヤーフレームは線と文字だけにしておきましょう。
注意点3：スマホ用も別に作る
WebページはPC版とスマホ版のどちらも見やすいようにするのが理想的です。PC版に比べてスマホ版は画面の横幅が小さくなるため、スマホ用のワイヤーフレームはレイアウトを変更しなければなりません。
PC版と同じく、スマホ用のワイヤーフレームもまた、重要なページのみ作るようにしましょう。
注意点4：迷った時は競合サイトを参考に
ワイドフレーム作成時に迷ったら、競合サイトを参考にしましょう。ワイドフレームは作りなれないうちは構成がなかなか難しく、わからないということも少なくはありません。
そんな時は競合サイトが参考になります。類似のWebサイトを探し、それらを参考にワイヤーフレームを作成しましょう。ジャンル、業界で分けて探すと似たようなサイトが出てきます。
ワイヤーフレームツール3選
ここからはワイヤーフレームのツールを３つ紹介します。基本的にはどのツールでも大丈夫ですが、もしWebサイトを共同で制作する場合は、相手が使い慣れているものを使うと良いでしょう。
ワイヤーフレームは一人で仕上げる場合も複数人で作る場合もあります。チームメンバーで作るなら、使い慣れたツールを使うことがおすすめです。
ワイヤーフレームツール1：Sketch
最初に紹介するツールはSketchです。SketchはWeb、UIデザインをするときに使える、2010年にリリースされたツールです。UIデザインではPhotoshopが有名ですが最近ではSketchも注目を集めています。
SketchのメリットはUIデザインが特化していること、テンプレートが豊富なことなどです。デメリットとしては、知名度があまり高くないツールと言われ、共有などがしづらい可能性があるということです。
ワイヤーフレームツール2：エクセル
次はエクセルでのワイヤーフレーム作成のメリット・デメリットを紹介します。エクセルの最大のメリットは使い慣れている人が多いということでしょう。
エクセルやパワーポイントは一般的に広く使用されています。チームでワイヤーフレームを作成するならエクセルが無難と言えるでしょう。また罫線で区切られているため情報も整理しやすいというメリットがあります。
デメリットとしては複雑なレイアウトの場合は編集しにくいことがあります。
ワイヤーフレームツール3：Cacoo
最後はCacooでのワイヤーフレーム作成のメリット・デメリットを紹介します。Cacooのメリットはワイヤーフレームのための図形や素材が豊富というところです。
Cacooはワイヤーフレーム作成の専用ツールとなっています。情報量が多いページでも対応しやすいというメリットもあります。
デメリットは7ページ以上は有料版になることと、慣れるまでは時間がかかるところです。
Webページのデザインにはワイヤーフレームを活用しよう！
ワイヤーフレームの作り方について紹介しましたがいかがだったでしょうか。ワイヤーフレームは手順をしっかり踏めば誰でも作ることができます。
Webサイトを作る際にはワイヤーフレームが作れることは必須スキルとなります。ワイヤーフレームさえしっかり作れれば、デザインはあとからいくらでも変えることができます。
ワイヤーフレームをしっかり作ってWebページを素敵にデザインしてみましょう。
なお、本記事を踏まえうサイト作成の方法を詳しく知りたい人は、下の記事を参考にしてください。
この記事の監修者
株式会社SAMURAI
【プロフィール】 DX認定取得事業者に選定されている 株式会社SAMURAIのマーケティング・コミュニケーション部が運営。 「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。 累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、 累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、 2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
