「ワイヤーフレームなんて聞いたことない！」という方もいるかもしれませんが、概要を押さえるだけであればハードルは高くありません。

まずはこの記事で、ECサイトデザインにおけるワイヤーフレームの重要性について知っていきましょう！

ワイヤーフレームの目的と工程

ワイヤーフレームとは、「ワイヤー（線）」と「フレーム（骨組み）」を組み合わせた言葉で、一言で言うと「デザインの下書き」です。

ECサイトデザインの元になるもので、ECサイトを作る際は必ずワイヤーフレームを使用します。

ワイヤーフレームの目的

ワイヤーフレームの目的は、ECサイトのページ内で、

• どこに
• なにを
• どのように

表示させるかを明らかにすることです。

これにより、

• ECサイトに必要な要素の抜けやモレがなくなる
• デザインに関わるメンバーと全体の設計を共有できる

など、理想とするECサイトデザインをスムーズに実現しやすくなります。

ワイヤーフレームの工程

ワイヤーフレームを作るにはいくつかの工程があり、その工程を押さえておくことで、スムーズにデザインを依頼することができます。

ワイヤーフレームを作る工程は、

1. リストアップ
2. グルーピング
3. ランキング

の順番です。

1.「リストアップ」で、ECサイトの要素をすべて洗い出す

リストアップでは、ECサイトに載せる要素をすべて洗い出しましょう。
リストアップを行うことで、必要な要素の抜けやモレをなくすことができます。

例えば、

• 会社名
• バナー画像
• ロゴ
• 広告
• リンク

など、順番を気にせず、まずは思いつく限りの要素をリストアップしてください。

2.「グルーピング」で、つながりのある要素をまとめる

グルーピングでは、リストアップで出した要素のなかで、つながりのあるものをまとめます。

グルーピングの目的は、ECサイトに載せる要素を整理することです。
例えば、リストアップした要素のうち、

• 会社名
• ロゴ

は、同じグループになりますね。

また、

• バナー画像
• 広告
• リンク

も、ひとつのグループです。

このように、グルーピングすると要素をわかりやすく整理できて、徐々にECサイトのイメージができあがります。

3.「ランキング」で、優先したい要素の順位を決める

ランキングでは、グルーピングでまとめた要素のグループを比べて、優先したい要素の順位を決めます。
これにより、ECサイトで実現したいことが明らかになって、よりよいデザインに近づけることが可能です。

例えば、

• グループA：会社名、ロゴ
• グループB：バナー画像、広告、リンク

を比べたとき。

「自社ブランドをしっかりと伝えたい」という希望が強いのであれば、グループAを最も優先すべきです。

このようにランキングを行うことで、ECサイトで力を入れたいポイントがはっきりし、統一感がとれたサイトを構築できます。

トピックまとめ：ワイヤーフレームの目的と工程

まとめると、ワイヤーフレームの目的は、

• どこに
• なにを
• どのように

表示させるかを明らかにすることです。

そうすることで、

• ECサイトに必要な要素の抜けやモレがなくなる
• デザインに関わるメンバーと全体の設計を共有できる

というメリットが得られることをお伝えしました。

〈ここをチェック！〉ワイヤーフレームの工程

ワイヤーフレームを作る工程は、、

1. リストアップ：必要な要素の抜けやモレをなくすこと
2. グルーピング：ECサイトに載せる要素を整理すること
3. ランキング：ECサイトで実現したいことを明らかすること

です。
ワイヤーフレームの目的と工程を押さえて、ECサイトデザインをスムーズに依頼できるようにしましょう。

デザインを依頼するときに注意すべき「ワイヤーフレーム作成のポイント3つ」

ワイヤーフレーム作成にあたって、デザインを依頼する相手に伝えておきたいポイントが3つあります。

ポイントは、

1. デザイン要素は除いて考える
2. 手書きでなくデータでやり取りする
3. レスポンシブデザインへの対応を決めておく

です。

1. デザイン要素は除いて考える

ワイヤーフレームを作成する際は、ボタンの形や色などのデザインを考える必要はありません。

ワイヤーフレームはあくまで「設計図」です。

色やボタンの形などのデザイン要素が入ることで、ついそちらのイメージに気を取られ、本来の目的である「ECサイトの構成」がぼやけてしまう可能性があります。

「設計」と「デザイン」は、しっかりと区別して考えるようにしましょう。

2. 手書きでなくデータでやり取りする

ワイヤーフレームの作成にあたっては、手書きではなく、できるだけデータでやり取りすることをおすすめします。

おすすめする理由は、

• 筆記のクセや、スキャンの具合による人的な読み取りミスを防げる
• パソコン上でコピー＆ペーストができ、テキスト打ち込みが不要になる

の2点です。

つまり、データを用いることで誤字や脱字から起きる認識違いなどのヒューマンエラーを防ぎ、テキストの打ち込みが減ることで制作会社が作業できる時間を確保できます。

ミスを減らし、制作会社が作業する時間を確保することには

　　
• 工数が減って費用が下がる

　　

• デザインのクオリティアップに時間が使える

というメリットがあります。

制作会社のためにデータでやり取りをするように思ってしまうかもしれませんが、結局はそれが自社ECサイトのクオリティにも響いてくる可能性があるのです。

3. レスポンシブデザインへの対応を決めておく

ワイヤーフレームの作成においては、レスポンシブデザインへの対応を決めておくことが求められます。

レスポンシブデザインとは、異なるデバイスの画面サイズに合わせて、見やすい表示に切り替える仕組みのことです。

例えば、「PC」に合わせたECサイトを作ってしまったあとで「スマートフォン」に対応させる場合、さらにお金と時間がかかってしまいます。

ECサイトを作る前に重視すべきデバイスを決めておくことで、ムダな出費を防ぐことができるでしょう。

基本的には、「スマートフォン→タブレット→PC」の順にワイヤーフレーム作成を考えることがおすすめです。

モバイル端末には、

• 画面が小さい
• 操作しづらい

という制限があります。

そのため、PCからワイヤーフレームを考えてしまうと、最終的にモバイル端末のワイヤーフレーム作成で行き詰まってしまうことが多いです。

トピックまとめ：ワイヤーフレーム作成のポイントは3つ

このトピックでは、ワイヤーフレーム作成にあたり、3つのポイントがあることをお伝えしました。

3つのポイントは、

1. デザイン要素は除いて考える
2. 手書きでなくデータでやり取りする
3. レスポンシブデザインへの対応を決めておく

でしたね。

デザインを依頼する相手と、ワイヤーフレーム作成前に確認しておきましょう。

〈ここをチェック！〉ポイントを押えておけば、ムダなコストの発生を防げる

3つのポイントを押さえることのメリットは、

• サイト設計がブレない
• ヒューマンエラーが減り、時間の余裕が生まれる
• デザインの修正を減らしムダな出費を防げる

です。
それぞれのポイントを押さえておくことで、ムダなコストの発生を防ぐができ、結果的にクオリティの高いECサイトをデザインできるようになります。

ワイヤーフレームの重要性について知り、スムーズにECサイトのデザインを依頼する！

ここまで、ECサイトデザインにおけるワイヤーフレームの重要性について、紹介しました。

まとめると、ワイヤーフレームの目的は、

• どこに
• なにを
• どのように

表示させるかを明らかにすることです。

そして、ワイヤーフレームを作る工程は、

1. リストアップ
2. グルーピング
3. ランキング

の順番に行うことをお伝えしました。

またワイヤーフレーム作成にあっては、3つのポイントがありましたね。

3つのポイントは、

1. デザイン要素は除いて考える
2. 手書きでなくデータでやり取りする
3. レスポンシブデザインへの対応を決めておく

です。

ポイントを押えることで、

• サイト設計がブレない
• ヒューマンエラーが減り、時間の余裕が生まれる
• デザインの修正を減らしムダな出費を防げる

というメリットが期待できることをお伝えしました。

ワイヤーフレームの作る目的を知り、その工程を頭に入れることで、ワイヤーフレームの重要性がつかめたと思います。

また、デザインを依頼する相手と事前に確認するポイントを押えることで、ムダなコストの発生を防ぐことが可能です。

まずは、ECサイトにどのような要素をのせたいか、洗い出すことから始めてみましょう。

小テスト：ワイヤーフレームを作る工程

では、最後にこの記事のトピックをつかむための小テストをします。

【問題】：次のうち、「グルーピング」を行う目的に該当するものを一つ選びなさい。

ECサイトで実現したいことを明らかすること
必要な要素の抜けやモレをなくすこと
ECサイトに載せる要素を整理すること

【正解】3：ECサイトに載せる要素を整理すること
グルーピングの目的は、「ECサイトに載せる要素を整理すること」です。
「ECサイトで実現したいことを明らかすること」はリストアップの目的、「ECサイトに載せる要素を整理すること」はランキングの目的でした。