webサイト制作の基本的なワイヤーフレームの話
2018/10/5
はじめに
ウェブ業界においてもワイヤーフレームの作り方がわからない、正式な作り方を本当は知らないと言うディレクターやデザイナーは意外に多いと聞きます。
理由は様々で、転職や就職して初めてウェブ業界に入った、もしくはディレクターとして独学でやられてきた方など。
「イメージはあるけどうまくまとまらない・・・」と画面とにらめっこして時間だけが過ぎて上司や先輩に注意されている事でしょう。
この記事では、ワイヤーフレームの作り方がわからない方へ、
ワイヤーフレームとは、
ワイヤーフレームの役割、
世間のディレクターが使っているツールにはどんなものがあるのか？
をご説明したいと思います。
熟練のディレクターが見たら、至極当たり前の事や、もっといいやり方があるよ！というご意見があると思いますがそういった方々向けと言うことで容赦いただければと思います。
ワイヤーフレームとは
そもそもワイヤーフレームとはなんでしょうか？
ワイヤーフレームとは広義に、
———————-
ワイヤーフレーム (wire frame) とは、3次元形状のモデリングやレンダリングの手法のひとつで、立体の辺だけから成るような線の集合で表現するものである。
引用元：Wikipedia
———————-
とあります。
コンピューターを使用した業務の負担を軽減する為の型枠なようなものと解釈されているいるようです。
この記事であげているワイヤーフレームとは、webサイトのレイアウトを定める設計図のことです。 ページ上のどこに・何を・どのように、ディレクターのどんな意図で配置しているかを詳細に記してあります。
つまり、クライアントとディレクター（制作チーム）の間でお互いの認識を共有する為のwebサイト構築の重要なドキュメントです。
ワイヤーフレームの役割
ワイヤーフレームの役割とはなんでしょうか。やはり前述のとおり、「クライアントとディレクター（制作チーム）の間でお互いの認識を共有するため」に存在すると思います。
つまり、制作チームメンバーや営業さんが見ても「どういうwebサイトなるか」「どういう機能があるのか」という質問をされた時に、ワイヤーフレームという設計図を基にすることで共通認識において話しをすることができるという事です。
また、メンバーの入れ替えは途中で報告する際に、ワイヤーフレームがあれば認識の引継ぎも問題ありません。
世間のディレクターが使っているツールにはどんなものがあるのか？
ワイヤーフレームを作成するツールには様々なものがありますが、
製作チームであるディレクター、デザイナー、コーダーの環境でも共有できるツールが望ましいと思います。
そういったツールの中で、私がメインでしているのは、Microsoft社のパワーポイントです。
過去様々なツールを使用して来ましたが、一番普及している点でパワーポイントに落ち着きました。
人によって適したツールは異なると思いますので、幾つかご紹介したいと思います。
＜パワーポイント＞
言わずと知れたMicrosoft社のプレゼンテーションツールです。
Webサイト用のワイヤーフレームツールではありませんが汎用性が高い為、ワイヤーフレーム作成ツールとして使われています。
【メリット】
・普及率が高く、汎用性も高い為、制作チームで共有しやすい
・インターネットが無くても使用可能
【デメリット】
・WindowsとMac間でやり取りすると、レイアウトやフォントサイズが変わる事がある
・ワイヤーフレーム専用ではないので、ツールが乏しい
・webページ用のフォーマットが無いので縦長の場合、ページが分割される場合がある
＜Cacoo＞
オンラインで利用できるワイヤーフレーム作成ツールです。専用ツールなので、オブジェクトパーツが豊富に揃っています。
【メリット】
・オンラインでどこでもワイヤーフレームを作成する事ができる
・ワイヤーフレーム用のパーツが揃っている
・チーム内での共有が簡単
【デメリット】
・インターネットが無い環境では使えない
・無料版だと利用制限がある
さいごに
ワイヤーフレームは、お客様の意向とディレクターの意向を上手にミックスした要素の集合体です。最初ごちゃごちゃしているのは当たり前です。
まずは、手書きでも何でも良いのでノートなどにアウトプットして見える化し、そこから整理を始めてみてはいかがでしょうか。
ー おまけ ー
・使ってみたいツール
＜Adobe XD＞
Adobe社製のUI/UX制作ツールですが、ワイヤーフレームがそのままプロトタイプとして利用できます。モバイルファースト時代において、パソコン用だけでなく、スマートフォン用の動きも同時にクライアントと調整できます。
また、Adobe社製なので、デザイナーやコーダーとの親和性もあり、今後ぜひ検討したいツールです。
