ホームページ制作を始める際に、最初に行うべき作業がワイヤーフレームの作成です。
ワイヤーフレームとは、
- ホームページの基本的な構造
- レイアウト
を示す設計図のことです。
本記事では、
- ワイヤーフレームの概要
- 作り方、注意点
- 役立つツール
などを解説します。
ワイヤーフレームとは？
ワイヤーフレームとは、ホームページの基本的な構造やレイアウトを示す設計図のことです。
ワイヤーフレームには、画像やイラストはほとんど使われません。
- テキスト
- 図形
- 線
などで構成されます。
ワイヤーフレームの目的
ワイヤーフレームの目的は、ホームページの全体像を把握し、制作の方向性を決めることです。
ワイヤーフレーム作成のメリット
ワイヤーフレームを作成することで、以下のようなメリットがあります。
- 制作の効率化
- 制作ミスの防止
- クライアントとの認識のすり合わせ
ワイヤーフレームの作り方
ワイヤーフレームの作り方は、以下の手順で行います。
- 目的やターゲットユーザーを明確にする
- コンテンツの整理
- レイアウトの決定
- ワイヤーフレームの作成
目的やターゲットユーザーを明確にする
ワイヤーフレームを作成する前に、
- ホームページの目的
- ターゲットユーザー
を明確にしましょう。
目的やターゲットユーザーを明確にすることで、ワイヤーフレームの方向性が定まります。
コンテンツの整理
次に、ホームページに掲載するコンテンツを整理しましょう。
- コンテンツの種類
- 量
- 順番
などを決めていきます。
レイアウトの決定
コンテンツを整理したら、レイアウトを決めましょう。
レイアウトは、
- コンテンツをどのように配置するか？
- どのようなデザインにするか？
を決めることです。
ワイヤーフレームの作成
レイアウトが決まったら、ワイヤーフレームを作成します。
ワイヤーフレームは、
- 紙
- ホワイトボード
- 専用ツール
などで作成することができます。
ワイヤーフレーム作成時の注意点
ワイヤーフレームを作成する際は、以下の点に注意しましょう。
シンプルにまとめる
ワイヤーフレームは、
- ホームページの基本的な構造
- レイアウト
を示すものなので、シンプルにまとめましょう。
わかりやすく表現する
ワイヤーフレームは、クライアントやデザイナーなど、さまざまな人が見るものです。
わかりやすく表現することで、認識のすり合わせをスムーズに行うことができます。
修正しやすいようにする
ワイヤーフレームは、制作の途中で修正する可能性もあります。
修正しやすいように、
- 余白を多めに取る。
- テキストや図形を簡単に変更できるようにする。
等の工夫をしましょう。
ワイヤーフレームに役立つツール
ワイヤーフレームを作成する際には、専用のツールを利用すると便利です。
専用ツールには、以下のようなメリットがあります。
テンプレートが用意されている
テンプレートが用意されているサービスもあります。
簡単にワイヤーフレームを作成することができます。
コラボレーションがしやすい
複数人で同時に作業をしたり、コメントを残したりできるツールもあります。
コラボレーションがしやすいです。
ワイヤーフレームに役立つツールとしては、以下のようなものがあげられます。
- Balsamiq Mockups
- Mockplus
- InVision
ワイヤーフレームでお困りの方へ
ワイヤーフレームでお困りの方は、以下の方法を試してみてください。
ホームページ制作会社に依頼する
ホームページ制作会社に依頼すれば、プロにワイヤーフレームを作成してもらえます。
ワイヤーフレームの作成講座を受ける
ワイヤーフレームの作成講座を受けると、ワイヤーフレームの作り方を学ぶことができます。
書籍やWebサイトを参考にする
書籍やWebサイトを参考にして、ワイヤーフレームを作成することもできます。
ワイヤーフレームは、ホームページ制作の第一歩です。
お困りごとがございましたら、お気軽にご相談ください。