ワイヤーフレームを作ろう【サイト制作】

こんにちは、マサヒロです。

私ごとですが、ブロッコリーの冷凍にはまっています。
日持ちもしますし、安いですし、塩かけたら美味いですし良いですね。

さて今回は、Webデザインをするにあたって、デザインの最初のステップであるワイヤーフレームについてです。

ワイヤーフレームとは

そもそもワイヤーフレームとは何なんでしょうか。

“ワイヤーフレーム（wireframe）とは、Webページのレイアウトやコンテンツの配置を定めた設計図のことです。英語のワイヤー（wire）には「針金」「ケーブル」、フレーム（frame）には「枠」「骨組み」という意味があり、ワイヤーフレームは文字通りシンプルな線や図で構成されています。”

ワイヤーフレームとは？作り方、おすすめツールも紹介

「いやいやワイヤーフレームなんて作っていたらWebデザインの時間がとてもかかっちゃうよ」

そういう意見もあるかと思います。

ご最もです。

ワイヤーフレームの後にはデザインカンプ作成というステップもあります。できたら一気にデザインを完成させたいものですよね。

しかし、このワイヤーフレームのステップを抜くと、よりデザイン作成に時間がかかってしまうかもしれません。

ワイヤーフレームの必要性

なぜ時間がかかってしまうのか。それは、「修正」が多くなってしまうからです。

Webサイト制作には複数の人と、関わって制作することが多いです。

例えばデザインとコーディングが分かれていたり、デザインの中でも複数の人と関わって制作することもあります。そもそも、発注者と受注者という受発注の時点で分かれていますよね。

複数の人と関わって制作するにあたって一番怖いのは「思い込み」です。

「この部分は要らなかった・・・」
「この画像はもうちょっと大きい方がよかったかな？」
「いやぁこれはトップページじゃなくて下層ページに配置したかったなぁ」

などと、デザインを仕上げた後に、「方向性」の相違により、最悪一からやり直しということにもなりかねないですよね。

そのためにワイヤーフレームで擦り合わせます。

ワイヤーフレームの「設計図」の制作ステップを踏むことで、細かく進捗管理することができ、

「このようなデザインで納品されるとは思わなかった」

という後出し修正を事前に防ぐことができます。

まとめるとワイヤーフレームの必要性は以下の通りです。

• 受注者と発注者間のサイト制作の方向性を固めることができる
• 製作陣の間で「思い込み」を事前に防ぐことができる
• 進捗管理を細かく踏むことで後出し修正を減少させる

このような感じですね。

ワイヤーフレームの作り方

ワイヤーフレームの作り方は簡単です。

デザインツールや紙に長方形や丸、文言やピクセル数を簡単で良いので書き出してみましょう。

どこがヘッダーでどこがメインコンテンツか、フッターはどこか。

メインコンテンツはどのようなコンテンツを置いて、どこに配置をするか。

このように、大体で構わないのでとりあえず配置して設計図を作ってみましょう。

PhotoshopやIllustratorなどデザインツールで作成した方が、データを送受信できるので、デジタル社会の現代では効率が良いかもしれないですね。

受注者にただ伝えるために紙に書き出すのも良いかもしれません。

大事なのは、簡単に「設計図」を書くということです。

丁寧じゃなくても構いません。

あらかた四角形や文言、ピクセル数を駆使して、「設計図」を作ってしまいましょう。

それだけで、受発注間や製作陣の間の齟齬を減らせます。

デザイン制作は、ステップが多いですが、ワイヤーフレーム作成といった細かい進捗管理を踏むことで、後から効率の良さが生まれます。