ホームページに載せる画像と文章のまとめかた。ワイヤーフレームという配置図を作ってみよう
ホームページに載せる細かな内容が決まらず、途方に暮れてはいませんか？
ホームページのページ数が確定し、それぞれのページにだいたいどんな内容を載せるかを決めたら、次は細かくどこにどんな文章と画像を載せるか考えていかなければいけません。
ここが、特に今回が初めてのホームページという初心者さんにとっては、めちゃくちゃ難しいんです。
そこで「ワイヤーフレーム」という配置図の出番です。ワイヤーフレームを作れば、ホームページの各ページに、どんな画像と文章を載せればいいか、具体的な配置も含めてわかりますよ。
ワイヤーフレームは、次の工程であるデザインのために必ず必要です。業者へ依頼するときも、こういうことをホームページで伝えたいというあなたの要望を業者に正確に理解してもらうために役立ちます。
ワイヤーフレームの作り方を順番に説明していくので、初心者さんもできるはず。ぜひ一緒に作ってみましょう。
ホームページへ掲載する内容を具体化させなければいけないとき
それが、ページ数とサイトマップが決まったあとです。
ページ数とサイトマップの決め方は前に説明しました。まだの人は以下で読んでみてください。
ホームページのサイトマップの作り方。見積もりに必要なページ数が分かる
ページ数とサイトマップが決まると、ホームページの規模がわかり、各ページでだいたいこういう内容をホームページの訪問者へ伝えたいんだということが確定します。
例としてあげれば、企業情報を公開するコーポレートサイトであれば、会社組織の構成や事業の案内、会社の成り立ち・沿革などを各ページへ振り分けて掲載します。
それぞれのページでは、例えば会社組織のページなら、組織図、部署ごとの代表者写真と挨拶など、どこにどの画像と文章を掲載するか決めなければいけません。
ウェブ制作に慣れたプロのウェブデザイナーであれば、いくつもホームページを作ってきた経験から、このページのここにはこんな情報を載せればいいと直感的に思いつきます。
しかし、初めてホームページを作成する初心者にとっては、この「ページに記載する内容をいったどういう方法でまとめていけばいいのか」と頭を抱えることでしょう。
仮に部署ごとの代表者の写真と挨拶を載せる配置を考えてみても、そのパターンは無限にあります。横に並べるか、縦に並べるか、並べ方だけではなく、大きさを変えることでも配置の方法はいくらでもアレンジできます。
配置しだいで、ページ上での意味合いが異なります。また、見やすさも変わるので、配置の方法を誤れば、同じ情報でもわかりづらく誤って意味が伝わるリスクがあります。
いくら立派な挨拶を代表者が語っても、意味が伝わらなければムダですよね。つまり、情報を適切に配置することが、掲載する情報を正しく伝えるために必須なわけです。
ワイヤーフレームは、どの情報をどこに載せるかを表した配置図
ワイヤーフレームは、ホームページのデザイン前。言い換えればデザインの下書きのことで、ページ上に載せる情報の配置を図にしたものです。
ワイヤーフレームを作ると、文章と画像の配置がはっきりするので、ホームページの完成図がイメージしやすくなるため、業者へ作成を依頼したときも、よくお客様とデザイナーの間に置かれ、打ち合わせに使われます。
こうした打ち合わせでも、よくいわれるのは、「ユーザー目線でワイヤーフレームを見てみましょう」ということです。ユーザーとは、実際にホームページを訪れる利用者のことです。
ホームページを訪問する人の目線で、どこにどの文章と画像を載せることが適切かを考えながら、ワイヤーフレームを作り、チェックしなければいけないということです。
ホームページを作るときは、どうしても作成者の独りよがりになりがちです。伝えたいことばかりを伝えたいままに配置し、それを利用する人に気持ちが無視されます。
ホームページのデザインは最終的にワイヤーフレームがもとに作られます。ワイヤーフレームで無視したユーザーの気持ちはデザインが完成しても取り返せません。
その結果として、デザインはユーザーの共感を得られず、もともと立てたホームページを作る目的も達成できず失敗で終わります。
そんな悲しい失敗を避けるために、ワイヤーフレームを作るときはぜひユーザー目線で作りましょう。
ユーザー目線でワイヤーフレームを作成することで、「何をどんな方法で伝えれば自社の魅力が理解されるのか」を考えることもできます。他社との差別化を考えるきっかけにもなるのですね。
ワイヤーフレームの作り方
ではワイヤーフレームの作り方について確認していきましょう。
1. そのページに掲載したい情報を思いつく限りリストアップする
ワイヤーフレームに取り掛かっているということであれば、サイトマップはすでにできていますよね。
実はワイヤーフレームを作る流れはサイトマップを作るときとよく似ています。ホームページ全体の構成を練るか、各ページの構成を練るか、構成する対象の規模が変わるだけで、情報のまとめ方は同じです。
サイトマップが完了すれば、ひとつのページにつき、一つのテーマが決められているはずです。そのテーマに沿って、ユーザーが知りたい情報を思いつく限りリストアップしていきましょう。
2. 仲間同士の情報をグルーピング
もう出し切れないというところまでリストアップが終われば、仲間同士の情報を区分けします。
例えば会社概要のページであれば「社長の顔」と「社長のあいさつ」は、当然同じ仲間になりますし、「創業当時の会社の写真」と「沿革」も相性の良い情報です。
こうして近づけられる情報で仲間わけをしていきます。そしてユーザーが知りたい順番に優先順位を付けます。
3. レイアウトを決める
グルーピングした情報を実際にページ上へ配置します。
紙に鉛筆で、この情報はここに置くということを手書きしていきます。レイアウトのもととして、いくつか参考サイトを用意しておくと、進めやすくなります。
ホームページのレイアウトには定番とよべるものがいくつかあり、PCかスマホ、あるいは、自然検索かリスティング広告か、などターゲットや集客方法によってどのレイアウトが最適か変わります。
レイアウトについては、それだけで1本の記事が書けるので、また機会を改めて特集します。今回はレイアウトが決まっていると仮定して進めていきますね。
決まったレイアウト上に、優先順位の順番で情報を書き入れていきます。重要な情報ほど大きく、ページの早い部分、つまり上の方ですね、へ配置していくいうのが一応のルールです。
もちろん、情報を提供する順番に意図的な狙いがあれば、それを反映させた配置にします。
ワイヤーフレームは一度で完成させられるほど簡単な作業ではありません。ページごとに何パターンかを作成し、比較すれば、パターンごとにわかりにくさや使いづらさを発見できます。それらをうまく修正し、ベストなものが作れればワイヤーフレームは完成です。
手書きのワイヤーフレームは、パワーポイントやCacooのようなソフトを使えば、業者やデザイナーと共有するための美しいワイヤーフレームに清書できます。個人で使うだけなら手書きのままでも十分でしょう。
ワイヤーフレームを作ることのメリット
なんども言ってきたように、「ユーザー目線」に立って、ホームページへの掲載内容を検討できることです。
常にユーザーの気持ちを想像しながらワイヤーフレームを作ります。この場所にこの情報が置いてあっても気づかれないかな、ここにこの情報がないとお客様は困るだろうな、というふうにユーザーに寄り添った画面の構成を考えるわけです。
先に伝えたい事ばかりを考えてしまうと、あれもこれも載せたくなって、載せる順番も大きさも決まりません。ユーザーが先に知りたいこと、知りたい順番を考えると、正しい掲載内容を掲載方法を思いつきます。
ユーザーにとって使いにくいページは、集客や売り上げにつながりません。自己アピール欲が強くて、支離滅裂なメッセージを押し付けてくる人がいますよね。そういうホームページにしてはいけないのです。
ユーザー目線で、掲載する情報を整理することで、改めて自分のビジネスの見え方がわかります。お客様に対して、どんなふうに事業の強みを伝えていけばいいか、また、弱点をいかに補強していけばいいか、アイデアを創出するきっかけにもなります。
こういうビジネス的なメリットもあるので、業者へデザインを依頼する場合も一度はワイヤーフレームを作ってみることをおすすめします。
格安・月額無料のホームページの作り方はこちら
実は私たちも「ビジネスパック」というホームページ作成サービスを提供しています。予算にあまり余裕がない個人事業主さま・中小企業主さまへ大変好評をいただいてます。初期費用90,000円、月額費用は不要です。価格だけでなく品質にもこだわってますので、ぜひ一度ご検討よろしくお願いいたします。
