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

【実践編】　目次　-　ワイヤーに必要な6つの要素

• 1.　レイアウトと配置
• 2.　サイトの主要構成要素の確認
  • ヘッダー
  • ナビゲーション
  • フッター
  • ボディ
• 3.　具体的なコンテンツの確定
  • TOPページ
  • コンテンツ詳細ページ
  • コンテンツ一覧ページ
• 4.　デザイナーへ伝えておくべきポイント
  • 動的表示コンテンツとなる箇所
  • アニメーションなどの特殊効果が必要な箇所
• 5.　レスポンシブWebデザインのワイヤーを作成するときの注意点
  • すべての変化パターン分のレイアウトが必要
  • 迷ったらこれ！　おすすめブレークポイント（2016年1月版）
  • レスポンシブWebデザインが特に苦手な要素3つ
• 6.　ワイヤーづくりにおける、その他の注意点
  • デザインを考える必要はありません
  • デザイナーへの支給は、手書きではなくデータがおすすめ
• まとめ
• 【付録】　発注にも使える、ワイヤー作成のためのテンプレート詰め合わせ　について

1.　レイアウトと配置

Webページを構成する要素は、ヘッダー・ナビゲーション・フッター・ボディの4つに分けられます。
この4要素の配置で、Webサイト全体のおおまかなレイアウトを決めていきます。

レイアウト・配置の一例

Webサイトのレイアウトには、ヘッダーは上部、ロゴは左上、グローバルナビゲーションは上部または左部...といった、いわゆる「お約束」の配置があります。
これを破ると使いにくいサイトと判断されてしまい、利用者に好まれません。
インパクト重視のキャンペーンサイトでもない限りは、奇をてらったレイアウトは避け、無難な配置にしておくべきでしょう。
Webサイトの「お約束」については、本記事では詳細を省略しますが、優良なWebサイトを集めたギャラリーサイトなどを参考にするとイメージしやすくなります。
本記事でダウンロードできるひな形も、もちろんこれに準じたレイアウトになっていますので、合わせて参考にしてみてください。

ギャラリーサイトの例

イケサイ（ http://www.ikesai.com/ ）

まずは、主要な4要素をざっくりと配置してみました。

2.　サイトの主要構成要素の確認

次は配置した各要素について、詳細を詰めていきます。
架空の建設会社を例に、見ていきましょう。

よくない例として、四角形の大枠のみで大体のレイアウトを配置した段階で、「詳細は後から詰めるので、まずはデザインだけ進めておいて」と支給してしまうケースが時折見受けられます。
しかし、実際のコンテンツ内容が曖昧なままで、デザインを進めるのは非常に危険なこと。
単に「商品一覧」と言っても、割引商品なのか、限定生産品なのかでふさわしいデザインは変わってくるはずです。
デザイナーと認識を共有できないまま、デザインが進んでしまうと大変です。
出来る限り詳細に指定するようにしましょう。

ヘッダー

※　もし文字等が読みにくい場合は、ワイヤーテンプレートをダウンロードしてご覧ください。

サイトの最上部に固定で配置される要素。
一般的にはロゴや連絡先情報、ログイン／会員登録ボタン、検索フォーム、グローバルナビゲーションなどが配置されます。
サイトの目的に応じて選択していきます。

画像だけで表現しにくいことは、補足コメントでどんどん伝えていくようにしましょう。
今回の例では、ロゴ画像はすでに用意したものを使って欲しい、という想定で「1」の補足コメントを入れておきました。

ヘッダーの大きさは控えめに

ヘッダーの大きさ（高さ）はコンテンツの量によって左右されますが、原則として、なるべく大きくならないように注意します。
もっとも利用者の目につきやすいのは、ページを開いた時、最初に画面内に表示される部分（ファーストビュー）です。その大部分を、ヘッダーが占めていては勿体ありません。
ヘッダーよりも、なるべく重要なコンテンツの比重を大きく配置したいものです。
特にスマートフォン（以下、スマホ）は画面サイズが小さいため、この考え方がさらに重要となってきます。

サイトロゴは一番上に、TOPへのリンクを添えて

ロゴはサイトの最上部に、左寄せか中央寄せで配置されます。
クリックした時はTOPページヘ戻る、というのがロゴにおける「お約束」です。
利用者が迷った時の最終手段にもなりうるリンクですので、分かりやすい配置を心がけます。

ナビゲーション

前項で作成したサイトマップを見て、どの項目を優先するかを考えながら、ナビゲーションを作成していきます。
メインのナビゲーションは、サイトの利便性を左右する重要な要素。
特に理由もなくページごとに内容や配置を変えると、利用者が迷ってしまいますのでなるべく避けるようにします。

ページ数が多くなるサイトの場合は、サブナビゲーションを検討してみてもよいでしょう。
カテゴリメニューなど、そのページに合った適切なものを配置していくようにすると親切です。
またスマホサイトの場合はナビゲーションを直接置かず、ボタン開閉式のメニューを採用するケースもよく見られます。
限られた画面サイズの中で、コンテンツ本文の情報をなるべく見やすくするために行われている工夫です。

例では、補足コメント「2」で、ナビゲーション内にサブメニューがあることを指示しています。

ナビゲーションの数はいくつが最適？

サイト上部（横並び）に配置する場合は、PCサイトなら5～6個程度、スマホサイトの場合は4個程度が適切です。
それ以上多くなるとボタンが小さくなりすぎて押しにくくなったり、ゴチャゴチャとした印象を与えて利用者を迷わせる原因になってしまいます。
どの要素が重要なのか優先度を考え、重要な順番に配置していきます。
入りきらないメニューは、階層構造やサブナビゲーションを活用するなどして配置を工夫しましょう。
サイド（縦並び）の場合は比較的自由ですが、メインのナビゲーションとして配置するなら、一画面から大きくはみ出てしまうような数になると、メニューを使うたびにスクロールが必要になってしまい、ストレスに感じてしまいますので避けたほうが無難です。

サイドメニューは右側、左側どちらが適切？

PCサイトで、ナビゲーションが頻繁に活用されることを想定したサイトの場合は、左側に配置されることが多いようです。たとえばECサイトのカテゴリメニューなどが該当するでしょう。
対して、ナビゲーションよりもコンテンツを集中して読んでもらうことが重要なサイトの多くは、記事の閲覧を妨げないよう右側に配置されています。ニュース、コラムなどの読み物系サイトのアーカイブメニューなどが該当します。
最初に利用者の目につくのは、サイトの左側である、という観点から最適化されていった考え方です。

対してスマホサイトの場合は、左右どちらにメニュー開閉ボタンを置くのが適切なのか、2016年現在、まだ決着はついていないようです。
主に指での操作のしやすさが焦点になりますが、機種ごとの画面サイズの差や、操作する手が片手なのか両手なのか、利き手かそうでないか、という個人差などの事情があり、どちらが有効、とは一概に決められないためです。
メインターゲットの手の大きさ、というのが1つの指標になるかもしれませんが、左右いずれも一定数のサイトが存在しているため、あまり深く悩む必要はなさそうです。

フッター

主にフッターに配置されるコンテンツは、サブナビゲーションやサイトマップ、ページトップへのアンカーリンク、コピーライトなど。

ヘッダーと比べると見られる頻度は少なく、重要度も低めなフッターですが、利用者がフッターを閲覧するタイミングというのは、コンテンツから途中で離脱せずに、最後まで読んでくれた後である、ということも意識してみましょう。
連絡先やお問い合わせページヘのリンクを置くのも効果的です。

ボディ

メインコンテンツとなる部分。 掲載する内容を考えるときは、①何をするページなのか、②そのためには何の要素が必要か、の順に考えるとスムーズです。
ページによってその内容は大きく変わってくるため、ボディ部分のコンテンツについては、次項で詳しく解説していきます。

さて、サイトの大枠となる部分がこれで完成しました。
ページによってメニューの内容を変える予定がないのであれば、ここまでの作成分を、以降の工程のひな形として使うのもよいでしょう。

3.　具体的なコンテンツの確定

次はボディ部分である、メインコンテンツを掘り下げていきます。
ここでは、一般的なサイト構造で登場する、下記の3種のページを例として、コンテンツの掘り下げ方を解説していきます。

• TOPページ
• コンテンツ一覧ページ
• コンテンツ詳細ページ

TOPページ

サイトの顔となるTOPページ。
利用者が最初に訪れる、第一印象を決定づけるページであることを意識して、要素を配置していきます。
美しい写真やキャッチコピー、アニメーション効果などの表現ばかりにとらわれず、利用者にもっとも伝えたいことは何か、ということを常に意識しながら設計を行い、デザイナーともしっかり共有を行ってください。

鉄板のTOPページデザイン2種

WebサイトのTOPページを見比べてみると、1枚の写真やイラストを大きく使用したメインビジュアルを中心とするレイアウトと、多数のサムネイルやリンクなどの情報を一覧化して並べるレイアウト、あるいはこの2種を複合したレイアウトが主流になっていることが分かります。
前者は商品、スタッフや店内の雰囲気、魅力を伝えたいコーポレート系のサイトに。
後者は情報の豊富さを印象付けたいECサイトや、ニュースなどの読み物、ユーザ投稿型（CGM）のサイトに向いています。

TOPページ　レイアウトの例

※　以降、補足コメントを省略します。コメント例を見たい場合は、ワイヤーテンプレートをダウンロードしてご覧ください。

コンテンツ一覧ページ

新着情報やブログ、コラムなどの連続性のあるコンテンツを用意する場合は、一覧ページが必要になってきます。
情報を並列に並べる場合、リストの形式にするのが一般的ですが、写真などをタイルのように一面に並べた「グリッドレイアウト」も、ここ数年で浸透してきています。
文字と画像、どちらを主要に見せたいか、といった観点で選んでもよいでしょう。

コンテンツ一覧ページ　レイアウトの例

コンテンツ詳細ページ

主に記事コンテンツの本文などが対象になります。
詳細ページを作り込む上で重要なのは、記事の読みやすさの1点に尽きます。

1行の長さは30～35字

PCサイトでサイドメニューなしのレイアウト（シングルカラム）を採用する場合、ボディ部分の幅が大きくなりますので、1行が長くなりやすく、利用者からすると視線移動させる距離が長くなり、読みにくさなどのストレスにつながってしまいます。
一般に、1行当たりの文字数は横組の場合30～35文字が適切とされています。
文章を配置する場合は、ダミーテキストではなく可読性のある文章、できれば実際の原稿を挿入して、一度自分の目で読んでみることもおすすめします。

コンテンツ詳細ページ　レイアウトの例

4.　デザイナーへ伝えておくべきポイント

動的表示コンテンツとなる箇所

サイト公開後も定期的に内容を更新することを考えている場合、WordPressを始めとしたコンテンツ管理システム（CMS）を使用することになります。
コンテンツの自由度が高いということは、言い換えれば文字数などのコンテンツ量が一定ではなく、レイアウトに影響を及ぼす可能性があるということ。
デザイナーはレイアウトの可変性をふまえたデザインを行う必要があり、そのためには、あらかじめ更新可能な部分を把握しておかなければいけません。
更新したいのはどの部分なのか、ワイヤー内で指定を行っておく必要があります。

アニメーションなどの特殊効果が必要な箇所

サイトにアコーディオンやスライダー、パララックスといった特殊なアニメーション効果などを加えたい場合にも、ワイヤー上に明示しておきましょう。
アニメーションの動作イメージは、コメントだけで指示するのはなかなか難しいものですが、その場合はイメージの近い参考サイトを指示するのが適切です。

アニメーション効果の例

アコーディオン／スライダー／パララックス／ライトボックス

5.　レスポンシブWebデザインのワイヤーを作成するときの注意点

すべての変化パターン分のレイアウトが必要

レスポンシブWebデザインでは、画面サイズによって幾つかのレイアウトパターンが存在しますが、支給する際には全てのパターン分を作成する必要があります。
複数のレイアウトをどこで分けるか、そのしきいになる値のことを「ブレークポイント」といい、画面サイズが○◯未満のときはAパターン、◯◯以上のときはBパターンのレイアウト...といった分け方をします。

迷ったらこれ！　おすすめブレークポイント（2016年1月版）

レイアウトを考えたり、画像を準備したりする際に、あらかじめ幅を決めておきたい場合もあるでしょう。
2016年現在、レスポンシブWebデザインで主流となっているのはこちらです。

スマホ、PCの2パターンの場合：

• 680ピクセル未満／681ピクセル以上

スマホ、タブレット、PCの3パターンの場合：

• 680ピクセル未満／681ピクセル以上～960ピクセル未満／961ピクセル以上

日本でのシェアが大きい、iPhone6とiPadをベースにした数値です。
なお、スマホやタブレットはどんどん新機種が出てきています。
最適なブレークポイントは、そのときの流行によって変わってくることを念頭に置きつつ参考にしてください。
なおSOKUTAKUでは、ブレークポイントのお任せ指定もOK。
対応したい機種の数だけ指定いただければ、基本的に上記のパターンで作成します。

レスポンシブWebデザインが特に苦手な要素3つ

レスポンシブに対応したワイヤーを作成する上で、注意しておきたい点がいくつかあります。

要素の内容差し替え、順番入れ替え

レイアウトは違っても、ページの実体は1つであるということが、レスポンシブWebデザインの大前提。
Webサイトは一般的に、横書きの文書と同じく左上から右下の順番で、要素のブロックを並べるように作られています。
これをレスポンシブ対応したときどうなるかというと、左上の要素から順に並んでいき、右下の要素はどんどん下へずれていきます。
基本的に、レスポンシブに対応したレイアウトはこのルールに沿った順番になります。

一応、このルールを越えて、レイアウトによって要素の表示・非表示を行うことは可能。
これを応用すれば、順番の並び替えも可能になります。
ただし、この方法は画面から見えなくする処理をしているだけで、多くの場合、見えない部分の読み込み自体は行われています。
つまりイレギュラーな対応をするほど、裏で読み込まれる要素も増えてしまい、サイトが重くなる一因になってしまいます。
要素の内容・順番の変更は、なるべく減らすことを心がけてみてください。

表・テーブルレイアウト

PCとスマホの画面サイズの差にとくに影響を受けやすいのが、横に長い表などのコンテンツです。
スマホの画面サイズに収まりきらない場合は、はみ出た部分をスクロール表示にしたり、複数行に分割するなどして対応します。
はみ出た部分は画面から消えてしまいます。当然視認性も落ちますので、重要な情報を表に掲載する場合は注意を払っておいてください。

縦横のサイズに大きな差のある画像

表・テーブルと同じ理由になりますが、スマホのような画面幅の狭い機種では、縦横のサイズの差が大きい画像はあまり表示に向きません。
縦長の画像を使用すると、スマホの画面にとっては高さが大きくなりすぎたり、バナーなどの横長の画像が幅に合わせて縮小され、文字が読めなくなったり。
複数機種間の画面幅の違いによる影響を踏まえて、準備を行いましょう。

6.　ワイヤーづくりにおける、その他の注意点

ワイヤー作成の上で、発注者とデザイナーのお互いが効率よく作業するため、抑えておきたいポイントをまとめました。

デザインを考える必要はありません

ワイヤーを作成する際、色やボタンの形までは考慮しなくてOK。
逆に着色することで、人の目は色の持つイメージについ気を取られてしまいます。
ワイヤーはあくまで設計図。構成の良し悪しを考えることに集中するため、デザイン要素はなるべく取り除いておきましょう。

デザイナーへの支給は、手書きではなくデータがおすすめ

下書きは紙でもかまいませんが、支給するためのワイヤーはデータで作成することを強くおすすめします。その理由は2つ。

• テキストがPC上でコピー＆ペーストができ、テキスト打ち込みが不要になる
• 筆記のクセや、スキャンの具合による人的な読み取りミスを防げる

いずれも、誤字脱字や認識違いなどのヒューマンエラーの原因になってしまいますので、このような要素はなるべく排除しておきたいものです。

とくにテキストの打ち込みの有無は、デザイナーの作業時間を大きく左右します。
デザイナーの作業に余裕ができれば、その分デザインのクオリティアップに時間を割いてもらえたり、単純にかかる工数が減って費用が下がったり、ということに繋がって一石二鳥です。
本記事の最後に、デザイナーへの支給にそのまま使えるワイヤーのひな形データを用意しています。
その他、オンラインでワイヤーを作成できるツールもありますので、ぜひこれらを活用してみてください。

ワイヤー作成ツールの例

Cacoo（ https://cacoo.com/lang/ja/ ）

まとめ

ワイヤーを作る上で大事なポイントを、あらためてまとめてみます。

• Webサイトのターゲットと目的は最初にはっきりさせておく。
  これを元に、メニューの優先度や対応する機種を決めていく。
  デザインの方向性を決めるためにも重要なので、デザイナーにも共有する。
• ロゴ、写真などの画像素材を準備できるかどうか、あらかじめ確認する。
  スマホサイトで画像を使用したい場合、PCで見たときの縦横2倍のサイズが必要になることに注意。
  旧サイトや素材サイトから画像を流用する場合は、著作権についても要確認。
• レスポンシブWebデザインは最初の設計が最重要。
  レスポンシブ対応を行いたい場合はデザイン作成開始前に伝えておかないと、作り直しによるトラブルが発生しやすいので注意。
  ワイヤーは、すべてのレイアウト変化パターン分が必要になる。
• webサイトのレイアウトには「お約束」があり、これを守らないと利用者がストレスに感じてしまう。
  他サイトを参考にしながら配置を行うとよい。
• メニューの数や項目名などは具体的に書き込むこと。
  大枠を配置しただけでは、正しい目的に沿ったデザインを進められないため。
  後からの変更も、納期や費用に影響してしまうおそれがあるためなるべく避ける。
• 動的に表示させたい箇所は、デザイン時に配慮が必要になるため明確に指定しておく。
• デザインイメージや特殊効果の動作イメージを伝えるときは、参考サイトを活用する。
• ワイヤーは手書きではなくデータで支給するのがよい。
  テキストをコピー＆ペースト出来ると作業効率が上がり、質の向上や費用削減などにつながる。

考慮すべきポイントは思ったより多く、大変に思われたかもしれません。
しかしこのような視点は、デザインする側だけでなく、発注する側にとっても非常に重要です。

デザイナーに配慮したワイヤーをつくることは、その後の確認や認識違いによる手戻りといった面倒な作業、トラブルをなくし、デザイナーだけでなく発注者の手間も、大きく軽減することができます。
ぜひ、お互いによい仕事をして、制作会社とよい関係を築いていってくださいね。

【付録】　発注にも使える、ワイヤー作成のためのテンプレート詰め合わせ　について

本記事で登場した、架空の建設会社サイト構築のためのワイヤーフレームセットを、一式でダウンロードいただけます。
使いやすいWebサイトの「お約束」レイアウトを踏まえたデザインになっていますので、ぜひレイアウトの参考としてご覧ください。
PC版・スマホ版（SP版）それぞれをご用意、また2種のデザイン間で、レスポンシブWebデザインとしての連動を想定したデザインになっていますので、組み合わせてご覧いただいてもOK。
さらにテキストなどを編集し、実際の支給用のデータとして使っていただくことも可能です。

ぜひ、これからのワイヤー作成にお役立てください！

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

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

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

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