ワイヤーフレームは、webページを作る際に必要となるレイアウトを決める上で必要となる設計図のようなものです。
これさえ見れば、どこにこの項目が来るのかというのが一目でわかるようになります。
ワイヤーフレームを作り、完成した場合のイメージを可視化することで、必要な項目が配置されていなかった場合の発見につながってきます。
そして、実物のレイアウトを作った後、想定より見づらくなっている等のトラブルを未然に防ぐことができます。
ワイヤーフレームには、イメージを可視化する役割があります。
例えば、複数の人数でwebページ制作をしている際にも、イメージが統一されるようにするため、個人の認識のズレや作業のブレを防ぐことができます。
また、画面に足りない要素、必要ない要素なども最初にチェックすることも可能となっています。
個人でワイヤーフレームを用いてwebサイトを制作するのにも有効ですが、制作会社に制作依頼を出す時の方がさらに有効です。
webサイトの制作には、いろんな人が関わってきます。
なので、関係者に対して共通の認識があるかどうかというのが、スムーズに制作できるかどうかの分岐点になります。
仮に、それぞれ異なった想像をもって作業を行うと、作業が停滞したり、クライアントの想像と異なるものになる可能性がでてきてしまいます。
ゆえに、このフレームがあることで、クライアントも製作者の人たちも、全ての人たちが完成イメージを共有が可能になります。
なので、意思の疎通が容易になり、ワークフローが簡潔になります。
なぜ、ワイヤーフレームを作る必要性があるのかを２つの項目に分けてご説明します。
あらかじめ、ワイヤーフレームによってレイアウトをはっきりさせておくと、webサイトの作成をより円滑に行うことができます。
もし仮に、ワイヤーフレームなしでwebサイトの作成をすると、どういうことが起こるのかを解説します。
サイトを作るのはいいけれど、後々この要素がいらないな、とかこれとこれを逆にすべきだといった、事案が発生してしまう可能性があります。
実際に作っていく最中にレイアウトの変更が間に生じると、他の要素やパーツにも影響を及ぼしかねません。
結果として、作業効率が大幅に低下する事態にもつながります。
ワイヤーフレームを作っておくことにより、webサイトに必要な要素、配置場所を明確にできて、過不足なくコンテンツを制作することができます。
webサイトには、色々な要素があるけれど、これは適当な場所に適当に配置されているわけじゃありません。
例えば、3分程度の紹介動画が画面いっぱいに表示されていたとします。
これは、作品のインパクトや世界観を伝えるための工夫が施されています。
こんな感じで、サイトを作る目的に合わせて、最適な配置や導線を組み込む必要があります。
その際に、ワイヤーフレームを活用すると、よりよいwebサイトが作れます。
ワイヤーフレームを作るにあたって、押さえておくべきコツとなぜこれが必要なことなのかという理由などを解説していきます。
ユーザーにとって、なんでこの要素が必要なのだろう。
ユーザーの人にとっては、この優先順位はこれを重視するらしいから、高い方だろう。
といったように、要素となぜそこに配置したかの理由を言語に変えてみましょう。主に、２つの理由があります。
クライアントや制作メンバーとの議論の時に、主観的な議論ばかりになることがあります。
複数の意見が出てきた場合、根拠や理由が無いとどの意見が優先されるべきかわからなくなります。
結果として、ユーザー目線のwebサイトにできない可能性がでてきます。
例として、ユーザーの要望に答えて、目立つ場所に必要な要素を配置したといったように、その場所に設置した理由や意図を解説できるとよりよい議論になるでしょう。
webサイトの完成後は、効果測定を行いましょう。
そして、ワイヤーフレーム作成時の仮説が正しかったのかを検証します。
webサイトの作成後は、検証・改善・継続の３つが重要となってきます。
作った時の仮説さえあれば、仮に間違っていたとしてもどこを改善すべきかがすぐに検討することができます。
何となくこっちの方がいいと思っていたからと言うようではNGです。
常に理由や根拠を言語化できるようにし、関係者に説得することで、認識のズレを解消しやすくできます。
説明できないようであれば、まだ詰めが甘いかもしれないので、事前にチェックしておきましょう。
なお、説明する時は、口頭で行うこともあれば、説明用の資料を作成して行うこともあります。
ワイヤーフレームを完成させた際には、なぜその設計にしたかの経緯や要素の説明可能な準備をあらかじめするといいでしょう。
どうしてそのwabサイトを作るのか、リニューアルを行うのかをしっかりと明確にしておきましょう。
目的が明確であれば、他の制作者などの人と意見が分かれていても、何を優先すべきか決めやすくなるでしょう。
目的を明確にするためには、事前にユーザー行動のリサーチや分析を行い、現状の課題をはっきりとさせることが必要となります。
例えば、ユーザー行動が一目でわかるグーグルアナリティクスやヒートマップなどを使うとしましょう。
そしたら、今現在のwebサイトのどこを読者が読んでいるか、はたまた、どこでページを離脱するのかという情報が手に入ります。
これを基に、ページ内の原因箇所を細かく分析できます。
うまく使って、効率的にゴールに向かうための方針をしっかりリサーチしましょう。
ワイヤーフレームは、どの要素をどこの配置に置くかなど、あくまで情報設計するということが目的です。
配置を考えているうちに、この配置の色は、青より緑が合う。
いつの間にかこんなふうに、デザインに力を入れることが起こる可能性があります。
最初からデザインを作り込んでも、後々変更点が出てきてしまったら修正の手間がかかる事態になります。
なので、ワイヤーフレーム作成の時点ではデザインの詳細は考慮せずに、構成や情報の設計のみを考えましょう。
「ここに文字が入る」といったような文字の仮テキストを入れてしまうと、完成イメージとズレが生じてしまいます。
後半の行で修正を加えることになると、時間の無駄ができてしまい大きな改修のコストがかかります。
できる限り、文章や画像などを増やして、完成時のイメージとのズレを抑えておきましょう。
では、実際にwebページ制作に役立つワイヤーフレームの作り方を見ていきましょう。作成手順は、主に３行程に分かれます。
ピックアップについてですが、こちらはwebページに載せる情報・要素を全て書き出す手順となります。
例を挙げると「電話番号」「サイトの名称」「広告」など、紙などに必要な要素などを挙げて書きます。
これらの情報は、後々整理するので、この段階ではきれいにまとめる必要性はないです。情報の抜けがないように、思いつく限り挙げていきましょう。
どの情報がいるのかイメージが湧かないなら、ライバルサイトに載ってる項目を参考に書き出すのもありです。
そこから、自分のサイトに欲しいものをチョイスしていくのもいいでしょう。
グルーピングとは、前の作業で出てきた複数の情報から、性質が似ているものをグループ分けしていく作業を指します。
こちらも例に挙げると、「住所」と「電話番号」はどちらも連絡先のため、同じグループになります。
「ロゴ」と「会社名」はどちらも会社のことを表すため、同じグループといった感じです。
このようにグループ分けしておくと、実際のwebページになった時に、情報がバラバラでよくわからないような事態を防げます。
ここでいうランキングとは、グルーピングした情報に優先順位をつけていくことです。webサイトの目的に従い、適切な優先順位を付けていきましょう。
例を挙げると、ドラマやアニメ・映画などの公式サイトにて作品の軸や顔となる、「ストーリー」「キャラクター」などは高い優先順位をつけます。
対して、後々作品を支援する形で「主題歌」「作品情報」などの要素は、比較的優先順位が低いです。
なので、この場合、目立たない場所に設置する。
このような感じで情報が整理され、その後レイアウトという行程に入ります。
ワイヤーフレームを作成する際に、使われる専門用語をご紹介します。
どれも異なる意味を持っているので、ワイヤーフレームと何が違うのか確認しながらご覧ください。
デザインカンプとは、ワイヤーフレームを基本にして作られる、本番用のデザインです。ちなみに、実際のサイトと全く同じデザインであるのが特徴です。
ここから逆算すると、ワイヤーフレームを作る時点では、デザインのことはほとんど考慮しなくて良いということですね。
サイトマップとは、webページすべてのページを一覧にしてまとめて整理したものとなっております。
ワイヤーフレーム・デザインカンプは、それぞれ、１ページの構成を指します。対して、サイトマップは、サイト全体のページ構成を視覚的にわかりやすく示すものです。
サイトマップは大きく分けて2種類あります。
ユーザーにサイトの構成を伝えるためのHTMLサイトマップと、Googleのロボットに伝えるためのXMLサイトマップがあります。
ディレクトリマップは、サイト全体のページをリンク元を親、リンク先を子として整理してExcelなどの表に仕上げたものです。
一見、サイトマップと似ているように見えますが、この場合、製作陣が確認するものになります。
なので、ユーザーに直接利用されるものではないです。
ディレクトリマップは、webサイトに必要なページなどを洗い出したり、整理する時に作るものです。
情報が整理できたのであれば、次は早速、レイアウトをしていきます。
webサイトのレイアウトは、代表として何個かあり、時代の背景によって、トレンドが変わっていくものです。
そして、デザインから受ける印象や機能性などが違ってきます。
自分のwebサイトの目的やイメージ、機能性や操作性、とっつきやすさなどを総合的に考えて、今まで整理した情報を設置しましょう。
レイアウトの時によく使われる用語を解説していきます。
webページの上の方に表示されているスペースの名称です。
最初に目にする部分のため、webページのタイトルロゴを置いたり、ページのイメージとなるものを設置する場合が多いです。
簡単にいうのであれば、ヘッダーの逆です。
細かく解説するとwebページの下の方に表示されているスペースの総称です。
利用規約やプライバシーポリシーなど、何回も見るものではないが、重要である要素を配置していることが多いです。
webサイト内のすべてのwebページに設置されているメニューです。
どこのページからもアクセスが可能なので、重要なページのリンクはこれに設置します。
メインコンテンツの横の方に設置されているメニューのようなものです。
ブログなどでよく見かけるでしょう。
関連記事や最新記事、よく見られている記事や日付ごとの記事数などへの移動ができます。
縦のライン、つまり列の形のコンテンツのことを「カラム」といいます。
それに対して、横のライン、すなわち行の形のコンテンツを「ロー」と呼びます。
例を挙げると、サイドバーがあるサイトは、メインコンテンツの横に別の情報が記載されています。
縦２列、つまり２つのカラムのサイトと言えます。
ワイヤーフレームを作る時は、カラムの数をどうやって設定するのか、ヘッダーにはどの項目を配置するかといったことを考えながら構造を決めていきましょう。
そして、ページを閲覧したユーザーの視点に立って、よりわかりやすいワイヤーフレームを作るといいです。
情報の優先順位とレイアウトに従って、どの要素をページのどこらへんに配置するのかを決定していきましょう。
最初は手書きで、さらっと配置を書いていきます。
webサイトを見る人の目線や感覚を意識しながらやってみましょう。
見る人の視線は、基本的に画面の左上から右、そして左下から右へ（つまり「Z」の文字を描くように）移動していきます。
見る人の気持ちを考えて、そのページに求めている情報は何なのかを考えましょう。
優先度が高い情報ほどページの上部に配置するといった配慮も忘れずに。
１ページに盛り込む情報が多すぎると感じた場合、優先度の低い情報を割愛するか、もしくは別ページに移すことも考えましょう。
ワイヤーフレームを作る際に、何のツールを使用すればいいのかという最適解は、人それぞれ違うということを念頭に置いてください。
さらに、極論を言うのであれば、手書きでも十分に作成可能ということになります。
しかし、一般的なものは、ツールを使って作成するものが多いです。
なぜなら、データ化さえしてしまえれば、簡単に他の制作者の人やクライアントの人などと共有できますし、修正も簡単に可能だからです。
ちなみに、ワイヤーフレームは、Power PointやExcel（もしくはGoogleのスプレッドシート）などで作れます。
高い金額を払ってまでツールを用意する必要性もないので、自分が一番しっくり来るツールを使いましょう。
SEO支援は1業界あたり1社までの先着順となります為、お断りさせていただく場合もございます。ご了承ください。
Web業界10年以上の知見を持って、無料にてご相談へ対応いたします。
情報収集目的でも歓迎です。お気軽にご連絡ください。
LIGブログに掲載されました
