ホームページ制作を進める際、「いきなりデザインから始める」というケースは少なくありません。
しかし、見た目から作り始めると、途中で構成が変わったり、必要な情報が抜けていたりして、結果的に大きな手戻りが発生します。
そこで重要になるのが「ワイヤーフレーム」です。
この記事では、ワイヤーフレームとは何か、なぜ必要なのか、そして実際の作り方についてわかりやすく解説します。
ワイヤーフレームとは？
ワイヤーフレームとは、ホームページの設計図のようなものです。
デザインや色、写真などは考えず、
どこに何を配置するか
ユーザーにどの順番で情報を見せるか
どこに問い合わせボタンを置くか
といったサイトの骨組みを決めるために作成します。
住宅で例えるなら、完成予想図ではなく間取り図に近い存在です。
なぜワイヤーフレームが必要なのか
情報整理ができる
ワイヤーフレームを作ることで、必要な情報を整理できます。
例えばホームページ制作会社のサイトなら、
サービス内容
制作実績
お客様の声
よくある質問
お問い合わせ
など、掲載すべき情報を洗い出せます。
ユーザー目線で考えられる
ホームページは「作りたい内容」ではなく「見たい情報」を優先する必要があります。
ワイヤーフレームを作る段階で、
「ユーザーは次に何を知りたいだろう？」
という視点で構成を考えることで、見やすくわかりやすいサイトになります。
デザイン工程がスムーズになる
構成が決まっていない状態でデザインを始めると、何度も作り直しが発生します。
先にワイヤーフレームを作っておけば、デザインやコーディングを効率よく進められます。
ワイヤーフレーム作成の手順
1. ホームページの目的を決める
最初にホームページの目的を明確にします。
例えば、
問い合わせを増やしたい
資料請求を増やしたい
採用応募を増やしたい
商品を購入してもらいたい
などです。
目的によって必要な構成は大きく変わります。
2. ターゲットを決める
次に誰に向けたサイトなのかを決めます。
例えば、
個人事業主向け
中小企業向け
飲食店向け
子育て世代向け
などです。
ターゲットが変われば、必要な情報や伝え方も変わります。
3. 必要な情報を書き出す
ターゲットと目的が決まったら、掲載する情報を洗い出します。
例えばホームページ制作会社の場合は、
キャッチコピー
強み
サービス内容
制作実績
お客様の声
よくある質問
お問い合わせ
などです。
この段階では順番は気にせず、とにかく書き出していきます。
4. 情報の優先順位を決める
洗い出した情報を並べ替えます。
一般的な流れは、
興味を持つ
信頼する
詳しく知る
問い合わせる
です。
例えば、
ファーストビュー
↓
強み
↓
サービス内容
↓
制作実績
↓
よくある質問
↓
お問い合わせ
という流れになります。
ユーザーの心理に沿って配置することが大切です。
5. レイアウトを作る
ここで初めてワイヤーフレームを作成します。
紙に手書きでも問題ありません。
四角や線だけで、
画像
見出し
本文
ボタン
を配置していきます。
この段階ではデザイン性は不要です。
情報の流れを確認することが目的です。
ワイヤーフレーム作成でよくある失敗
最初からデザインを考える
ワイヤーフレームは設計図です。
色やフォント、写真選びに時間を使う必要はありません。
まずは構成を固めることが重要です。
情報を詰め込みすぎる
「あれも伝えたい」「これも載せたい」と考えると、情報量が増えすぎます。
ユーザーはすべてを読むわけではありません。
本当に必要な情報だけを優先して配置しましょう。
問い合わせ導線が弱い
せっかく興味を持ってもらっても、問い合わせボタンが見つからなければ成果につながりません。
ワイヤーフレームの段階から、
ファーストビュー
中間部分
フッター付近
などに問い合わせ導線を設置しておくことが大切です。
ワイヤーフレーム作成におすすめのツール
ワイヤーフレームは紙でも作れますが、最近ではオンラインツールを利用することも増えています。
代表的なものとして、
Figma
Adobe XD
Canva
Miro
などがあります。
特にFigmaは無料でも利用できるため、多くのWeb制作者に使われています。
まとめ
ワイヤーフレームはホームページ制作の土台となる重要な工程です。
デザインより先に構成を考えることで、
情報が整理される
ユーザー目線で設計できる
制作効率が上がる
手戻りが減る
といったメリットがあります。
ホームページ制作で成果を出したいのであれば、まずはワイヤーフレームを丁寧に作ることから始めてみてください。
完成したサイトの良し悪しは、デザインではなく設計段階で決まることが少なくありません。
