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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

きれいに作る。

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

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

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

本当に一番良いのは。

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

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

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

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

参考までに。

執筆者:高本

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

関連記事

プログラミング

iOSアプリでREST APIを使うお話

前回のREST APIをiOSアプリでも使うお話です。 こちらも割と簡単ですが、Kotlin=Javaに比べると型に関してはシビアです。 目次1 インストール1.1 CocoaPodsでインストールする。2 使い方2.1 GETの場合2.2 POSTの場合 インストール CocoaPodsでインストールする。 ライブラリが対応していれば簡単ですね。 その後、 これでインストール完了です。 使い方 こちらもAndroidの時と同じような感じでできますが、今回はModelでデータ […]

プログラミング

AndroidでREST APIを取り扱うお話

前回のお話でREST APIを気軽に確認する内容を書きましたが、今回は実際にスマホアプリ内でREST APIのやりとりを行う方法をまとめます。 以前はOkHttpというライブラリを使うことが多く、現在もそれが主流になりますが、今回はkotlinで使えるRetrofitと呼ばれるライブラリを使っていきましょう 目次1 インストール2 使い方2.1 GETの場合2.2 POSTの場合2.3 PUT通信の場合3 まとめ インストール 通信するので当然アプリ側にインターネット接続の設 […]

スマホアプリ

無音カメラが国内ではリリースできなかったお話

みなさん、無音カメラ(Silent Camera)で撮影してますか? いきなりグレーゾーンの発言ぽくなりましたが、App StoreもGoogle Playにも無音カメラは割とたくさんリリースされています。 そこで弊社でもその波(!?)に乗り、無音カメラのリリースを検討しました。 目次1 実際どうなった?2 リジェクト理由1 スパイウェアの扱いになった3 ちなみにGoogle Playでは?4 終わりに5 参考 実際どうなった? 結果から言うと、リリースはできませんでした。 […]

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

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

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

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