WEB制作にまつわるすべての業務について、下請業者をお探しなら、SOKUTAKUへ！

はじめに　-　ワイヤーフレームとは

なんのために作る？

ワイヤーフレーム（以下、ワイヤー）とは、Webサイト構築の「設計図」。
レイアウトの配置やメニューの内容、重要なコンテンツなどを図として表すことで、関係者同士で「どんなサイトを作るか」という完成イメージを共有し、確認作業やコミュニケーションをスムーズにするために欠かせないツールです。

だれが作る？

一般的には、デザイナーやディレクターがその役割を果たします。
SOKUTAKUの場合を例に挙げると、小規模サイトではデザインの下書きと、関係者間での確認のためとを兼ねてデザイナーが自分で作成します。
また中規模以上のサイトや、成果を重視したサイトの場合は、具体的な企画・戦略とともにディレクターが作成を担当することが多くなります。
ただしその分、デザイナーが作成するケースに比べると料金はお高め。

第3のケースとして、発注者自身でワイヤーを作成することもあります。
もちろん作成の分の手間はかかりますが、その後の確認の手間や作業工数、そして何より制作費用を大幅に抑えることができます。
下請けサービスを中心に運営しているSOKUTAKUでは、こちらをおすすめしています。

ワイヤーの作成にはデザイン技術を必要としないので、構成の基本を守り、要点さえ押さえれば、発注者でも仕様を十分に満たすものを作成することが可能です。
売上などの成果を強く追求したい場合は、やはり専門家であるディレクターに依頼することをおすすめしますが、そうでない場合は、発注者自身で作成するというケースも選択肢に加えてみてください。

では、ワイヤーづくりにおける構成の基本と要点について、順を追って解説していきましょう。
ワイヤー作成の流れをより具体的に理解でき、実際の発注時にも使える、テンプレートのセットをご用意しました。
ぜひ、本記事と合わせてご覧ください。

ワイヤーフレーム作成のためのテンプレート詰め合わせ　をダウンロードする（Excel、計3ファイル、198KB）

ワイヤー作成のためのテンプレート詰め合わせ　おしながき

• ワークシート記入例＆テンプレート
• サイトマップ記入例＆テンプレート
• ワイヤー作成例　7種＆テンプレート（実践編で使用します）

【準備編】　目次　-　ワイヤーづくりの前に考えておく6つのこと

• 1.　Webサイトのターゲットと目的
  • 「ペルソナマーケティング」に学ぶ、ターゲットの考え方
  • 欲張りは禁物！　ターゲット選びの鉄則とは
• 2.　対応機種
  • ターゲットから連想する、対応機種の考え方
  • 複数機種に対応するための、具体的な方法は？
• 3.　レスポンシブWebデザインの採用について
  • 更新が楽＆SEOに強い！　レスポンシブサイトのメリット
  • 設計はなかなか大変...　レスポンシブサイトのデメリット
  • レスポンシブ対応するかどうかは、デザイン前に決める
• 4.　サイトマップ
  • サイトに載せたいコンテンツを洗い出し、その優先度と道筋をはっきりさせる
  • デザイナーにサイト全体の構造を把握してもらう
• 5.　対応ブラウザ
  • 旧バージョンのブラウザは、シェア縮小の傾向
• 6.　Webサイトに使用する素材を、どこまで準備できるか（ロゴ、画像、原稿など）
  • スマホ用の画像には、4倍の大きさが必要！
  • コンテンツの著作権の確認
• 準備編　まとめ

いきなりワイヤーの図を書き始めることは、サイトコンセプトのブレや、必要コンテンツのヌケ・モレ、デザイナーの手戻りなどのトラブルにつながりやすいため、あまりおすすめしません。
まずは目次に挙げたこれらの項目を、ダウンロードいただいたワークシートに沿って埋めてみてください。
少々回りくどく感じるかもしれませんが、これらはデザイナーがWebサイト制作に着手するために伝えなければいけない情報でもありますので、最初に確定しておくとスムーズです。

1.　Webサイトのターゲットと目的

まず最初に決めるのは、Webサイトのターゲットと目的の2つ。
この2つが、サイトに関するあらゆる要素を決めるときの「根拠」になっていきます。
サイトを利用する人物のイメージが決まれば、その人がよく使っていそうな機種も連想できるようになりますし、
どう使ってほしいのか、その目的がはっきりすれば、そのために必要なサービスを絞り込み、優先度を付けられるようになります。
そしてデザイナーにとっても、デザインの雰囲気や方向性（トーン＆マナー）を決めるために必要不可欠な情報です。
後の工程のために、最初の段階でイメージをはっきりさせておくことが重要です。

「ペルソナマーケティング」に学ぶ、ターゲットの考え方

ターゲットを決める際にはなるべく具体的に、ひとりの人物像レベルにまで絞り込んでいくことが有効と言われています。
これは、マーケティングの現場で活用されている「ペルソナマーケティング」という手法にも共通します。
この考え方を少し参考にしてみましょう。

たとえば「服飾店のサイト」と一口に言っても、年代・性別でそのデザインテイストは全く異なってきます。
「若い男性向け」でもまだまだ絞りきれません。
カジュアル、フォーマル、アウトドア...といった洋服の系統を絞り込んだら、次は利用シーン、利用者の性格、趣味や普段の過ごし方、他に持っていそうな服...と、出来る限り詳細に、イメージが明確になるまで掘り下げていきます。
絞り込んでいくにつれて、サイトが実現すべきものが明確になっていくでしょう。
これには、デザイナーとの認識の共有が行いやすくなり、デザイナーの表現の方向性も固まりやすく、発注者の思い通りのデザインに仕上がりやすくなるという利点もあります。

欲張りは禁物！　ターゲット選びの鉄則とは

なるべく多くの人に利用してほしいのに、ターゲットを絞り込むなんて矛盾していないか、と感じるかもしれません。
しかし、多くの人を取り込もうとすると、デザインは当たり障りのない無難なものになり、幅広い情報を含んだ雑多な内容になって、結局誰の心にもひびかない、使いにくいサイトに陥りがちです。
誰でもWebサイトを持てるようになり、似たようなサイトや情報がいくらでも溢れている昨今。
利用者に「まさに欲しかった情報だ」と感じてもらうため、他でもないこのサイトを"わざわざ"選んでもらうために、一人の人間の心をがっちり掴めるくらいの、強い個性とメッセージが必要なのです。

2.　対応機種

PC、タブレット、スマートフォン（以下、スマホ）など、Webサイトを閲覧できる環境が多様化してきました。
全てに対応する、というのも一つの考えですが、予算や納期の都合でそうもいかない時、どの機種を優先すべきでしょうか。
考え方のヒントをご紹介します。

ターゲットから連想する、対応機種の考え方

ターゲットの人物像や目的、コンテンツ内容の設定を行っていくうちに、サイトがどういう状況で利用されるのかが見えてくるでしょう。
利用される場所なら通勤・通学電車の中、街頭、職場のデスク、営業の出先、自宅のパソコンやリビングのソファーなど。
利用シーンであれば、今すぐ利用したいのか、暇つぶしなのか、誰かと一緒に見たいのか、定期的に利用するか、などです。
外出先での利用がメインになるのなら、もちろんスマホで見られることが重要になりますし、誰かと一緒にじっくり見たいコンテンツなら、大きい画面での表示に対応している方が喜ばれるはず...という風に、イメージを膨らませてみてください。
すでにWebサイトを持っているのなら好都合。
Google Analytics（ https://www.google.com/analytics/ ）で、現在どの機種からのアクセスが多いのか参考にするのもよいでしょう。

複数機種に対応するための、具体的な方法は？

PCとスマホ、など複数の機種を対象にしたいと考えた場合、その方法は3つあります。

• 機種ごとのサイトを複数作る
• レスポンシブWebデザインを採用する
• スマホの利用者にも、PC用のレイアウトで閲覧してもらう

1つ目は、PC用、スマホ用など、それぞれの画面サイズ用レイアウトのサイトを複数作る方法。
アクセスしてきた利用者の機種を自動的に判別し、その機種に合ったページヘ誘導（リダイレクト）するシステムと組み合わせて作成します。
近年までは一般的な方法でしたが、最近はレスポンシブWebデザインを採用する場合も増えてきました。
2つ目のレスポンシブWebデザインについては、次の項で詳しく解説します。

注意したいのは3つ目。
スマホでPC用サイトを利用すること自体は、一応は可能です。
しかしGoogleは2015年4月に、スマホで閲覧しやすいサイトを用意することは重要であるとして、スマホでのGoogle検索結果には、スマホ向けのレイアウトが用意されたサイトを優先することを明言しています（モバイルフレンドリーアルゴリズム）。
検索結果はアクセスの多さに直結する重要な要素。
スマホ利用者をターゲットにする場合には、ぜひスマホ用のレイアウトを用意すべきでしょう。

3.　レスポンシブWebデザインの採用について

レスポンシブWebデザインとは、機種の画面サイズに合わせてサイトのレイアウトを変化させるデザインのこと。
タブレットやスマホの登場に合わせて流行してきました。
1つのサイトで、さまざまな画面サイズに最適なレイアウトを表示できるという便利な仕組みになっている反面、作成時間や費用は、用意するレイアウトの数だけ発生するという点は留意しておかなければいけません。
そのメリット、デメリットについてもう少し掘り下げてみましょう。

更新が楽＆SEOに強い！　レスポンシブサイトのメリット

• メンテナンスの際に、PCサイトとスマホサイトを別々に更新する必要がなくなる
• 機種のタイプではなく画面サイズで表示を振り分けるので、将来登場する機種にも対応できる
• アクセスアップのための対策（SEO・SMO）でも、評価が複数サイトでバラけず有利

やはり最大の魅力は、1つのサイトで複数機種分の運用をまかなえる一貫性にあります。
更新が一度で済む手軽さはもちろんのこと、複数サイトの運用でよく起こりがちな情報の更新忘れを防ぐこともでき、サイトの正確性にも貢献してくれます。

運用面では、検索結果に表示されやすくするための対策（SEO）や、ソーシャルメディアで話題にしてもらうための対策（SMO）に強い点も見逃せません。
実体ファイルやURLが各機種で分かれていると、検索エンジンからの評価や、「いいね！」を押された数も機種ごとにバラけてしまいます。
1つのページだけで作られているレスポンシブWebデザインにはその心配がなく、恩恵を受けやすくなっているのです。
Googleも、複数の機種に向けたサイトを運営する場合には、バラバラに作るよりもレスポンシブWebデザインを使用することを推奨しています（2016年現在）（1*）。

1*（ https://developers.google.com/webmasters/mobile-sites/mobile-seo/overview/select-config?hl=ja ）

設計はなかなか大変...　レスポンシブサイトのデメリット

• レイアウトパターン分のデザインやコーディングが発生し、設計難度が高い
• 1ページで複数のレイアウトに対応するため、デザインやコンテンツ量に制約ができてしまう
• スマホでのアクセス時、PC用のデータも読み込むのでコンテンツ量次第では重くなる

いいこと尽くめに見えるレスポンシブWebデザインですが、デメリットもあります。
1ページで複数機種分の運用をまかなえるということは、裏を返せば、1ページの中に複数機種分の要素を詰め込まなければならないということ。
レイアウトの数だけ、ページのデザイン・コーディング作業は実質発生しますし、加えてレイアウトを柔軟に変化させるためのシステムを追加で組み込んでおく必要があります。
さらに、レイアウトそれぞれに適切な情報量も当然変わってくるため、コンテンツを考えるときは、想定するすべてのレイアウトとのバランスを取ることを考えなければいけません。
コンテンツ量が多いと、スマホでの表示が重くなったり、文章が長すぎて読みにくくなったりという問題も出てきます。
レイアウトの自由度は、やはり特定の機種向けに特化するサイトには劣ります。

このように、レスポンシブWebデザインの手軽さを実感できるのは、サイトが完成した後からであるということを認識しておきましょう。
設計における具体的な注意点は、後編の「実践編」で解説していきます。

レスポンシブ対応するかどうかは、デザイン前に決める

レスポンシブWebデザインを採用しようと思ったとき、とくに重要なのは初期設計です。
採用するかどうかは、なるべく早い段階で確定しておくことが大切です。
事前にしっかり設計しておけば、複数のサイトを作成するよりも工数を抑えることができますが、途中での仕様変更になると、デザインや構造の根本的な作り直しが発生してしまう可能性も。
「既存のPCサイトのレスポンシブ化」も同じ理由で、一見簡単そうでも、実は多くの作業を必要とし、見積もり金額も大きくなりがちです。
覚えておくと、今後の発注時、費用や納期計算の際に役立つかもしれません。

これらのメリット・デメリットを踏まえて、採用するかどうかを検討してみてください。
なお余談ですが、「レスポンシブル」デザインではありませんのでご注意を。
（× responsible　＝　責任のある／◯ responsive　＝　敏感な、反応性の）

4.　サイトマップ

必要なページを一覧化し、リストの形にしたもののこと。
ワイヤーを作るにあたり、サイトマップが果たす役割は2つです。

サイトに載せたいコンテンツを洗い出し、その優先度と道筋をはっきりさせる

最初に設定したサイトの目的を振り返ってみてください。
サイトに来てくれた利用者に、何を伝えたいのか、何をしてほしいのか。
サイトマップづくりは、このイメージを具現化する作業です。
必要なコンテンツを洗い出し、それらに優先度を設定していきます。
優先度の高いものが、後工程、グローバルメニューを作る時のイメージとして役立つでしょう。
これを表すにはツリー構造が最適。
作成例をダウンロードいただけますので、参考にしたり、テキストを自由に編集したりしてぜひ活用してください。

デザイナーにサイト全体の構造を把握してもらう

最適なデザインやレイアウトとは、ページ数やメニューの数、次に誘導したいページの内容などによって変わってくるため、デザイナーはサイト全体の構成や、ページ同士のつながりを理解しておかなければいけません。
あとから追加したい項目が増えた場合、デザインの進捗によってはやり直しが発生してしまう恐れも。
制作会社によっては五月雨入稿をお断りしていたり、追加料金での対応となったりしますが、主な理由は、このやり直しのリスクのため。
不要なトラブルを防ぐためには、やはりあらかじめサイトマップを作っておくのがよいでしょう。

5.　対応ブラウザ

多くの制作会社で標準対応となっているのは、PCではInternet Explorer（以下、IE）、FireFox、Google Chrome（以下、Chrome）、Safariの各最新版。
スマホではiOS最新版のSafariと、AndroidOSの最新版で主流の「モバイル版Chrome」、それからOSバージョン4.3以下で主流の「Android標準ブラウザ」です。
特別な事情がない限りは、これらを指定しておけば問題ありません。

旧バージョンのブラウザは、シェア縮小の傾向

古いブラウザへの対応はどこまで行うべきなのか？こちらは近年、あまり考慮する必要がなくなってきました。
IEは2016年1月12日以降、最新版以外のブラウザサポートを終了した（2*）ため、今後旧バージョンIEのブラウザシェアは、より減少が進んでいくと見られています。
Androidスマホについても、OSバージョン4.3以前は機種ごとに仕様の異なる「Android標準ブラウザ」が主流でしたが、このブラウザは2015年1月に開発が終了しており、バージョン4.4以降は「モバイル版Chrome」が主流となっています。
2015年末時点では、バージョン4.3以前のシェアは14％程度(3*)とまだ無視できない数値ですが、今後シェア減少に合わせて、対応ブラウザから外されていくと見られています。

各ブラウザがどれくらいの割合で使用されているかについては、ツールで確認することが可能です。
自サイト利用者の割合は、GoogleAnalytics（ https://www.google.com/analytics/ ）から、
日本や世界全体の割合は、StatCounter（ https://gs.statcounter.com/ ）などのサイトで確認できます。

なぜ、デザイナーにあらかじめ対応ブラウザの情報を伝えておく必要があるかというと、古いブラウザに対応する場合、デザイン表現のための言語「CSS3」や、その機能のひとつでレスポンシブWebデザインに必須の「メディアクエリ」など、一部の新しい技術が使用できなくなるためです。
これらの技術を使用しない範囲でのデザインを考えたり、コーディング時に特別対応を行う必要が出てきて、作業時間や費用にも影響してきます。
こういった理由から、古いブラウザへの対応はあまりおすすめしていません。

2*（ https://www.microsoft.com/japan/msbc/Express/ie_support/ ）
3*（ https://gs.statcounter.com/#mobile_browser-JP-monthly-201502-201601 ）

6.　Webサイトに使用する素材を、どこまで準備できるか（ロゴ、画像、原稿など）

画像などの素材はすでに持っているものを使用するか、デザイナーに用意を頼むかによって、当然価格が大きく変わります。
見積りに影響してきますので、あらかじめ確定しておくようにしましょう。
また画像を用意したつもりでいても、そのままでは使用できないケースがあります。（*4）
とくにトラブルの原因となりやすいのは次の2点。見積りの想定違いによるトラブルを避けるためにも、ぜひ一度チェックしておいてください。

4*（ SOKUTAKUでは、代わりの画像を弊社の保有データから補完します。そのまま使用してよい場合は無料となり、使用したくない場合や、補完画像が準備できない場合（特定の商品写真、イメージに近い画像がないなど）は有料で画像を準備させていただきます。 ）

スマホ用の画像には、4倍の大きさが必要！

全画面を覆う、インパクトのある写真を使用したデザインがよく見られますが、これはもちろん、画像の大きさ（幅、高さ）が十分に足りていないと実現できません。
また、近年の技術の進歩に伴って要求される解像度も上がってきており、以前は問題なく使えていた画像でも、昨今の画面サイズと合わなくなってしまっていることがあります。
とくに、現在のスマホはAppleの「Retinaディスプレイ」を始めとした高精細ディスプレイを標準搭載しています。
PC用の「4Kディスプレイ」も登場し始めました。

これらの機種で画像を劣化なく、かつ想定した大きさで表示したい場合には、従来のPC（2K）で見るときの、縦横それぞれ2倍（5*）の大きさの画像を用意する必要があるため、注意が必要です。
例えば、iPhone6で画像を画面いっぱいに表示したい場合、必要となるサイズは1334×750ピクセル（横画面の場合）。
大きさのイメージができてきたでしょうか？

画像データは、縮小は得意なものの、拡大を非常に苦手としています。
そのため、用意する画像は大きいに越したことはありません。
写真撮影を行う場合は、カメラをなるべく高解像度の設定にしてから撮影するとよいでしょう。
用意した画像が使用できるかどうか心配な場合は、あらかじめデザイナーに確認してみてください。

5*（ 厳密にはスマホ機種によって、1.5～3倍と幅がありますが、2016年現在、おおよそ主流の対応方法は2倍となっています。 ）

コンテンツの著作権の確認

古いWebサイトをリニューアルする際に確認しておきたい点がもう1つ。
Webサイトの著作権には、運営者が持っているケースと、制作者が持っているケースの2つが存在します。
もし制作者が著作権を持っていた場合、ロゴや写真、イラストを制作者の許可なしでは引き続き使用できなくなる可能性があります。
これは契約時に制作者の意向によって決められていますので、不明な場合は、一度現在のサイトの契約書を確認しておいてください。

準備編　まとめ

Webサイトのワイヤーを作り始める前に、あらかじめ確定しておくべき要素をまとめました。
つい軽視されがちですが、Webサイト制作は最初の設計が肝心です。
設計段階で手を抜いてしまうと後からの混乱のもとになってしまいますので、ぜひ本腰を入れて取り組んでください。

ワイヤー作成のために決めておく要素

サイトのターゲット・目的

Webサイトに関する、あらゆる要素を決めるための「根拠」として使う。
デザインの雰囲気や方向性を決めるためにも使用される。

対応機種

ターゲットの利用シーン・場所から連想して決める。
複数機種への対応を考えているなら、同時にレスポンシブ対応の有無についても考慮する。

レスポンシブWebデザイン採用の有無

もし採用したい場合は、デザインの段階からレスポンシブに配慮した設計を行う必要があるので、デザイナーにも早い段階で伝えておく。

サイトマップ

ワイヤー作成時に、コンテンツの漏れを防ぐために使用する。
目的にそってコンテンツの内容、順番、優先度を決めていく。
ページ同士のつながりを考慮したデザインを行ってもらうため、デザイナーにも共有すること。

その他、デザイナーへの共有が必要な要素

対応ブラウザ

古いブラウザへの対応を考えている場合、デザイン上の制限が必要になるので、こちらもデザイナーへあらかじめ伝えておくこと。

素材準備の有無

ロゴ、画像、原稿などのコンテンツを、発注者側でどこまで用意できるかを確認・共有する。
とくにスマホ版サイト用の画像サイズは、縦横2倍の大きさが必要になることに注意。

準備編はここまで。
実践編では、いよいよ実際にワイヤーを作成する手順について解説します。

Webサイト発注者のためのワイヤーフレームの作り方－第2回・実践編　はこちら→