HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
ホームページを簡単に作れる方法を探してこのページに来た人は、下記リンク先をどうぞ。その方法を特集してます。
さて今回は、ホームページ作成に慣れた人にとっては、当たり前で欠かせない存在「ワイヤーフレーム」について書きました。
「なぜか、ホームページのデザインがうまくまとまらない」という初心者さんの中には、ワイヤーフレームの時点で失敗してるヒトも多いんじゃないかな、と思いまして。
「ワイヤーフレーム、なにそれ？」と、まるっきりワイヤーフレームを書かずに、初っ端からデザインの作り込みに手を出しているヒトもいたり？
あるいは、「ホームページのデザイン、何をどこから始めればいいの？」なんてヒトもいるかもしれません。
そんなヒトビトに本記事がお役に立てば幸いです。
ワイヤーフレームとは？
ワイヤーフレームを一言で表すなら「デザインの下書き」。本番で公開するデザインの素（もと）になるもので、ホームページ作成時は必ずと言ってもいいほど準備します。
「ワイヤー（線）」と「フレーム（骨組み）」を語源とするワイヤーフレームは、画面上の「どこになにを」配置するのかを示しています。ホームページをデザインする過程で、本番用デザインの「設計図」として利用します。
コミュニケーション ツールとしても活躍
ワイヤーフレームは、プロジェクトに関わる人たちとのコミュニケーションにも役立ちます。
クライアントさんとの間に挟んで「こんなデザインになる予定ですよー」と話をすれば、出来上がりのイメージを共有しやすく、新たなアイデアを引き出すきっかけにもなります。プロジェクト開始時にクライアントさんが一方的に抱く完成図と、仕上がるデザインが大きくかけ離れてしまうリスクも減らせます。
他にデザイン担当者がいるプロジェクトの場合は、デザイナーへ指示を与えるためにワイヤーフレームを活用します。
いつもパートナーを組んでる経験豊富なデザイナーなら、ぱぱっと描いた素っ気ないワイヤーフレームでも、こちらの意図を汲み取りデザインにうまく反映してくれるかもしれません。
けれど、親密度も低く、引き出しも少ないデザイナーへ発注する場合は注意が必要です。配置を示すだけじゃなく、こちらの意図も詳細に書き加えたワイヤーフレームを用意してあげないと、期待とはまるで違うデザインになってしまう危険があります。
こんなふうにプロジェクトの規模や関わる人しだいで、用意するワイヤーフレームの質や作成方法は変わります。
たかが「下書き」なのに奥深い。極めるのはなかなか難しそう。
ってことで今回は、特に初心者さん向けのやつを。ホームページを自作する場合のワイヤーフレームについて、作成の流れを順番に追いかけてみます。便利なツールもいくつか紹介します。
ワイヤーフレーム作成の流れ
- 1. 掲載する情報を整理
- 2. レイアウトを決める
- 3. 紙とペンで下書き
- 4. ツールで清書
おおまかな流れはこんな感じ。１つずつ流れを詳しく見ていきます。
1. 掲載する情報を整理
まずは、ワイヤーフレームに配置していく情報をまとめましょう。どんな文章や画像を配置するのか。
ホームページ全体のコンセプトや各ページの主題が明確になっていることが前提条件です。この辺のことは回を改めて詳しく書きたいと思います。一応、いままでに書いた分では下記の記事が役立つかな。
配置する情報を「ピックアップ → グルーピング → ランキング」の順番で進めると、うまくまとめられます。
ピックアップ
最初は、ワイヤーフレームに配置する情報の洗い出し。とにかく思いつく限り「ロゴ」「電話番号」「あの画像」「あの文章」みたいに、情報をリストアップしていきます。
グルーピング
十分に情報をリストアップできたら、仲間同士の情報を見つけて、グループに分けます。同じグループの情報はワイヤーフレーム上で近くに配置するのが基本です。例えば、「電話番号と住所」、「ロゴと会社名」、「この写真とあの文章」みたいに。
実際にワイヤーフレームを書いていく途中では、せっかく仲良くわけたグループをばらさなければいけないこともあるのだけど＞＜ それでもグループに分けておくと、掲載情報を把握しやすくなります。
ランキング
グループごとに、また、同じグループの中でも情報に優先順位を付けていきます。
優先度が高いグループ、あるいは情報ほど、基本的にワイヤーフレーム上では目立つよう配置することになります。優先度が低いグループや情報は本当にそのページに掲載するべきかどうかを再度検討してみましょう。不要な情報が増えるほど、そのページで伝えたい主題にブレが生じます。
「ピックアップ → グルーピング → ランキング」は、紙と鉛筆でも十分進められますが、ポストイットやマインドマップを利用すると捗ります。
マインドマップの利用法は過去に記事にしました。視覚を楽しみながら、ピックアップからランキングまで平行して進められます。
2. レイアウトを決める
掲載情報がまとまれば、レイアウトを選択します。
レイアウトは「画面をどう分割するか」、分割方法のことです。先にまとめた情報の量と質にあわせて適切なレイアウトを選びます。
スマホの普及、PCでも色々なモニタサイズの出現など、サイトを閲覧する側の環境が多様化しています。それと一緒に新たな技術とも結びついて、色々な種類のレイアウトが現れています。オシャレで動きも派手なレイアウトに憧れて「自分も！」となりがちですが、初心者さんは、まず定番のレイアウトをマスターしてからの方が吉。
今回紹介するのは下記4つのレイアウトです。
- マルチカラム
- シングル
- フルスクリーン
- タイル
では、このブログも採用しているド定番のマルチカラムから。
マルチカラム
マルチカラムはカラムが複数あるレイアウトです。
カラムは画面を縦に分割したときの単位。日本語では「列」。縦のカラム（列）に対して、画面を横に分割したときの単位はロー（行）といいます。
マルチカラムは、カラムが複数存在するレイアウトです。カラムが2つ存在する「2カラム」、カラムが3つの場合は「3カラム」と呼びます。2カラムを例に、各エリアの役割を見ていきましょー。
ヘッダー
画面最上部のエリアです。
サイト訪問者の目に最初に飛び込んでくる場所で、そのホームページにとっての「看板」と言えるでしょう。
ヘッダーはサイト内のどのページにも共通して表示されます。どのページにも必要な「会社名やサイト名が分かるロゴ」、「売上に結びつく成約ボタン」、「サイト内の各ページを行き来するナビゲーション」などを配置します。
ワンポイントでも美しくデザインされたロゴがあれば、不思議とページ全体の印象を良くします。
成約は、「コンバージョン」とも言われ、「お問い合わせ」や「商品の購入」など、そのホームページに定めた目標を、訪問者が満たす行動のことです。
お問い合わせページヘリンクするボタンやショッピングカートの決済ボタン、または、店舗へつながる電話番号など「コンバージョンを生み出すための表示物や情報」を、ヘッダーに配置するのは基本です。
複数のページから成り立つWebサイトにとって、ナビゲーションは極めて重要。ヘッダーに位置するメインナビゲーションは、「グローバルナビゲーション」とも呼ばれ、サイト内の主要なページヘ分岐します。
ページ数が多く階層も深いWebサイトの場合は、グローバルナビゲーションでは上階層のページへ分岐させ、下層ページはローカルナビゲーションとしてサイドバーへ預けるなど工夫が必要になります。ローカルナビゲーションとサイドバーについては、下の方で説明します。
コンテンツ
ページの主題を伝えるエリアです。読ませて見せるため、文章、画像、動画、表などを駆使します。
ページを開いたとたん目に入る印象的な画像や動画をアイキャッチと呼びます。訪問者の興味を一瞬で惹きつけることを目的とし、そのページでの滞在時間を長くしたり、成約まで導くきっかけを作ったり、重要な役割を果たします。
サイドバー
ナビゲーションとして利用することが多い一方で、更新情報や広告など「載せたい！ でもコンテンツに掲載するほど優先順位が高くない情報」を掲載できる、利用の幅は広いエリアです。
ページ数が多く階層も深い大規模なホームページでは、ヘッダー部分のグローバルナビゲーションだけでは足りません。サイドバーにローカルナビゲーションを置いて補います。
ローカルナビゲーションは、訪問者に下層ページをうまく見てもらえることを目的にしたナビゲーションです。
訪問者を成約へ結びつける導線を意識して、グローバルナビゲーションとローカルナビゲーションの組み合わせを工夫します。
フッター
画面最下部、足元にあたるエリアです。
実はボク自身、フッターの使いどころを試行錯誤している最中です。まだ「これが正解！」といえるところに至ってないのですが、一般的にはコピーライトを明記したり、サイトマップとして利用したり、が多いですね。
フッターまでスクロールしてくれた訪問者は、そのページを飽きずに最後まで見てくれたということですから、成約へのハードルも十分に下がっているはずです。最後のひと押しとして、成約へうまく押し切る活用法を見つけたいものです。
…と、こんなふうに見てきたように、なんと言っても、マルチカラムは役割ごとに画面を分割できるところが強みです。ページの主題を伝えるのと一緒にナビゲーション機能にも優れたレイアウトですね。
それゆえ、色々なタイプのホームページにマッチします。コーポレートサイト（会社案内を目的とするウェブサイト）やネットショップ、そしてブログも。
しかし、情報過多になりやすい危険もあります。情報をどのエリアに配置するか迷ったあげく、あれもこれもと情報を掲載しすぎて、最も伝えたかったページの主題がブレブレになってしまいます。よくある失敗の一つです。
また、横幅の広さを活かしたレイアウトであるため、画面幅の狭いスマホの閲覧には不向きと言えます。その弱点を克服するための「レスポンシブWebデザイン」を最近よく見かけます。
レスポンシブWebデザインは、PCの大きな画面ではマルチレイアウトで、スマホのような小さな画面では後述するシングルレイアウトに切り替えるデザイン手法です。
シングル
カラムが一つしかないレイアウトです。横に参考ページを並べました。
サイドバーを取っ払った分、画面幅を目一杯コンテンツの領域に使えます。スマホのような小さな画面でもコンテンツに集中してもらいやすいレイアウトです。
画面を縦にスクロールする動きに合わせて、商品やサービスの特徴を語りかけるように訴え、成約へ結びつけるタイプのページ（＝ランディングページ）によく使われます。
難しいのは、ナビゲーションです。縦にページが長くなりがちなので、スクロールが深くなるほどグローバルナビゲーションが遠くなります。ナビゲーションを配置するサイドバーもありません。ページ数が多く階層が深いホームページには不向きと言えます。
参考ページでは、ヘッダーナビゲーションが画面スクロールに追従する方法でナビゲーション機能を補ってます。
画面外からスライドさせるタイプのナビゲーションも特にスマホでよく利用されてます。実はこのブログでも、レスポンシブウェブデザインを採用してます。スマホではシングルレイアウトに切り替わり、スライド式のナビゲーションを使ってます。下記のような方法で実装しました。
フルスクリーン
画面全体を一枚のキャンバスと見立ててコンテンツを表示するレイアウトです。
フルスクリーンといえば、スクロールなしの一枚画面で完結するページが多いですが、参考には、セクションごとに画面を大きく覆う写真が印象的なページをあげました。
- 参考：hinn
フルスクリーンレイアウトにとって画面を覆うイメージ（画像や動画）の質は、何より重要です。だらだらと文字で語るより、ガッツリとイメージを活用し、気の利いたキャッチフレーズや詩的な文章を携え、ページの主題や商品・サービスの訴求ポイントを伝えます。掲載できる情報が少ない分、作り手のセンスが完成度をかなり左右するレイアウトです。
タイル
画面をタイル状に分割したレイアウトです。参考ページを見ると、敷き詰められた各タイルはカラフルで丸みを帯び、「賑やか」「柔らかい」「楽しい」雰囲気が伝わってきますね。
タイル状のレイアウトはパッと見の一覧性が高く、フルスクリーンとは対照的に多くの情報を一度に提供できます。ネットショップの商品一覧やメディアサイトの新着ニュース一覧などに向いてます。クリエイターやフリーランスが自身の作品を並べるギャラリーページなんかにも利用できますね。
一覧性が高い分、読ませるタイプのコンテンツには不向きです。情報量の多さによって、ページ閲覧者の注意も散漫になりやすく、興味付けから成約まで導線をよく練られた物語性のあるページには向いてません。
以上、定番のレイアウトを4種あげてみました。ホームページのコンセプトやターゲットを意識し、掲載する情報の質と量に合わせて適切なレイアウトを選びましょう！
下書きする
それではいざ、ワイヤーフレームを描いていきます。
最初は紙と鉛筆で。紙面を先に決めたレイアウトで分割し、まとめあげた情報を配置していきましょう。途中で新たに掲載したい情報が出てくることもあります。逆にスペースの都合や優先順位によっては削除する情報も。
最初から完璧を目指そうとせずに、書いたり消したりを繰り返しながら完成に近づけていきます。
情報配置のコツ
ページ閲覧者の目線、気持ちの動きを考えると、情報をうまく配置しやすくなります。
閲覧者の目線を意識すると、情報の適切な掲載場所がわかります。訪問者の目線は「Z」を描くと言われています。掲載情報の優先順位も考えながら、目の動きに合わせて、配置場所を考えます。
商品やサービスを売り込み成約させるためのページであれば、訪問者の気持ちの動きも忘れず意識します。情報の掲載位置によってストーリーが生まれ、閲覧者の気持ちも動きます。どんなふうに閲覧者の気持ちを成約へ動かすか、導線を考えて、情報の最適な掲載位置を見つけます。
手書きのワイヤーフレームにバッチリ、プリントアウトして使えるテンプレートを見つけました。ぜひ、使ってみてください。
ツールで清書
散々、ワイヤーフレームを手書きしたあとは、ツールで美しく清書して終わります。
自分しか見ないワイヤーフレームでも、清書でデータにしておくと便利です。似たようなプロジェクトがあれば、テンプレートとして利用できますよ。
清書用のツールは色々と見つけられます。
最近はiPadとapple pencilでワイヤーフレームの下書きから清書まで仕上げることもあります。
iPadでワイヤーフレームを作る方法は、以下の記事で詳しく取り上げているので、また読んでみてください。
ワイヤーフレームの参考
最後に、ワイヤーフレーム作成に役立つギャラリーサイトをいくつかピックアップしてみました。一つのデザイン物と言えるほど完成度が高いものばかり。参考になります。
- Dribbble – Show and tell for designers
- Wireframe Showcase
- I ♥ wireframes – The ultimate source of inspiration and collection of resources for wireframes
もっとウェブデザインが上手になりたい？
ウェブデザイナーは、経験を積むほどに高度な技術を求められます。クライアントさんや上司から、遠慮なしにふっかけられる難題に応えるため、スキルアップのための勉強を止めることはできません。
正直、しんどいなーと感じることもあります。
でも、最近は独学の環境がずいぶんと整ってきているので、勉強の方法に困ることはないですよね。本やネットを調べる以外に、オンラインの動画講座も充実してきています。
Udemyってご存知でしょうか。
WebデザインのためのPhotoshop実践講座 詳しくはこちら
Udemyはスキルごとに講座を受けられるサイトです。ウェブデザインに関連した講座もたくさん見つかりますよ。
試しに今回の記事にちなんでワイヤーフレームの作り方を教えてくれる講座を受けてみました。
本音をいえば、ウェブデザインで実績10年目に入りつつある僕の場合、少し物足りなさも感じたのですが基本を振り返るにはちょうどいい内容で、これからウェブデザインの基本を固めていきたい初心者さんにはなかなか勉強になる講座だと思いました。
- デザインの引き出しが少ない
- photoshopをまだ使いこなせていない
- webデザインの上達方法がわからない
- クライアントとの打ち合わせが苦手
- クライアントへの提案が苦手
こうしたウェブデザインを始めたばかりの頃にありがちな悩みについて、解決法を優しく教えてくれます。
講座はまず「ワイヤーフレームとはなにか？」というところから始まります。今回の記事を読んだ人なら、すんなり頭に入ってくるはずです。僕が書いた今回の記事とは少し違う角度でワイヤーフレームの準備の仕方から清書の方法まで説明してくれます。
動画のいち場面。「ワイヤーフレームとは何か？」
答えられますか？
次はヒアリングの方法です。クライアントさんから、うまく要望を聞き出し、ワイヤフレームの準備を整えましょう。
ヒアリングが苦手な人は、動画で教わる「ヒアリングとは何のためにやるのか？」をしっかり理解しておくこと。上手にヒアリングするためのコツです。
ヒアリング後のワイヤーフレームを作成する手順はこれ。ここも動画で解説があります。
レイアウトの考え方についても動画がありました。ここのところは、今回の僕の記事でも解説しましたね。あわせて見ると、さらに理解が深まるでしょう。
講座はワイヤフレームの作り方だけにとどまらず、Photoshopでデザインするところまで見せてくれます。サンプルとして与えられたデザインをリアルにPhotoshopを使ってデザインしていきます。現場経験が少ない新米のデザイナーさんにとっては、デザインの引き出しを増やすチャンスですね。
本動画で作るサンプルの紹介。まずは小さなパーツから。
パンくずリスト。
ボタン。
バナー。
メインビジュアル。
ナビゲーション。
そして、サイト全体のデザインも作ります。
クリニック系。
美容院。
webメディア。
若干、デザインが古臭いオールドスクールな印象ですが、基本を学ぶには良い素材です。
ウェブデザインの上達へ一番の近道は、何より「手を動かすこと」。動画を見ながら、ワイヤーフレームから一通りサンプルを作りウェブデザイン全体の流れを身につけましょう。
講座は以下から受けられます。
WebデザインのためのPhotoshop実践講座 詳しくはこちら
ついに再開!ウェブさえのHP作成サービスはこちら
シェアしてくれると嬉しいです！（コメントも喜ぶよ）
- あなたにはこんな記事もおすすめ！
- ん？最新情報を見逃さない方法！？
- わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。「お、いいね！」と思われた人は、SNSのアカウントをフォローするか、RSSリーダーへ登録、どれでも都合のいい方法で受け取ってくださいね！ しばらく休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。
