| 前回はホームページを設計する上での土台となる「サイトマップ」について お送りいたしました。 サイトマップ決定後はいよいよデザイン！！！と思いきや、 その前に「ワイヤーフレーム」を作っていきます。 もちろん、サイトマップ ⇒ デザイン制作 という流れの場合もありますが、 ある程度の規模になると、 サイトマップ ⇒ ワイヤーフレーム ⇒ デザイン制作 の流れとなることが多いのです。 ワイヤーフレームを作る場合と作らない場合では、 デザイン工程での効率にダンゼン差がついてきますので、 ここはデザインを早く見たい気持ちをグッとガマンして、 このワイヤーフレームに取り組みましょう！ ■ワイヤーフレームって？ ここで言う、ホームページの「ワイヤーフレーム」とは、 サイトマップで作ったコンテンツやそれぞれの情報をページ内のどこに、 どのように表現、表示していくか？ということを表したものとなります。 具体的には、 サイトマップ内の「トップページ」には「新着情報」と「制作事例」を どんな位置で、どんな風に見せるか？ これを絵に起こしたものになります。 サイトマップが「ホームページ全体の設計図」とするならば、 ワイヤーフレームは「各ページ毎の間取り図」といったイメージで 捉えていただくと、わかりやすいかと思います。 ■実際のワイヤーフレーム 私の場合は、最初手描きから入り、その後にこのようなワイヤーフレームを起こします。  私は、場合によっては手描きでお出しすることもあります。 余談ですが、ワイヤーフレームを作るツールは、 紙とペンからオンライン上で作れるものまで、実に様々なものがあります。 ■で、ワイヤーフレームがあると何がいいの？ そうですよね。 これを作る「いいこと＝メリット」がないのであればその意味がありません。 ワイヤーフレームを作っておくメリットは結構あるのですが、 今日はその中でも抑えていただきたい、3つのメリットをお伝えいたします。 1）文字情報を絵（レイアウト）に変換。可視化できる。 家に例えると、 家の設計図 ＝ サイトマップ各部屋の間取り図 ＝ ワイヤーフレーム となります。 部屋の間取り図となるワイヤーフレームには、部屋の中の窓やコンセントの位置、 家具のレイアウト等を記し、実際の部屋のイメージをビジュアル化していく、 という役割があります。 サイトマップは情報の見出しを簡潔に記載するものですので、 どんなキャッチコピーがどこに入るのか、画像はどのように配置するのか？ 実際の導線はどんな風になっているのか？ということを表現し切ることができません。 ワイヤーフレームではサイトマップでは表現しきれなかった部分を 「絵（レイアウト）」として落とし込んでいきます。 このことにより、サイトマップを作った時にはイメージしきれなかった部分や、 お客様と制作サイドでの共通認識ができていなかった部分が可視化できるようになります。 2）共通言語として使うことができる ホームページの中身が目の前に可視化されているので、 例えば、はじめてホームページのリニューアルを担当する、 といった担当者様でも比較的スムーズに進行していくことが可能です。 また、視覚的に表現され、仕様も明確にわかるワイヤーフレームは、 打ち合わせ内容を上司の方に報告する際も、共通言語としての使用ができるため、 説明がしやすくなります。 3）効率化 デザインに入る前にここをしっかりやっておくことで、 この後の工程にかかる時間を縮めることができ、 全体の作業の効率化がはかれることが多々あります。 サイトマップから即デザインを起こすと、正直感動は大きいですが、 中規模以上のサイトに関しては、導線をイメージ出来ていないデザインが 出来上がってしまい、入り口はあるのに出口はない状態になってしまったり、 後々それらの検証と修正に時間をとられてしまう、ということも無くはありません。 企業のホームページ担当者様は、日々の業務と兼任されていることが多いため、 時間コストの削減は大きな課題となっているかと思います。 ワイヤーフレームで土台作りをきちっと行い、作業効率を上げることで、 時間コストを下げ、プロジェクト全体の進行をスムーズに、 スピーディーに行うことも可能となります。 ■まとめ 四角と文字が並んでいるワイヤーフレームを見て、 「デザインが入っている方がわかりやすい・・・」 とお思いになるかもしれません。 しかし、デザインが入ることにより、 焦点を当てる部分が「導線」よりも「見た目」になってしまいがち。 だからここはあえて「見た目」の情報を削り、 「導線」にフォーカスのできるワイヤーフレームの方が 効率よく制作を進行できると考えています。 時間コストを出来る限り削り、効率よく成果の出せるホームページ制作を 進めるのに欠かせない、ワイヤーフレーム。 どこかで目にすることがあったら、3つのメリットを思い出しながら見ていただけると、 効率アップのお役に立てるかと思います！ ワイヤーフレームに関すること、ホームページを作る上での効率アップに関することなど、 疑問点やご相談等ございましたら、お気軽にお問い合わせくださいね。 弊社へのお問い合わせはコチラ
こちらもあわせてどうぞ！ |
