ワイヤーフレームについて
今回はwebデザインに入る前に必要なワイヤーフレームについて書きます。
ワイヤーフレームとは？
簡単に言うと下書きの役割を果たすものです。
本番で公開するデザインの素になるもので、
ホームページの作成時はほぼ必ずといっていいほど準備するものです。
ワイヤー（線）とフレーム（骨組み）を語源とするワイヤーフレームは、
画面上の「どこに何を」を配置するかを示しています。
下書き、設計図と言い換える事が出来ます。
つまり、ワイヤーフレームは、プロジェクトに関わる人とのコミュニケーションツールとしても役立ち、クライアントさんとの間に新たなデザインを引き出すきっかけになります。
配置の場所に加えて、そこにどんな意図があるのかも書き加えると丁寧になります。
ワイヤーフレーム作成の流れ
１．掲載情報の整理
必要な情報を選定し、大まかな文字数と目立たせる部分を決定していきます。
２．レイアウトの決定
可変式のパズルのようなイメージで、必要なものを必要な所に設置します。
３．紙とペンで下書き
２と同じ段階で進めていくのが殆どです。細かく書くより、ざっくり書きましょう。
４．ツールで清書
と、おまかな流れはこういった流れです。
１．掲載情報の整理
まずは、ワイヤーフレームに配置していく情報を纏めていきます。
ブレスト→ピックアップ→グルーピング→ランキング
の順で進めると、纏まりやすいです。
簡単に言うと、片っ端から意見を出していき、
その中から大事な情報を洗い出す。
その上で情報を同じグループごとに分けて、
重要度の高い順に並べるという流れです。
同じグループは同じ場所に表示する、並べて表示するなどすると見やすいですね。
優先度が高いグループ、あるいは情報ほど、基本的にワイヤーフレーム上では目立つように配置します。
不要な情報が増えるほど、そのページで伝えたい主題がぶれることになります。
２．レイアウトを決める
纏まった情報に沿って、レイアウトを選択していきます。
レイアウトとは、「画面をどう分割するか？」といった分割方法のことです。
先にまとめた情報の量と質に合わせてレイアウトを選びます。
スマホ普及、PCでも色々なモニタサイズの出現など、サイトを閲覧する側の環境が多様化したので、一緒に新たな技術と結びついて、いろいろな種類のレイアウトが出てきています。
おしゃれで動きも派手なレイアウトに憧れて「自分も！」となりがちですが、初心者さんは、まず定番のレイアウトをマスターしていきましょう。
- マルチカラム
- シングル
- フルスクリーン
- タイル
この中でマルチカラムはカラムが複数あるレイアウトです。
カラムは画面を縦に分割した時の単位で、日本語では「列」と言えます。
縦のカラム（列）に対して、画面を横分割した単位はロー（行）と言います。
マルチカラムは。カラムが複数存在するレイアウトです。
カラムが2つ存在する「2カラム」、カラムが3つの場合は「3カラム」と呼びます。
その中での、各エリアの簡単な役割を見ていきます。
ヘッダー
ヘッダーは画面最上部のエリアで、
サイト訪問者の看板になっています。
ヘッダーはサイト訪問者の目に最初に飛び込んでくる場所で、
サイト内のどのページも共通して表示されます。
どのページにも必要な「会社名やサイト名がわかるロゴ」、「売り上げに結び付く成約ボタン」、「サイト内の各ページを行き来するナビゲーション」などを配置します。
ワンポイントでも美しくデザインされたロゴがあれば、ページ全体の印象を良くするように働きます。
お問合せや商品購入など、そのホームページに定めた目標を、訪問者が満たす行動のことを、コンバージョンと言い、お問合せへのリンクや、ショッピングカードの決済ボタン、店舗へつながる電話番号などをヘッダーに配置するのは基本です。
複数のページから成り立つwebサイトにとって、ナビゲーションはとても大切です。
ヘッダーに位置するメインナビゲーションは、「グローバルナビゲーション」とも呼ばれ、サイト内の主要なページへ分岐します。
ページ数が多く階層も深いWebサイトの場合は、グローバルナビゲーションでは上階層のページへ分岐させ、下層ページへはローカルナビゲーションとしてサイドバーへ預けるなどの工夫が必要になります。
コンテンツ
ページの主題を伝えるエリアで、読ませて見せるため、
文章、画像、動画、表などを駆使します。
ページを開いた瞬間に目に入る印象的な画像や動画を「アイキャッチ」と呼びます。
訪問者の興味を一瞬でひきつけることを目的とし、そのページでの滞在時間を長くしたり、成約まで導くきっかけを作ったり、重要な役割を果たします。
サイドバー
ナビゲーションとして利用することが多い一方で、更新情報や広告などの、掲載したいけれどもそれほど優先順位が高くない情報を掲載できるの、利用幅が広いエリアです。
ページ数が多く階層が深い大規模なページはヘッダーのグローバルナビゲーションだけでは足りないので、サイドバーにローカルナビゲーションを置いて補います。
ローカルナビゲーションは訪問者に下層ページをうまく見えてもらえることを目的にしたナビゲーションです。
訪問者が成約に結びつく導線を意識して、グローバルナビゲーションとローカルナビゲーションの組み合わせを工夫します。
フッター
画面最下部、足元のエリア。
ページの主題を伝えるのと同時に、ナビゲーション機能も持つことが出来ます。
しかし、場合によっては情報過多になる危険があります。
情報をどのエリアに配置するか迷ったあげく、あれもこれもと情報を掲載しすぎるのは良くないので、主題をしっかり見据えましょう。
シングル
カラムが一つしかないレイアウトで、サイドバーを取っ払った分、
画面幅を目いっぱいコンテンツに集中してもらいやすいレイアウトです。
このように画面全体に表示される画像などのコンテンツで構成されています。
サイドバーがない分、画面幅を目いっぱいコンテンツの領域に使えます。
画面を縦にスクロールする動きに合わせて、商品やサービスの特徴を語り掛けるように訴え、成約へ結びつけるタイプのランディングページによく使われるものです。
ですが、ナビゲーションが難しく、縦に長くなりがちなためにグローバルナビゲーションが遠くなります。ナビゲーションを配置するサイドバーもないため、ページ数が多く階層が深いホームページには不向きです。
ヘッダーナビゲーションが画面スクロールに追従する方法でナビゲーション機能を補うなど、画面外からスライドさせるタイプのナビゲーションも特にスマホでよく利用されています。
フルスクリーン
画面全体を一枚のキャンパスと見立ててコンテンツを表示するレイアウトで、
フルスクリーンといえば、スクロールなしの一枚画面で完結するページが多いですが、
セクションごとに画面を大きく覆う写真が印象的です。
フルスクリーンレイアウトにとって画面を覆うイメージの質は、何より重要です。
だらだらと文字で伝えるより、がっつりとイメージを活用し、気の利いたキャッチフレーズや詩的な文章を携え、ページの主題や商品・サービスの訴求ポイントを伝えましょう。
掲載情報量が少ない分、作り手のセンスが非常に重要になります。
タイル
画面をタイル状に分割したレイアウトです。
敷き詰めるタイルをカラフルにして丸みを与えると、
「賑やか」「やわらかい」「楽しい」雰囲気を伝えやすいものです。
タイル状のレイアウトは一覧性が非常に高く、
フルスクリーンとは対照的に多くの情報を一度に提供できます。
ネットショップの商品一覧やメディアサイトの新着ニュース一覧などに向いています。
ポートフォリオに向いていますが、一覧性が高い分、読ませるタイプのコンテンツは不向きで、情報量の多さによってページ閲覧者の注意も散漫になりやすく、興味付から成約までの導線を良く練られた物語性のあるページには向いてません。
下書き
ワイヤーフレームを書いていくには、
最初は紙面で書いてもいいかと思います。
紙面を先に決めたレイアウトで分割し、まとめあげた情報を配置して、途中で変更が入ることもあります。
逆にスペースの都合や優先順位によっては削除する情報も。
最初から完璧を目指そうとせずに、
書いたり消したりを繰り返しながら完成に近づけていきます。
情報配置のコツ
ページ閲覧者の目線、ユーザー心理を考慮して配置しましょう。
閲覧者の目線を意識すると、情報の適切な掲載場所がわかります。
訪問者の目線は「Z」を基本的には描くので、その優先順位も考えながら配置していきましょう。
商品やサービスの売り込み成約させるページであれば、ユーザー心理を必ず意識しましょう。情報の掲載位置にならってストーリー作り、導線を考えていきます。
ツールで清書
最後はワイヤーフレームを手書きしたあとは、ツールで作るのもありです。
pptやexcelで作ると、多少面倒ではありますが、互換性があるため、
他社に送った際にも基本的には先方が編集することが可能となります。
ですが、下記のような便利ツールは互換性はありませんが、
かなり便利で、非常に効率的に仕事を進められます。
新発見！Webデザインの下書きに。落書き感覚でワイヤーフレームを描ける『skitch』
まとめると、必要な情報を全てまとめ上げて、
キーワードとタイトルをつけ、それに優先順位を付けます。
その後に、全体のコンテンツをグループ化した際のコンテンツ数とボリュームを考え、
優先順位とボリュームを考慮して、最も効果的なレイアウトを決めて行きましょう。
そのレイアウトの形式を崩さずに、特徴を活かした形で、
はめ込んでいきましょう。
そうやって作ったものに、必要な情報を周囲に記載していき、
その部分にどんどん加筆していきながら、他の部分を記載しましょう。
