Webサイト制作に欠かせないワイヤーフレームのポイントを詳しく解説

この授業は次のような方に是非受けてもらいたいです。

この授業を最後まで受けていただくと、これらのことが良く理解できて、制作チームの間でわかりやすいワイヤーフレームを作ることができるようになります。

どうぞ最後までご覧になってください。

ワイヤーフレームとはどういうものか

ワイヤーフレームというのは、Webサイトのレイアウトやコンテンツをどこに配置するのかを決めるための設計図のようなものです。

先生

ワイヤーフレームとは一言で言えば、「デザインの下書き」ということだよ。

ワイヤーフレームの語源は「ワイヤー（線）」と「フレーム（骨組み）」からきています。

ワイヤーフレームを最初に決めておくことで、デザインやコーディングをする段階にはいってからの後出し追加や遡っての修正を防げるので、効率的に制作進行管理を行うことができます。

デザイニャー

ワイヤーフレームを作るのは、地味に感じるけれど、制作の際に役立つ重要な工程なんだニャン。

ワイヤーフレームはコミュニケーションにも役立つ

先生

ワイヤーフレームは、Webサイト制作をするのに関わる人たちの間のコミュニケーションにも役立つんだ。

クライアントとの間に挟んで、こんなデザインになる予定だと話をすれば、Webサイトの出来上がりのイメージを共有しやすくなりますし、新しいアイディアを思いつくきっかけにもなります。

プロジェクトが始まる時にクライアントが一方的に想像するWebサイトの完成図と、実際に仕上がるデザインが、大きく違ってしまうというリスクも減らすこともできます。

他にデザイン担当者がいる場合は、Webデザイナーに指示するためにワイヤーフレームを活用します。

いつもパートナーを組んでいる経験が豊富なWebデザイナーであったら、ささっと描いたシンプルなワイヤーフレームでも、こちらの意図を汲み取ってうまくデザインに反映してくれるかもしれません。

しかし、そういった親密度もなくて引き出しも少ないWebデザイナーの場合は、注意が必要です。

ただ配置を示すだけでなくて、こちらの意図も詳しく書き加えたワイヤーフレームでないと、期待していたものとは違うデザインになってしまう危険性があります。

ワイヤーフレームの制作前に知っておいてほしこと

先生

これからワイヤーフレームの作り方を紹介していくけれど、ワイヤーフレームを制作する前に知っておいてほしいことがあるんだ。

それは、Web制作をする時には、出来上がった制作物はもちろんですが、作る過程がとても大事だということです。

なぜなら、Web制作をする時には、

などが問われるものだからです。

先生

だから、ワイヤーフレームを制作する際に、正しく進めていくための段取りが存在するんだ。

これからご紹介する段取りに沿って作っていけば、初めてWebサイトを作る人でも、しっかりとしたワイヤーフレームを作ることができます。

また、ワイヤーフレームの中でも、大規模なWebサイト制作で複数のページを作成するものもあれば、1ページだけのランディングページもあったり、さまざまです。

この授業では、企業の公式Webサイト制作の例で紹介していきます。

ワイヤーフレームは誰が作成するの?

先生

ワイヤーフレームを作成するのは、ディレクターが行う場合が多く、デザイン経験者である必要は必ずしもないんだ。

アイディア出しや修正などで、他のメンバーからも協力してもらいながら、ディレクターがワイヤーフレームを作るのが、効率的です。

ワイヤーフレームが出来上がってからは、Webデザイナーが具体的なWebサイトのデザインを作成していきます。

ワイヤーフレームの4つの目的とは

先生

ワイヤーフレームを作ることには次の4つのような目的があるよ。

①情報整理

Webサイト制作を行う過程で「情報設計」といって、どういう画像やテキストなどのコンテンツをどういう順番で配置しておくのかを決める工程があります。

先生

そこで登場してくるのが「ワイヤーフレーム」なんだ。

Webサイトで使われる画像やテキストは、かなりの数になるので、テキストだけで決めるのではなく、ワイヤーフレームを使うととても便利です。

ここでは、細かなテキストをワイヤーフレーム上で整理していくのではなく、大体どの辺にどういう感じの文章を置くのかを決めていくのが狙いです。

Webサイトの目的に添いながら、必要なコンテンツと不要なコンテンツを取捨して整理をして、そこから作成するページが見えてきて、サイトマップが出来上がります。

その結果、見積もりの段階では想定していなかったページが必要になることもありますが、見積もり金額からの追加が厳しい場合は、ページ数を合わせるために取捨選択を行うことがあります。

②Webサイトのレイアウトを決める

先生

ワイヤーフレームを作る目的は、Webサイトのレイアウトを決めることが第一なんだ。

デザインのことばかりを考えて、そのデザインにはめ込むためにコンテンツを作るというやり方をしてしまうと、デザインはいいかもしれないけれど、必要なコンテンツが足りないWebサイトになってしまうかもしれません。

なので、Webサイトに盛り込みたいコンテンツをリストアップして、ワイヤーフレームを使ってレイアウトを組み立てていく工程が必要です。

③プロジェクトメンバーとの認識の共有

会社内でWebサイトを作成する上では、多くの場合

など、複数の制作担当者が関わりますが、その際に認識を共有するためにワイヤーフレームが必要です。

また、そこにクライアント側の担当者や決裁者が加わり、話し合うための媒体としても使われます。

訴求したいコンテンツがわかりにくい構成になっていないか、Webサイトを訪れるユーザーにわかりにくい構成変更になっていないかなどをクライアントにもチェックしてもらいましょう。

そして、このワイヤーフレームを見て、Webデザイナーは、コンテンツの強弱などを考えながら、デザインを制作していきます。

④アイディアや議論の元に

ワイヤーフレームは、シンプルな線と文字だけの設計図です。

なので、ワイヤーフレームを議論のたたき台として、

といったふうにアイディア出しをするのに役に立ちます。

先生

ワイヤーフレームの段階でデザインが決まってしまっていると、こういった議論の幅を狭めてしまう可能性があるんだ。

ワイヤーフレームの作り方

先生

ワイヤーフレームを実際に作るための手順は次の通りだよ。

①Webサイトの全体的なコンセプトや概要を理解する

先生

まずは、ワイヤーフレームを作るページが含まれるWebサイトがどんなコンセプトでどんな内容を載せる予定なのかを把握することから始めよう。

どんなサイトを制作するのかによって、載せる情報や優先順位も変わってきます。

どんな製品があるかを知ってもらうことを目的としたコーポレイトサイトであったら、その製品に関係するコンテンツがたくさんあるサイトを目指すことになります。

また、商品の販促のためのWebサイトであったら、その商品に関する情報を詳しく掲載することが必要です。

顧客からの信頼を上げるためのWebサイトであったら、ペルソナが興味を持つようなコンテンツにしていくべきでしょう。

このように、Webサイトをリニューアルする際には、現状分析の準備が必要です。

先生

競合の調査やペルソナ設定、SEO分析などをして、「今のWebサイトをどんなふうに変更するのか」を分析していくことが大切だよ。

【丁寧に解説】成果が出るWebサイト作りはコンセプト設計で決まる!この記事は次のような方に向けて書きました。 ・Webサイトを制作するにあたってコンセプトの立て方を知りたい ・クライアン...

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

デザイニャー

ワイヤーフレームは1つのページにおける設計図だけれど、どうしてWebサイト全体の理解が必要なのかニャン?

先生

それは、サイト全体を俯瞰してその中にある「ページの立ち位置」を知るために必要なんだよ。

ページの集まりがサイトであって、各ページにはそれぞれサイト内における役目があります。

ワイヤーフレームを作るページのサイト内での役目が、ページのコンセプトであって、設計図を作る上での方向性を決めることになります。

ワイヤーフレームは、サイト全体の一部であるページ制作における一つの側面です。

ワイヤーフレームは、全体を把握しながら設計するものなので、ワイヤーフレームの作り方を学ぶことが必要です。

Webサイトを初めて作る方は、全体の流れがどうなっているのかを、ワイヤーフレームを作成する前に理解しておきましょう。

Webデザインってどんな仕事?仕事の流れや必要なスキルも紹介しますこの記事は次のような方に向けて書いています。 ・Webデザイナーになりたい人 ・Webデザインの仕事内容を知りたい人 ...

①サイトマップを作る

ワイヤーフレームを書く前に、作りたいWebサイトのサイトマップをしっかりと作りましょう。

先生

ワイヤーフレームは、Webサイトの個別のページの設計図であるため、どういうページを作るのかをあらかじめ決めておく必要があるんだ。

例えば、採用情報のページを作るから、会社の案内のために社員インタビューのページが必要になる、などです。

いきなりワイヤーフレームを作ると、その後に新しいページが必要になって追加したり削除したりする際に、ワイヤーフレームを書き直さなくてはいけなくなります。

全体像を理解したら、サイトマップを作って、サイトの構成を目に見えるようにしましょう。

例えば次のようにTOPページからページ内容が枝分かれしたようなものになります。

これらのページ全部のワイヤーフレームを作ります。

先生

ただし、飲食チェーンの店舗情報ページなど、いくつかのページを同様の構成にする場合は、全ページ分のワイヤーフレームを作る必要はなくて、「店舗情報用のワイヤーフレーム」として1つだけ作成するんだ。

実際には第3階層の下にも個別のページを作ることもあれば、第2階層まででのサイトもあって、階層の深さは制作するWebサイトによっても違ってきます。

デザイニャーつまり、階層に限らないで各項目のワイヤーフレームを作るのが基本なんだニャン。

②ワイヤーフレームを作るページを決める

先生

ワイヤーフレームで次のページは必ず作った方が良いよ。

特にTOPページは必ずワイヤーフレームを作ることが必要です。

重要度の高いページというのは、例えばECサイトのカートのような成約に関係するページや在庫の確認についてのページなどです。

カートや在庫の確認ページは、システムと連携しているので、構造が複雑になりますし、一度リリースしたら、その後簡単に修正ができなくなることもあるので、丁寧に浸透に制作していきましょう。

また、重要度が高くなくても、ページによってデザインやレイアウトを変えたい場合にも、ワイヤーフレームを作ると良いでしょう。

しかし、実際に作業していて、忙しくて全部を丁寧に作る時間がないという場合には、同じレイアウトを採用するページを1ページにだけ絞って作るのも良いかもしれません。

先生

ただし、ワイヤーフレームを省いたページを修正することになった場合は、種晴天の対応が漏れないように注意しよう。

③表示順を決める

先生

必要な要素を洗い出したら、それらを表示する時の優先度を決めよう。

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

④ページのレイアウトを作成する

先生

ページのレイアウトを決めるには、次の2つのことを考えよう。

1.レイアウトの要素

先生

レイアウトの要素には大きく分けて次の4つの要素があるよ。

Ⅰヘッダー

ヘッダーはページの最上部にあって、

などが入ります。

Webサイト内の全部のページで共通して使われるメインナビゲーションです。

Webサイト全体の目次になるので、サイトマップで作った第2階層の項目を入れると良いでしょう。

Ⅱコンテンツ

コンテンツは

など、Webページのメインになる情報のことです。

ユーザーの興味を引いて、ページに長く滞在させて、最後まで見てもらえるかが大切です。

コンテンツには、テキストや画像をバランスよく取り入れていきましょう。

Ⅲサイドバー

サイドバーには、ヘッダーの内容と同じものを入れることもありますが、大きなサイトでは埋もれがちになる下層ページの閲覧を見てもらえるようなサブ的なナビゲーションとして使われることもあります。

最近では、広告やSNSリンク、ニュースや更新情報を置いているWebサイトもよくあります。

Ⅳフッター

フッターというのは、ページの一番下のエリアのことを指して、ヘッダーと同じで、サイトの目次になる要素を持っていて、全ページ共通して使われます。

会社名とロゴ、サイトマップやコピーライトを入れることがポイントです。

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

先生

ワイヤーフレームを作るページを決めたら、大体のレイアウトを決めるんだ。

Webサイトには、代表的なレイアウトがありますので、Webサイトの目的を考えながら、どのレイアウトにするのかを決めるようにすることが重要です。

ここでは次の6つのレイアウト方法をご紹介します。

Ⅰ　１カラムレイアウト

1カラムレイアウトは、縦長に1つのカラム（列）を並べたレイアウトです。

単純なので、ユーザーにとってもストレスを感じず閲覧できることが特徴です。

1カラムレイアウトのメリットは次の通りです。

1カラムレイアウトは、ランディングページやコーポレートサイト、飲食店のWebサイトにも向いています。

1カラムレイアウトのデメリットは、情報量が多くなると縦に長くなって、途中でユーザーが離脱してしまうかもしれないところです。

各コンテンツの画像やデザインのクオリティが低いと、単調になってしまうので、工夫が必要です。

Ⅱ　フルスクリーンレイアウト

フルスクリーン・レイアウトは、パソコン画面いっぱいに画像や動画を表示させているレイアウトです。

先生

ハイブランドのWebサイトなど、世界観を伝えたい場合に使われることが多いんだ。

「創業以来メニューはハンバーグだけ」といったふうなこだわりの専門店のWebサイトで使ってみると面白いかもしれません。

フルスクリーンレイアウトのメリットは、掲載情報が少ないため、ダイレクトにユーザにイメージを伝えられることです。

デメリットは、掲載情報が少ないのでいっけん簡単に作れそうに見えますが、制作する人のデザインセンスで、完成度を大きく左右される点です。

Ⅲ　マルチカラムレイアウト

マルチカラムレイアウトとは、1カラムレイアウトと、次にご紹介するタイル型レイアウトを組み合わせたようなレイアウトで、企業サイトなどで多く用いられるレイアウトです。

マルチカラムレイアウトの特徴は、複数の列に分割されたレイアウトであることです。

左右のどちらかにサイドバーを配置した2カラムレイアウト、サイドバーが左右両方に配置された3カラムレイアウトなどがあります。

例えばECサイトや予約サイトなどで、サイドバーに購入画面を固定して表示させたりする使い方をします。

また、サイト内の回遊性を促すことも、マルチカラムレイアウトの魅力です。

サイドバーにコンテンツのランキングやバナーを配置することで、ユーザに他のページを見るのを誘導することもできます。

なので、ニュースサイトのような、たくさんの情報を見てもらいたい場合に使われることも多いです。

マルチカラムレイアウトのメリットは、掲載した情報の優先度によって強弱をつけられるところです。

情報が整理されて見やすく、量をたくさん載せることができます。

デメリットとしては、同じレイアウトをスマートフォンでは使いにくい点です。

マルチカラムレイアウトを作る際には、パソコン版とスマートフォン版のレイアウトを別々に準備する必要があります。

Ⅳ　タイル型レイアウト

タイル型レイアウトとは、コンテンツの要素をタイル状に分割したレイアウトです。

敷き詰められたそれぞれのタイルはカラフルで丸みを帯びていて、賑やかで柔らかで楽しい雰囲気を伝えます。

ネットショップの商品一覧やメディアサイトの新着ニュース一覧などに向いていて、クリエイターやフリーランスが自分の作品を並べてギャラリーページにして利用することもできます。

タイル型レイアウトのメリットは、フルスクリーンレイアウトとは対照的にたくさんの情報を一度に並べることができて、情報を一覧で確認できる点です。

そしてマルチカラムと違って、スマートフォンの表示に対応しやすい点もメリットです。

デメリットは、各コンテンツが同じ大きさなので、優勢順位をつけたり強弱をつけたりしたい場合は不向きな点です。

一つづずしっかり読んでほしいWebサイトにもおすすめできません。

Ⅴ　サイドバー固定レイアウト

サイドバー固定レイアウトとは、画面をスクロールしても常に同じ場所に表示されているようにするレイアウトのことです。

パソコンなど横に長い画面に表示するのに向いています。

サイドバー固定レイアウトのメリットは、常にメニューが表示されているので、ユーザーが迷うことなくサイト内を探し回らなくても良いところです。

デメリットは、スマートフォンやタブレットで見るときに、デバイスによってはレイアウトが崩れたり、メインコンテンツの表示が狭くなってしまうところです。

Ⅵ　グリッドレイアウト

グリッドレイアウトとは、同じ大きさの正方形や長方形で構成されていて、格子状にカードを並べたように配置されているレイアウトのことです。

一度にたくさんの情報を見ることができ、ページ全体の統一感を出せるところがメリットです。

グリッドレイアウトは、ブログサイトのTOPページによく使われていあます。

また、コーポレートサイトの中でも頻繁にコンテンツを更新したい場合は、このグリッドレイアウトにするようにしたほうが良いかもしれません。

【わかりやすく徹底解説】Webデザイン制作｜基本のレイアウトとは?この記事は、次のような人に向けて書きました。 ・センスのが良くて使いやすいWebサイトを作りたい ・それにはどこから手を...

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

先生

ここからはワイヤーフレームの書き方についてお話ししていくよ。

紙と鉛筆で紙面を、あらかじめ決めたレイアウトで分割して、まとめた情報を配置していきます。

Webサイトをみるユーザーの目線や気持ちを考えながら描いていきましょう。

ユーザーの視線は、画面の左上から右へ、それから下へというように、『Z』の形で移動します。

ユーザーの気持ちを想像して、そのページにどの情報を載せたら良いのかを考えながら、優先度が高い情報はページの上の方に配置しましょう。

途中で新しく載せたい情報が出てくることもありますし、逆にスペースの都合や優先順位などによっては削除する情報が出てくることもあります。

先生

最初から完璧にしようとしなくて良いから、描いたり消したりしながら完成に近づけていこう。

Webデザインの制作の際に役に立つラフとは?目的と作る際のポイントこの授業は次のような方におすすめです。 ・初めてWebデザインの案件を受注した方 ・Webデザインをする上でクライアント...

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

先生

レイアウトがまとまったら、手書きのものを元に、パソコンのツールを使って清書しよう。

ユーザーが見た時に、

という点を考えながら作っていくようにしましょう。

ワイヤーフレームは、社内のメンバーやクライアントに見せたり、ミーティングの時にも題材になります。

ツールを使って綺麗に清書することで、見やすくなりますし、共有もしやすくなります。

とりあえず一度作ってみて、修正を繰り返しながら完成に近づけていくのがコツです。

ここで注意したい点は、ワイヤーフレームでは、色やフォントといったデザイン要素はできるだけ削除するようにするということです。

清書したワイヤーフレームにデザイン要素があると、情報設計の妥当性の議論の邪魔になるからです。

また、ワイヤーフレームは、Webデザイナーへの指示書にもなります。

指示書に色をたくさんつけたり個性的なフォントを使って良いたりすると、「この色やフォントでデザインしないといけないのだろうか」と誤解されたり、正しく意図が伝わらなくなるかもしれません。

完成したワイヤーフレームはデータで残しておくようにしましょう。

自分1人でWebサイト制作を行っている場合でも、ワイヤーフレームをデータで残しておけば、他の仕事や別のクライアントから、Webサイト制作の依頼が入った時に、参考として使えます。

同じようなWebサイトを作る時には、ゼロからワイヤーフレームを作らなくてもよく、テンプレートとして使うことができます。

ワイヤーフレームの作成におすめなツール

先生

ワイヤーフレームを作るのに便利なパソコンのツールはたくさんあるけれど、主なツールは次の5つだよ。

①Adobe XD

AdobeXDは、ワイヤーフレームを作成する際に一番のおすすめツールです。

テンプレートが用意されていて、フォントサイズや横幅サイズをピクセル指定して作ることができるので、実際にイメージに近い感じでページ全体を確認することができます。

作成したワイヤーフレームをクラウド上で共有できるので、複数のユーザーから同時にフィードバックしてもらうことができます。

作業効率を向上させるために役に立つプラグインも豊富にあり、作業しやすいようにカスタマイズできる点も良い点です。

デメリットとしては、Adobe製品を使ったことがない場合は、慣れるまでに時間がかかることと、PSDやAIに書き出しができない点があります。

【おすすめ】Webデザインの新ツールAdobe XDの使い方や機能この授業は次のような方におすすめです。 ・最近Webデザインの仕事でAdobe XDを使うことになったけれどまだよくわからない...

②Adobe Photoshop

Adobe Photoshopでもワイヤーフレームを作ることができます。

Adobe XDが出てくる前は、Adobe Photoshopで作成してた会社も多く、自由なデザインを作ることが出来ます。

③CACOO

CACOOは、クラウドベースの作成ツールです。

PC版のWebサイトだけでなく、iOSばんやアプリ用のワイヤーフレームも作成することが出来ます。

無料のテンプレートや図形もたくさん用意されていて、プロジェクトフォルダを設定しておくことで、クライアントは制作チームのメンバーと安全でスムーズに情報を共有することができます。

⇒CACOO

④エクセル・パワーポイント

エクセルやパワーポイントでも十分にワイヤーフレームを作ることはできます。

関係者が少なかったり、ツールでお金を使いたくない場合は、エクセルやパワーポイントで済ませることもできます。

⑤マイクロソフトパワーポイント

パワーポイントは、Windows製品に入っているマイクロソフト社のプレゼンテーション用のスライド作成ソフトです。

普通はページを横長で使うことが多いのですが、ワイヤーフレームを作るときは、ページ設定を縦長にして使いましょう。

パワーポイントは、プレゼン資料を作るためのソフトなので、情報設計の意図を伝えるのに適したツールですが、細かい作業が多くなると操作ミスが出やすくなるというデメリットがあります。

そして、パワーポイントは、互換性が優れていない点もあり、WindowsからMacへ送る場合やスマートフォンから閲覧する場合に、表示崩れや文字化けを起こすこともあります。

悩んだときは競合サイトを参考にする

ワイヤーフレームを作っている途中で、レイアウトをどうしたらいいか、とか、コンテンツを並べる順番に迷うなど、悩むことは誰にでもあると思います。

そんなときは、1人で悩まないで、競合サイトや人気のあるサイトを参考にしてみるのがおすすめです。

プロのWebデザイナーは、普段からWebサイトをよく見て、他のサイトの研究をしています。

良いと思ったWebサイトの画像を保存して、アイディアが浮かばず困った時に見返すようにしましょう。

完成したワイヤーフレームをレビューしてもらおう

ワイヤーフレームができたら、一度自分で確認してから、社内メンバーからレビューしてもらいましょう。

ディレクターやプロジェクトマネージャー、エンジニア、デザイナーからフィードバックやアドバイスをしてもらいましょう。

初心者の方だったら、まずは下書きしたものをレビューしてもらって、清書してからまた見てもらうようにすると良いです。

参考になるワイヤーフレーム

先生

最後にワイヤーフレームを作成するのに役に立つギャラリーサイトを紹介するので、参考にしてみてね。

まとめ

先生

この授業では次の38個のことについてお話ししてきたよ。

ワイヤーフレームの作り方について一通りお話ししていきました。

そして、ワイヤーフレームを清書するのに使うパソコンのツールについてもお話ししてきました。

Webサイト作りを複数人で協力し合って作るのであれば、見やすくわかりやすいワイヤーフレームにする必要があることがわかりましたね。

プロジェクトメンバーと認識を共有して、力を合わせて一つのWebサイトが完成させるためには、わかりやすいワイヤーフレームを作ることが鍵となります。

私たちは頑張るあなたを応援しています。