ワイヤーフレームはwebの方向性を決める重要な設計図です。
しかし、デザイナーでない方はその役割を知らないという方もいらっしゃるでしょう。
そこで今回の記事では、ワイヤーフレームの紹介から作り方まで紹介していきます。
ぜひ参考にしてみてください。
目次
ワイヤーフレームとは何か
ワイヤーフレームとは、いわばwebページの設計図です。
ページごとに何の情報がどこに表示されるかについて指定します。
したがって、ワイヤーフレームを作る段階で、掲載する要素とレイアウトを確定させる必要があります。
作成しなければいけない理由は？
ワイヤーフレームを作る意味がないと感じる方もいらっしゃるでしょう。
ここでは、作るべき理由や目的を3点ご紹介します。
webサイトのレイアウトを決める
1つ目は、webサイトのレイアウトを決めることです。
ワイヤーフレームを作る目的の中で最も大きいのが、webサイトのレイアウトを決めることです。
反対にデザインありきであとからそこにはめ込むコンテンツを作る、というのはおすすめできません。
理由は、デザインが良くても内容の足りていないサイトになってしまうためです。
webサイトを作る際は、まず盛り込みたいコンテンツをピックアップします。
その次の段階、レイアウトを考える段階でワイヤーフレームが必要になります。
レイアウトや機能などの情報を制作者の間で共有する
2つ目は、レイアウトや機能などの情報を制作者の間で共有することです。
webサイト作成の際には、ディレクターやライター、デザイナー、エンジニア、コーダーなど、さまざまな人が関わることになります。
そこにクライアント側の担当者などが加わると、さらに多くの人が関わることになります。
ワイヤーフレームは、記録を残せるという点でも役立ちます。
webサイトのレイアウト、盛り込む内容、すり合わせた後の決定事項などが残るので、認識の違いも起こりにくくなります。
このように業務を効率的に遂行するため、また後のトラブルに繋がらないようにするためにワイヤーフレームは重要です。
ページ内容について議論するため
3つ目は、ページ内容について議論するためです。
ワイヤーフレームはシンプルな線と文字で構成されます。
したがって、アイデアを出し合うたたき台に適しています。
注意点として、ワイヤーフレームを作る段階ではデザインを固めすぎないことが大切です。
デザインが決まっていると議論の幅が狭まってしまうためです。
最初に作るワイヤーフレームはシンプルなものに留めましょう。
複数の担当者で議論していく段階で、少しずつブラッシュアップしていくことが大切です。
作る前に準備すべきこととは？
Webサイト全体のコンセプトを理解する
まずは、webサイト全体のコンセプトを理解しましょう。
そもそもどんなサイトを作りたいのかによって、掲載する情報やその優先順位が決まってくるためです。
たとえば自社商品を認知してもらうためのコーポレートサイトを作るとしましょう。
この場合、製品に関するコンテンツを多く盛り込みたいと考えるはずです。
「ワイヤーフレームは設計図に過ぎないのに、なぜサイト全体の理解が必要なのだろう」
ここまで読んだ方の中には、このように考える方もいらっしゃるかもしれません。
回答としては、サイト全体を俯瞰することでページの立ち位置が分かるためです。
サイトは、ページの集合体です。
個々のページを作るときはサイトの全体像を理解しておく必要がありますし、反対にサイトを作る際は個々のページの立ち位置を知っておく必要があります。
ここでサイト全体と個々のページをつなぐのがワイヤーフレームなので、ワイヤーフレームの作成段階でサイトのコンセプトを知っておく必要があります。
サイトの新規作成でなくリニューアルの場合は、事前準備として現状分析が必要です。
そのときは以下の情報について整理し、コンセプトを再確認しましょう。
リニューアルの場合に必要な事前準備
・競合調査
・ペルソナ設定
・SEO分析
サイトマップを作ってサイトの構成を可視化
サイトのコンセプトが理解できたら、サイトマップを作ってサイトの構成を可視化します。
「サイトマップ」とは、サイトに記載するページ間の関係性を示す図です。
具体的には、「第1階層：TOPページ」、「第2階層：会社情報、商品情報、社員情報、採用情報」、「第3階層：企業理念、会社概要、沿革、社長メッセージ」のようなものです。
基本的には、上記のようなページ全てに対してワイヤーフレームを作ります。
ただし、チェーン店の店舗情報ページのような同じ構成のページが複数存在する構成の場合、全ページのワイヤーフレームを作る必要はありません。
サイトマップの作製は、情報整理の際に非常に役立ちます。
たとえば上記の例で「商品情報」のページのワイヤーフレームを作る際、そのページには「会社概要」の情報は入れなくても良い、という判断がしやすくなります。
作り方を2ステップでご紹介します！
まずは作るページを決めます。
全てのページのワイヤーフレームを作成するのが理想ですが、作業量を考慮したとき、それでは非効率です。
そのため、ワイヤーフレームをつくるページは限定する必要があります。
コーポレートサイトを例に挙げて考えてみましょう。
このサイトではTOPページから流入するユーザーが多いと考えられるので、トップページのワイヤーフレームは必須と思われます。
反対にいくつかの並列しているサービスに関する情報は、1ページ分のみワイヤーフレームを作れば、それをすべてサービスに対して適用するだけで十分でしょう。
むしろすべてのページのワイヤーフレームを違うものにすると統一感が失われる恐れがあります。
次に、レイアウトの種類を決めます。
レイアウトには、以下のようなものがあります。
1カラムレイアウト
カラムは「列」という意味で、1カラムレイアウトはすべてのコンテンツが1列に並んだレイアウトのことを指します。
横幅を大きく使うため、コンテンツを強調したい場合に使われます。
メリット
・コンテンツを強調できる
・上から順にコンテンツを見せられるためストーリーを作りやすい
・レスポンシブ対応があまり必要ない
デメリット
・画像や動画が無いと殺風景になる
・デザイン力が無いとユーザーに飽きられる
マルチカラムレイアウト
これはマルチ（複数）という名称通り、コンテンツを2列ないし3列並べるレイアウトです。
中でも2カラムレイアウトはメディアやブログで使用される機会が多いです。
一方で、3カラムレイアウトはデザインやフロントエンド開発の難易度が高いこと、一般的にメリットが少ないことからあまり使用されません。
メリット
・多くの情報を掲載できる
・情報整理がしやすい
・サイドメニューに索引を付ければユーザビリティが高くなる
デメリット
・コンテンツを強調しにくい
・レスポンシブ対応が必須
グリッド型レイアウト
これは複数コンテンツをカード上に並べたレイアウトです。
独自の色を出せるレイアウトなので、差別化を図りたい場合はおすすめのレイアウトです。
メリット
・視覚的に動きを出せるので魅力的に見える
・オシャレに見える
デメリット
・情報整理が難しい
・レスポンシブ対応が必須
まとめ
今回の記事では、ワイヤーフレームについて解説してきました。
サイトの方向性を決めるものなので、必ず作りましょう。
当社ではデザイン修正指示ツールmitekakuを取り扱っており、ワイヤーフレームをたたき台にwebデザインを考えていく際にも非常に役立ちます。
導入や運用も容易なので、ぜひ一度ご検討ください。
