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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

きれいに作る。

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

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

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

本当に一番良いのは。

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

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

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

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

参考までに。

執筆者:高本

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

関連記事

プログラミング

【phpdotenv】PHPで環境変数を取り扱うお話

PHPでサーバーの環境ごとに設定ファイルを用意する場合、config.phpなどのファイルにデータベースの接続情報やAPIのキーなどをdefineで登録すると思います。 これは昔からある一般的なやり方ですが、例えば「ローカル環境やテスト環境と本番環境で情報を出し分けたい」「GitHubやSubversionなどに接続情報を管理されたくない」ということがあるかと思います。 Linuxの場合は「.env」でユーザーごとの情報をあらかじめ設定することが可能ですが、PHPだとデフォル […]

Webサービス

【CAPTCHA系】reCAPTCHAの代替サービスを紹介するお話

みなさん、reCAPTCHAを使ってますか? CAPTCHAと呼ばれる機能は問い合わせフォームやログインフォームなどいわゆるbot系対策として有効で、その中でもreCAPTCHAは無料かつ簡単に導入できるたため、様々な場所で使われてます。 目次1 2024年4月から実質有料化?2 他にないのだろうか?3 アカウントを作る4 PHPでの実装5 最後に 2024年4月から実質有料化? しかし、2024年4月から今まで100万リクエストまで無料だったのが、1アカウント合計1万リクエ […]

Webサイト制作

Webアクセシビリティの基本を学ぼう!

近年Webサイト制作時に求められる『Webアクセシビリティ』。 正直なんだかよくわからない、ややこしそうだなあと思う方も多いと思います。 自分も勉強中ではありますが、今回は対応しやすそうな内容をなるべくわかりやすくまとめてみました。 一緒にWebアクセシビリティについて学んでいきましょう。 目次1 そもそもWebアクセシビリティってなに?2 基本的な対応内容2.1 色のコントラストをはっきりさせよう2.2 文字サイズを変更できるようにしよう2.3 できるだけテキストベースを心 […]

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

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

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

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