この記事を見られた方は「ワイヤーフレームってなに？？」「ワイヤフレームって大事なの？」と思われている方ではないでしょうか。
なかには、ワイヤーフレームを使わずにホームページを作成する方もいるでしょう。ですが、ワイヤーフレームを事前に作ることで「作業メンバーとの情報交換」「レイアウトの配置」などを確認できます。
作成を開始してからの作業スピード、打ち合わせの内容に差が出る大切な作業になります。
ワイヤーフレームについて検索すると、様々な記事で情報が得ることが出来ますが、僕の記事では、サッカーに例えてワイヤーフレームの記事を書きたいと思います。
なぜ、サッカーに例えて記事を書こうと思ったのか…
僕のこれまでの人生がサッカー一色だったからです。
サッカーだけが唯一続いている僕の取り柄です。幼少期からサッカー漬けの毎日でプロを目指し、どうにかプロになりたいという思いが強く単身ブラジルに渡り三浦和良選手、中澤祐二選手がブラジル留学を経てプロになった経緯と同じように可能性を信じて渡伯しました。
結果、代理人の目にとまり、ミナスジェラス州のesportivo de passosというチームとプロ契約をしました。
この話しは、2005年20歳の時の話です。その後は、WEB広告業界で5~6年勤め、美容サロン向けの予約システムの集客サポートを経験し今に至ります。
そんな過去の経験から今僕ができることはサッカーとWEB業界のことについて、記事を書くことだと思っています。
僕なりの記事でワイヤーフレームを紹介しますので、一人でも多くの「WEB知識を身につけたい」サッカー好きな方に読んでもらえたらと考えています。
ワイヤーフレームとは？
ワイヤーフレームとは「ホームページのレイアウトやコンテンツの配置を決めるための設計図」になります。
サッカーでいうと、戦術に例えると分かりやすいと思います。
スターティングメンバーで誰が出るのか、ポジション、配置、攻撃中心なのか、それとも、守備的なのかを、試合前に監督が、チームでやるべきことを選手に伝えます。
チームによっては、作戦ボード（サッカーコートが書いてあるボード）や、地面に落ちている木を使ってコートの絵を書き、戦術を選手に伝えます。
作戦ボードで戦術を選手に伝えるのと同じように、ホームページを作成する時も、ワイヤーフレームを作ります。
ワイヤーフレームは、「ホームページ版 作戦ボード」の役割になります。
例えば、作戦ボードで、事前に戦術について、決まり事を決めなければ、誰がどこのポジションについて、どんな役割で動くのかを選手はイメージできません。分かりやすく伝えることができます。
ワイヤーフレームも同じで、事前に作成することで、どこに何を配置するか、どんな役割を果たすのかを最初に作成します。
ワーヤーフレームがあることで、完成したホームページを想像することができます。
ワイヤーフレームの目的
最初に、ワイヤーフレームの目的について４つ紹介します。
情報整理のため
サッカーは、1チーム11人で対戦相手を含め22人で試合をするスポーツです。1チーム、スターティングメンバー（スタメン）と、補欠（ベンチ要員）で試合をします。
監督は、誰をスタメンにするか？ベンチ要員は誰にするか？試合前に決めます。（詳しくは言うと前日までに決定したりします）
誰が試合に出るのかを決める下準備を、ワイヤーフレームの目的に例えると、「情報設計」になります。
どういうコンテンツ（文章や写真）をどういう順番で配置するのか。
などを決める工程になります。
ホームページで取り扱うテキストや画像はかなりの数になるので、単純にテキストだけで決めず、ワイヤーフレームを作ることで、作業にスピード感をもたせることができます。
「情報設計」の段階では、「なんとなく、こういう感じの文章を置いておきたい」というイメージで十分です。
ホームページのレイアウトを決めるため
ホームページには、様々なレイアウトの種類があります。
レイアウトの種類については、追って紹介したいと思います。
ワーヤフレーム作成前に、どういったレイアウトを採用するのかを決めていきます。
先ほど、情報整理の説明で、「選手のコンディションや、特徴、強みを活かせるかなど」を監督が決めると書きました。
監督は、情報整理の段階で「選手のコンディションや、特徴、強み」を考えた後、どこのポジションで選手が使えるかイメージします。
例えば、利き足が、右足で、足が速く、ドリブルがうまい、そして攻撃的な選手であれば、右サイドの前線かな？みたいな感じです。（現代のサッカーの戦術だと、右足の選手を左サイドで使っているチームもあります・・・詳しく書きたいですが、記事の目的とズレるので書くのを我慢します・・・涙）
そのため、ワイヤーフレームを作成する準備として、コンテンツの整理だけではなく「どういったレイアウトを採用するのか」を決めておくことが、サッカーの戦術だけではなく、ホームページの設計段階でも非常に重要なになります。
事前に戦術を決めておけば、ワイヤーフレーム作成する際に、レイアウトを決める作業がスムーズになります。
プロジェクトメンバーと認識を合わせるため
ホームページを制作するには、全てを、一人の担当者が作成するわけではありません。
大半の制作会社の場合、「デザイナー」「エンジニア・コーダー」と作業ごとに担当が分かれており、作業ごとの担当と打ち合わせをしながら制作を進める必要があります。
サッカーと同じで、ホームページ作成もチームワークが必要になります。
サッカー選手にも、「シュートがうまい」「パスがうまい」「攻撃力はないけど、守備がうまい」など得意、不得意があります。
その得意、不得意で、任されるポジションがことなります。同じ選手が11人よりも、それぞれ得意としている人を11人集めたほうが強いからです。戦術もうまくいきます。
それと同じように、ホームページ作成も、各担当がいて、作業を分担して作業をしています。
作業ごとの担当がいるから、認識を合わせるための資料としてワイヤーフレームを使って情報共有をすることができます。
サッカーもチームの共通理解は大事です。「前半の10分は前から積極的にプレッシャーをかけるのか」「守備重視にいくのか」で、試合の進め方が変わってきます。
ワイヤーフレームも戦術と同じで、ミーティングなどで決まったことは全てワイヤーフレームに反映させます。各担当が工程での認識ミスや、ズレが起こるのを防ぐためです。
アイデア出しや議論の「たたき台」にするため
ワイヤーフレームは、線と文字だけの設計図ですが、ある程度「実際の完成図」のイメージを持つことができます。
サッカーでも、イメージトレーニングがありますが、ワイヤーフレームが、イメージトレーニングに当てはまります。
サッカーのイメージトレーニングは、試合に勝つイメージだったり、自分が良いプレーをするために、スーパープレー集を見たりして、実際の試合をイメージします。
そうすれば、プレーした時に、頭で考えないで感覚で、体が動いたりするからです。
ワイヤーフレームだと、
・ここに、こういう写真を持ってきた方がいい？
・お問い合わせのボタンはこの辺につけよう！
などアイデア出しに使えます。設計段階で実際の完成図をイメージすることは、すごく大事なことだと思います。
ワイヤーフレームの作り方
ここまでは、サッカーでいう情報収集や、試合に向けての想定、準備に例えて話しました。
次に「ワイヤーフレームを実際に作る」手順を説明したいと思います。
まずはサイトマップを作る
まずは、サイトマップという、「ホームページの個別ページ（作戦ボード）」を作っていきます。
例えば、「問い合わせページを作るので、問い合わせ内容を入力する、フォームが必要になるな」など、作るページが決まったら、何が必要かを掘り下げて考えていきます。
サッカーに例えると、相手チームは、「左サイドの攻撃が多いから、右サイドを強化しよう」みたいな考え方です。試合開始から終了まで、どんなプランで進めるのか、スタメンを決める時や、交代をする時など、試合の流れを想定して、戦術を決めていきます。何もプランがない状態で試合をすると、予期せぬアクシデントで戦術を変えなければいけません。
同じようにワイヤーフレームもいきなり書き始めると、後から、新しいページが追加になったり・削除したいページが出たりと、フレームワイヤーを書き直さなければいけないため、サッカーの試合プランを考えるのと同じで、ワイヤーフレームを書く前に、作りたいホームページの全体像（サイトマップ）を作ることが大切です。
ワイヤーフレームを作るページを決める
試合プランを想定できた後は、得意とするポジションに選手を複数人配置してみて、バランスを見ていきます。
スタメンに誰が出るか、万が一、誰かが退場したら、退場したポジションは誰が対応するのか？などです。
ワイヤーフレームでも、何のページを作るか決めていきます。
ワイヤーフレームは、全てのページをワイヤーフレームにするのが最も理想ですが、他の業務と兼任してたり、忙しい場合など無理があると思います。
この場合、ワイヤーフレームにするページをいくつかピックアップするのが現実的です。
サッカーだと、スタメンだけを決めるイメージです。サッカーは、監督が戦術を決めています。色々な監督がいるので、それぞれが好んでいる戦術や選手のタイプがあり、監督によって、戦術はさまざまです。
下記の判断軸に沿って決めるとスムーズにできますので参考にしてみてください。
- 重要な役割を果たすページを優先する
- 1レイアウトにつき1ワイヤーフレームを作成する
サッカーでは、決まっているポジションが1つだけあります。それは、ゴールキーパーです。試合をする上で、キーパーがいなければ試合は成立しません。一番相手チームからボールが飛んできます。最後の砦です。
ホームページでも、問い合わせページや、採用ページがありますが、一番、ページに訪問するユーザーの割合が多いのが、トップページです。
そのため、トップページをワイヤーフレームにすることは必須になります。
例えば、問い合わせ数を目的（ゴール）にした場合、問い合わせができるフォームも重要です。
何が重要なページなのかを明確にして、ワイヤーフレームを作りましょう。
ページのレイアウト
ワイヤーフレームを作成するページが決まったら、次はレイアウトになります。
ホームページには代表的なレイアウトが存在します。
ホームページの目的に沿って、どのレイアウトを採用するかを決めることをオススメします。
サッカーでいうと、4-4-2、3−5−2、4−3−3のようなフォーメーションの配置を意味します。
4−4−2は、サイド攻撃が中心のシステム（2006年ドイツワールドカップのジーコジャパンの布陣※中盤の配置にもよる）、3−5−2だと、中盤に厚みを持たせたシステム（2002年日韓ワールドカップのトルシエジャパンの時の布陣）、4−3−3（メッシが所属しているバルセロナ、2019年のJリーグを優勝した横浜マリノスの布陣、攻撃的システム）です。
サッカーのシステムでも、フォーメーションによって特徴があります。レイアウトも同じです。
1カラムレイアウト
カラムとは「列」のこと。1カラムは1列にコンテンツを縦に並べるレイアウトのことです。
1カラムレイアウトのデザインイメージはこちら
1カラムレイアウトのメリット
- 画面幅いっぱいに使うことができる、インパクトを与えやすい
- 上から順番に見えていくため、ストーリーが作りやすい
1カラムレイアウトのデメリット
- コンテンツの量が多いと縦に長くなりすぎるため、読みにくい
- 画像や動画などの素材がないと寂しく見えてしまう
画面幅をいっぱいに使ってコンテンツを見せられるため、インパクトのある訴求しやすいのが特徴です。
そのため、広告用のランディングページやブランドの訴求によく使われます。もしくは、コンテンツの量が少なく1ページでまとめたい時に使います。
インパクトのある訴求をできる点が、4-3-3のフォーメーションに似ています。
タイル型レイアウト
コンテンツの要素を「タイル状」にして並べるレイアウトです。
タイル型レイアウトのデザインイメージはこちら
タイル型レイアウトのメリット
- コンテンツをたくさん並べられる
- 探しやすい
- スマホ対応しやすい
タイル型レイアウトのデメリット
- 情報量が限定的される
- コンテンツに優先順位がつけれない
たくさんのコンテンツをコンパクトに並べることが多いため、ブログサイトで使われることが多いです。
たくさんのコンテンツをコンパクトに並べられる点が、3-5-2のフォーメーションに似ています。
マルチカラムレイアウト
1カラムレイアウトとタイル型レイアウトを組み合わせたようなレイアウトです。
企業サイトなどで、最もよく用いられるレイアウトかと思います。
マルチカラムレイアウトのデザインイメージはこちら
マルチカラムレイアウトのメリット
- 情報が整理しやすい
- 情報に強弱がつけやすい
マルチカラムレイアウトのデメリット
- 情報量が限定される
- 1カラムやタイル型と比べてスマホ対応しにくい
情報が整理しやすく、コンテンツの強弱もつけられます。
もっとも多く用いられるところから、4−4−2のフォーメーションに近いです。
サイドバー固定レイアウト
サイドバーを固定し、スクロールしても常に表示されているようにするレイアウトです。
サイドバー固定レイアウトのデザインイメージはこちら
サイドバー固定レイアウトのメリット
- メニュー（サイドバー）を常に表示できるので、ユーザーが迷いにくい
サイドバー固定レイアウトのデメリット
- スマホで閲覧するときには使用できない
ユーザーがいつでもメニューを見れるところと、目的のコンテンツにたどり着き安いのがメリットです。
ただし、PCなどのある程度の横幅のディスプレイがあるものでしか利用できないデメリットもあります。
サッカーでいうと、あまり例がありませんが、2002年日韓ワールドカップの日本対トルコ戦で当時、三都主 アレサンドロ選手をサイドの高めに固定して使った布陣になります。ちょっとマニアックな例えになりました。
ワイヤーフレームを書く
レイアウトが決まったら、ようやくワイヤーフレームを作っていきます。サッカーだと、監督が、作戦ボードにスタメンを配置していく段階です。
各要素の設置
TOPページを4つの要素に分けて、コンテンツを設計していきたいと思います。
今回は、マルチカラムレイアウトを使ってコンテンツを設計したいと思います。（フォーメーションでいう4-4-2に似ているレイアウトです）
レイアウト(ポジション)は下記、4つに分けられます。
- ヘッダー・グローバルナビゲーション(フォワード)
- メインビュー(ミッドフェルダー)
- コンテンツエリア（ディフェンダー）
- フッター（ゴールキーパー）
になります。
ヘッダー・グローバルナビゲーション(フォワード)
サイトの一番上に表示される部分です。
（一番多く見られる花形ポジションです）
ヘッダーやグローバルナビゲーションと言われています。
全ページに表示される共通部分のため、サイト全体を目次として情報を整理できるのがポイントです。
種類が異なるページは配置や見え方を変えるとインパクトが変わります。
サッカーだと、フォワードのポジションをイメージできます。フォワードでも、特徴があり、ゴール前で力を発揮するタイプや、ポストプレーをするタイプがいます。それぞれの個性によって、見せ方を変えるとインパクトが変わると覚えると理解しやすいです。
メインビュー
メインビューは、ユーザーがTOPに入ってきたときに、真っ先に目に入る重要な部分です。
インパクトのあるキャッチコピーや画像を入れて、サイトを印象付けることが重要です。
サッカーでいうと、司令塔に該当しそうです。今回はオーソドックスな4-4-2のフォーメーションなので、中盤はダイヤモンド型です。メインビューは、中盤4人の頂点をイメージすると分かりやすいです。
コンテンツエリア
4つに分けて説明をしていますが、最も重要なのが、この部分です。
重要なポイントは下記になります。
- 全てのコンテンツを並べない
- 見せたいコンテンツから並べる
トップページで掲載する情報は「特にユーザーに見て欲しい情報」に絞ると強弱がつけられるので効果的です。
いきなり、綺麗に情報を整理するには経験やノウハウが必要になります。
ポイントは「どの情報を優先してユーザーに見せたいか？」です。
それによってコンテンツの配置や順番が、決まってきます。
サッカーに例えると、ディフェンダーをイメージしてもらえると分かりやすいと思います。デフェンダーがしっかりしないと、失点をしてしまうのでチームも強くなりません。
今回のコンテンツエリアのポジションは、「ユーザーに見て欲しい情報」＝情報の質が高い情報を掲載するポジションになりますので、考えて配置をしたほうがいいです。
フッター
ページの一番下に表示される要素です。
ここもヘッダーと同じく、全てのページに共通して表示される部分です。
主に、コンテンツを最後まで読んだ人が見る部分です。ここにもサイトの全体像がわかるように目次として使うことをおすすめします。
ヘッダーと違い、フッターは縦幅が大きくなっても大丈夫ですので、ページをできるだけ掲載すると良いでしょう。
フッターは、最後の砦、ゴールキーパーのポジションを意味します。ゴールを守るというイメージでありませんが、各レイアウトの最後に該当します。そのため、ページの最後という意味でも、ゴールキーパーをイメージすると良いと思います。
ワイヤーフレームを作る際の注意点
ワイヤーフレームを作る上での、注意点を4つまとめましたので紹介したいと思います。
- ワイヤーフレーム作成を判断する基準
- デザインは完璧でなくていい
- スマホ版は別に作る
- 競合サイトを分析
になります。詳しく説明したいと思います。
ワイヤーフレーム作成を判断する基準
今回はTOPページのワイヤーフレームを作成しました。
ワイヤーフレームを作成するページの判断基準は下記になります。
- ページのコンテンツが大幅にことなる
- 特有のレイアウトを使用している
- 非常に重要な役割を担っている
時間がない場合は主要ページに絞ってワイヤーフレームを作成しましょう。
サッカーでも、対戦相手がいます。対戦相手に合わせて、戦術もフォーメーションも変わります。同じように、ワイヤーフレームを作る時も同じで、ページに合わせて、判断することが大切です。
デザインは完璧でなくていい
サッカーでは、開始前に、ウォーミングアップでケガをしたり、予期せぬ事態が起きたりします。元々考えていたプランを再度練り直さなければいけません。
指揮をとるのは監督ですが、監督だけがなく、コーチもいっしょに戦術を考えたりします。
コーチ側ですべての戦略を考えようとすると、監督自身に、先入観が生まれてしまいます。そのため、指揮をとるのは監督ですので、一部の情報を監督に知らせ最終判断をします。
ワイヤーフレーム作成も同じことが考えられます。
ワイヤーフレームを作る際に起きやすい失敗は、できるだけ実際のホームページに近づけようとしてしまい、デザインの要素もワイヤーフレームに入れてしまうことがあります。
無意識に、完璧に作ろうとしてしまいます。
一見完成度が高く見えますが、あくまでワイヤーフレームの目的は「情報を整理すること」です。
過度にデザイン要素を入れてしまうと、制作を行うデザイナーがワイヤーフレームに引きずられてしまうこともあるので気をつけましょう。
スマホ版は別に作る
「スマホ版を別に作る」をサッカーで例えるのはちょっと難しいですが、もし、サッカーコートの大きさが変わったりしたら、選手のポジションも変更すると思います。
ワイヤーフレームも同じで、スマホ版はPCに比べて、画面の横幅が小さいのでレイアウトを変更する必要が出てきます。
そのため、スマホ版は別のワイヤーフレームを作成するのが理想的になります。
ここも主要ページのみスマホ版のワイヤーフレームを作成するなど工夫してやってみるといいと思います。
競合サイトを分析
サッカーでは、対戦相手の試合映像を何度も見ます。対戦相手は、どんな戦術、戦い方をするのかを、試合映像を元に、戦術を組み立てます。
ワイヤーフレームでも競合サイト・他社サイトのチェックは有効です。
ワイヤーフレームで、もし、悩むことがあれば、他社の競合チェックをしてください。
- どんなレイアウトを使っているのか？
- コンテンツの配置はどうしよう・・・
をチェックするといいと思います。
ワイヤーフレーム作成のためのツール
前述しましたが、対戦相手の試合映像だけではなく、蓄積したデータから、走行距離や、ボールの支配率、攻撃回数や、攻め方の割合などさまざまなツールで蓄積したデータを元に、戦略を練ります。
蓄積されたデータが見れるツールがなければ、より具体的な戦略を選手にも伝えることができません。
ワイヤーフレームも、ツールを使って作成するのがオススメです。
ポイントは「関与する人が、使い慣れたツール」で作成することです。
よく作成に使われているのは、
- パワーポイント
- エクセル
になります。
パワーポイント
本記事のページのレイアウトは、パワーポイントで作成しました。
パワーポイントを使うメリット
- 使い慣れている人が多い
- □や△などの図形が豊富にある
パワーポイントが最も一般的なツールで、資料をパワーポイントで作成している方であれば問題なく作成できると思います。
パワーポイントを使うデメリット
- 複雑なレイアウトになると編集しにくい
- 情報量の多いページには不向き
一番使い慣れたもので作成をしてみましょう。
エクセル
エクセルを使うメリット
- 使い慣れている
- 罫線で区切られている見やすい
パワーポイントと同じく、使い慣れている人が多いのがエクセルです。
罫線で区切られているため、見やすいのがメリットですが、情報を盛り込みすぎると逆に見づらくなるので注意が必要です。
エクセルを使うデメリット
・図形のバリュエーションが少ない
・複雑なレイアウトになると編集しにくい
図形を自由に挿入できるわけではないので「チェックボックス」「送信ボタン」などを表現するのが難しいです。
総括（まとめ）
今回、ワイヤーフレームを、サッカーの監督目線で、戦術に例えて説明してみました。
ワイヤーフレームとは「ホームページのレイアウトやコンテンツの配置を決めるための設計図」になります。
ホームページを新規で作った場合、何もない状態から形にしていく作業になりますので、どんなレイアウトにしたいか、完成をイメージして、ワイヤーフレームを作っていくことが大事になります。
レイアウトにも様々な形があるので、どれにするかを相談しながら決めていくといいと思います。
お店や企業の顔となるホームページです。誰でも、良質なホームページは作りたいと思うはずです。
そのためにも、ワイヤーフレームを作る重要性を、知ってもらえたらと思います。
今回は、サッカーの戦術に例えて説明しましたが、何かに置き換えて考えることは重要だと思いますし、記事を書きながらサッカーの戦術に似すぎてビックリすながら記事を書きました。
少しでも興味もって見てもらえたら嬉しいです。
