この授業は次のような方に是非受けてもらいたいです。
・Webサイト制作のためにワイヤーフレームを作ることになった方
・ワイヤーフレームを作る際のポイントを知りたい方
・ワイヤーフレームを清書するときのおすすめのツールを知りたい方
この授業を最後まで受けていただくと、これらのことが良く理解できて、制作チームの間でわかりやすいワイヤーフレームを作ることができるようになります。
どうぞ最後までご覧になってください。
ワイヤーフレームとはどういうものか

ワイヤーフレームというのは、Webサイトのレイアウトやコンテンツをどこに配置するのかを決めるための設計図のようなものです。
ワイヤーフレームの語源は「ワイヤー(線)」と「フレーム(骨組み)」からきています。
ワイヤーフレームを最初に決めておくことで、デザインやコーディングをする段階にはいってからの後出し追加や遡っての修正を防げるので、効率的に制作進行管理を行うことができます。
ワイヤーフレームはコミュニケーションにも役立つ

クライアントとの間に挟んで、こんなデザインになる予定だと話をすれば、Webサイトの出来上がりのイメージを共有しやすくなりますし、新しいアイディアを思いつくきっかけにもなります。
プロジェクトが始まる時にクライアントが一方的に想像するWebサイトの完成図と、実際に仕上がるデザインが、大きく違ってしまうというリスクも減らすこともできます。
他にデザイン担当者がいる場合は、Webデザイナーに指示するためにワイヤーフレームを活用します。
いつもパートナーを組んでいる経験が豊富なWebデザイナーであったら、ささっと描いたシンプルなワイヤーフレームでも、こちらの意図を汲み取ってうまくデザインに反映してくれるかもしれません。
しかし、そういった親密度もなくて引き出しも少ないWebデザイナーの場合は、注意が必要です。
ただ配置を示すだけでなくて、こちらの意図も詳しく書き加えたワイヤーフレームでないと、期待していたものとは違うデザインになってしまう危険性があります。
ワイヤーフレームの制作前に知っておいてほしこと

それは、Web制作をする時には、出来上がった制作物はもちろんですが、作る過程がとても大事だということです。
なぜなら、Web制作をする時には、
・Webサイトの目的が達成できる設計になっているか
・ユーザー視点で考えて作られているか
などが問われるものだからです。
これからご紹介する段取りに沿って作っていけば、初めてWebサイトを作る人でも、しっかりとしたワイヤーフレームを作ることができます。
また、ワイヤーフレームの中でも、大規模なWebサイト制作で複数のページを作成するものもあれば、1ページだけのランディングページもあったり、さまざまです。
この授業では、企業の公式Webサイト制作の例で紹介していきます。
ワイヤーフレームは誰が作成するの?

アイディア出しや修正などで、他のメンバーからも協力してもらいながら、ディレクターがワイヤーフレームを作るのが、効率的です。
ワイヤーフレームが出来上がってからは、Webデザイナーが具体的なWebサイトのデザインを作成していきます。
ワイヤーフレームの4つの目的とは

①情報整理
②Webサイトのレイアウトを決める
③プロジェクトメンバーとの認識の共有
④アイディアや議論の元に
①情報整理

Webサイト制作を行う過程で「情報設計」といって、どういう画像やテキストなどのコンテンツをどういう順番で配置しておくのかを決める工程があります。
Webサイトで使われる画像やテキストは、かなりの数になるので、テキストだけで決めるのではなく、ワイヤーフレームを使うととても便利です。
ここでは、細かなテキストをワイヤーフレーム上で整理していくのではなく、大体どの辺にどういう感じの文章を置くのかを決めていくのが狙いです。
Webサイトの目的に添いながら、必要なコンテンツと不要なコンテンツを取捨して整理をして、そこから作成するページが見えてきて、サイトマップが出来上がります。
その結果、見積もりの段階では想定していなかったページが必要になることもありますが、見積もり金額からの追加が厳しい場合は、ページ数を合わせるために取捨選択を行うことがあります。
②Webサイトのレイアウトを決める

デザインのことばかりを考えて、そのデザインにはめ込むためにコンテンツを作るというやり方をしてしまうと、デザインはいいかもしれないけれど、必要なコンテンツが足りないWebサイトになってしまうかもしれません。
なので、Webサイトに盛り込みたいコンテンツをリストアップして、ワイヤーフレームを使ってレイアウトを組み立てていく工程が必要です。
③プロジェクトメンバーとの認識の共有

会社内でWebサイトを作成する上では、多くの場合
・ディレクター
・ライター
・デザイナー
・コーダー
・エンジニア
など、複数の制作担当者が関わりますが、その際に認識を共有するためにワイヤーフレームが必要です。
また、そこにクライアント側の担当者や決裁者が加わり、話し合うための媒体としても使われます。
訴求したいコンテンツがわかりにくい構成になっていないか、Webサイトを訪れるユーザーにわかりにくい構成変更になっていないかなどをクライアントにもチェックしてもらいましょう。
そして、このワイヤーフレームを見て、Webデザイナーは、コンテンツの強弱などを考えながら、デザインを制作していきます。
④アイディアや議論の元に

ワイヤーフレームは、シンプルな線と文字だけの設計図です。
なので、ワイヤーフレームを議論のたたき台として、
・ここにはこういう画像を持ってきた方が良いのでは?
・この部分には、資料請求のボタンを置いてみては?
といったふうにアイディア出しをするのに役に立ちます。
最初のワイヤーフレームは白黒のシンプルなラフにとどめて、複数のスタッフの間で議論を行いながら、ブラッシュアップしていきましょう。
ワイヤーフレームの作り方

①Webサイトの全体的なコンセプトや概要を理解する
②ワイヤーフレームを作る際のサイト全体理解の重要性について
③サイトマップを作成する
④ワイヤーフレームを作るページを決める
⑤表示順を決める
⑥ページのレイアウトを作成する
①Webサイトの全体的なコンセプトや概要を理解する

どんなサイトを制作するのかによって、載せる情報や優先順位も変わってきます。
どんな製品があるかを知ってもらうことを目的としたコーポレイトサイトであったら、その製品に関係するコンテンツがたくさんあるサイトを目指すことになります。
また、商品の販促のためのWebサイトであったら、その商品に関する情報を詳しく掲載することが必要です。
顧客からの信頼を上げるためのWebサイトであったら、ペルソナが興味を持つようなコンテンツにしていくべきでしょう。
このように、Webサイトをリニューアルする際には、現状分析の準備が必要です。

②ワイヤーフレームを作る際のサイト全体理解の重要性について

ページの集まりがサイトであって、各ページにはそれぞれサイト内における役目があります。
ワイヤーフレームを作るページのサイト内での役目が、ページのコンセプトであって、設計図を作る上での方向性を決めることになります。
ワイヤーフレームは、サイト全体の一部であるページ制作における一つの側面です。
ワイヤーフレームは、全体を把握しながら設計するものなので、ワイヤーフレームの作り方を学ぶことが必要です。
Webサイトを初めて作る方は、全体の流れがどうなっているのかを、ワイヤーフレームを作成する前に理解しておきましょう。
①サイトマップを作る
②ワイヤーフレームを作るページを決める
③表示順を決める
④ページのレイアウトを作成する
⑤手書きでラフ案を作成する
⑥パソコンのツールで清書する

①サイトマップを作る

ワイヤーフレームを書く前に、作りたいWebサイトのサイトマップをしっかりと作りましょう。
例えば、採用情報のページを作るから、会社の案内のために社員インタビューのページが必要になる、などです。
いきなりワイヤーフレームを作ると、その後に新しいページが必要になって追加したり削除したりする際に、ワイヤーフレームを書き直さなくてはいけなくなります。
全体像を理解したら、サイトマップを作って、サイトの構成を目に見えるようにしましょう。
例えば次のようにTOPページからページ内容が枝分かれしたようなものになります。
・第1階層:TOPページ
・第2階層:会社情報・商品情報・社員情報・採用情報
・第3階層(会社情報):企業理念・企業情報・社長挨拶
これらのページ全部のワイヤーフレームを作ります。
実際には第3階層の下にも個別のページを作ることもあれば、第2階層まででのサイトもあって、階層の深さは制作するWebサイトによっても違ってきます。
デザイニャーつまり、階層に限らないで各項目のワイヤーフレームを作るのが基本なんだニャン。
サイトマップを先に準備することで、作業を効率的に進めることができます。
②ワイヤーフレームを作るページを決める

・TOPページ
・特有のレイアウトになるページ
・Webサイトの中で重要度の高いページ
・コンテンツの要素が他のページと違うページ
特にTOPページは必ずワイヤーフレームを作ることが必要です。
重要度の高いページというのは、例えばECサイトのカートのような成約に関係するページや在庫の確認についてのページなどです。
カートや在庫の確認ページは、システムと連携しているので、構造が複雑になりますし、一度リリースしたら、その後簡単に修正ができなくなることもあるので、丁寧に浸透に制作していきましょう。
また、重要度が高くなくても、ページによってデザインやレイアウトを変えたい場合にも、ワイヤーフレームを作ると良いでしょう。
しかし、実際に作業していて、忙しくて全部を丁寧に作る時間がないという場合には、同じレイアウトを採用するページを1ページにだけ絞って作るのも良いかもしれません。
もし他のページとレイアウトを変更するページがある場合は、ワイヤーフレームにしておいた方が無難です。
③表示順を決める

一般的にWebサイトでは、ページの下にいくほどに見てもらう確率が下がっていくので、重要な情報ほどページの上部に配置するようにしましょう。
④ページのレイアウトを作成する

1.レイアウトの要素
2.レイアウトの種類と決め方
1.レイアウトの要素

Ⅰヘッダー
Ⅱコンテンツ
Ⅲサイドバー
Ⅳフッター
Ⅰヘッダー
ヘッダーはページの最上部にあって、
・会社名
・ロゴ
・ページタイトル
・メニュー
などが入ります。
Webサイト内の全部のページで共通して使われるメインナビゲーションです。
Webサイト全体の目次になるので、サイトマップで作った第2階層の項目を入れると良いでしょう。
Ⅱコンテンツ
コンテンツは
・画像
・テキスト
・動画
など、Webページのメインになる情報のことです。
ユーザーの興味を引いて、ページに長く滞在させて、最後まで見てもらえるかが大切です。
コンテンツには、テキストや画像をバランスよく取り入れていきましょう。
Ⅲサイドバー
サイドバーには、ヘッダーの内容と同じものを入れることもありますが、大きなサイトでは埋もれがちになる下層ページの閲覧を見てもらえるようなサブ的なナビゲーションとして使われることもあります。
最近では、広告やSNSリンク、ニュースや更新情報を置いているWebサイトもよくあります。
Ⅳフッター
フッターというのは、ページの一番下のエリアのことを指して、ヘッダーと同じで、サイトの目次になる要素を持っていて、全ページ共通して使われます。
会社名とロゴ、サイトマップやコピーライトを入れることがポイントです。
2.レイアウトの種類と決め方

Webサイトには、代表的なレイアウトがありますので、Webサイトの目的を考えながら、どのレイアウトにするのかを決めるようにすることが重要です。
ここでは次の6つのレイアウト方法をご紹介します。
Ⅰ 1カラムレイアウト
Ⅱ フルスクリーンレイアウト
Ⅲ マルチカラムレイアウト
Ⅳ タイル型レイアウト
Ⅴ サイドバー固定レイアウト
Ⅵ グリッドレイアウト
Ⅰ 1カラムレイアウト
1カラムレイアウトは、縦長に1つのカラム(列)を並べたレイアウトです。
単純なので、ユーザーにとってもストレスを感じず閲覧できることが特徴です。
1カラムレイアウトのメリットは次の通りです。
・画面の横幅いっぱい使っているのでインパクトが強い
・上から順番に見れるので、内容をストーリーで読ませることができる
・特に小さなスマートフォンでは見やすい
1カラムレイアウトは、ランディングページやコーポレートサイト、飲食店のWebサイトにも向いています。
1カラムレイアウトのデメリットは、情報量が多くなると縦に長くなって、途中でユーザーが離脱してしまうかもしれないところです。
各コンテンツの画像やデザインのクオリティが低いと、単調になってしまうので、工夫が必要です。
Ⅱ フルスクリーンレイアウト
フルスクリーン・レイアウトは、パソコン画面いっぱいに画像や動画を表示させているレイアウトです。
「創業以来メニューはハンバーグだけ」といったふうなこだわりの専門店のWebサイトで使ってみると面白いかもしれません。
フルスクリーンレイアウトのメリットは、掲載情報が少ないため、ダイレクトにユーザにイメージを伝えられることです。
デメリットは、掲載情報が少ないのでいっけん簡単に作れそうに見えますが、制作する人のデザインセンスで、完成度を大きく左右される点です。
Ⅲ マルチカラムレイアウト
マルチカラムレイアウトとは、1カラムレイアウトと、次にご紹介するタイル型レイアウトを組み合わせたようなレイアウトで、企業サイトなどで多く用いられるレイアウトです。
マルチカラムレイアウトの特徴は、複数の列に分割されたレイアウトであることです。
左右のどちらかにサイドバーを配置した2カラムレイアウト、サイドバーが左右両方に配置された3カラムレイアウトなどがあります。
例えばECサイトや予約サイトなどで、サイドバーに購入画面を固定して表示させたりする使い方をします。
また、サイト内の回遊性を促すことも、マルチカラムレイアウトの魅力です。
サイドバーにコンテンツのランキングやバナーを配置することで、ユーザに他のページを見るのを誘導することもできます。
なので、ニュースサイトのような、たくさんの情報を見てもらいたい場合に使われることも多いです。
マルチカラムレイアウトのメリットは、掲載した情報の優先度によって強弱をつけられるところです。
情報が整理されて見やすく、量をたくさん載せることができます。
デメリットとしては、同じレイアウトをスマートフォンでは使いにくい点です。
マルチカラムレイアウトを作る際には、パソコン版とスマートフォン版のレイアウトを別々に準備する必要があります。
Ⅳ タイル型レイアウト
タイル型レイアウトとは、コンテンツの要素をタイル状に分割したレイアウトです。
敷き詰められたそれぞれのタイルはカラフルで丸みを帯びていて、賑やかで柔らかで楽しい雰囲気を伝えます。
ネットショップの商品一覧やメディアサイトの新着ニュース一覧などに向いていて、クリエイターやフリーランスが自分の作品を並べてギャラリーページにして利用することもできます。
タイル型レイアウトのメリットは、フルスクリーンレイアウトとは対照的にたくさんの情報を一度に並べることができて、情報を一覧で確認できる点です。
そしてマルチカラムと違って、スマートフォンの表示に対応しやすい点もメリットです。
デメリットは、各コンテンツが同じ大きさなので、優勢順位をつけたり強弱をつけたりしたい場合は不向きな点です。
一つづずしっかり読んでほしいWebサイトにもおすすめできません。
Ⅴ サイドバー固定レイアウト
サイドバー固定レイアウトとは、画面をスクロールしても常に同じ場所に表示されているようにするレイアウトのことです。
パソコンなど横に長い画面に表示するのに向いています。
サイドバー固定レイアウトのメリットは、常にメニューが表示されているので、ユーザーが迷うことなくサイト内を探し回らなくても良いところです。
デメリットは、スマートフォンやタブレットで見るときに、デバイスによってはレイアウトが崩れたり、メインコンテンツの表示が狭くなってしまうところです。
Ⅵ グリッドレイアウト
グリッドレイアウトとは、同じ大きさの正方形や長方形で構成されていて、格子状にカードを並べたように配置されているレイアウトのことです。
一度にたくさんの情報を見ることができ、ページ全体の統一感を出せるところがメリットです。
グリッドレイアウトは、ブログサイトのTOPページによく使われていあます。
また、コーポレートサイトの中でも頻繁にコンテンツを更新したい場合は、このグリッドレイアウトにするようにしたほうが良いかもしれません。

⑤手書きでラフ案を作成する

紙と鉛筆で紙面を、あらかじめ決めたレイアウトで分割して、まとめた情報を配置していきます。
Webサイトをみるユーザーの目線や気持ちを考えながら描いていきましょう。
ユーザーの視線は、画面の左上から右へ、それから下へというように、『Z』の形で移動します。
ユーザーの気持ちを想像して、そのページにどの情報を載せたら良いのかを考えながら、優先度が高い情報はページの上の方に配置しましょう。
途中で新しく載せたい情報が出てくることもありますし、逆にスペースの都合や優先順位などによっては削除する情報が出てくることもあります。

⑥パソコンのツールで清書する

ユーザーが見た時に、
・伝えたい情報がわかりやすいような配置になっているか
・スムーズな目線誘導ができそうか
という点を考えながら作っていくようにしましょう。
ワイヤーフレームは、社内のメンバーやクライアントに見せたり、ミーティングの時にも題材になります。
ツールを使って綺麗に清書することで、見やすくなりますし、共有もしやすくなります。
とりあえず一度作ってみて、修正を繰り返しながら完成に近づけていくのがコツです。
ここで注意したい点は、ワイヤーフレームでは、色やフォントといったデザイン要素はできるだけ削除するようにするということです。
清書したワイヤーフレームにデザイン要素があると、情報設計の妥当性の議論の邪魔になるからです。
また、ワイヤーフレームは、Webデザイナーへの指示書にもなります。
指示書に色をたくさんつけたり個性的なフォントを使って良いたりすると、「この色やフォントでデザインしないといけないのだろうか」と誤解されたり、正しく意図が伝わらなくなるかもしれません。
完成したワイヤーフレームはデータで残しておくようにしましょう。
自分1人でWebサイト制作を行っている場合でも、ワイヤーフレームをデータで残しておけば、他の仕事や別のクライアントから、Webサイト制作の依頼が入った時に、参考として使えます。
同じようなWebサイトを作る時には、ゼロからワイヤーフレームを作らなくてもよく、テンプレートとして使うことができます。
ワイヤーフレームの作成におすめなツール

①Adobe XD
②Adobe Photoshop
③CACOO
④エクセル・パワーポイント
⑤マイクロソフトパワーポイント
①Adobe XD
AdobeXDは、ワイヤーフレームを作成する際に一番のおすすめツールです。
テンプレートが用意されていて、フォントサイズや横幅サイズをピクセル指定して作ることができるので、実際にイメージに近い感じでページ全体を確認することができます。
作成したワイヤーフレームをクラウド上で共有できるので、複数のユーザーから同時にフィードバックしてもらうことができます。
作業効率を向上させるために役に立つプラグインも豊富にあり、作業しやすいようにカスタマイズできる点も良い点です。
デメリットとしては、Adobe製品を使ったことがない場合は、慣れるまでに時間がかかることと、PSDやAIに書き出しができない点があります。

②Adobe Photoshop
Adobe Photoshopでもワイヤーフレームを作ることができます。
Adobe XDが出てくる前は、Adobe Photoshopで作成してた会社も多く、自由なデザインを作ることが出来ます。
③CACOO
CACOOは、クラウドベースの作成ツールです。
PC版のWebサイトだけでなく、iOSばんやアプリ用のワイヤーフレームも作成することが出来ます。
無料のテンプレートや図形もたくさん用意されていて、プロジェクトフォルダを設定しておくことで、クライアントは制作チームのメンバーと安全でスムーズに情報を共有することができます。
④エクセル・パワーポイント
エクセルやパワーポイントでも十分にワイヤーフレームを作ることはできます。
関係者が少なかったり、ツールでお金を使いたくない場合は、エクセルやパワーポイントで済ませることもできます。
⑤マイクロソフトパワーポイント
パワーポイントは、Windows製品に入っているマイクロソフト社のプレゼンテーション用のスライド作成ソフトです。
普通はページを横長で使うことが多いのですが、ワイヤーフレームを作るときは、ページ設定を縦長にして使いましょう。
パワーポイントは、プレゼン資料を作るためのソフトなので、情報設計の意図を伝えるのに適したツールですが、細かい作業が多くなると操作ミスが出やすくなるというデメリットがあります。
そして、パワーポイントは、互換性が優れていない点もあり、WindowsからMacへ送る場合やスマートフォンから閲覧する場合に、表示崩れや文字化けを起こすこともあります。
悩んだときは競合サイトを参考にする

ワイヤーフレームを作っている途中で、レイアウトをどうしたらいいか、とか、コンテンツを並べる順番に迷うなど、悩むことは誰にでもあると思います。
そんなときは、1人で悩まないで、競合サイトや人気のあるサイトを参考にしてみるのがおすすめです。
プロのWebデザイナーは、普段からWebサイトをよく見て、他のサイトの研究をしています。
良いと思ったWebサイトの画像を保存して、アイディアが浮かばず困った時に見返すようにしましょう。
完成したワイヤーフレームをレビューしてもらおう

ワイヤーフレームができたら、一度自分で確認してから、社内メンバーからレビューしてもらいましょう。
ディレクターやプロジェクトマネージャー、エンジニア、デザイナーからフィードバックやアドバイスをしてもらいましょう。
初心者の方だったら、まずは下書きしたものをレビューしてもらって、清書してからまた見てもらうようにすると良いです。
参考になるワイヤーフレーム

・Dribbble – Show and tell for designers
・I ♥ wireframes – The ultimate source of inspiration and collection of resources for wireframes
まとめ

・ワイヤーフレームとはどういうものか
・ワイヤーフレームはコミュニケーションにも役立つ
・ワイヤーフレームの制作前に知っておいてほしこと
・ワイヤーフレームは誰が作成するの?
・ワイヤーフレームの4つの目的とは
①情報整理
②Webサイトのレイアウトを決める
③プロジェクトメンバーとの認識の共有
④アイディアや議論の元に
・ワイヤーフレームの作り方
①Webサイトの全体的なコンセプトや概要を理解する
②ワイヤーフレームを作る際のサイト全体理解の重要性について
③サイトマップを作成する
④ワイヤーフレームを作るページを決める
⑤表示順を決める
⑥ページのレイアウトを作成する
Ⅰヘッダー
Ⅱコンテンツ
Ⅲサイドバー
Ⅳフッター
・レイアウトの種類と決め方
Ⅰ1カラムレイアウト
Ⅱフルスクリーンレイアウト
Ⅲマルチカラムレイアウト
Ⅳタイル型レイアウト
Ⅴサイドバー固定レイアウト
Ⅵグリッドレイアウト
・手書きでラフ案を作成する
・パソコンのツールで清書する
・ワイヤーフレームの作成におすめなツール
①Adobe XD
②Adobe Photoshop
③CACOO
④エクセル・パワーポイント
⑤マイクロソフトパワーポイント
・悩んだときは競合サイトを参考にする
・完成したワイヤーフレームをレビューしてもらおう
・参考になるワイヤーフレーム
ワイヤーフレームの作り方について一通りお話ししていきました。
そして、ワイヤーフレームを清書するのに使うパソコンのツールについてもお話ししてきました。
Webサイト作りを複数人で協力し合って作るのであれば、見やすくわかりやすいワイヤーフレームにする必要があることがわかりましたね。
プロジェクトメンバーと認識を共有して、力を合わせて一つのWebサイトが完成させるためには、わかりやすいワイヤーフレームを作ることが鍵となります。
私たちは頑張るあなたを応援しています。