ホームページ制作 大阪 | 目標を実現するweb制作会社、株式会社トレボ

TREVOのスタッフブログ

Blog
2015.06.22.

ホームページ制作に欠かせないワイヤーフレーム

20150622-1ホームページを制作するには、建築物や工業製品を具現化するのと同じように設計図が必要です。ホームページ制作の場合この設計図をワイヤーフレームと呼びます。
webページ内で「何を、どこに、のように」配置するかを記述したものです。
ワイヤーフレームをデザインをする前に作成する事によってクライアントと制作者が共通の認識を合わせることが出来ます。
また、ワイヤーフレームが無いままデザインを始めると制作に関わるスタッフの認識が合わず制作過程で配置するはずのボタンが無かったりなど修正がばかり発生し、制作進行が遅れる事になります。
ワイヤーフレームは、ホームページを制作する上で非常に重要な作業になります。
 

ワイヤーフレームの作成ツール

ワイヤーフレームを作成するのに基本特に決まりは無く手書きでも問題ありません。
また、ワイヤーフレームの制作ツールを使って作成する事も出来ます。

Cacoo

20150622-2
日本語の利用できるワイヤーフレームの作成ツールです。
操作方法も直感的に使え、チュートリアルも細かくわかりやすいです。
作成したワイヤーフレームはPDFやPNGで出力で出来ます。
https://cacoo.com/lang/ja/

moqups

20150622-3
Wwb上でワイヤーフレーム作成する事ができます。
配置したいオブジェクトをドラッグして配置できます。
作成したワイヤーフレームはPDFやPNGで出力で出来ます。
https://moqups.com/

Prototyper

20150622-4
インストールしてから利用するワイヤーフレーム作成ツールです。
こちらもオブジェクトをドラッグして配置できます。
高性能な有料版ではHTMLで出力する事も出来ます。
無料版はPDFでの保存となります。
http://www.justinmind.com/

まとめ

クラインアン、デザイナー、プロジェクト関わるスタッフに使わる事が重要で、手書きも問題ないですが、直感的にオブジェクトを配置出来たりするワイヤーフレームを使うことによって作業効率はアップする事が出来ます。
色々なツールを使って自分に合うワイヤーフレーム作成ツールを見つけてください。

ホームページ制作 大阪 | 目標を実現するweb制作会社