皆さんは「ワイヤーフレーム」というと何を思い浮かべるでしょうか。点と線をつないで表現された立体のモデリング？　そうですね、コンピュータ・グラフィックスに携わっている人であれば、そちらをまず思い浮かべることでしょう。
　しかし、今回お話する「ワイヤーフレーム」はそれとは違い、Webサイトの制作に関する「ワイヤーフレーム」となります。

ワイヤーフレームって何？　何のために必要

　当社でもWebサイト制作を請け負っていますが、受注に関してはクライアントから要望をいただく場合、そして当社からこんなサイトを作りませんかという企画提案をする場合、ふたつのケースが主になります。
　そしてどちらの場合でも、双方の意志の共有が重要です。どんな目的でどういうサイトを作るのか、そのためにワイヤーフレームが必要になってくるのです。
　具体的なデザインに入る前にワイヤーフレームを作ることで、ページの要素と配置を事前に確認できますし、いざデザインを確認してもらう段において、「ここにNEWSがない」といった要素抜けや、「イメージと違う」といったやり直しを防ぐために重要なものとなります。
　簡単にいうと、Webサイト制作におけるワイヤーフレームとは、サイトの設計図であり、これから作成するWebサイトのレイアウトを決めるものというわけです。

ワイヤーフレームを作るには

　ではワイヤーフレームを実際に作る場合、どうすればいいでしょうか。
　まずはWebページに載せる情報をすべて書き出すことです。ヘッダー要素、フッター要素、グローバルナビゲーションといった頻度の高いものだけでなく、メインコンテンツの内訳やお知らせ、電話番号、バナー画像といったものもピックアップしましょう。
　続いてピックアップされた多くの情報を、似たような種類ごとにまとめていきます。つまりジャンルけ分けですが、Webではグルーピングということもあります。
　さらにグルーピングしたジャンルを、サイトの目的にあわせて、重要なものから順位付けしていきます。

　最後にWebサイトとして体裁がわかるよう、それらの情報をレイアウトしていきます。TOP画面であれば、メインビジュアル、ニュース、SNS組み込みといった要素が入ってくるかと思います。
　このとき、いきなりPC上で作業するのではなく、手書きでラフを作って進めるのがおすすめです。それについては当ブログの過去記事「手書きラフのススメ　〜よりよいデザインにたどり着くために〜」を参考にしてみてください。

ワイヤーフレーム作成に使えるツール／Adobe XD

　ここからはワイヤーフレーム作成に便利なツールを紹介します。
　よく使われるのはパワーポイントなどですが、当社ではAdobe社の「Adobe XD」というソフトを使用する人が多いです。
　Adobe XDはキャンバスの上にいろいろなものを自由に配置することができ、配置したオブジェクト間の距離を視覚的に見ることができ、配置や整理などがとてもやりやすいツールになっています。
　それ以外にも共有したときのコメント機能が充実しており、ディレクター、デザイナー、クライアントとの連携にも力を発揮してくれるのがポイントです。

　特にワイヤーフレーム作成を簡単にできる機能がありますので、ふたつご紹介しましょう。

リピートグリット

　画面に配置するコンテンツで、たとえば表組みなど複数設置するものを一つずつ作成していくのは非常に億劫です。リピートグリットの機能を使うことで、ドラッグしたコンテンツを水平、垂直方向に反復してできるようになります。
　複製したグリッドの上に外部のテキストファイルや、画像ファイルを落とすことで内容の差し替えもとても簡単にできます。

レスポンシブサイズ変更

　近年のWebサイトのほとんどはPCやスマートフォンの画面サイズに応じてレイアウトが変化するレスポンシブWebデザインで作られています。
　今まではPC用、スマートフォン用でそれぞれワイヤーフレーム上のサイズを調整して作っていましたが、レスポンシブサイズ変更を使用することで、グループ化したオブジェクトを縮小するとグループ全体が調整され、新たに小さいものを作る必要がありません。
　こちらも作業を簡単にしてくれる機能になります。

———————————————

　いかがでしたでしょうか。
　ワイヤーフレームはWebサイトを制作するうえで、初動の重要なプロセスですが、あまりに時間をかけすぎていると、なかなか制作にかかることもできません。しかし、ここを疎かにしていると、完成間近になって必要な情報が抜けているとか、クライアントとの意思疎通ができていないばっかりにイメージが違ってやり直すだとか、思いがけないトラブルに見舞われる可能性も大きくなるばかり。
　途中での修正作業は大きな負担ですので、いかに適切なワイヤーフレームを作るかが、サイト制作をスムーズに進めるうえで大きなポイントといえるでしょう。
　今回は当社で活用しているAdobe XDを例に説明しましたが、ほかにも便利なツールはいろいろあります。ぜひサイト制作にご利用ください。