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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

きれいに作る。

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

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

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

本当に一番良いのは。

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

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

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

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

参考までに。

執筆者:高本

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

関連記事

プログラミング

SharePointではできないこと 4選

「これってSharePointでできないの!?」なんていう瞬間、開発やカスタマイズの現場では意外と多くあります。SharePointはとても柔軟なプラットフォームですが、実は“万能ツール”ではありません。「コードを書けば何とかなる」と思って構築を進めると、モダンページの仕様や制限に阻まれて苦い思いをすることもしばしば。今回は、実際のプロジェクトや運用の中で見えてきた「SharePointではできないこと」をまとめて紹介します。 目次1 1.CSSとJSが直接使えない1.1 ク […]

Webサイト制作

WordPress納品後にクライアントが安心して運用できる仕組みづくりをしよう

ホームページ制作において、更新機能を手軽に導入できるのがWordPressです。 専門知識がなくても記事の投稿やページ編集を行いやすい一方で、クライアントが自分で運用するには、が欠かせません。 今回は、そのための仕組みづくりについてご紹介します。 制作側の方はもちろん、クライアント側でホームページ運用を担当される方も、制作時のご相談などにぜひ参考にしてみてください。 目次1 管理画面のロゴを企業ロゴに変更する2 管理画面のURLを変更する・認証などを付けてセキュリティ面を強化 […]

Webデザイン

アプリのロゴアニメーションをAfter Effectsで作成→Lottieに変換【iOS/Android対応】

こちらは、当社でリリースしたアプリ「ピンピタ」で使用しているロゴアニメーションです。 スプラッシュ画面でロゴが動くと、ぐっとアプリらしい印象になりますし、作ってみたいですよね。 今回は、After Effects(以降AE)でロゴアニメーションを作成し、アプリに組み込むまでをご紹介します。 AEと聞くと難しい印象がありますが、PremiereやFlashなどを触った経験がある方なら、すぐに慣れます。 もう一度再生 目次1 作業フロー1.1 注意点:グラデーションが使用不可2 […]

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

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

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

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