ワイヤーフレームでWebサイト制作を進める時の注意点

  • このエントリーをはてなブックマークに追加

受託案件を何件もやっていると、お客さんによってはパワポで作ったワイヤーフレームを嫌がるお客さんもいらっしゃいます。

作り方にも拠ると思うのですが、四角とか丸で作られたレイアウトだけを見てもいまいちイメージ付かないし、実際にデザインされた際にどうなるのか見ないと判断付かないというのがもっぱらのご意見です。

作る側にとってみると、サイト作っちゃってからあれこれ直されても困っちゃうので念には念を入れて確認して制作を進めていくわけですが、我々業界の人間が当たり前に思っている進め方が、どんなお客さんにも通じるかというとそうではありません。

ワイヤーフレームは非常に重要なもので、作っちゃってから直すというと、頼んだ方も作った方もお互い不幸になってしまいます。
Web制作を何度も担当したことのあるお客さんなどであれば、スムーズかも知れませんが、必ずしもそうではありません。

それでも避けられない工程ではありますので、なんとか納得していただきながら、進めるためのワイヤーフレームのポイントをまとめてみました。

お客さんによって反応などは全然違うと思いますので、ひとつの参考としてご覧いただければと思います。

まず、これはイメージではなく、情報の配置であるということを念を推す。

当たり前のように何の説明もなく、ワイヤーフレームを見せて「サイトの構成です」という風に説明すると、このまま色が付いてデザインされてしまうと感じてしまうようです。
(業界にいると常識的な進め方だとしても、初めてWebサイトを作ろうとか、初めて業者に頼む方に取ってみるとこの当たり前の感覚は違います。)

あくまでも「どこに何を置くという情報配置である」ということと、何故ここにこの情報を配置するのかの説明をまずはさせてもらいたい、ということを伝えたうえで説明しないと勘違いされてしまいます。

情報のサイズ感は盛り込んでおきたい。

各要素(メインビジュアルとかニュースとか)のサイズの割合くらいは盛り込んでおきたいところです。
お客さんがワイヤーフレームを嫌がるのはワイヤーフレーム自体が、設計図として成り立っていない場合だと思います。
(まさにイメージが付かない、という部分です。)

建築の設計図などはきちんと倍率を図って設計図が書かれているので、なんとなくイメージが付いたりしますが、Webサイトのワイヤーフレームで情報配置だけでサイズ感が良く分からないような資料だとイメージが全然付きません。

情報配置の資料であるならば、ある程度の情報量の割合(サイズ感)というのも明確になっている資料が望ましいと思っています。

色やグラデなどの装飾をあまり付けない。

色やグラデなどを付けられると、お客さんにとってはそれがデザインのように見えてしまい、固定概念が生まれてしまいがちです。
ワイヤーフレーム作ってると、パワポのグラデ機能とか使ってなんとなくきれいに雰囲気出したくなりますが、これはあまりやらない方が良いと個人的には思っています。

色やグラデなどの装飾を付けすぎてしまうと、そのイメージでお客さんの頭の中が一杯になってしまい、デザインが逆にイメージと違う、ということになってしまう場合もあります。
(これはデザイナーさんの腕に拠ると思いますが。)

ですので、ワイヤーフレームにあまりゴテゴテと不要な装飾を付けない方が良いでしょう。

きれいに作る。

お客さんに見せる資料だから当たり前なんですけどね。
きれいというのが、装飾をするということではなく、線の細さから見易いような工夫をすることです。

配置だけ分かるように、お世辞にも見易いとは言えない資料を作ると、お客さんにとってもその情報配置が良いのか悪いのか何なのか分からなくなってきます。
「これはまだ構成段階の資料でして。。」なんていう言い訳はお客さんには通用しませんよね!

人に確認させる気持ちになる資料作りを心がけたいものです。

本当に一番良いのは。

ディレクターがワイヤーフレームを作ってまずはお客さんに確認して、というのがWeb制作の通常の流れのようになっていますが、個人的には出来るのであればデザイナーさん、もしくはアートディレクターと呼ばれるような方がワイヤーフレームを作った方が良いのかな?なんて思ったりもします。
(じゃあ、ディレクターって何やるの?っていうのは置いておいて!)

見せたい部分を効果的に見せる、とかそういう部分はデザイナーも意識する部分ですし、レイアウトもデザインの一部なので、デザイナーがやっていても違和感ありません。
(ただ、デザイナーさんはデザインもしなきゃいけないし、とか色々タスク負荷の話もあったりしますので、難しいところではあります。)

でも、制作側の都合で色々と資料を見せられるよりは、お客さんにとってはデザインやイメージを早くみたい!というのが本音で、いかにスムーズにイメージまで進めるかっていうのが制作の課題でもあります。

個人的に思ったことなんで、会社や担当の方によって考え方ややり方はまちまちかと思います。

参考までに。

執筆者:高本

株式会社8bit 取締役の高本です。 社内のWebサービス企画、プログラミングや、売上・請求管理にいたるまで幅広く担当しております。

関連記事

Webサイト制作

オウンドメディアでオンライン/WEBセミナーへの参加者を募集しよう

ご時世柄なかなか人を集めることができない中、WEBセミナー・オンラインセミナーへの需要が高まっています。 もしかしたらまだ一歩を踏み出せていない方もいらっしゃるかもしれませんが、WordPressで構築したオウンドメディアであれば、あまりHTMLの知識があまりない方でも手軽にセミナーの募集ができます。 目次1 WEBセミナー・オンラインセミナーの募集画面の一例1.1 登録画面1.2 一覧画面1.3 詳細画面1.4 セミナー申し込み画面2 どのように作るの? WEBセミナー・オ […]

Webサイト制作

【実績紹介】吉村卓さんのイラスト・WEBデザインを担当させて頂きました。

ご縁がありまして、セクシー男優の吉村卓さんの似顔絵イラストと、WEBサイトのデザインを担当させていただきました。 そこで似顔絵イラストのグッズを制作したとのことで、ご厚意でアクリルキーホルダーと消しゴムを頂きました。ありがとうございます! こちらのキーホルダーは今私のデスクの上に鎮座しており、時々笑顔を誘ってくれます。 トレードマークのブリーフ&仁王立ちポーズが、それらしいとご好評の様子で、「卓ちゃんマン」との愛称で親しまれているそうです。 喜んで頂けて私としても大変嬉しく思 […]

Webサイト制作

WEB初心者ができるSEO対策(検索順位)の話

最近は働き方改革の手助けもあってか、ブログで副収入を得たり、SNSをきっかけに在宅で働いている方も珍しくなくなりましたね。ブログで数字を稼ぐにあたって、大きく関わってくるのがGoogleの検索順位。アクセスが無ければ広告収入もままなりません。今回はそんな検索順位に関する話です(SEOといいます)。 目次1 昨今のSEOの流れ2 「記事の更新」以外でできること3 Googleが「順位ダウンの対象」としているもの4 1.スマートフォンに対応していないサイト5 2.ページの読み込み […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。