Webディレクター必見！ワイヤーフレームテンプレート46選＆作成用ツール10選
Webサイトやサービスを制作する初期段階に必要なワイヤーフレーム。 ワイヤーフレームは、Webサイトやアプリケーシ...
- ツール/サービス
- テンプレート
- ワイヤーフレーム
ワイヤーフレームとは【意味/読み/英語表記】（わいやーふれーむ/Wire Frame）
ワイヤーフレームの概要
ワイヤーフレームとはwebサイトのレイアウトを定める設計図です。具体的には、どのようなコンテンツを画面上のどこに、どのように配置するかを明らかにするものであり、Webサイトの制作やアプリ開発に欠かせません。
ワイヤーフレームの詳細
ワイヤーフレームがあることで、制作作業に入ってからのトラブルを防げます。
ワイヤーフレームによって、webページの完成イメージを作成メンバーで共有できます。それによって複数人で制作作業をしている場合でも、個人の認識の齟齬による作業のズレを防げます。
また不足している要素や余分な項目、視線誘導などを事前に確認することにも役立ちます。webサイトの制作には多くの人が関わるため、関係者の共通認識がスムーズに制作が進むか否かを決めます。ワイヤーフレームがあることによって、依頼人、制作者、その他の関係者全員が完成イメージを共有でき、意思疎通がしやすくなる事によって制作が迅速に進みます。
以下ではワイヤーフレームを作成するときのポイントを紹介します。
■デザイン要素を入れすぎない
ワイヤーフレームの目的は情報を整理することなので、過度にデザインに凝ると制作を行うデザイナーの負担が大きくなります。
ワイヤーフレームは線と文字だけなど、シンプルなものが望ましいです。
■スマホ用とPC用で分ける
画面のサイズに合わせて作り分けることが望ましいです。
■すべてのページのワイヤーフレームを作ろうとしない
全ページのフレームを作成するのが理想的ですが、サイトの規模が大きいと難しいです。そのため主要なページをいくつかピックアップしてワイヤーフレームを作成するのがいいでしょう。
ワイヤーフレームの関連項目
・UI/UX
・Webデザイナー
・Webデザイン
・アプリデザイン
・レイアウト
