WEBサイト制作では、コードをかく前に、「ワイヤーフレーム」と呼ばれる設計図を作成します。
しかし、ワイヤーフレームを作成する方法は、手書きからツールまで何種類もあり、デザインも無数なため、悩まれている方は結構多いのではないでしょうか。
本記事では、「ワイヤーフレームの概要・作成手順・コツや注意点・Adobe XDでの作成例」を紹介しますので、「ワイヤーフレームの作成の方法がいまいちピンとこない」「作業のコツや、作成時の注意点を知りたい」という方、ぜひ参考にしてみてくださいね。
ワイヤーフレームとは
ワイヤーフレームとは、「WEBサイトのレイアウトや要素の配置を決めるための設計図」です。
この段階では、具体的なテキストや画像などは無くて位置関係の指定のみ、色もほとんどモノクロです。
ワイヤーフレームを効率良く作成するにはツールを利用する方がオススメですが、手書きでも問題ありません。
ワイヤーフレームの目的
WEBサイトの大枠のレイアウトを決める
WEBページには代表的なレイアウト（例：1カラム型、タイル型、マルチカラム型、サイドバー固定型など）があり、どのレイアウトを採用するかはワイヤーフレーム作成時に決めます。
情報を整理する
WEBサイト制作には「情報設計」という重要なプロセスがあります。
情報設計とは、WEBサイト内にある情報を、誰が見ても認識・理解できるように、何（テキストや写真など）をどこにどのように配置するかを決めることです。
ワイヤーフレームでは要素の位置関係を決め、情報を整理しますが、テキストは一言一句決めるのではなく、写真も配置のみ決めます。
WEBデザインカンプの「たたき台」にする
ワイヤーフレームがWEBサイトの設計図であるのに対し、具体的なテキストや色、画像の指定を行った「WEBデザインカンプ」は完成図です。
最初から完成図の制作を完遂するのではなく、より良いアイディアが出るように、ワイヤーフレームは「たたき台」にして、大まかなものを何度か練り直します。
ワイヤーフレームの作成手順
サイトマップを作る
ワイヤーフレームを描き始める前に、作成したいWEBサイトのサイトマップをしっかりと作る必要があります。
ワイヤーフレームを作成するページを決める
サイトマップの全ページのワイヤーフレームを作ることがベストですが、制作期間や予算などの兼ね合いで難しい場合は、任意のページをピックアップして作成します。
トップページのワイヤーフレームの作成は必須で、残りは重要度の高いページに絞ります。
WEBサイトの大枠のレイアウトを決める
ワイヤーフレームの目的のひとつとして説明した通り、カラム型、タイル型、マルチカラム型、サイドバー固定型などのレイアウトがある中で、どのレイアウトを採用するかを決めます。
レイアウトによって要素の配置が異なるので、十分検討して決定します。
ワイヤーフレームを描いていく
WEBページは、上から順に、「ヘッダー・グローバルナビゲーション」「メインビュー」「コンテンツエリア」「フッター」という要素で構成されています。
サイトマップとレイアウトを基に、上から順に大まかな配置を決め、徐々に細部を詰めていきます。
ワイヤーフレーム作成時のコツや注意点
デザインに凝り過ぎない
いきなり実際のWEBサイトに近いデザインを作ろうとするあまり、最初からデザインの要素をワイヤーフレームに入れてしまうと失敗してしまう可能性があります。
パッと見た限り、デザイン性の高いワイヤーフレームは完成度が高く見えがちですが、前述の通り、ワイヤーフレームの目的のひとつの「情報を整理する」ことの範疇を越えてしまいます。
デザインに凝り過ぎてワイヤーフレームを作成してしまうと、WEBデザインカンプの制作時にワイヤーフレームに引きずられてしまうので要注意です。
ワイヤーフレームは、最小限のテキストと配置を示す図形だけで十分です。
レスポンシブWEBデザインで作る
現代は、パソコンだけではなく、タブレットやスマートフォンの普及により、それぞれのデバイスごとでWEBサイトの表示が異なるのが一般的です。
世の中で多く利用されている端末の平均的なサイズを調べて、パソコン、タブレット、スマートフォンそれぞれの最適なサイズのワイヤーフレームをWEBページごとに作成するのが理想ですが、制作期間や予算などの兼ね合いで難しいかもしれません。
少なくとも主要ページのみパソコン版とスマホ版のワイヤーフレームを作ったり、場合によってはモバイルファーストとして、スマホ版のワイヤーフレームから先に作成したりするなど工夫するとよいですよ。
他サイトをチェックする
事前に、もしくはワイヤーフレームの作成途中に悩んだ際は、競合サイトなどの他サイトをチェックして参考にしてみましょう。
ワイヤーフレームの作成に慣れないうちは勿論、ベテランになっても他サイトのチェックは非常に有効ですよ。
ワイヤーフレームAdobe XDでの作成例
ワイヤーフレームを作成するツールには様々なものがありますが、ここではAdobe社がリリースしている「Adobe XD」での作成例を紹介します。
※参照：Adobe XD公式サイト
上の画像は、Adobe XDを利用して作った某企業のLP（ランディングページ）のワイヤーフレームとWEBデザインカンプ（未完成版）の縮小画像です。
一番左が最初のワイヤーフレームで、その隣に修正箇所をピックアップしたものを並べています。
右へいくにつれ、ワイヤーフレームを練り直していて、徐々に詳細を詰めていっています。
ワイヤーフレームには議事録のような役割もありますし、ひとつの画面上で制作過程を確認することができるのは非常に便利です。
さらに、Adobe XDには「プレビュー」機能があり、その機能を利用すると、選択した画面をWEBページのような表示で確認することができたり、スクロールやクリックの操作をすることで要素の動きまでを再現して確認することもできたり、動的サイトのワイヤーフレームの作成には最適です。
まとめ
本記事では、「ワイヤーフレームの概要・作成手順・コツや注意点・Adobe XDでの作成例」を紹介しましたが、いきなり上手くワイヤーフレームを作成するのは誰にだって難しいことです。
また、「習うより慣れよ」という言葉がある通り、自分の手を実際に動かして練習を重ねましょう。
自分で勉強の時間を確保して、他サイトの模写でワイヤーフレームを作ってみるのはいかがでしょうか。
いざとなった時に困らないよう、少しずつ練習を重ねて慣れていってくださいね。